:root {
  --bg: #f4fbf7;
  --surface: #ffffff;
  --surface-2: #edf8f2;
  --text: #10221b;
  --muted: #617169;
  --line: #d8e9e0;
  --accent: #0e9f6e;
  --accent-soft: #ddf6e9;
  --success: #0b875d;
  --warning: #8a5a00;
  --danger: #a12828;
  --radius: 18px;
  --shadow: 0 14px 38px rgba(20,92,65,.09);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244,251,247,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(216,233,224,.9);
}
.nav { height: 70px; display: flex; align-items: center; gap: 28px; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: -.03em; display:flex; align-items:center; gap:10px; }
.brand-logo { width:30px; height:30px; border-radius:9px; object-fit:cover; flex:none; box-shadow:0 2px 8px rgba(14,159,110,.12); }
.nav-links { display:flex; align-items:center; gap:22px; margin-left:auto; color:var(--muted); font-size:14px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--text); }
.nav-actions { display:flex; gap:10px; }
.btn { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:12px; padding:10px 15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { background:#0b875d; border-color:#0b875d; }
.btn.ghost { background:transparent; border-color:transparent; }
.btn.small { min-height:36px; padding:7px 11px; font-size:13px; }

.hero { padding: 92px 0 64px; }
.hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items:center; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; padding:7px 10px; border:1px solid #ccebdd; background:#f8fffb; border-radius:999px; color:#39705c; font-size:13px; }
h1 { font-size: clamp(42px, 7vw, 78px); line-height:.98; letter-spacing:-.055em; margin:18px 0 20px; max-width: 850px; }
.hero p { font-size:18px; color:var(--muted); max-width:620px; margin:0 0 28px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.trust-row { margin-top:22px; display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:13px; }
.hero-card { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:14px; box-shadow:var(--shadow); }
.hero-preview { aspect-ratio: 4/3; border-radius:20px; overflow:hidden; background:
  radial-gradient(circle at 72% 35%, rgba(255,194,153,.9), transparent 25%),
  linear-gradient(130deg,#6f7c8c 0%,#bb9877 47%,#4a5a48 100%); position:relative; }
.hero-preview::after { content:"Before / After"; position:absolute; right:14px; top:14px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.7); padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.preview-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:10px; }
.preview-chip { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px; font-size:12px; color:var(--muted); }
.preview-chip b { display:block; color:var(--text); font-size:13px; }

.section { padding:74px 0; }
.section-heading { max-width:760px; margin-bottom:30px; }
.section-heading h2 { font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.04em; margin:0 0 12px; }
.section-heading p { margin:0; color:var(--muted); font-size:17px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card h3 { margin:12px 0 7px; font-size:18px; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); font-size:14px; }
.icon-box { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--accent-soft); border:1px solid #c8ead9; color:#08704b; font-weight:800; }
.metric-band { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:28px; }
.metric { background:var(--surface); padding:22px; }
.metric b { display:block; font-size:22px; letter-spacing:-.03em; }
.metric span { color:var(--muted); font-size:13px; }

.split-section { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px; }
.panel h3 { margin:0 0 8px; font-size:22px; }
.panel p { color:var(--muted); margin:0 0 18px; }
.check-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.check-list li { display:flex; gap:10px; align-items:flex-start; color:#333a40; font-size:14px; }
.check-list li::before { content:"✓"; font-weight:900; color:var(--success); }

/* Editor */
.editor-shell { min-height:calc(100vh - 70px); display:grid; grid-template-columns: 280px minmax(0,1fr) 320px; }
.editor-sidebar { background:var(--surface); border-right:1px solid var(--line); padding:18px; overflow:auto; }
.editor-sidebar.right { border-right:0; border-left:1px solid var(--line); }
.editor-main { min-width:0; display:flex; flex-direction:column; background:#eef1f3; }
.editor-toolbar { min-height:58px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; }
.tool-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tool-btn { border:1px solid var(--line); background:var(--surface); border-radius:10px; min-height:38px; padding:7px 11px; font-weight:700; font-size:13px; }
.tool-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.canvas-stage { flex:1; min-height:520px; display:grid; place-items:center; padding:28px; position:relative; overflow:auto; }
.canvas-wrap { position:relative; max-width:100%; box-shadow:0 20px 60px rgba(15,23,42,.16); background:#dfe4e8; border-radius:4px; overflow:hidden; }
#grade-canvas { display:block; max-width:min(100%, 1200px); max-height:calc(100vh - 190px); }
.empty-editor { width:min(560px,92%); background:var(--surface); border:1px dashed #cfd5db; border-radius:22px; padding:42px 28px; text-align:center; }
.empty-editor h2 { margin:0 0 8px; font-size:26px; letter-spacing:-.03em; }
.empty-editor p { margin:0 0 20px; color:var(--muted); }
.dropzone { border:1px dashed #bdc5ce; background:#fafbfc; border-radius:16px; padding:24px; transition:.2s ease; }
.dropzone.drag { background:#f1f4f7; border-color:#7b8794; }
.sidebar-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 14px; }
.sidebar-title h2 { font-size:14px; margin:0; letter-spacing:.01em; }
.control-section { border-top:1px solid var(--line); padding:16px 0; }
.control-section:first-of-type { border-top:0; padding-top:0; }
.control-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.control-head h3 { font-size:13px; margin:0; }
.control-row { margin:12px 0; }
.control-label { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); margin-bottom:7px; }
.control-label output { color:var(--text); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
input[type="range"] { width:100%; accent-color:var(--accent); }

/* Touch sliders: vertical finger movement belongs to page/panel scrolling.
   Horizontal drags still adjust the slider. This prevents accidental grade
   changes when a user starts a scroll gesture on top of a range track. */
@media (pointer: coarse) {
  input[type="range"] {
    touch-action: pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
}
.preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.preset { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:8px; text-align:left; }
.preset-thumb { aspect-ratio:1.35; border-radius:8px; background:linear-gradient(135deg,#a8b5c2,#d6b28c 55%,#4f6652); margin-bottom:7px; }
.preset[data-preset="cinema"] .preset-thumb { filter: contrast(1.18) saturate(.8) sepia(.15); }
.preset[data-preset="warm"] .preset-thumb { filter: sepia(.22) saturate(1.08) brightness(1.03); }
.preset[data-preset="clean"] .preset-thumb { filter: saturate(.85) brightness(1.08) contrast(.95); }
.preset[data-preset="fade"] .preset-thumb { filter: contrast(.82) saturate(.7) brightness(1.06); }
.preset b { display:block; font-size:12px; }
.preset span { color:var(--muted); font-size:11px; }
.histogram { width:100%; height:110px; background:#f6f7f9; border:1px solid var(--line); border-radius:12px; }
.status-line { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.export-grid { display:grid; gap:10px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field select, .field input[type="number"] { width:100%; min-height:40px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.quality-note { font-size:12px; color:var(--muted); margin:0; }

/* Presets page */
.page-hero { padding:70px 0 36px; }
.page-hero h1 { font-size:clamp(40px,6vw,66px); margin-bottom:14px; }
.page-hero p { color:var(--muted); max-width:700px; font-size:17px; }
.library-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.look-card { overflow:hidden; padding:0; }
.look-preview { aspect-ratio:4/3; background:linear-gradient(135deg,#8798a4,#d1a883 55%,#4f5f49); }
.look-preview.cinema { filter:contrast(1.17) saturate(.8) sepia(.12); }
.look-preview.portrait { filter:saturate(.9) brightness(1.04) sepia(.08); }
.look-preview.moody { filter:contrast(1.2) brightness(.9) saturate(.7); }
.look-preview.clean { filter:brightness(1.08) saturate(.82); }
.look-preview.sunset { filter:sepia(.2) saturate(1.15) contrast(1.05); }
.look-preview.film { filter:sepia(.12) contrast(.9) saturate(.82); }
.look-preview.night { filter:hue-rotate(8deg) saturate(.65) brightness(.84) contrast(1.15); }
.look-preview.editorial { filter:saturate(.72) contrast(1.08) brightness(1.04); }
.look-meta { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.look-meta b { font-size:14px; }
.look-meta span { font-size:12px; color:var(--muted); }

.article { max-width:820px; margin:0 auto; padding:58px 0 90px; }
.article h1 { font-size:48px; margin-bottom:14px; }
.article h2 { margin-top:36px; font-size:26px; }
.article p, .article li { color:#4b535b; }
.article code { background:#eef1f4; padding:2px 5px; border-radius:5px; }

.footer { padding:42px 0; border-top:1px solid var(--line); background:var(--surface); margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; }
.footer h4 { margin:0 0 10px; font-size:13px; }
.footer a { display:block; color:var(--muted); font-size:13px; margin:8px 0; }
.footer p { color:var(--muted); font-size:13px; max-width:320px; }
.footer-bottom { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; display:flex; justify-content:space-between; gap:18px; }

.mobile-menu { display:none; }
@media (max-width: 980px) {
  .hero-grid, .split-section { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .library-grid { grid-template-columns:repeat(3,1fr); }
  .metric-band { grid-template-columns:1fr 1fr; }
  .editor-shell { grid-template-columns:1fr; }
  .editor-sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .editor-sidebar.left { display:none; }
  .editor-sidebar.right { border-left:0; }
  .canvas-stage { min-height:480px; }
  .nav-links { display:none; }
  .mobile-menu { display:inline-flex; margin-left:auto; }
}
@media (max-width: 680px) {
  .container { width:min(100% - 22px, var(--container)); }
  .hero { padding-top:58px; }
  .hero-grid { gap:28px; }
  .feature-grid, .library-grid { grid-template-columns:1fr; }
  .metric-band { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child { grid-column:1/-1; }
  .editor-toolbar { align-items:flex-start; }
  .tool-group .tool-btn.hide-mobile { display:none; }
  .canvas-stage { padding:12px; min-height:390px; }
  #grade-canvas { max-height:55vh; }
  .editor-sidebar.right { padding-bottom:26px; }
  .page-hero { padding-top:48px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
:focus-visible { outline:3px solid rgba(14,159,110,.28); outline-offset:2px; }

/* MintGrade Pro editor */
.editor-page { overflow:hidden; background:#eef1f4; }
.editor-header { position:relative; z-index:80; }
.editor-nav { height:58px; padding:0 14px; gap:18px; }
.editor-nav .brand { flex:none; }
.editor-header-actions { margin-left:auto; display:flex; align-items:center; gap:7px; }
.pro-editor-shell { height:calc(100vh - 58px); display:grid; grid-template-columns:260px minmax(420px,1fr) 340px; overflow:hidden; }
.pro-sidebar { min-width:0; overflow:auto; overscroll-behavior:contain; background:#fff; padding:15px; scrollbar-width:thin; }
.pro-sidebar-left { border-right:1px solid var(--line); }
.pro-sidebar-right { border-left:1px solid var(--line); padding:0 15px 18px; }
.pro-editor-main { min-width:0; min-height:0; display:flex; flex-direction:column; background:#e9edf0; container-type:inline-size; container-name:editorMain; }
.pro-toolbar { min-height:50px; display:grid; grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr); align-items:center; gap:10px; padding:6px 11px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); z-index:4; }
.toolbar-cluster { display:flex; gap:6px; align-items:center; min-width:0; }
.toolbar-cluster:last-child { justify-content:flex-end; }
.center-tools { justify-content:center; }
.toolbar-view-controls { justify-content:flex-end; flex-wrap:nowrap; white-space:nowrap; gap:8px; }
.toolbar-view-controls .compare-mode-btn { flex:0 0 auto; margin-right:1px; }
.zoom-controls { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.toolbar-view-controls .view-divider { margin-inline:1px; flex:0 0 1px; }
.toolbar-view-controls .zoom-readout,
.toolbar-view-controls .icon-button { flex:0 0 auto; }
.filename { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:750; }
.image-meta { color:var(--muted); font-size:11px; white-space:nowrap; }
.toolbar-divider { height:22px; width:1px; background:var(--line); margin:0 2px; }
.icon-button, .zoom-readout { min-width:33px; height:33px; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:9px; font-weight:750; display:inline-grid; place-items:center; }
.icon-button:hover, .zoom-readout:hover, .tool-btn:hover { background:#f4f6f8; }
.icon-button:disabled { opacity:.35; cursor:not-allowed; }
.zoom-readout { min-width:55px; font-size:11px; }
.pro-canvas-stage { position:relative; flex:1; min-height:0; overflow:auto; display:grid; place-items:center; padding:32px; background-color:#e9edf0; background-image:linear-gradient(45deg,rgba(0,0,0,.018) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.018) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.018) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.018) 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.pro-empty-editor { box-shadow:0 18px 55px rgba(15,23,42,.05); }
.pro-empty-editor h1 { font-size:29px; line-height:1.08; letter-spacing:-.04em; margin:10px 0 8px; }
.upload-icon { width:52px; height:52px; border-radius:16px; background:#eef1f4; border:1px solid var(--line); display:grid; place-items:center; font-size:25px; margin:0 auto 4px; }
.pro-dropzone { padding:20px; }
.pro-dropzone .quality-note { margin-top:9px; }
.privacy-strip { display:flex; justify-content:center; flex-wrap:wrap; gap:7px 13px; margin-top:16px; color:var(--muted); font-size:11px; }
.privacy-strip span::before { content:'✓'; color:var(--success); font-weight:900; margin-right:5px; }
.image-workspace { position:relative; display:grid; place-items:center; width:max-content; max-width:100%; }
.pro-canvas-wrap { position:relative; display:inline-block; line-height:0; box-shadow:0 24px 70px rgba(17,24,39,.19); background:#d6dbe0; overflow:hidden; border-radius:4px; transform-origin:center; }
.pro-canvas-wrap #original-preview, .pro-canvas-wrap #grade-canvas { display:block; width:auto; height:auto; max-width:min(100%, 1280px); max-height:calc(100vh - 170px); }
.pro-canvas-wrap #original-preview { position:relative; z-index:1; }
.pro-canvas-wrap #grade-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.compare-line {
  position:absolute; top:0; bottom:0; width:48px; margin-left:-24px; z-index:20;
  cursor:ew-resize; touch-action:none; user-select:none; -webkit-user-select:none;
  pointer-events:auto; will-change:left; outline:0;
}
.compare-line::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:#fff; box-shadow:0 0 0 1px rgba(15,23,42,.18),0 0 8px rgba(15,23,42,.22); pointer-events:none;
}
.compare-line:hover::before, .compare-line:focus-visible::before, body.compare-dragging .compare-line::before { width:3px; }
.compare-line span { position:absolute; top:50%; left:50%; width:38px; height:38px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; border:1px solid rgba(15,23,42,.12); box-shadow:0 4px 16px rgba(0,0,0,.24); pointer-events:none; }
.compare-line span::before, .compare-line span::after { content:''; position:absolute; top:50%; width:7px; height:7px; border-top:1.5px solid #222; border-left:1.5px solid #222; }
.compare-line span::before { left:8px; transform:translateY(-50%) rotate(-45deg); }
.compare-line span::after { right:8px; transform:translateY(-50%) rotate(135deg); }
.compare-line:focus-visible span { box-shadow:0 0 0 4px rgba(17,24,39,.16),0 4px 16px rgba(0,0,0,.24); }
body.compare-dragging, body.compare-dragging * { cursor:ew-resize !important; }
.compare-edge-label { position:absolute; top:10px; z-index:12; padding:5px 8px; border-radius:7px; background:rgba(17,24,39,.72); color:#fff; font-size:9px; font-weight:800; line-height:1; letter-spacing:.02em; pointer-events:none; backdrop-filter:blur(6px); }
.compare-before-label { left:10px; }
.compare-after-label { right:10px; }
.sidebar-topline, .section-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sidebar-topline { margin-bottom:10px; }
.sidebar-topline h2, .section-row h3 { margin:0; font-size:12px; letter-spacing:.01em; }
.mini-badge { display:inline-flex; align-items:center; min-height:21px; padding:2px 7px; border-radius:999px; background:#f0f3f5; color:#626b74; border:1px solid #e3e7eb; font-size:9px; font-weight:750; }
.look-list { display:grid; gap:5px; }
.look-row { width:100%; display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:center; border:1px solid transparent; background:transparent; border-radius:11px; padding:6px; text-align:left; }
.look-row:hover { background:#f6f7f9; border-color:#edf0f2; }
.look-row b { display:block; font-size:11.5px; }
.look-row small { display:block; margin-top:1px; color:var(--muted); font-size:9.5px; }
.look-swatch { width:38px; height:30px; border-radius:7px; background:linear-gradient(135deg,#8d9ca8,#d2ab86 52%,#53644f); border:1px solid rgba(0,0,0,.05); }
.look-swatch.clean { filter:brightness(1.09) saturate(.82); }
.look-swatch.cinema { filter:contrast(1.17) saturate(.72) sepia(.08); }
.look-swatch.warm { filter:sepia(.2) saturate(1.04) brightness(1.04); }
.look-swatch.night { filter:brightness(.73) contrast(1.2) saturate(.66) hue-rotate(10deg); }
.look-swatch.film { filter:contrast(.88) saturate(.72) sepia(.1) brightness(1.05); }
.pro-section { padding:14px 0; border-top:1px solid var(--line); }
.pro-section.no-border-top { border-top:0; }
.scope-canvas { width:100%; height:128px; display:block; margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#f7f8fa; }
.segmented { display:flex; align-items:center; background:#f0f2f4; border-radius:8px; padding:2px; }
.segmented button { border:0; background:transparent; border-radius:6px; padding:5px 8px; color:var(--muted); font-size:10px; font-weight:750; }
.segmented button.active { background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.segmented.mini button { padding:3px 6px; font-size:9px; }
.health-score { font-size:10px; font-weight:800; padding:3px 7px; border-radius:999px; background:#eef1f4; }
.health-score[data-level="good"] { color:#0e6a42; background:#e9f5ef; }
.health-score[data-level="warn"] { color:#7a5407; background:#fff5d9; }
.health-score[data-level="bad"] { color:#9a2f2f; background:#fdeaea; }
.health-list { display:grid; gap:8px; margin:11px 0; }
.health-list > div { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10px; color:var(--muted); }
.health-list strong { font-size:10px; color:var(--text); }
.health-list strong[data-level="good"] { color:var(--success); }
.health-list strong[data-level="warn"] { color:var(--warning); }
.empty-inline { margin:9px 0 0; color:var(--muted); font-size:10px; }
.snapshot-list { display:grid; gap:5px; margin-top:9px; }
.snapshot-row { display:flex; justify-content:space-between; gap:8px; align-items:center; width:100%; border:1px solid var(--line); border-radius:9px; background:#fff; padding:7px 8px; text-align:left; }
.snapshot-row:hover { background:#f7f8f9; }
.snapshot-row strong { font-size:10px; }
.snapshot-row small { font-size:9px; color:var(--muted); }
.inspector-tabs { position:sticky; top:0; z-index:6; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); margin:0 -15px 0; padding:8px 11px; }
.inspector-tabs button { border:0; background:transparent; color:var(--muted); font-size:10px; font-weight:800; min-height:31px; border-radius:8px; }
.inspector-tabs button:hover { background:#f5f6f8; }
.inspector-tabs button.active { background:#eef1f4; color:var(--text); }
.inspector-panel { display:none; }
.inspector-panel.active { display:block; }
.text-button { border:0; background:transparent; padding:3px; color:var(--muted); font-size:9.5px; font-weight:700; }
.text-button:hover { color:var(--text); }
.control-stack { display:grid; gap:1px; }
.pro-control { display:block; margin:11px 0; }
.pro-control > span { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--muted); font-size:10px; margin-bottom:6px; }
.pro-control b { font-weight:650; color:#4b535b; }
.pro-control output { color:var(--text); font-variant-numeric:tabular-nums; min-width:35px; text-align:right; }
.pro-control input[type="range"] { display:block; width:100%; height:16px; margin:0; }
.control-help { margin:8px 0 0; color:var(--muted); font-size:9.5px; line-height:1.45; }
.compact-select { border:1px solid var(--line); border-radius:8px; background:#fff; min-height:29px; padding:3px 7px; font-size:10px; }
.channel-strip { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; margin:10px 0; height:5px; border-radius:999px; overflow:hidden; }
.channel-strip i:nth-child(1){background:#dc514a}.channel-strip i:nth-child(2){background:#e58a3f}.channel-strip i:nth-child(3){background:#ddb94a}.channel-strip i:nth-child(4){background:#54a361}.channel-strip i:nth-child(5){background:#4caeb0}.channel-strip i:nth-child(6){background:#4d78c5}.channel-strip i:nth-child(7){background:#805ab1}.channel-strip i:nth-child(8){background:#bd5e9b}
.wheel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px; }
.wheel-wrap { text-align:center; }
.wheel-wrap > b { display:block; color:var(--muted); font-size:8.5px; margin-top:5px; font-weight:700; }
.color-wheel { position:relative; width:72px; max-width:100%; aspect-ratio:1; border-radius:50%; border:1px solid #d9dee3; padding:0; background:conic-gradient(#f66,#ff6,#6f6,#6ff,#66f,#f6f,#f66); box-shadow:inset 0 0 0 15px rgba(255,255,255,.56); touch-action:none; }
.color-wheel::after { content:''; position:absolute; inset:15px; border-radius:50%; background:radial-gradient(circle,#eee 0%,rgba(238,238,238,.78) 35%,rgba(255,255,255,0) 72%); pointer-events:none; }
.color-wheel span { position:absolute; left:50%; top:50%; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#222; box-shadow:0 0 0 1px rgba(0,0,0,.35); z-index:2; pointer-events:none; }
.curve-tabs { width:max-content; margin:10px 0; }
.curve-canvas { width:100%; height:auto; display:block; border-radius:10px; touch-action:none; cursor:crosshair; }
.export-grid.two-col { grid-template-columns:1fr 1fr; }
.export-grid .field span { display:block; color:var(--muted); font-size:9.5px; margin-bottom:4px; }
.editor-mobile-tabs { display:none; }
.toast { position:fixed; left:50%; bottom:22px; z-index:120; transform:translate(-50%,18px); opacity:0; pointer-events:none; background:#14181d; color:#fff; border-radius:11px; padding:9px 13px; font-size:11px; font-weight:650; box-shadow:0 12px 30px rgba(0,0,0,.18); transition:.18s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }

/* Project library */
.project-toolbar { display:flex; justify-content:space-between; gap:14px; align-items:flex-end; margin-bottom:24px; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.project-card { padding:0; overflow:hidden; }
.project-thumb { aspect-ratio:4/3; background:#eef1f4; object-fit:cover; width:100%; }
.project-card-body { padding:14px; }
.project-card-body h3 { margin:0 0 3px; font-size:15px; }
.project-card-body p { margin:0; color:var(--muted); font-size:11px; }
.project-card-actions { display:flex; gap:7px; margin-top:12px; }
.project-empty { min-height:320px; display:grid; place-items:center; text-align:center; }
.project-empty h2 { margin:0 0 8px; }

@media (max-width: 1160px) {
  .pro-editor-shell { grid-template-columns:220px minmax(360px,1fr) 310px; }
  .pro-toolbar { grid-template-columns:1fr auto; }
  .center-tools { order:3; grid-column:1/-1; justify-content:center; border-top:1px solid var(--line); padding-top:5px; }
  .pro-editor-main { min-height:0; }
}

@media (max-width: 900px) {
  .editor-page { overflow:hidden; }
  .editor-header .status-line { display:none; }
  .editor-header-actions .btn.ghost { display:none; }
  .pro-editor-shell { grid-template-columns:1fr; height:calc(100dvh - 58px - 58px); }
  .pro-editor-main { grid-column:1; grid-row:1; }
  .pro-sidebar { position:fixed; left:8px; right:8px; bottom:60px; top:auto; z-index:70; border:1px solid var(--line); border-radius:20px 20px 12px 12px; max-height:min(56vh,620px); transform:translateY(calc(100% + 80px)); transition:transform .2s ease; padding:12px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -18px 55px rgba(17,24,39,.16); }
  .pro-sidebar[data-mobile-open="true"] { transform:translateY(0); }
  .pro-toolbar { min-height:48px; grid-template-columns:1fr auto; padding:5px 8px; }
  .center-tools { display:none; }
  .image-meta { display:none; }
  .pro-canvas-stage { padding:12px; }
  .pro-canvas-wrap #original-preview, .pro-canvas-wrap #grade-canvas { max-height:calc(100vh - 180px); max-width:96vw; }
  .editor-mobile-tabs { display:grid; position:fixed; z-index:90; bottom:0; left:0; right:0; min-height:58px; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:5px 8px calc(5px + env(safe-area-inset-bottom)); }
  .editor-mobile-tabs button { border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; min-height:46px; display:grid; place-items:center; align-content:center; gap:1px; }
  .editor-mobile-tabs button span { font-size:13px; line-height:1; }
  .editor-mobile-tabs button.active { background:var(--accent-soft); color:#096744; }
  .inspector-tabs { top:-15px; }
  .wheel-grid { max-width:330px; margin-inline:auto; }
  .project-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  .editor-nav { padding:0 9px; }
  .editor-nav .brand { font-size:15px; }
  .editor-nav .brand-logo { width:27px; height:27px; }
  .editor-header-actions #save-project-btn { display:none; }
  .editor-header-actions #export-btn { font-size:10px; padding:6px 9px; }
  .pro-toolbar .toolbar-cluster:first-child { min-width:0; }
  .pro-toolbar .toolbar-cluster:last-child .tool-btn { display:none; }
  .filename { max-width:160px; }
  .pro-empty-editor { padding:30px 18px; }
  .pro-empty-editor h1 { font-size:24px; }
  .privacy-strip { display:grid; }
  .project-grid { grid-template-columns:1fr; }
  .project-toolbar { align-items:flex-start; flex-direction:column; }
}
.pro-preview { position:relative; }
.pro-preview::after { content:''; position:absolute; inset:0 0 0 50%; background:linear-gradient(135deg,rgba(30,45,54,.18),rgba(240,185,139,.18)); backdrop-filter:saturate(.82) contrast(1.08); border-left:1px solid rgba(255,255,255,.85); }
.preview-split { position:absolute; z-index:3; left:50%; top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.92); }
.preview-quality { position:absolute; z-index:4; left:14px; bottom:14px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.7); padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; }

/* Advanced grading additions */
.inspector-tabs { grid-template-columns:repeat(5,1fr); }
.scope-tabs { display:grid; grid-template-columns:repeat(4,1fr); width:100%; margin-top:8px; }
.scope-tabs button { min-width:0; padding-inline:5px; font-size:9px; }
.scope-canvas#vectorscope { height:180px; }
.toolbar-select-wrap { display:inline-flex; align-items:center; }
.toolbar-select { appearance:none; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); min-height:32px; padding:0 24px 0 9px; font:inherit; font-size:11px; font-weight:700; background-image:linear-gradient(45deg,transparent 50%,#7b848d 50%),linear-gradient(135deg,#7b848d 50%,transparent 50%); background-position:calc(100% - 11px) 13px,calc(100% - 7px) 13px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.toolbar-select:focus-visible { outline:2px solid #1d6cff; outline-offset:2px; }
.lut-actions { display:grid; grid-template-columns:1fr auto; gap:7px; margin:10px 0 8px; }
.lut-actions #lut-export-btn { grid-column:1 / -1; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid #edf0f2; }
.toggle-row > span { display:grid; gap:2px; }
.toggle-row b { color:#333a41; font-size:11px; }
.toggle-row small { color:var(--muted); font-size:9px; line-height:1.35; max-width:210px; }
.toggle-row input { width:18px; height:18px; accent-color:var(--accent); }
.wb-picker-active #grade-canvas { cursor:crosshair; }
.mask-preview-note { font-size:9px; color:var(--muted); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width: 760px) {
  .inspector-tabs { grid-template-columns:repeat(5,1fr); }
  .toolbar-select-wrap { display:none; }
  #wb-picker-btn { display:none; }
  .scope-tabs button { font-size:8px; }
}


/* Autosave, mobile ergonomics and monetization-safe layout */
.save-state { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 8px; border-radius:999px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
.save-state-dot { width:7px; height:7px; border-radius:50%; background:#8a949e; box-shadow:0 0 0 3px rgba(138,148,158,.12); }
.save-state[data-state="saved"] .save-state-dot { background:#2f8d62; box-shadow:0 0 0 3px rgba(47,141,98,.12); }
.save-state[data-state="saving"] .save-state-dot { background:#5577a8; animation:savePulse 1s ease-in-out infinite; }
.save-state[data-state="dirty"] .save-state-dot { background:#b17a22; }
.save-state[data-state="error"] { color:var(--danger); }
.save-state[data-state="error"] .save-state-dot { background:var(--danger); }
@keyframes savePulse { 50% { opacity:.35; transform:scale(.8); } }
.continue-project-btn { margin-top:10px; width:100%; }
.export-recipe-field { display:block; margin:10px 0; }
.export-recipe-field span { display:block; color:var(--muted); font-size:9.5px; margin-bottom:4px; }
.export-recipe-field select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px 10px; }

.storage-card { display:grid; grid-template-columns:minmax(200px,1fr) minmax(160px,360px) auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:20px; }
.storage-card > div:first-child { display:grid; gap:3px; }
.storage-card strong { font-size:13px; }
.storage-card span { color:var(--muted); font-size:11px; }
.storage-meter { height:8px; border-radius:999px; background:#eef1f4; overflow:hidden; }
.storage-meter i { display:block; width:0; height:100%; border-radius:inherit; background:#59636d; transition:width .25s ease; }
.project-toolbar-actions { display:flex; align-items:center; gap:9px; }
.project-search input { min-height:42px; width:min(260px,34vw); border:1px solid var(--line); background:#fff; border-radius:11px; padding:9px 12px; }
.project-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-card-top h3 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.danger-text { color:var(--danger); }

/* AdSense-ready content slots. Hidden until assets/ads-config.js is explicitly enabled. */
.ad-section { padding:4px 0 18px; }
.ad-slot { display:none; width:100%; margin:0 auto; text-align:center; overflow:hidden; border-radius:14px; }
.ad-slot[data-ad-ready="true"] { display:block; min-height:112px; padding:8px; background:#f2f4f6; border:1px solid #e4e8ec; }
.ad-label { display:block; margin:0 0 5px; color:#8a929a; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.ad-slot .adsbygoogle { display:block; width:100%; min-height:90px; }
.ad-slot[data-ad-size="rectangle"] { max-width:760px; }
.ad-slot[data-ad-size="rectangle"][data-ad-ready="true"] { min-height:260px; }

@media (max-width: 900px) {
  .editor-header-actions .save-state { padding-inline:6px; }
  .pro-sidebar .btn, .pro-sidebar .tool-btn, .pro-sidebar select, .pro-sidebar input[type="number"] { min-height:44px; }
  .pro-control { margin:14px 0; }
  .pro-control > span { font-size:11px; margin-bottom:8px; }
  .pro-control input[type="range"] { height:24px; }
  .inspector-tabs button { min-height:42px; font-size:10px; }
  .look-row { min-height:54px; padding:8px; }
  .snapshot-row { min-height:46px; padding:9px 10px; }
  .pro-canvas-stage { padding:8px 8px 18px; }
  .pro-canvas-wrap #original-preview, .pro-canvas-wrap #grade-canvas { max-height:calc(100dvh - 188px); max-width:98vw; }
  .toast { bottom:72px; max-width:calc(100vw - 24px); text-align:center; }
  .storage-card { grid-template-columns:1fr; }
  .project-toolbar-actions { width:100%; }
  .project-search { flex:1; }
  .project-search input { width:100%; }
}

@media (max-width: 560px) {
  .editor-nav { height:54px; }
  .pro-editor-shell { height:calc(100dvh - 54px - 58px); }
  .editor-header-actions { gap:3px; }
  .editor-header-actions .save-state { max-width:88px; overflow:hidden; }
  .editor-header-actions #save-project-btn, .editor-header-actions .btn.ghost { display:none; }
  .editor-header-actions #export-btn { min-height:38px; font-size:10px; padding:6px 10px; }
  .save-state #save-state-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pro-toolbar { min-height:44px; }
  .pro-toolbar .zoom-readout { min-height:38px; }
  .pro-sidebar { left:4px; right:4px; bottom:60px; max-height:58vh; border-radius:18px 18px 8px 8px; }
  .wheel-grid { gap:14px; }
  .color-wheel { width:82px; }
  .scope-canvas { height:144px; }
  .project-toolbar-actions { align-items:stretch; flex-direction:column; }
  .project-toolbar-actions .btn { width:100%; }
  .ad-slot[data-ad-ready="true"] { min-height:104px; border-radius:10px; }
  .ad-slot[data-ad-size="rectangle"][data-ad-ready="true"] { min-height:280px; }
}

.smart-action { width:100%; margin:10px 0 4px; justify-content:center; }
.batch-actions { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:-8px 0 16px; }
.batch-actions > span:first-child { font-size:12px; font-weight:800; }
.batch-hint { color:var(--muted); font-size:10px; margin-right:auto; }
.project-card-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.project-select { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:9px; cursor:pointer; }
.project-select input { width:16px; height:16px; accent-color:var(--accent); }
@media (max-width:680px) {
  .batch-actions { align-items:stretch; flex-wrap:wrap; }
  .batch-hint { flex-basis:100%; order:3; }
  .batch-actions .btn { flex:1; min-height:42px; }
  .project-card-top { grid-template-columns:auto minmax(0,1fr); }
  .project-card-top .mini-badge { grid-column:2; width:max-content; }
}


/* v8 responsive workspace: the image stays visible while controls are open */
:root { --editor-viewport-height:100dvh; --editor-mobile-nav:58px; --editor-mobile-header:54px; }

/* Let the preview fit the actual stage, not a viewport estimate. */
.image-workspace { width:100%; height:100%; min-width:0; min-height:0; place-items:center; }
.pro-canvas-wrap { max-width:100%; max-height:100%; }
.pro-canvas-wrap #original-preview,
.pro-canvas-wrap #grade-canvas { max-width:100%; max-height:100%; }
.pro-canvas-wrap #original-preview { object-fit:contain; }

/* Large desktop: spend extra width on the image instead of oversized chrome. */
@media (min-width: 1600px) {
  .pro-editor-shell { grid-template-columns:270px minmax(0,1fr) 360px; }
  .pro-canvas-stage { padding:38px; }
  .pro-toolbar { padding-inline:14px; }
}

/* Medium desktop widths: collapse secondary toolbar tools before controls can collide. */
@media (min-width: 1251px) and (max-width: 1450px) {
  .pro-editor-shell { grid-template-columns:240px minmax(0,1fr) 320px; }
  .pro-toolbar { grid-template-columns:minmax(110px,1fr) auto minmax(220px,1fr); }
  #reference-btn, #wb-picker-btn { display:none; }
  .toolbar-view-controls #reset-btn { display:none; }
  .filename { max-width:145px; }
}

/* Laptop widths: keep a single toolbar row to preserve vertical canvas space. */
@media (min-width: 961px) and (max-width: 1250px) {
  .pro-editor-shell { grid-template-columns:clamp(188px,18vw,220px) minmax(0,1fr) clamp(280px,27vw,318px); }
  .pro-toolbar { grid-template-columns:minmax(120px,1fr) auto auto; min-height:46px; }
  .center-tools { order:initial; grid-column:auto; border-top:0; padding-top:0; }
  #reference-btn, #wb-picker-btn, .toolbar-select-wrap { display:none; }
  .toolbar-view-controls #reset-btn { display:none; }
  .toolbar-view-controls .compare-mode-btn { padding-inline:9px; }
  .filename { max-width:130px; }
  .pro-sidebar { padding-inline:12px; }
  .pro-sidebar-right { padding-left:12px; padding-right:12px; }
  .inspector-tabs { margin-inline:-12px; padding-inline:8px; }
  .pro-canvas-stage { padding:18px; }
}

/* Tablet and phone portrait: controls become an in-flow dock below the image.
   Nothing overlays the stage, so the photo remains visible during adjustments. */
@media (max-width: 960px) {
  .editor-page { overflow:hidden; }
  .editor-header .status-line { display:none; }
  .editor-header-actions .btn.ghost { display:none; }
  .editor-nav { height:var(--editor-mobile-header); }
  .pro-editor-shell {
    height:calc(var(--editor-viewport-height) - var(--editor-mobile-header) - var(--editor-mobile-nav));
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(190px,1fr) minmax(220px,42dvh);
    overflow:hidden;
    background:#e9edf0;
  }
  .pro-editor-shell:not(.controls-open) { grid-template-rows:minmax(0,1fr) 0; }
  .pro-editor-main { grid-column:1; grid-row:1 / 3; min-height:0; min-width:0; }
  .pro-editor-shell.controls-open .pro-editor-main { grid-row:1; }

  .pro-sidebar {
    position:static;
    inset:auto;
    grid-column:1;
    grid-row:2;
    display:none;
    width:auto;
    min-width:0;
    max-width:none;
    max-height:none;
    transform:none;
    transition:none;
    z-index:10;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px rgba(17,24,39,.08);
    overflow:auto;
    overscroll-behavior:contain;
    background:rgba(255,255,255,.985);
  }
  .pro-sidebar::before {
    content:'';
    display:block;
    width:38px;
    height:4px;
    margin:-7px auto 10px;
    border-radius:999px;
    background:#d8dde2;
  }
  .pro-sidebar[data-mobile-open="true"] { display:block; transform:none; }
  .pro-sidebar-left, .pro-sidebar-right { border-left:0; border-right:0; }

  .pro-toolbar {
    min-height:42px;
    grid-template-columns:minmax(0,1fr) auto auto;
    padding:4px 7px;
    gap:5px;
  }
  .center-tools {
    display:flex;
    order:initial;
    grid-column:auto;
    border-top:0;
    padding-top:0;
    gap:4px;
  }
  .center-tools #auto-correct-btn,
  .center-tools #reference-btn,
  .center-tools #wb-picker-btn,
  .center-tools .toolbar-select-wrap,
  .center-tools .toolbar-divider { display:none; }
  .image-meta { display:none; }
  .toolbar-cluster:last-child #reset-btn { display:none; }
  .toolbar-cluster:last-child .hide-mobile { display:none; }
  .toolbar-view-controls { gap:4px; }
  .toolbar-view-controls .compare-mode-btn { min-height:34px; padding:5px 9px; }
  .zoom-readout { min-width:48px; height:34px; }
  .icon-button { min-width:34px; height:34px; }

  .pro-canvas-stage { padding:8px; overflow:auto; min-height:0; }
  .image-workspace { width:100%; height:100%; min-height:0; }
  .pro-canvas-wrap { max-width:100%; max-height:100%; }
  .pro-canvas-wrap #original-preview,
  .pro-canvas-wrap #grade-canvas { max-width:100%; max-height:100%; }

  .editor-mobile-tabs {
    display:grid;
    position:fixed;
    z-index:90;
    bottom:0;
    left:0;
    right:0;
    min-height:var(--editor-mobile-nav);
    grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:5px 8px calc(5px + env(safe-area-inset-bottom));
  }
  .editor-mobile-tabs button { border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; min-height:46px; display:grid; place-items:center; align-content:center; gap:1px; }
  .editor-mobile-tabs button span { font-size:13px; line-height:1; }
  .editor-mobile-tabs button.active { background:var(--accent-soft); color:#096744; }

  .inspector-tabs { top:-16px; margin-top:-1px; }
  .pro-sidebar .btn, .pro-sidebar .tool-btn, .pro-sidebar select, .pro-sidebar input[type="number"] { min-height:44px; }
  .pro-control { margin:13px 0; }
  .pro-control > span { font-size:11px; margin-bottom:7px; }
  .pro-control input[type="range"] { height:26px; }
  .inspector-tabs button { min-height:42px; }
  .look-row { min-height:52px; }
  .toast { bottom:calc(var(--editor-mobile-nav) + 12px); }
}

/* Phone portrait: reserve a stable preview region even with the control dock open. */
@media (max-width: 600px) {
  :root { --editor-mobile-header:50px; }
  .editor-nav { padding:0 7px; }
  .editor-nav .brand { font-size:14px; }
  .editor-nav .brand-logo { width:25px; height:25px; }
  .editor-header-actions { gap:2px; }
  .editor-header-actions .save-state { max-width:74px; padding-inline:4px; }
  .editor-header-actions #export-btn { min-height:34px; padding:5px 8px; }
  .pro-editor-shell { grid-template-rows:minmax(180px,1fr) minmax(230px,44dvh); }
  .pro-toolbar { min-height:40px; }
  .filename { max-width:118px; font-size:10.5px; }
  .zoom-readout { min-width:43px; font-size:10px; }
  .toolbar-view-controls .compare-mode-btn { font-size:10px; padding-inline:8px; }
  .pro-canvas-stage { padding:6px; }
  .pro-sidebar { padding:14px 13px calc(14px + env(safe-area-inset-bottom)); }
  .scope-canvas { height:124px; }
  .scope-canvas#vectorscope { height:150px; }
  .wheel-grid { gap:10px; }
  .color-wheel { width:min(78px,23vw); }
  .pro-empty-editor { padding:20px 14px; }
  .pro-empty-editor h1 { font-size:21px; }
  .pro-dropzone { padding:14px; }
  .privacy-strip { display:none; }
}

/* Very narrow phones: prioritize image and primary actions over labels. */
@media (max-width: 380px) {
  .editor-nav .brand { font-size:0; }
  .editor-nav .brand-logo { margin-right:0; }
  .editor-header-actions .save-state { max-width:28px; }
  .save-state #save-state-text { display:none; }
  .pro-editor-shell { grid-template-rows:minmax(170px,1fr) minmax(218px,45dvh); }
  .filename { max-width:82px; }
  .toolbar-view-controls .zoom-readout { display:none; }
  .toolbar-view-controls .compare-mode-btn { padding-inline:7px; }
  .editor-mobile-tabs { padding-inline:4px; }
  .editor-mobile-tabs button { font-size:9px; }
  .pro-sidebar { padding-inline:11px; }
}

/* Short landscape tablets/phones: dock controls beside the photo instead of below it. */
@media (max-width: 960px) and (min-width: 480px) and (max-height: 650px) and (orientation: landscape) {
  :root { --editor-mobile-header:50px; --editor-mobile-nav:0px; }
  .pro-editor-shell {
    height:calc(var(--editor-viewport-height) - var(--editor-mobile-header));
    width:calc(100% - 54px);
    margin-left:54px;
    grid-template-columns:minmax(0,1fr) minmax(240px,42vw);
    grid-template-rows:minmax(0,1fr);
  }
  .pro-editor-shell:not(.controls-open) { grid-template-columns:minmax(0,1fr) 0; grid-template-rows:minmax(0,1fr); }
  .pro-editor-main { grid-column:1 / 3; grid-row:1; }
  .pro-editor-shell.controls-open .pro-editor-main { grid-column:1; grid-row:1; }
  .pro-sidebar,
  .pro-sidebar[data-mobile-open="true"] {
    grid-column:2;
    grid-row:1;
    border-top:0;
    border-left:1px solid var(--line);
    box-shadow:-10px 0 30px rgba(17,24,39,.08);
    padding-top:12px;
  }
  .pro-sidebar::before { display:none; }
  .pro-toolbar { min-height:38px; }
  .pro-canvas-stage { padding:5px; }
  .inspector-tabs { top:-12px; }
  .pro-control { margin:9px 0; }
  .pro-control input[type="range"] { height:20px; }
  .editor-mobile-tabs {
    top:var(--editor-mobile-header);
    bottom:0;
    left:0;
    right:auto;
    width:54px;
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,1fr);
    padding:4px;
    border-top:0;
    border-right:1px solid var(--line);
  }
  .editor-mobile-tabs button { min-height:0; padding:3px 1px; font-size:8.5px; }
  .editor-mobile-tabs button span { font-size:12px; }
  .toast { bottom:12px; }
}

/* Tiny-height windows (split screen / desktop snapped): reduce chrome first, not the image. */
@media (min-width: 961px) and (max-height: 720px) {
  .editor-nav { height:50px; }
  .pro-editor-shell { height:calc(100vh - 50px); }
  .pro-toolbar { min-height:40px; }
  .pro-canvas-stage { padding:10px; }
  .pro-section { padding-block:10px; }
  .pro-control { margin:8px 0; }
  .look-row { padding-block:4px; }
  .scope-canvas { height:96px; }
}


/* Exact preview bounds are updated by ResizeObserver from the real stage box. */
.pro-canvas-wrap #original-preview {
  max-width:var(--preview-max-width, 100%);
  max-height:var(--preview-max-height, 100%);
}

@media (max-width: 960px) {
  .editor-nav {
    padding-left:max(7px, env(safe-area-inset-left));
    padding-right:max(7px, env(safe-area-inset-right));
  }
}


/* v12: toolbar responds to the actual editor column width, not the monitor width.
   This prevents Compare/zoom collisions when both sidebars consume space. */
@container editorMain (max-width: 1120px) {
  #reference-btn, #wb-picker-btn { display:none; }
  .toolbar-view-controls #reset-btn { display:none; }
  .filename { max-width:145px; }
}
@container editorMain (max-width: 930px) {
  #auto-correct-btn { display:none; }
  .image-meta { display:none; }
  .pro-toolbar { grid-template-columns:minmax(100px,1fr) auto auto; }
  .toolbar-view-controls { gap:6px; }
  .zoom-controls { gap:4px; }
}
@container editorMain (max-width: 760px) {
  .center-tools .toolbar-select-wrap, .center-tools .toolbar-divider { display:none; }
  .zoom-controls .zoom-readout { display:none; }
  .toolbar-view-controls .view-divider { display:none; }
  .filename { max-width:110px; }
}
@container editorMain (max-width: 610px) {
  .zoom-controls { display:none; }
  .toolbar-view-controls { gap:4px; }
}


/* v13 MintGrade brand + content theme */
.brand { color:#102a20; }
.brand-logo { background:#eaf9f1; }
.nav-links a { position:relative; }
.nav-links a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:999px; background:var(--accent); }
.text-link { color:#08724d; font-weight:800; font-size:14px; }
.text-link:hover { text-decoration:underline; text-underline-offset:3px; }
.mint-hero { position:relative; overflow:hidden; background:linear-gradient(180deg,#f4fbf7 0%,#f7fcf9 58%,var(--bg) 100%); }
.mint-hero::before { content:""; position:absolute; width:560px; height:560px; border-radius:50%; right:-220px; top:-250px; background:radial-gradient(circle,rgba(65,214,155,.16),rgba(65,214,155,0) 70%); pointer-events:none; }
.hero-copy { position:relative; z-index:1; }
.hero-brandline { display:flex; align-items:center; gap:10px; margin-bottom:16px; color:#174c38; }
.hero-brandline img { border-radius:11px; box-shadow:0 8px 20px rgba(14,159,110,.14); }
.hero-brandline strong { font-size:17px; letter-spacing:-.03em; }
.hero-brandline span { color:var(--muted); font-size:12px; padding-left:10px; border-left:1px solid var(--line); }
.hero-lead strong { color:#244c3d; font-weight:750; }
.pro-hero-card { border-color:#cfe8dc; box-shadow:0 24px 70px rgba(16,104,70,.13); }
.preview-quality { background:#e9fff4 !important; color:#0a6d49 !important; border-color:#bfe8d4 !important; }
.preview-label { position:absolute; bottom:13px; z-index:3; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.7); font-size:10px; font-weight:800; }
.preview-label.before { left:13px; }
.preview-label.after { right:13px; }
.section-tint { background:#eef9f3; border-top:1px solid #deeee6; border-bottom:1px solid #deeee6; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 8px 24px rgba(22,83,61,.04); }
.step-number { display:inline-grid; place-items:center; min-width:38px; height:30px; padding:0 8px; border-radius:999px; background:var(--accent-soft); color:#08714c; font-size:11px; font-weight:900; letter-spacing:.08em; }
.step-card h3 { margin:18px 0 7px; font-size:20px; letter-spacing:-.025em; }
.step-card p { margin:0; color:var(--muted); font-size:14px; }
.feature-grid code, .faq-list code { background:#e5f6ed; color:#146044; padding:2px 5px; border-radius:5px; }
.seo-split .panel { padding:30px; }
.seo-split .panel h2 { font-size:clamp(26px,3vw,38px); line-height:1.08; letter-spacing:-.035em; margin:18px 0 12px; }
.look-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.look-tile { min-height:180px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(16,34,27,.08); border-radius:20px; padding:18px; overflow:hidden; box-shadow:0 10px 28px rgba(16,80,58,.08); transition:transform .18s ease, box-shadow .18s ease; }
.look-tile:hover { transform:translateY(-2px); box-shadow:0 15px 34px rgba(16,80,58,.12); }
.look-tile span { font-size:18px; font-weight:850; color:white; text-shadow:0 1px 8px rgba(0,0,0,.22); }
.look-tile small { color:rgba(255,255,255,.88); }
.look-tile.cinema { background:linear-gradient(145deg,#1f3d3e,#728f85 50%,#ba8c6f); }
.look-tile.portrait { background:linear-gradient(145deg,#596c61,#d4a78d 52%,#f0c8ac); }
.look-tile.film { background:linear-gradient(145deg,#5c6d55,#aa9978 55%,#d3bb96); }
.look-tile.clean { background:linear-gradient(145deg,#82a79d,#c8dfd7 55%,#e4d8c4); }
.faq-layout { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:64px; align-items:start; }
.faq-list { display:grid; gap:10px; }
.faq-list details { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:0 17px; }
.faq-list summary { cursor:pointer; list-style:none; padding:17px 28px 17px 0; font-weight:800; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; color:var(--accent); font-size:20px; line-height:1; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { color:var(--muted); margin:0 0 17px; font-size:14px; }
.cta-panel { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:26px; padding:36px; background:linear-gradient(135deg,#ffffff,#effbf4); border-color:#cde9db; }
.cta-logo { border-radius:22px; box-shadow:0 14px 30px rgba(14,159,110,.13); }
.cta-panel h2 { margin:10px 0 8px; font-size:clamp(30px,4vw,46px); line-height:1.04; letter-spacing:-.04em; }
.cta-panel p { margin:0 0 18px; }
.ad-slot:not(:empty) { border-color:#dcebe3; background:#f8fcfa; }
/* Keep the grading stage neutral: surrounding mint UI should not bias color perception. */
.editor-page { --bg:#f4f8f6; --surface-2:#eef6f2; }
.pro-editor-main, .pro-canvas-stage, .pro-editor-shell { background-color:#e9edf0; }
.pro-toolbar, .pro-sidebar, .editor-mobile-tabs { border-color:#dce8e2; }
.pro-sidebar .btn.primary, .tool-btn.active, .compare-mode-btn.active { background:var(--accent); border-color:var(--accent); }
.inspector-tabs button.active, .look-row.active { color:#08714c; }

@media (max-width:980px) {
  .steps-grid { grid-template-columns:1fr; }
  .faq-layout { grid-template-columns:1fr; gap:24px; }
  .look-strip { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .hero-brandline span { display:none; }
  .look-strip { grid-template-columns:1fr 1fr; }
  .look-tile { min-height:135px; padding:14px; }
  .cta-panel { grid-template-columns:1fr; text-align:left; }
  .cta-logo { width:68px; height:68px; }
}


/* v14 — 500-guide SEO blog */
.blog-hero,.blog-category-hero{background:linear-gradient(180deg,#f1fbf6,#f8fcfa);border-bottom:1px solid #dcece3;padding:72px 0 58px}.blog-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:52px;align-items:end}.blog-hero h1,.blog-category-hero h1{font-size:clamp(38px,5.5vw,70px);line-height:.98;letter-spacing:-.055em;margin:14px 0 18px;max-width:930px}.blog-hero p,.blog-category-hero p{font-size:17px;line-height:1.7;color:var(--muted);max-width:780px}.blog-search-panel{background:#fff;border:1px solid #cfe6da;border-radius:20px;padding:20px;box-shadow:0 18px 42px rgba(18,87,62,.08)}.blog-search-panel label{display:block;font-size:13px;font-weight:850;margin-bottom:9px}.blog-search-panel input{width:100%;height:48px;border:1px solid #cdded6;border-radius:12px;padding:0 14px;font:inherit;color:var(--text);outline:none}.blog-search-panel input:focus{border-color:#5dc89c;box-shadow:0 0 0 3px rgba(65,214,155,.14)}.blog-search-panel span{display:block;margin-top:10px;color:var(--muted);font-size:12px}.blog-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.blog-category-card{display:block;background:#fff;border:1px solid #d9ebe2;border-radius:18px;padding:20px;color:var(--text);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.blog-category-card:hover{transform:translateY(-2px);border-color:#9ed6bd;box-shadow:0 12px 30px rgba(21,86,63,.08)}.blog-category-card>span,.blog-card-cat{font-size:11px;font-weight:850;letter-spacing:.02em;color:#08704c}.blog-category-card h3{font-size:19px;margin:8px 0 7px}.blog-category-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}.blog-toolbar{position:sticky;top:68px;z-index:8;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);padding:10px 0 14px;margin-bottom:20px}.blog-filters{display:flex;gap:8px;overflow:auto;padding:2px 1px 5px;scrollbar-width:thin}.blog-filter{flex:0 0 auto;border:1px solid #d5e7de;background:#fff;color:#345247;border-radius:999px;padding:9px 12px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.blog-filter span{color:var(--muted);font-weight:650;margin-left:3px}.blog-filter.active{background:#123b2c;color:#fff;border-color:#123b2c}.blog-filter.active span{color:#bfe9d6}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.blog-card{background:#fff;border:1px solid #dde9e3;border-radius:18px;padding:20px;min-width:0}.blog-card h2,.blog-card h3{font-size:18px;line-height:1.22;letter-spacing:-.025em;margin:9px 0 8px}.blog-card h2 a,.blog-card h3 a{color:var(--text)}.blog-card h2 a:hover,.blog-card h3 a:hover{color:#08704c}.blog-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 13px}.blog-more-wrap{display:flex;justify-content:center;padding-top:28px}.category-grid .blog-card h2{font-size:19px}.breadcrumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:28px;flex-wrap:wrap}.breadcrumbs a{color:#426457}.blog-article-main{background:#f8fbf9}.article-shell{max-width:1040px;padding-top:34px;padding-bottom:80px}.article{max-width:800px;margin:0 auto;background:#fff;border:1px solid #ddeae3;border-radius:26px;overflow:hidden;box-shadow:0 16px 50px rgba(20,77,57,.05)}.article-header{padding:52px 58px 34px;background:linear-gradient(180deg,#f1fbf6,#fff);border-bottom:1px solid #e2ede7}.article-header h1{font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-.05em;margin:12px 0 18px}.article-deck{font-size:18px;line-height:1.65;color:#4d665d}.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-top:20px}.article-body{padding:38px 58px 56px;font-size:16px;line-height:1.78;color:#263b33}.article-body>p{margin:0 0 22px}.article-body h2{font-size:28px;line-height:1.14;letter-spacing:-.035em;color:var(--text);margin:42px 0 14px}.article-body ul,.article-body ol{padding-left:22px}.article-body li{margin:9px 0}.article-quick{background:#edf9f3;border:1px solid #d2ebdf;border-radius:16px;padding:18px;margin:28px 0}.article-quick>strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#1a6249;margin-bottom:10px}.control-pills{display:flex;gap:7px;flex-wrap:wrap}.control-pills span{background:#fff;border:1px solid #cfe6da;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:750;color:#285344}.article-steps{counter-reset:none;list-style:none;padding:0!important}.article-steps li{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:12px 0;border-bottom:1px solid #edf1ef}.article-steps li strong{color:#0a7b52}.article-callout{background:#142d24;color:#dcece5;border-radius:18px;padding:22px 24px;margin:34px 0}.article-callout h2{color:#fff!important;margin:0 0 9px!important;font-size:22px!important}.article-callout p{margin:0;color:#c8dbd3}.article-ad{margin:34px 0}.article-faq details{border-color:#dce9e3}.article-related{max-width:800px;margin:36px auto 0}.section-heading.small h2{font-size:28px;margin-top:8px}.compact-grid{grid-template-columns:repeat(3,1fr)}.compact-grid .blog-card{padding:16px}.compact-grid .blog-card h3{font-size:16px}.compact-grid .blog-card p{font-size:12px}.compact-grid .blog-card-cat{font-size:10px}@media(max-width:980px){.blog-hero-grid{grid-template-columns:1fr}.blog-category-grid{grid-template-columns:1fr 1fr}.blog-grid{grid-template-columns:1fr 1fr}.blog-toolbar{top:58px}}@media(max-width:680px){.blog-hero,.blog-category-hero{padding:48px 0 38px}.blog-hero h1,.blog-category-hero h1{font-size:40px}.blog-category-grid,.blog-grid,.compact-grid{grid-template-columns:1fr}.blog-search-panel{padding:15px}.article-shell{padding:18px 12px 56px}.article{border-radius:18px}.article-header{padding:34px 22px 24px}.article-header h1{font-size:36px}.article-deck{font-size:16px}.article-body{padding:26px 22px 40px;font-size:15px}.article-body h2{font-size:25px}.blog-toolbar{top:50px;margin-left:-4px;margin-right:-4px}.blog-filter{padding:8px 10px}}

/* v15 — categorized looks, background masks and non-destructive layers */
#composite-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; display:block; pointer-events:none; }
#composite-canvas[data-brush-mode="erase"], #composite-canvas[data-brush-mode="recover"] { pointer-events:auto !important; touch-action:none; cursor:crosshair; }
.pro-canvas-wrap.compare-active #grade-canvas,
.pro-canvas-wrap.compare-active #local-mask-canvas,
.pro-canvas-wrap.compare-active #mask-ui-canvas,
.pro-canvas-wrap.compare-active #composite-canvas { will-change:clip-path; }
.compare-line { z-index:6; }
.compare-edge-label { z-index:5; }

.look-browser { display:grid; gap:9px; margin-bottom:10px; }
.look-search input { width:100%; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); padding:0 11px; font:inherit; font-size:12px; outline:none; }
.look-search input:focus { border-color:#66cda4; box-shadow:0 0 0 3px rgba(65,214,155,.12); }
.look-category-strip { display:flex; gap:6px; overflow-x:auto; padding:1px 0 4px; scrollbar-width:thin; }
.look-category-chip { flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--muted); min-height:28px; border-radius:999px; padding:4px 9px; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.look-category-chip.active { background:var(--accent); border-color:var(--accent); color:#073b29; }
.look-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.look-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:11px; padding:0; background:#fff; color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease; }
.look-card:hover { transform:translateY(-1px); border-color:#9dd7be; box-shadow:0 7px 16px rgba(22,88,64,.08); }
.look-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.look-card img { display:block; width:100%; height:74px; object-fit:cover; background:#dde6e1; }
.look-card-copy { display:block; padding:7px 8px 8px; line-height:1.15; }
.look-card-copy b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; }
.look-card-copy small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }

.inspector-tabs { display:flex; grid-template-columns:none; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; gap:3px; }
.inspector-tabs::-webkit-scrollbar { display:none; }
.inspector-tabs button { flex:1 0 51px; min-width:51px; }
.full-width { width:100%; }
.background-brush-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0 4px; }
.background-brush-grid .btn.active { background:var(--accent); border-color:var(--accent); color:#083d2b; }
.layer-action-grid { display:grid; grid-template-columns:1fr 1fr 34px 34px; gap:6px; align-items:center; }
.layer-action-grid .icon-button { min-width:34px; width:34px; }
.layer-list { display:grid; gap:6px; margin:10px 0; max-height:260px; overflow:auto; }
.layer-row { width:100%; display:grid; grid-template-columns:18px 40px minmax(0,1fr); gap:7px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:5px 7px; background:#fff; color:var(--text); text-align:left; cursor:pointer; }
.layer-row.active { border-color:#72cda8; background:#f1fbf6; box-shadow:0 0 0 2px rgba(65,214,155,.08); }
.layer-eye { color:#26875f; font-size:10px; text-align:center; }
.layer-thumb { width:38px; height:30px; border:1px solid #dbe3df; border-radius:6px; background-size:cover; background-position:center; background-color:#eef2f0; }
.layer-copy { min-width:0; }
.layer-copy b,.layer-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.layer-copy b { font-size:10.5px; }
.layer-copy small { color:var(--muted); font-size:9px; margin-top:2px; text-transform:capitalize; }
.layer-order-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
#layer-color { min-height:36px; padding:3px; border:1px solid var(--line); border-radius:9px; background:#fff; }

@media (min-width:1400px) {
  .look-card img { height:82px; }
  .look-grid { gap:8px; }
}
@media (max-width:1200px) and (min-width:961px) {
  .look-card img { height:62px; }
  .look-card-copy { padding:6px; }
  .layer-list { max-height:210px; }
}
@media (max-width:960px) {
  .look-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .look-card img { height:70px; }
  .inspector-tabs button { flex:0 0 66px; min-width:66px; }
  .layer-list { max-height:none; }
}
@media (max-width:600px) {
  .look-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .look-card img { height:72px; }
  .layer-action-grid { grid-template-columns:1fr 1fr 38px 38px; }
  .background-brush-grid .btn { min-height:42px; }
}

/* v15 public LUT/filter catalog */
.preset-library { display:grid; gap:38px; }
.preset-category-block { display:grid; gap:13px; }
.preset-category-heading { border-bottom:1px solid #dbe9e2; padding-bottom:10px; }
.preset-category-heading h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.preset-stock-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.preset-stock-card { overflow:hidden; padding:0; }
.preset-stock-card>img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#e8efeb; }
.preset-stock-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px; }
.preset-stock-meta>div { min-width:0; }
.preset-stock-meta b,.preset-stock-meta span { display:block; }
.preset-stock-meta b { font-size:14px; }
.preset-stock-meta span { color:var(--muted); font-size:10.5px; line-height:1.4; margin-top:3px; }
@media(max-width:980px){.preset-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:680px){.preset-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.preset-stock-meta{padding:9px;align-items:flex-end}.preset-stock-meta .btn{padding-inline:8px}.preset-stock-meta span{font-size:9px}}
.background-replace-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
@media(max-width:420px){.background-replace-grid{grid-template-columns:1fr;}}

/* v16 — Lightroom-style local masking */
#local-mask-canvas,
#mask-ui-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#local-mask-canvas { z-index:3; pointer-events:none; }
#composite-canvas { z-index:4; }
#mask-ui-canvas { z-index:5; pointer-events:none; touch-action:none; }
.compare-line { z-index:8; }
.compare-edge-label { z-index:7; }

.mask-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0 12px; }
.mask-create-grid > :last-child:nth-child(odd) { grid-column:1/-1; }
.local-mask-list { display:grid; gap:6px; max-height:190px; overflow:auto; padding-right:2px; }
.local-mask-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:6px; align-items:stretch; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.local-mask-row.active { border-color:#6acaa5; box-shadow:0 0 0 2px rgba(65,214,155,.10); }
.mask-eye,.mask-select { appearance:none; border:0; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.mask-eye { border-right:1px solid var(--line); color:#0d8158; font-size:11px; }
.mask-select { min-width:0; text-align:left; padding:8px 9px; display:grid; gap:2px; }
.mask-select strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.mask-select small { color:var(--muted); font-size:9px; }
.mask-list-actions,.layer-order-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.mask-refine-row { display:grid; grid-template-columns:.85fr 1fr; gap:7px; }
.mask-refine-row #mask-add-component { grid-column:1/-1; }
.mask-refine-row select { min-width:0; height:34px; border:1px solid var(--line); border-radius:9px; background:#fff; padding:0 7px; font:inherit; font-size:10px; color:var(--text); }
.mask-component-list { display:grid; gap:5px; margin:10px 0; max-height:150px; overflow:auto; }
.mask-component-row { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:7px; min-height:34px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text); text-align:left; padding:4px 8px; font:inherit; font-size:10px; cursor:pointer; }
.mask-component-row.active { border-color:#7bcfb0; background:#f1fbf6; }
.mask-op { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-weight:900; background:#edf2ef; color:#235647; }
.mask-op-subtract { background:#fff0ef; color:#a13b32; }
.mask-op-intersect { background:#eef2ff; color:#4658a8; }
.mask-component-controls { display:grid; gap:8px; border-top:1px solid var(--line); padding-top:10px; }
.section-row.compact h4 { margin:0; font-size:11px; }
.toggle-row.compact { min-height:34px; }
.overlay-toggle { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:800; color:var(--muted); }
.overlay-toggle input { accent-color:#e43d3d; }
.local-adjustments { background:linear-gradient(180deg,rgba(233,252,243,.52),rgba(255,255,255,0)); }
.legacy-mask-details { padding-top:12px; }
.legacy-mask-details summary { cursor:pointer; list-style:none; font-size:10px; font-weight:850; color:var(--muted); }
.legacy-mask-details summary::-webkit-details-marker { display:none; }
.legacy-mask-details summary::after { content:'+'; float:right; }
.legacy-mask-details[open] summary::after { content:'−'; }
.legacy-mask-details[open] summary { margin-bottom:10px; }

/* Keep the photo visible while masking on compact screens. */
@media (max-width:980px) {
  .inspector-panel[data-inspector-panel="mask"] { padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  .mask-create-grid { grid-template-columns:repeat(5,minmax(88px,1fr)); overflow-x:auto; padding-bottom:4px; }
  .mask-create-grid > :last-child:nth-child(odd) { grid-column:auto; }
  .local-mask-list { max-height:128px; }
  .mask-component-list { max-height:112px; }
}
@media (max-width:520px) {
  .mask-refine-row { grid-template-columns:1fr 1fr; }
  .local-adjustments .pro-control { min-height:48px; }
  .local-mask-row { min-height:46px; }
  .mask-eye { min-width:38px; }
}


/* v17 — previews use the user's photo; themed look controls */
.look-browser,
.look-browser button,
.look-browser input {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.sidebar-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.sidebar-topline h2 { margin:0; font-size:13px; letter-spacing:-.015em; }
.sidebar-topline .mini-badge {
  background:#e8f8f0;
  border:1px solid #ccebdd;
  color:#08704c;
  border-radius:999px;
  padding:4px 8px;
  font-size:9.5px;
  font-weight:850;
  line-height:1;
}
.look-search { position:relative; display:block; }
.look-search::before {
  content:"⌕";
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-52%);
  color:#5d776c;
  font-size:14px;
  pointer-events:none;
  z-index:1;
}
.look-search input {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:38px;
  border:1px solid #cfe3d9;
  border-radius:11px;
  background:#f9fdfb;
  color:var(--text);
  padding:0 12px 0 32px;
  font-size:11.5px;
  font-weight:650;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.look-search input::placeholder { color:#81958c; font-weight:600; }
.look-search input:focus {
  background:#fff;
  border-color:#52c394;
  box-shadow:0 0 0 3px rgba(14,159,110,.12);
}
.look-category-strip {
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:1px 1px 5px;
}
.look-category-strip::-webkit-scrollbar { display:none; }
.look-category-chip {
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  min-height:30px;
  border:1px solid #d0e4da;
  border-radius:999px;
  background:#f8fcfa;
  color:#466157;
  padding:5px 10px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.look-category-chip:hover {
  background:#eef9f3;
  border-color:#a8d8c2;
  color:#135b43;
}
.look-category-chip:active { transform:scale(.97); }
.look-category-chip:focus-visible { outline:2px solid #35b981; outline-offset:2px; }
.look-category-chip.active {
  background:#123c2d;
  border-color:#123c2d;
  color:#effff7;
  box-shadow:0 5px 12px rgba(16,72,51,.12);
}
.look-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.look-card {
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #d6e7df;
  border-radius:13px;
  padding:0;
  background:#fff;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(25,77,58,.035);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.look-card:hover {
  transform:translateY(-1px);
  border-color:#8ccfb1;
  box-shadow:0 8px 20px rgba(22,88,64,.10);
}
.look-card.active {
  border-color:#18a873;
  box-shadow:0 0 0 2px rgba(14,159,110,.15),0 8px 20px rgba(22,88,64,.08);
}
.look-card.active::after {
  content:"✓";
  position:absolute;
  top:6px;
  right:6px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0e9f6e;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.look-card-preview {
  display:block;
  width:100%;
  height:78px;
  background:linear-gradient(135deg,#edf7f2,#dcefe6);
  object-fit:cover;
}
.look-card.preview-loading .look-card-preview { opacity:.72; }
.look-card-copy {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
  padding:8px 9px 9px;
  line-height:1.15;
}
.look-card-copy b {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10.5px;
  color:#173329;
}
.look-card-copy small {
  flex:none;
  margin:0;
  color:#6c8178;
  font-size:8.5px;
  white-space:nowrap;
}
@media (min-width:1400px) { .look-card-preview { height:86px; } }
@media (max-width:1200px) and (min-width:961px) { .look-card-preview { height:66px; } }
@media (max-width:960px) {
  .look-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .look-card-preview { height:72px; }
}
@media (max-width:600px) {
  .look-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .look-card-preview { height:76px; }
  .look-category-chip { min-height:34px; padding-inline:12px; font-size:10.5px; }
  .look-search input { height:42px; font-size:12px; }
}

/* v19 stabilization */
.layer-transform-grid{display:grid;gap:10px}.layer-transform-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layer-transform-actions #layer-transform-reset{grid-column:1/-1}.app-update-banner{position:fixed;z-index:9999;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border:1px solid var(--border,#dfe8e3);border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(15,35,27,.18);font-size:14px}.editor-page .app-update-banner{background:#fff;color:#16241e}@media(max-width:560px){.app-update-banner{left:10px;right:10px;bottom:76px;transform:none;justify-content:space-between}.layer-transform-actions{grid-template-columns:1fr}}
.preset-public-preview{height:168px;border-bottom:1px solid var(--border,#dfe8e3);background:linear-gradient(135deg,#dff7eb 0%,#b8ecd1 42%,#63d5a5 42%,#2fa87d 68%,#183d32 100%);position:relative;overflow:hidden}.preset-public-preview::after{content:'Preview on your photo';position:absolute;inset:auto 12px 12px;display:inline-flex;width:max-content;max-width:calc(100% - 24px);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:#214438;font-size:12px;font-weight:700;box-shadow:0 4px 16px rgba(22,66,50,.12)}

/* v20 persistent editor actions: essential commands remain reachable when toolbar items collapse. */
.inspector-quick-actions{display:grid;grid-template-columns:1fr;gap:7px;margin:0 0 10px}.inspector-quick-actions .btn{width:100%;min-height:36px}
@media(min-width:1180px){.inspector-quick-actions{grid-template-columns:1fr 1fr}.inspector-quick-actions .btn{padding-inline:8px}}

/* v21 performance + Lightroom-style masking */
.scope-performance-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}.scope-performance-row label{display:grid;gap:4px;font-size:9px;font-weight:800;color:var(--muted)}.scope-performance-row select{height:32px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:10px;padding:0 7px}.compact-switch{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--muted)}.compact-switch input{accent-color:#18a66f}.scope-refresh-now{margin-top:8px}.scope-section.scopes-off .scope-tabs,.scope-section.scopes-off .scope-canvas-stack,.scope-section.scopes-off .scope-refresh-now{display:none}.scope-section.scopes-all .scope-tabs{display:none}.scope-section.scopes-all .scope-canvas{display:block!important;height:92px;margin-top:7px}.scope-section.scopes-all #vectorscope{height:120px}.scope-section.scopes-all .scope-canvas[hidden]{display:block!important}.scope-canvas-stack{min-height:0}
.performance-summary{padding:10px 11px;border:1px solid #d8e9e0;border-radius:10px;background:#f4fbf7;color:#46655a;font-size:10px;line-height:1.45;margin:8px 0 10px}.performance-mode .site-header,.performance-mode .pro-toolbar,.performance-mode .inspector-tabs,.performance-mode .editor-mobile-tabs{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.performance-mode .pro-canvas-wrap{box-shadow:0 5px 16px rgba(22,47,37,.10)!important}.performance-mode .look-card,.performance-mode .pro-section{box-shadow:none!important}
.mask-create-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:8px 0 7px}.mask-create-title strong{font-size:11px}.mask-create-title span{font-size:9px;color:var(--muted)}.mask-tool-card{display:grid;gap:2px;min-height:50px;padding:8px 9px;border:1px solid #d7e7df;border-radius:11px;background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.15s ease}.mask-tool-card:hover,.mask-tool-card:focus-visible{border-color:#78cfac;background:#f1fbf6;outline:none;box-shadow:0 0 0 3px rgba(65,214,155,.11)}.mask-tool-card:active{transform:translateY(1px)}.mask-tool-card b{font-size:10px}.mask-tool-card small{font-size:8px;line-height:1.25;color:var(--muted)}.mask-op-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:8px 0}.mask-op-tabs button{min-width:0}.mask-refine-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.mask-refine-row #mask-add-component{grid-column:auto!important}.mask-brush-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:5px}.mask-brush-mode button{height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:10px;font-weight:800}.mask-brush-mode button.active{background:#163f30;color:#fff;border-color:#163f30}.mask-sample-hint{padding:8px 9px;border-radius:9px;background:#f4f8f6;color:#587168;font-size:9px;line-height:1.4}.mask-component-row{touch-action:manipulation}.mask-tool-card,.mask-op-tabs button,#mask-add-component{touch-action:manipulation}
@media(max-width:760px){.mask-create-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 1px 7px}.mask-tool-card{scroll-snap-align:start;min-height:56px}.mask-op-tabs{position:sticky;top:0;z-index:2;background:var(--surface,#fff);padding-top:2px}.scope-performance-row{grid-template-columns:1fr}.scope-section.scopes-all .scope-canvas{height:84px}.scope-section.scopes-all #vectorscope{height:105px}}

/* v22 AI background removal */
#bg-auto-remove{position:relative}

/* Mobile toolbar fix: keep Compare accessible instead of letting it be pushed off-screen. */
@media (max-width:960px) {
  .pro-toolbar {
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    grid-template-columns:auto auto auto;
  }
  .pro-toolbar::-webkit-scrollbar { display:none; }
  .pro-toolbar .toolbar-cluster { flex:0 0 auto; }
  .toolbar-view-controls {
    flex-shrink:0;
    min-width:max-content;
  }
  .toolbar-view-controls .compare-mode-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    white-space:nowrap;
  }
}

/* Final mobile editor toolbar override: keep view actions visible on phones. */
@media (max-width: 600px) {
  .pro-toolbar {
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:5px 8px;
  }

  .pro-toolbar > .toolbar-cluster {
    flex:0 0 auto;
  }

  .pro-toolbar .center-tools {
    display:flex;
    order:2;
    gap:6px;
  }

  .pro-toolbar .toolbar-view-controls {
    display:flex;
    order:3;
    margin-left:auto;
    flex:0 0 auto;
    min-width:max-content;
    gap:5px;
  }

  .toolbar-view-controls .compare-mode-btn {
    display:inline-flex !important;
    visibility:visible !important;
    min-width:62px;
  }

  .toolbar-view-controls .zoom-controls {
    display:flex;
  }

  .toolbar-view-controls #zoom-out,
  .toolbar-view-controls #zoom-in {
    display:inline-flex;
  }
}