/* Shiklo Photo Editor — the owner's reference style (2026-10-31): sliders with a thick rounded track in a white frame,
   a gradient fill and a white round handle with a coloured centre; buttons as glossy pills with a round icon badge at
   the left and a bold capital label, the colour saying the role (blue: main action, green: apply / done, pink:
   delete, white: everything else). The same family for tabs, choices, chips, icon buttons and fields.
   Alignment rules: an action button's badge is at its left edge with the label next to it; buttons of a group have
   one size, in a 1- or 2-column grid; panel actions end their section; the panel footer is Reset (left) | Apply
   (right); dialogs end right-aligned with Cancel, then the main action.
   Layout follows the owner's reference UI (dark header, tools left, canvas, settings right, photos below). */

/* Colours: shiklo.com's own (shiklo_site/style.css) — navy #0b1f4d bar, blue #2563eb, soft blue #e8f0fe, text #1f2937,
   grey #5b6577, lines #e3e8f0, page #f5f7fb, cards #fff; its dark set (page #0b1220, cards #121c31 …).
   Light and dark: the system's choice unless the person picks one (html[data-theme], src/theme.js). */
:root {
  --md-primary: #2563eb;
  --md-on-primary: #ffffff;
  --md-secondary-container: #e8f0fe;
  --md-on-secondary-container: #13296b;
  --md-surface: #f5f7fb;
  --md-surface-lowest: #ffffff;
  --md-surface-low: #f5f7fb;
  --md-surface-container: #edf1f8;
  --md-surface-high: #e3e8f0;
  --md-on-surface: #1f2937;
  --md-on-surface-variant: #5b6577;
  --md-outline: #7c8698;
  --md-outline-variant: #e3e8f0;
  --md-inverse-surface: #0b1f4d;
  --md-inverse-on-surface: #eef3ff;
  --md-inverse-primary: #93c5fd;
  --md-error: #c8215f;
  --md-success: #16a34a;
  --md-warn: #a15c00;
  --md-scrim: rgba(11, 31, 77, .42);
  --bg: var(--md-surface-low);
  --surface: var(--md-surface-lowest);
  --surface-2: var(--md-surface-container);
  --surface-3: var(--md-surface-high);
  --text: var(--md-on-surface);
  --text-2: var(--md-on-surface-variant);
  --muted: var(--md-outline);
  --line: var(--md-outline-variant);
  --accent: var(--md-primary);
  --accent-soft: var(--md-secondary-container);
  --head: #0b1f4d;
  --head-2: #13296b;
  --head-text: #dbe6ff;
  --stage: #e6ebf3;
  --stage-dot: rgba(11, 31, 77, .12);
  --slider-rest: #e3e8f0;
  --warn-bg: #fff4e5;
  --warn-fg: #8a4b00;
  /* the reference style */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, 0) 52%);
  --g-primary: linear-gradient(180deg, #5b95ff 0%, #2563eb 60%, #1d4ed8 100%);
  --g-success: linear-gradient(180deg, #5bd98a 0%, #22a356 60%, #178a45 100%);
  --g-danger: linear-gradient(180deg, #ff7cbc 0%, #e0367f 60%, #c22768 100%);
  --g-neutral: linear-gradient(180deg, #ffffff 0%, #f5f7fb 60%, #e9eef6 100%);
  --g-fill: linear-gradient(90deg, #2563eb 0%, #22b8e8 100%);
  --g-rest: linear-gradient(180deg, #e9eef6, #f5f7fb);
  --frame: #ffffff;
  --btn-edge: rgba(11, 31, 77, .16);
  --btn-shadow: 0 2px 5px rgba(11, 31, 77, .16), inset 0 -2px 0 rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .45);
  --soft: 0 4px 12px rgba(11, 31, 77, .12);
  --elev-1: 0 1px 3px rgba(11, 31, 77, .16), 0 1px 2px rgba(11, 31, 77, .08);
  --elev-2: 0 1px 2px rgba(11, 31, 77, .06), 0 8px 24px rgba(11, 31, 77, .1);
  --elev-3: 0 12px 34px rgba(11, 31, 77, .24);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}
/* dark: the same values for "system is dark" and "chosen dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #5b8cff; --md-secondary-container: #16244a; --md-on-secondary-container: #dbe6ff;
    --md-surface: #0b1220; --md-surface-lowest: #121c31; --md-surface-low: #0b1220; --md-surface-container: #111a2e; --md-surface-high: #1a2540;
    --md-on-surface: #e5e9f2; --md-on-surface-variant: #a3adbf; --md-outline: #7d889d; --md-outline-variant: #26324d;
    --md-inverse-surface: #e5e9f2; --md-inverse-on-surface: #0b1f4d; --md-inverse-primary: #2563eb; --md-error: #ff7cbc; --md-success: #5bd98a;
    --head: #0b1f4d; --stage: #08101d; --stage-dot: rgba(163, 173, 191, .1); --slider-rest: #26324d; --warn-bg: #3a2a12; --warn-fg: #ffcf8a;
    --g-neutral: linear-gradient(180deg, #1d2a47 0%, #17223b 60%, #121c31 100%); --g-rest: linear-gradient(180deg, #111a2e, #1a2540);
    --frame: #26324d; --btn-edge: rgba(0, 0, 0, .45);
    --gloss: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, 0) 52%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --md-primary: #5b8cff; --md-secondary-container: #16244a; --md-on-secondary-container: #dbe6ff;
  --md-surface: #0b1220; --md-surface-lowest: #121c31; --md-surface-low: #0b1220; --md-surface-container: #111a2e; --md-surface-high: #1a2540;
  --md-on-surface: #e5e9f2; --md-on-surface-variant: #a3adbf; --md-outline: #7d889d; --md-outline-variant: #26324d;
  --md-inverse-surface: #e5e9f2; --md-inverse-on-surface: #0b1f4d; --md-inverse-primary: #2563eb; --md-error: #ff7cbc; --md-success: #5bd98a;
  --head: #0b1f4d; --stage: #08101d; --stage-dot: rgba(163, 173, 191, .1); --slider-rest: #26324d; --warn-bg: #3a2a12; --warn-fg: #ffcf8a;
  --g-neutral: linear-gradient(180deg, #1d2a47 0%, #17223b 60%, #121c31 100%); --g-rest: linear-gradient(180deg, #111a2e, #1a2540);
  --frame: #26324d; --btn-edge: rgba(0, 0, 0, .45);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, 0) 52%);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 400 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; }
.hint { color: var(--text-2); font-size: 13px; line-height: 18px; margin: 0; }
.hint.warn { color: var(--md-warn); }
.hint.inline { margin-left: var(--s2); }
.mini-title { margin: var(--s2) 0 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.noscript { padding: var(--s5); }

/* ---------- state layers (hover lighter / darker, press) ---------- */
:is(.btn, .icon-btn, .hbtn, .chip, .seg-btn, .tab, .tool, .menu-item, .filter, .ready-btn, .layer-pick, .film-add, .group-head, .goal, .project-open, .toast-close, .pos-btn, .band) { position: relative; isolation: isolate; }
:is(.btn, .icon-btn, .hbtn, .chip, .seg-btn, .tab, .tool, .menu-item, .filter, .ready-btn, .layer-pick, .film-add, .group-head, .goal, .project-open, .toast-close, .pos-btn)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .15s var(--ease);
}
:is(.btn, .icon-btn, .hbtn, .chip, .seg-btn, .tab, .tool, .menu-item, .filter, .ready-btn, .layer-pick, .film-add, .group-head, .goal, .project-open, .toast-close, .pos-btn):hover:not(:disabled)::before { opacity: .07; }
:is(.btn, .icon-btn, .hbtn, .chip, .seg-btn, .tab, .tool, .menu-item, .filter, .ready-btn, .layer-pick, .film-add, .group-head, .goal, .project-open, .toast-close, .pos-btn):is(:focus-visible, :active):not(:disabled)::before { opacity: .12; }

/* ---------- buttons: glossy pill, round icon badge at the left, capital label ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 20px; border-radius: 20px; border: 1px solid var(--btn-edge); background: var(--gloss), var(--g-neutral); color: var(--md-on-surface); font-size: 12.5px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--btn-shadow); transition: transform .1s, box-shadow .15s, filter .15s; }
.btn:has(> .ico:first-child) { justify-content: flex-start; padding-left: 4px; text-align: left; }
.btn > .ico:first-child { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--g-primary); color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .5); }
.btn .ico:not(:first-child) { width: 18px; height: 18px; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgba(15, 23, 42, .18), inset 0 1px 2px rgba(0, 0, 0, .12); }
.btn:disabled { opacity: .45; box-shadow: none; }
:is(.btn-primary, .btn-success, .btn-danger) { color: #fff; border-color: rgba(0, 0, 0, .2); text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
:is(.btn-primary, .btn-success, .btn-danger) > .ico:first-child { background: rgba(0, 0, 0, .2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary { background: var(--gloss), var(--g-primary); }
.btn-success { background: var(--gloss), var(--g-success); }
.btn-danger { background: var(--gloss), var(--g-danger); }
.btn-text, .btn-tonal { /* same pill as the neutral button: one format everywhere */ }
.btn-small { height: 34px; padding: 0 16px; font-size: 11.5px; border-radius: 17px; }
.btn-small:has(> .ico:first-child) { padding-left: 3px; }
.btn-small > .ico:first-child { width: 28px; height: 28px; padding: 6px; }
.btn-big { height: 50px; padding: 0 26px; font-size: 14px; border-radius: 25px; gap: 12px; }
.btn-big:has(> .ico:first-child) { padding-left: 5px; padding-right: 28px; }
.btn-big > .ico:first-child { width: 40px; height: 40px; padding: 9px; }
.btn-wide { width: 100%; }
.btn-label { overflow: hidden; text-overflow: ellipsis; }
.btn-stack { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.btn-stack .btn { width: 100%; }
/* icon-only buttons: glossy circles */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--btn-edge); background: var(--gloss), var(--g-neutral); color: var(--md-on-surface-variant); box-shadow: 0 1px 3px rgba(15, 23, 42, .14), inset 0 -1px 0 rgba(0, 0, 0, .08); }
.icon-btn .ico { width: 19px; height: 19px; }
.icon-btn:hover:not(:disabled) { color: var(--md-primary); }

/* ---------- fields ---------- */
.input { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--md-surface-lowest); color: var(--md-on-surface); min-width: 0; font-size: 14px; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08); transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: var(--md-primary); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 3px color-mix(in srgb, var(--md-primary) 20%, transparent); }
select.input { width: 100%; }
textarea.input { height: auto; padding: 10px 14px; resize: vertical; line-height: 20px; }
.input-num { width: 100%; font-variant-numeric: tabular-nums; }
.name-wrap { display: flex; align-items: center; gap: var(--s2); }
.name-wrap .input { flex: 1; }
.name-wrap .input-num { flex: none; width: 96px; }
.name-ext { color: var(--text-2); font-size: 13px; }

/* ---------- choices: chips, segmented controls and tabs (a framed track with a gradient pill) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--btn-edge); background: var(--gloss), var(--g-neutral); color: var(--md-on-surface); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), inset 0 -1px 0 rgba(0, 0, 0, .06); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: rgba(0, 0, 0, .2); background: var(--gloss), var(--g-primary); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 22px; background: var(--g-rest); box-shadow: 0 0 0 2px var(--frame), 0 2px 6px rgba(15, 23, 42, .12), inset 0 1px 3px rgba(15, 23, 42, .1); }
.seg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: transparent; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.seg-btn[aria-checked="true"] { background: var(--gloss), var(--g-primary); color: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, .2); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.seg-small { display: flex; width: 100%; }
.seg-small .seg-btn { flex: 1; min-width: 0; height: 30px; font-size: 11.5px; }
.row-2, .row-3 { display: grid; gap: var(--s2); }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-2 .btn { width: 100%; padding-right: 10px; white-space: nowrap; font-size: 11.5px; letter-spacing: .02em; }
.row-end { display: flex; justify-content: flex-end; gap: var(--s2); }

/* ---------- sliders: thick framed track, gradient fill, white handle with a coloured centre ---------- */
/* label left, value right on one line; the long bar under them, the full width of the panel */
.slider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label reset" "track track"; align-items: center; column-gap: var(--s3); row-gap: 0; padding: 6px 0 2px; min-height: 30px; }
.slider-row > .slider-label { grid-area: label; }
.slider-row > .m3-slider, .slider-row > .slider { grid-area: track; }
.slider-row > .slider-num, .slider-row > .range-out { grid-area: num; justify-self: end; }
.slider-label { font-size: 14px; color: var(--md-on-surface); user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.slider-num { width: 52px; height: 30px; padding: 0 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--md-surface-lowest); text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--md-on-surface); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .1); -moz-appearance: textfield; }
.slider-num:focus { outline: none; border-color: var(--md-primary); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .1), 0 0 0 3px color-mix(in srgb, var(--md-primary) 20%, transparent); }
.slider-num::-webkit-inner-spin-button, .slider-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.range-out { min-width: 40px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--md-on-surface-variant); }
.m3-slider { position: relative; display: block; min-width: 0; --pos: 0; }
.m3-bubble { position: absolute; bottom: calc(50% + 16px); left: calc(12px + var(--pos) * (100% - 24px)); min-width: 30px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--g-primary); color: #fff; font-size: 12px; line-height: 24px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--elev-1); transform: translateX(-50%) scale(0); transform-origin: 50% 100%; transition: transform .12s var(--ease); pointer-events: none; z-index: 2; }
.m3-slider.is-active .m3-bubble { transform: translateX(-50%) scale(1); }
.slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; --tick: transparent; --rest: var(--slider-rest); }
.m3-slider.is-bipolar .slider { --tick: #ffffff; }
.slider:focus-visible { outline: none; }
/* the track: the gradient shows only between --from and --to; a white stop at 0 on two-sided sliders */
.slider::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; box-shadow: 0 0 0 3px var(--frame), 0 3px 8px 2px rgba(15, 23, 42, .12);
  background: radial-gradient(circle at 50% 50%, var(--tick) 0 2.5px, transparent 3px), linear-gradient(to right, var(--rest) var(--from, 0%), transparent var(--from, 0%), transparent var(--to, 0%), var(--rest) var(--to, 0%)), var(--g-fill); }
.slider::-moz-range-track { height: 12px; border-radius: 6px; box-shadow: 0 0 0 3px var(--frame), 0 3px 8px 2px rgba(15, 23, 42, .12);
  background: radial-gradient(circle at 50% 50%, var(--tick) 0 2.5px, transparent 3px), linear-gradient(to right, var(--rest) var(--from, 0%), transparent var(--from, 0%), transparent var(--to, 0%), var(--rest) var(--to, 0%)), var(--g-fill); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -6px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--md-primary) 0 4.5px, #fff 5px 7px, #ffffff 7.5px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 3px 8px rgba(15, 23, 42, .3); transition: transform .12s var(--ease); }
.slider::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--md-primary) 0 4.5px, #fff 5px 7px, #ffffff 7.5px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 3px 8px rgba(15, 23, 42, .3); }
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { transform: scale(1.1); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider-temp::-webkit-slider-runnable-track { background: linear-gradient(to right, #3b82f6, #e3e8f1 50%, #f59e0b); }
.slider-temp::-moz-range-track { background: linear-gradient(to right, #3b82f6, #e3e8f1 50%, #f59e0b); }
.slider-tint::-webkit-slider-runnable-track { background: linear-gradient(to right, #22c55e, #e3e8f1 50%, #d946ef); }
.slider-tint::-moz-range-track { background: linear-gradient(to right, #22c55e, #e3e8f1 50%, #d946ef); }
.range-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: var(--s4); }

/* ---------- brand, header (the same pills on the dark bar) ---------- */
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.brand-logo { width: 32px; height: 32px; flex: none; }
.brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-name { font-size: 18px; line-height: 24px; white-space: nowrap; }
.brand-name b { font-weight: 800; }
.brand-name span { font-weight: 400; color: var(--head-text); }
.hbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 4px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); color: var(--head-text); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .4); }
.hbtn > .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hbtn:disabled { opacity: .38; }
.hbtn-primary { background: var(--gloss), var(--g-primary); color: #fff; border-color: rgba(0, 0, 0, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.hbtn-primary > .ico { background: rgba(0, 0, 0, .2); }
.hbtn[aria-pressed="true"] { background: linear-gradient(180deg, rgba(91, 149, 255, .45), rgba(37, 99, 235, .35)); color: #fff; border-color: rgba(147, 180, 255, .5); }
.hbtn[data-state="saved"] > .ico { background: rgba(34, 163, 86, .55); color: #fff; }
.hbtn-close, .hbtn-more, .hbtn-theme { width: 38px; padding: 0; justify-content: center; }
.hbtn-theme > .ico { background: transparent; }
.home-header-end { display: flex; align-items: center; gap: var(--s2); }
.hbtn-close > .ico, .hbtn-more > .ico { background: transparent; }
.hbtn-more { display: none; }

/* ---------- editor (desktop) ---------- */
.editor {
  position: fixed; inset: 0; display: grid; background: var(--bg);
  grid-template-columns: 256px minmax(0, 1fr) 256px;   /* the two side panels the same width (owner) */
  grid-template-rows: 64px minmax(0, 1fr) 120px;
  grid-template-areas: "header header header" "tools stage panel" "tools strip ready";
}
.ed-header { grid-area: header; position: relative; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); background: var(--head); z-index: 3; }
.ed-header .hbtn-close { order: 9; }
.ed-header-mid { flex: 1; display: flex; justify-content: center; gap: var(--s2); }
.ed-header-end { display: flex; gap: var(--s2); align-items: center; }
.menu { position: absolute; right: 8px; top: 58px; min-width: 230px; padding: 8px; border-radius: 16px; background: var(--md-surface-lowest); box-shadow: var(--elev-3); z-index: 20; display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: var(--s3); height: 48px; padding: 0 12px 0 6px; border: 0; border-radius: 24px; background: transparent; color: var(--md-on-surface); text-align: left; font-size: 14px; font-weight: 600; }
.menu-item > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--md-surface-container); color: var(--md-primary); }

/* tool list: the selected tool is a gradient pill with its icon in a badge */
.ed-tools { grid-area: tools; display: flex; flex-direction: column; gap: 4px; padding: var(--s3); background: var(--md-surface-lowest); border-right: 1px solid var(--line); overflow-y: auto; }
.tool { display: flex; align-items: center; gap: var(--s3); height: 46px; flex: none; padding: 0 var(--s3) 0 6px; border: 1px solid transparent; border-radius: 23px; background: transparent; text-align: left; font-size: 14px; font-weight: 600; color: var(--md-on-surface); transition: background .15s, border-color .15s; }
.tool:hover:not([aria-current="true"]) { background: var(--md-secondary-container); border-color: color-mix(in srgb, var(--md-primary) 18%, transparent); }
.tool:has(.soon-dot):not([aria-current="true"]) { color: var(--md-on-surface-variant); font-weight: 500; }
.tool > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--md-secondary-container); color: var(--md-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-primary) 14%, transparent); }
.tool:has(.soon-dot):not([aria-current="true"]) > .ico { background: var(--md-surface-container); color: var(--md-outline); box-shadow: none; }
.tool[aria-current="true"] { background: var(--gloss), var(--g-primary); color: #fff; border-color: rgba(0, 0, 0, .18); box-shadow: var(--btn-shadow); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.tool[aria-current="true"] > .ico { background: rgba(0, 0, 0, .2); color: #fff; }
.tool-home { margin-bottom: var(--s2); }
.tool-home::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -7px; height: 1px; background: var(--line); }
.soon-dot { position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--md-outline-variant); }

.ed-stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 var(--s4); }
.ed-canvasbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 60px; }
.ed-quick, .ed-zoom { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 24px; background: var(--g-rest); box-shadow: 0 0 0 2px var(--frame), 0 3px 8px rgba(15, 23, 42, .12); }
.ed-quick .sep { width: 1px; height: 24px; margin: 0 2px; background: var(--line); }
.zoom-sel { height: 34px; padding: 0 10px; border: 1px solid var(--btn-edge); border-radius: 17px; background: var(--gloss), var(--g-neutral); color: var(--md-on-surface); min-width: 84px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viewer { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 18px; background-color: var(--stage); background-image: radial-gradient(circle, var(--stage-dot) 1px, transparent 1.2px); background-size: 18px 18px; box-shadow: inset 0 1px 4px rgba(15, 23, 42, .1); }
.view-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
.view-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viewer.is-panning .view-canvas { cursor: grabbing; }
.ed-info { position: absolute; left: var(--s3); bottom: var(--s3); padding: 2px 10px; border-radius: 12px; background: rgba(15, 23, 42, .6); color: #fff; font-size: 12px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.view-tag { position: absolute; left: 0; top: 0; padding: 4px 12px; border-radius: 14px; background: rgba(15, 23, 42, .7); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; transition: opacity .15s; }
.split-handle { position: absolute; left: 0; top: 0; width: 0; cursor: ew-resize; touch-action: none; }
.split-line { position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); }
.split-handle::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 32px; }
.split-knob { position: absolute; left: -20px; top: calc(50% - 20px); width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: radial-gradient(circle, #fff 0 60%, #fff 61%); color: var(--md-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 3px 10px rgba(15, 23, 42, .35); cursor: ew-resize; }
.view-busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); background: color-mix(in srgb, var(--stage) 82%, transparent); color: var(--text-2); font-weight: 600; }

/* settings panel */
.ed-panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; background: var(--md-surface-lowest); border-left: 1px solid var(--line); }
.sheet-handle { display: none; }
/* tabs: a framed track with the selected tab as a gradient pill (the slider's format) */
.tabs { display: flex; flex: none; gap: 2px; margin: var(--s3) var(--s4); padding: 3px; border-radius: 22px; background: var(--g-rest); box-shadow: 0 0 0 2px var(--frame), 0 2px 6px rgba(15, 23, 42, .12), inset 0 1px 3px rgba(15, 23, 42, .1); }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; border: 0; border-radius: 17px; background: transparent; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.tab[aria-selected="true"] { background: var(--gloss), var(--g-primary); color: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, .2); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.tab:not([aria-selected="true"]):hover { color: var(--md-on-surface); }
.panel-title { flex: none; margin: 0; height: 58px; display: flex; align-items: center; padding: 0 var(--s5); font-size: 16px; line-height: 24px; font-weight: 700; border-bottom: 1px solid var(--line); }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-footer { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--md-surface-lowest); }
.panel-footer .btn { width: 100%; }
.group { border-bottom: 1px solid var(--line); }
.group-head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 var(--s5); border: 0; background: transparent; font-weight: 700; font-size: 14px; color: var(--md-on-surface); }
.group-head .ico { width: 20px; height: 20px; color: var(--md-on-surface-variant); transition: transform .2s var(--ease); }
.group-head[aria-expanded="true"] .ico { transform: rotate(180deg); }
.group-rows { display: flex; flex-direction: column; gap: 0; padding: 0 var(--s5) var(--s3); }
.group-rows .hint { margin-top: var(--s1); }
.panel-sub { margin: 0; padding: var(--s4) var(--s5) var(--s1); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.soon { padding: var(--s6) var(--s5); text-align: center; color: var(--text-2); }
.soon-icon { display: inline-flex; width: 60px; height: 60px; padding: 14px; border-radius: 50%; background: var(--g-primary); color: #fff; box-shadow: var(--btn-shadow); }
.soon-icon .ico { width: 32px; height: 32px; }
.soon-title { margin: var(--s3) 0 var(--s1); color: var(--md-on-surface); font-weight: 700; font-size: 16px; }

/* adjust extras */
.histo-wrap { padding: var(--s3) var(--s5) var(--s1); }
.histogram { display: block; width: 100%; height: 72px; border-radius: 12px; background: var(--md-surface-container); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08); }
.curve { display: flex; flex-direction: column; gap: var(--s3); }
.curve-canvas { display: block; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto; border-radius: 12px; touch-action: none; cursor: crosshair; --curve-bg: var(--md-surface-container); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08); }
.bands { display: flex; justify-content: space-between; margin: var(--s1) 0 var(--s2); }
.band { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: transparent; display: flex; align-items: center; justify-content: center; }
.band-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--band); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), inset 0 2px 0 rgba(255, 255, 255, .3); }
.band[aria-checked="true"] { border-color: var(--md-on-surface); }
.band.is-changed::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--md-primary); border: 2px solid var(--md-surface-lowest); }

/* enhance (AI Tools tab) */
.enhance { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.enhance-actions { display: flex; flex-direction: column; gap: var(--s2); }
.enhance-done { padding: var(--s4); border-radius: 16px; background: var(--md-surface-container); display: flex; flex-direction: column; gap: var(--s2); }
.enhance-title { display: flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 700; }
.enhance-title .ico { color: var(--md-success); }
.enhance-notes { margin: 0; font-size: 14px; color: var(--md-on-surface-variant); }

.enhance-done .row-end .btn { width: 100%; }
.ai-soon { display: flex; flex-direction: column; margin-top: var(--s2); }
.ai-soon-row { display: flex; align-items: center; gap: var(--s3); height: 52px; color: var(--md-on-surface); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.ai-soon-row > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.ai-soon-row .soon-tag { margin-left: auto; }

/* effects */
.filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s2); }
.filter { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 4px 8px; border: 0; border-radius: 14px; background: transparent; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--md-on-surface-variant); }
.filter-thumb { width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--md-surface-container); display: block; box-shadow: 0 0 0 3px var(--frame), 0 3px 8px rgba(15, 23, 42, .14); }
.filter[aria-checked="true"] { color: var(--md-primary); }
.filter[aria-checked="true"] .filter-thumb { box-shadow: 0 0 0 3px var(--md-primary), 0 3px 8px rgba(15, 23, 42, .2); }

/* text, crop, resize */
.text-panel, .geo-panel { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.layer-list { display: flex; flex-direction: column; gap: 6px; }
.layer-row { display: flex; align-items: center; gap: var(--s1); border-radius: 24px; padding-right: 4px; background: var(--md-surface-container); }
.layer-row.is-selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-primary) 35%, transparent); }
.layer-pick { flex: 1; display: flex; align-items: center; gap: var(--s3); min-width: 0; height: 48px; padding: 0 var(--s4) 0 7px; border: 0; border-radius: 24px; background: transparent; text-align: left; font-size: 14px; font-weight: 600; }
.layer-pick > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--md-surface-lowest); color: var(--md-primary); flex: none; }
.layer-pick span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-row .icon-btn { width: 34px; height: 34px; color: var(--md-error); }
.layer-props { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s1); }
.layer-props:empty { display: none; }
.layer-text { width: 100%; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; box-shadow: 0 0 0 2px var(--frame), 0 2px 5px rgba(15, 23, 42, .2), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.color-pick { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 16px; background: var(--md-surface-lowest); }
.pos-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.pos-btn { width: 44px; height: 32px; padding: 0; border: 1px solid var(--btn-edge); border-radius: 16px; background: var(--gloss), var(--g-neutral); display: flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.pos-btn span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.pos-btn[aria-pressed="true"] { background: var(--gloss), var(--g-primary); color: #fff; border-color: rgba(0, 0, 0, .2); }
.pos-btn[aria-pressed="true"] span { opacity: 1; }
.crop-size { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.size-row { display: grid; grid-template-columns: 1fr 1fr 84px; gap: var(--s2); }
.size-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--md-on-surface-variant); }

/* photos strip, "Make it ready for" */
.ed-strip { grid-area: strip; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); min-width: 0; }
.film-add { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 104px; height: 88px; border: 2px dashed var(--md-outline-variant); border-radius: 14px; background: transparent; color: var(--md-primary); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.film-add > .ico { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--g-primary); color: #fff; box-shadow: var(--btn-shadow); }
.film { display: flex; gap: var(--s3); overflow-x: auto; min-width: 0; padding: 5px; scrollbar-width: thin; }
.film-cell { position: relative; flex: none; }
.film-item { position: relative; display: block; width: 128px; height: 88px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--md-surface-container); box-shadow: 0 0 0 3px var(--frame), 0 3px 8px rgba(15, 23, 42, .16); }
.film-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-item[aria-current="true"] { box-shadow: 0 0 0 3px var(--md-primary), 0 3px 10px rgba(37, 99, 235, .35); }
.film-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--md-on-surface-variant); }
.film-check { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--g-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.film-check .ico { width: 14px; height: 14px; }
.film-x { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--g-danger); color: #fff; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.film-x .ico { width: 14px; height: 14px; }
.film-cell:hover .film-x, .film-x:focus-visible { opacity: 1; }
@media (pointer: coarse) { .film-x { opacity: 1; } }
.ed-ready { grid-area: ready; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--md-surface-lowest); border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; }
.ed-ready h3 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ready-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ready-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 66px; padding: 4px 2px; border: 1px solid var(--btn-edge); border-radius: 14px; background: var(--gloss), var(--g-neutral); font-size: 10.5px; font-weight: 700; line-height: 13px; text-align: center; color: var(--md-on-surface-variant); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.ready-btn > .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--g-primary); color: #fff; }
.ready-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- tablets: tools as icons ---------- */
@media (max-width: 1180px) and (min-width: 761px) {
  .editor { grid-template-columns: 92px minmax(0, 1fr) 324px; }
  .ed-tools { padding: var(--s3) 6px; align-items: stretch; }
  .tool { flex-direction: column; justify-content: center; gap: 4px; height: 66px; padding: 4px 2px; border-radius: 14px; font-size: 11px; line-height: 13px; text-align: center; }
  .tool[aria-current="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; border-color: transparent; text-shadow: none; }
  .tool[aria-current="true"] > .ico { background: var(--g-primary); }
  .tool-label { line-height: 13px; }
  .soon-dot { top: 8px; right: 10px; margin: 0; }
  .ed-header .btn-label { display: none; }
  .ed-header .hbtn { padding: 0 4px; }
  .ed-header .hbtn-primary .btn-label { display: inline; }
  .ed-header .hbtn-primary { padding: 0 18px 0 4px; }
  .brand-name span { display: none; }
}

/* ---------- phones: top bar, canvas, a settings sheet, the tool bar ---------- */
@media (max-width: 760px) {
  .editor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 58px minmax(0, 1fr) auto auto 76px;
    grid-template-areas: "header" "stage" "strip" "panel" "tools";
  }
  .ed-header { gap: 4px; padding: 0 6px; padding-top: env(safe-area-inset-top); }
  .ed-header .hbtn-close { order: 0; }
  .ed-header .brand, .ed-header .btn-label, .hbtn-reset, .hbtn-save, .hbtn-share, .ed-header .hbtn-theme { display: none; }
  .ed-header .hbtn-primary .btn-label { display: inline; }
  .hbtn-more { display: inline-flex; }
  .ed-header-mid { gap: 4px; justify-content: flex-start; }
  .ed-header .hbtn:not(.hbtn-primary) { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .ed-header .hbtn:not(.hbtn-primary) > .ico { background: transparent; }
  .hbtn-primary { padding: 0 16px 0 4px; margin-left: auto; }
  .ed-stage { padding: 0; }
  .ed-canvasbar { height: 60px; padding: 0 10px; gap: var(--s2); }
  .ed-quick { overflow-x: auto; scrollbar-width: none; }
  .ed-quick::-webkit-scrollbar { display: none; }
  .ed-zoom .icon-btn:not(:last-child) { display: none; }
  .viewer { border-radius: 0; box-shadow: none; }
  .ed-strip { display: none; padding: 6px 10px; gap: var(--s2); background: var(--md-surface-lowest); border-top: 1px solid var(--line); }
  .editor.has-film:not(.sheet-open) .ed-strip { display: flex; }
  .film-add { width: 52px; height: 46px; font-size: 0; gap: 0; border-radius: 10px; }
  .film-add > .ico { width: 28px; height: 28px; padding: 6px; }
  .film-item { width: 62px; height: 46px; border-radius: 10px; }
  .film-check { width: 18px; height: 18px; right: 3px; top: 3px; }
  .film-x { width: 20px; height: 20px; left: 3px; top: 3px; }
  /* the settings sheet */
  .ed-panel { height: 0; border-left: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(15, 23, 42, .16); overflow: hidden; transition: height .25s var(--ease); }
  .editor.sheet-open .ed-panel { height: var(--sheet-h, 46vh); }
  .sheet-handle { display: flex; flex: none; align-items: center; justify-content: center; height: 22px; width: 100%; padding: 0; border: 0; background: transparent; touch-action: none; cursor: grab; }
  .sheet-handle span { width: 40px; height: 5px; border-radius: 3px; background: var(--md-outline-variant); }
  .tabs { margin: 4px var(--s4) var(--s2); }
  .panel-title { height: 44px; font-size: 15px; padding: 0 var(--s4); }
  .panel-footer { padding: var(--s2) var(--s4); }
  .slider-row { padding: 4px 0; }
  .slider-num { width: 54px; height: 34px; border-radius: 17px; font-size: 14px; }
  .slider { height: 44px; }
  .slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -8px; }
  .group-head, .group-rows, .histo-wrap, .text-panel, .geo-panel, .enhance { padding-left: var(--s4); padding-right: var(--s4); }
  .histogram { height: 52px; }
  .histo-wrap { padding-top: var(--s2); }
  .size-row { grid-template-columns: 1fr 1fr 76px; }
  .ed-ready { display: none; }
  /* tool bar */
  .ed-tools { flex-direction: row; align-items: center; gap: 0; padding: 0 4px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .ed-tools::-webkit-scrollbar { display: none; }
  .tool { flex-direction: column; justify-content: center; flex: none; gap: 4px; width: 74px; height: 70px; padding: 0; border: 0; border-radius: 14px; font-size: 11px; line-height: 13px; text-align: center; scroll-snap-align: start; }
  .tool[aria-current="true"] { background: transparent; box-shadow: none; color: var(--md-primary); text-shadow: none; border-color: transparent; }
  .tool > .ico { width: 36px; height: 36px; padding: 8px; }
  .tool[aria-current="true"] > .ico { background: var(--gloss), var(--g-primary); color: #fff; box-shadow: var(--btn-shadow); }
  .tool-home { margin: 0; }
  .tool-home::after { display: none; }
  .soon-dot { top: 8px; right: 16px; margin: 0; }
  .toasts { bottom: 150px; }
}

/* ---------- home ---------- */
.home-header { background: var(--head); padding-top: env(safe-area-inset-top); }
.home-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); }
.drop { padding: var(--s5); border: 2px dashed var(--md-outline-variant); border-radius: 20px; background: var(--md-surface-lowest); }
.drop-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.drop-hint { margin: var(--s4) 0 2px; color: var(--md-on-surface); font-size: 14px; }
.drop-formats { margin: 0; color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; }
.goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.goal { display: flex; align-items: center; gap: var(--s4); min-height: 88px; padding: var(--s4); border: 1px solid var(--md-outline-variant); border-radius: 18px; background: var(--md-surface-lowest); color: var(--md-on-surface); text-align: left; box-shadow: 0 2px 6px rgba(15, 23, 42, .06); transition: box-shadow .15s var(--ease); }
.goal:hover:not(.goal-soon) { box-shadow: var(--elev-2); }
.goal-icon { flex: none; display: flex; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 70%, #fff), var(--hue)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 5px rgba(15, 23, 42, .18); }
.goal-icon .ico { width: 24px; height: 24px; }
.goal-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goal-words b { font-size: 16px; line-height: 22px; font-weight: 700; }
.goal-text { color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; }
.goal-go { margin-left: auto; color: var(--md-on-surface-variant); transform: rotate(-90deg); }
.goal-soon { background: var(--md-surface-low); border-color: transparent; box-shadow: none; }
.goal-soon .goal-icon { filter: grayscale(.8); opacity: .6; }
.soon-tag { flex: none; height: 20px; padding: 0 9px; border-radius: 10px; background: var(--md-surface-high); color: var(--md-on-surface-variant); font-size: 10.5px; line-height: 20px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.goal .soon-tag { margin-left: auto; align-self: flex-start; }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.project { position: relative; border: 1px solid var(--md-outline-variant); border-radius: 18px; background: var(--md-surface-lowest); overflow: hidden; transition: box-shadow .15s var(--ease); }
.project:hover { box-shadow: var(--elev-2); }
.project-open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 0 var(--s3); border: 0; background: transparent; color: var(--md-on-surface); text-align: left; }
.project-thumb { display: block; aspect-ratio: 4 / 3; background: var(--md-surface-high); margin-bottom: var(--s2); }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-name { padding: 0 var(--s4); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-meta { padding: 0 var(--s4); color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; }
.project-del { position: absolute; right: 8px; top: 8px; color: var(--md-error); opacity: 0; transition: opacity .15s; }
.project:hover .project-del, .project-del:focus-visible { opacity: 1; }
@media (pointer: coarse) { .project-del { opacity: 1; } }
.home-foot { border-top: 1px solid var(--md-outline-variant); background: var(--md-surface-low); }
.home-foot > * { max-width: 1200px; margin: 0 auto; padding: var(--s3) var(--s5); }
.home-privacy { display: flex; gap: var(--s2); align-items: center; color: var(--md-on-surface-variant); font-size: 14px; padding-top: var(--s4) !important; }
.home-copy { color: var(--md-on-surface-variant); font-size: 12px; padding-bottom: var(--s4) !important; }
@media (max-width: 760px) {
  .home-bar { padding: 0 var(--s4); height: 56px; }
  .drop { padding: var(--s4); }
  .drop-actions .btn { flex: 1; }
  .goals { grid-template-columns: 1fr; }
  .goal { min-height: 76px; }
  .home-foot > * { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ---------- the start dialog over the editor (no Home page: owner, 2026-11-01) ---------- */
.start { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--md-scrim); }
.start[hidden] { display: none; }
.start-card { display: flex; flex-direction: column; width: min(880px, 100%); max-height: calc(100vh - 32px); border-radius: 24px; background: var(--md-surface); box-shadow: var(--elev-3); overflow: hidden; }
.start-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s4) var(--s2) var(--s5); }
.start-title { flex: 1; margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; }
.start-body { overflow: auto; padding: var(--s2) var(--s5) var(--s5); }
.start-sec { margin-top: var(--s5); }
.start-sec h2 { margin: 0 0 var(--s3); font-size: 16px; line-height: 22px; font-weight: 800; }
.start .goals { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); }
.start .goal { min-height: 64px; padding: var(--s3); gap: var(--s3); border-radius: 14px; }
.start .goal-icon { width: 40px; height: 40px; padding: 9px; }
.start .goal-icon .ico { width: 22px; height: 22px; }
.start .goal-words b { font-size: 14px; line-height: 20px; }
.start .goal-text { font-size: 12px; line-height: 16px; }
.start .recent { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.start-goal { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s3); border-radius: 14px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.start-goal[hidden] { display: none; }
.start-goal .goal-icon { width: 40px; height: 40px; padding: 9px; }
.start-goal-text { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 18px; }
.start-goal-text b { font-size: 15px; line-height: 22px; }
.start-privacy { display: flex; gap: var(--s2); align-items: center; margin: var(--s5) 0 0; color: var(--md-on-surface-variant); font-size: 13px; }
@media (max-width: 760px) {
  .start { padding: 0; align-items: flex-end; }
  .start-card { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
  .start-body { padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
  .start .goals { grid-template-columns: 1fr; }
  .start-install .btn-label { display: none; }
}

/* the editor with no photo: the canvas says so; the canvas bar and the settings wait for a photo */
.ed-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s5); text-align: center; color: var(--text-2); }
.editor.no-photo .ed-empty { display: flex; }
.ed-empty-icon { display: flex; width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--md-surface-lowest); color: var(--md-primary); box-shadow: var(--elev-1); }
.ed-empty-icon .ico { width: 32px; height: 32px; }
.ed-empty-title { margin: var(--s2) 0 0; font-size: 18px; font-weight: 800; color: var(--md-on-surface); }
.ed-empty .hint { margin: 0 0 var(--s3); }
.editor.no-photo .ed-canvasbar, .editor.no-photo .panel-body, .editor.no-photo .panel-footer, .editor.no-photo .ed-header-mid,
.editor.no-photo .hbtn-save, .editor.no-photo .hbtn-share, .editor.no-photo .hbtn-primary, .editor.no-photo .ed-ready { opacity: .45; pointer-events: none; }
.editor.no-photo .ed-info { display: none; }

/* ---------- dialogs, progress, toasts ---------- */
dialog { color: var(--md-on-surface); }
.dlg { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--md-surface-lowest); box-shadow: var(--elev-3); }
.dlg-wide { width: min(560px, calc(100vw - 32px)); }
.dlg::backdrop, .task::backdrop { background: var(--md-scrim); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s4) var(--s2) var(--s5); }
.dlg-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 800; }
.dlg-body { padding: var(--s2) var(--s5); }
.dlg-body > p { margin: 0 0 var(--s2); color: var(--md-on-surface-variant); }
.dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); margin-top: var(--s3); }
.dlg-foot .btn { min-width: 120px; }
.task { width: min(320px, calc(100vw - 48px)); padding: var(--s6) var(--s5); border: 0; border-radius: 24px; background: var(--md-surface-lowest); text-align: center; box-shadow: var(--elev-3); }
.task-text { margin: var(--s4) 0 0; font-size: 14px; font-weight: 600; color: var(--md-on-surface); }
.task-bar { height: 12px; margin-top: var(--s4); border-radius: 6px; background: var(--g-rest); overflow: hidden; box-shadow: 0 0 0 3px var(--frame), 0 2px 6px rgba(15, 23, 42, .12); }
.task-fill { height: 100%; width: 0; border-radius: 6px; background: var(--g-fill); transition: width .2s; }
.spinner { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--md-surface-high); border-top-color: var(--md-primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s2); z-index: 30; width: max-content; max-width: min(560px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 6px 6px 6px 8px; border-radius: 26px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); box-shadow: var(--elev-3); font-size: 14px; line-height: 20px; font-weight: 500; animation: toast-in .2s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast > .ico { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--g-success); color: #fff; }
.toast-info > .ico { background: var(--g-primary); }
.toast-error > .ico { background: var(--g-danger); }
.toast-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--md-inverse-on-surface); border-radius: 50%; }
.drop-overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--md-primary) 12%, transparent); border: 3px dashed var(--md-primary); pointer-events: none; }
.drop-overlay div { padding: var(--s4) var(--s5); border-radius: 20px; background: var(--md-surface-lowest); font-weight: 700; font-size: 18px; box-shadow: var(--elev-2); }

/* export form */
.export-form { display: flex; flex-direction: column; gap: var(--s4); }
.form-row { display: flex; flex-direction: column; gap: var(--s2); }
.form-label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.export-form .seg { align-self: flex-start; }
.target-box { display: flex; flex-direction: column; gap: var(--s3); }
.target-row { display: flex; flex-wrap: wrap; gap: var(--s4); }
.target-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.target-row .input-num { width: 88px; }
.details-box { display: flex; flex-direction: column; gap: 4px; }
.radio { display: flex; align-items: center; gap: var(--s3); min-height: 40px; font-size: 14px; }
.radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--md-primary); }

/* ---------- the value on the slider (owner, 2026-10-31): the handle is a pill showing the value ---------- */
.m3-slider { --tw: 46px; --th: 26px; }
.slider-thumb { position: absolute; top: 50%; left: calc(var(--tw) / 2 + var(--pos) * (100% - var(--tw))); width: var(--tw); height: var(--th); border-radius: calc(var(--th) / 2); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: var(--gloss), var(--g-neutral); border: 1px solid rgba(15, 23, 42, .1); box-shadow: 0 0 0 2px var(--frame), 0 3px 8px rgba(15, 23, 42, .28); color: var(--md-primary); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; pointer-events: none; z-index: 2; transition: transform .12s var(--ease), box-shadow .12s; }
.m3-slider.is-active .slider-thumb { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 2px var(--frame), 0 0 0 7px color-mix(in srgb, var(--md-primary) 16%, transparent), 0 3px 8px rgba(15, 23, 42, .28); }
.m3-slider:hover .slider-thumb { box-shadow: 0 0 0 2px var(--frame), 0 0 0 6px color-mix(in srgb, var(--md-primary) 10%, transparent), 0 3px 8px rgba(15, 23, 42, .28); }
.m3-slider.is-changed .slider-thumb { background: var(--gloss), var(--g-primary); color: #fff; border-color: rgba(0, 0, 0, .18); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.m3-slider:has(.slider:focus-visible) .slider-thumb { outline: 2px solid var(--md-primary); outline-offset: 3px; }
.m3-bubble { display: none; }
/* the real handle: invisible, the pill's size, so dragging lands where the pill is */
.slider::-webkit-slider-thumb { width: 46px !important; height: 26px !important; margin-top: -7px !important; background: transparent !important; box-shadow: none !important; border: 0; transform: none !important; }
.slider::-moz-range-thumb { width: 46px; height: 26px; background: transparent; box-shadow: none; border: 0; }
.slider { height: 36px; }
.slider-row > .slider-label { grid-area: label; }
.slider-reset { grid-area: reset; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.slider-reset .ico { width: 15px; height: 15px; }
.slider-reset:hover { color: var(--md-primary); }
@media (max-width: 760px) {
  .m3-slider { --tw: 52px; --th: 30px; }
  .slider::-webkit-slider-thumb { width: 52px !important; height: 30px !important; margin-top: -9px !important; }
  .slider { height: 44px; }
  .slider-reset { width: 32px; height: 32px; }
}

/* ---------- Resize panel ---------- */
.resize-panel { gap: 0; }
.panel-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0 var(--s5); border-bottom: 1px solid var(--line); }
.panel-card + .panel-card { padding-top: var(--s4); }
.panel-card:last-child { border-bottom: 0; }
.panel-card > .mini-title { margin: 0; }
.seg-fill { display: flex; width: 100%; }
.seg-fill .seg-btn { flex: 1; min-width: 0; padding: 0 6px; }
.size-fields { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: end; gap: var(--s2); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 11.5px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.field-box { position: relative; display: block; }
.field-box .input { width: 100%; padding-right: 44px; font-weight: 700; font-size: 15px; }
.field-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--md-on-surface-variant); pointer-events: none; text-transform: uppercase; }
.lock-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--btn-edge); background: var(--gloss), var(--g-neutral); color: var(--md-on-surface-variant); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
.lock-btn[aria-pressed="true"] { background: var(--gloss), var(--g-primary); color: #fff; border-color: rgba(0, 0, 0, .2); }
.lock-btn .ico { width: 18px; height: 18px; }
.size-outcome { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.size-outcome .ico { width: 16px; height: 16px; transform: rotate(-90deg); }
.size-outcome b { color: var(--md-on-surface); }
.size-outcome.is-changed b { color: var(--md-primary); }
.note { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 18px; }
.note .ico { width: 18px; height: 18px; flex: none; }
.note-warn { background: var(--warn-bg); color: var(--warn-fg); }
.dpi-row { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.dpi-row .field { max-width: 160px; }
.print-card { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 20px; background: var(--md-surface-container); }
.print-card > .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--g-primary); color: #fff; flex: none; }
.print-card > div { display: flex; flex-direction: column; min-width: 0; }
.print-size { font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.print-sub { font-size: 11.5px; line-height: 14px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-list { display: flex; flex-direction: column; gap: 6px; }
.preset-group { margin: var(--s2) 0 0; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-outline); }
.preset-group:first-child { margin-top: 0; }
.preset { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); height: 44px; padding: 0 14px 0 6px; border: 1px solid var(--btn-edge); border-radius: 22px; background: var(--gloss), var(--g-neutral); color: var(--md-on-surface); text-align: left; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); position: relative; isolation: isolate; }
.preset::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--md-primary); opacity: 0; transition: opacity .15s; z-index: -1; }
.preset:hover::before { opacity: .06; }
.preset > .ico { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--g-primary); color: #fff; }
.preset-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-size { font-size: 12px; font-weight: 600; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }

/* ---------- M4: AI panels ---------- */
.ai-panel { gap: 0; }
.bg-done { display: flex; flex-direction: column; }
.lead { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: 14px; font-weight: 600; color: var(--md-on-surface); }
.lead > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--g-primary); color: #fff; flex: none; }
.note-ok { background: color-mix(in srgb, var(--md-success) 12%, transparent); color: var(--md-on-surface); }
.note-ok .ico { color: var(--md-success); }
.task-cancel { margin-top: var(--s4); }
.ai-panel .swatches { padding-top: 2px; }

/* the right panel: every default (white) button in the "Light only / Colour only" format (owner, 2026-10-31) —
   full width of its column, 40 px, a 32 px icon badge at the left edge, 11.5 px capitals, the label after the badge */
.ed-panel .btn:not(.btn-primary):not(.btn-success):not(.btn-danger) { width: 100%; height: auto; min-height: 40px; padding: 0 10px 0 4px; border-radius: 20px; justify-content: flex-start; font-size: 11.5px; line-height: 14px; letter-spacing: .02em; }
/* a label too long for one line goes onto a second line inside the pill (never cut off) */
.ed-panel .btn { white-space: normal; min-width: 0; }
.ed-panel .btn > .ico { flex: none; }
.ed-panel .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(:has(> .ico)) { justify-content: center; padding: 0 16px; }
.ed-panel .btn:not(.btn-primary):not(.btn-success):not(.btn-danger) > .ico:first-child { width: 32px; height: 32px; padding: 7px; }

/* the narrower right panel (256 px, as the left panel): 16 px inner margins, smaller "Make it ready for" tiles */
@media (min-width: 1181px) {
  .group-head, .group-rows, .histo-wrap, .panel-title, .panel-sub { padding-left: var(--s4); padding-right: var(--s4); }
  .text-panel, .geo-panel, .enhance { padding-left: var(--s4); padding-right: var(--s4); }
  .tabs { margin-left: var(--s3); margin-right: var(--s3); }
  .tab { font-size: 11.5px; letter-spacing: .03em; }
  .ready-row { gap: 4px; }
  .ready-btn { height: 62px; font-size: 9.5px; letter-spacing: 0; }
  .ready-btn > .ico { width: 28px; height: 28px; padding: 6px; }
  .filters { gap: 6px; }
  .size-fields { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .lock-btn { width: 36px; height: 36px; }
  /* two buttons side by side do not fit 224 px: one per row, as Light only / Colour only; Apply above Reset */
  .ed-panel .row-2 { grid-template-columns: minmax(0, 1fr); }
  .panel-footer { grid-auto-flow: row; grid-auto-columns: auto; }
  .panel-footer [data-action="apply"] { order: -1; }
}

/* ---------- M5: Make it ready for ---------- */
.ready-panel { gap: 0; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: var(--s2); font-size: 13px; line-height: 18px; color: var(--md-on-surface); }
.check-list .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; }
.check-ok .ico { background: var(--g-success); }
.check-warn .ico { background: var(--warn-fg); }
.check-warn span { color: var(--warn-fg); }
.swatch-keep { display: inline-flex; align-items: center; justify-content: center; background: var(--gloss), var(--g-neutral); color: var(--md-on-surface-variant); }
.swatch-keep .ico { width: 18px; height: 18px; }
.sheet-box { display: flex; flex-direction: column; gap: var(--s3); }
.disclaimer { font-size: 12px; line-height: 17px; }
.size-checks { display: flex; flex-direction: column; gap: 2px; }
.size-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: 34px; padding: 0 6px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.size-check:hover { background: var(--md-surface-container); }
.size-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--md-primary); }
.size-check-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-check-px { font-size: 11.5px; font-weight: 600; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }

/* ---------- M6: ID Card creator (the editor's frame without the photo strip) ---------- */
.editor.cards { grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "header header header" "tools stage panel"; }
.cards-count { color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-sides .seg { min-width: 200px; }
.card-pos { min-width: 104px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--md-on-surface); }
.card-prev .ico { transform: rotate(90deg); }
.card-next .ico { transform: rotate(-90deg); }
.step-back > .ico:first-child { transform: rotate(90deg); }
.card-view { display: flex; align-items: center; justify-content: center; margin-bottom: var(--s4); }
.card-frame { position: relative; flex: none; border-radius: 10px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 10px 30px rgba(15, 23, 42, .22); overflow: visible; touch-action: none; }
.card-canvas { display: block; border-radius: 10px; }
.card-sel { position: absolute; outline: 2px dashed var(--md-primary); outline-offset: 1px; pointer-events: none; }
.card-handle { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-primary); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(15, 23, 42, .35); pointer-events: auto; cursor: nwse-resize; }
.card-issues { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); margin: 0; padding: 4px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-btn[aria-pressed="true"] { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary); }
.logo-thumb { display: block; max-width: 100%; max-height: 72px; object-fit: contain; align-self: flex-start; padding: 6px; border-radius: 10px; background: var(--md-surface-container); }
.color-row, .num-row, .btn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.color-row .color-pick { width: 100%; height: 40px; }
.check-line { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; cursor: pointer; }
.check-line input { width: 18px; height: 18px; margin: 0; accent-color: var(--md-primary); }
.kind-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-chip { padding: 3px 10px; border-radius: 12px; background: var(--md-surface-container); font-size: 12px; font-weight: 700; color: var(--md-on-surface-variant); }
.issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 17px; }
.issue-list li { padding: 6px 8px; border-radius: 10px; cursor: pointer; color: var(--md-on-surface-variant); }
.issue-list li b { color: var(--md-on-surface); }
.issue-list li:hover, .issue-list li:focus-visible { background: var(--md-surface-container); outline: none; }
.ed-panel .btn-grid .btn { min-height: 36px; }
@media (min-width: 1181px) { .ed-panel .btn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .editor.cards { grid-template-rows: 58px minmax(0, 1fr) 46vh 76px; grid-template-areas: "header" "stage" "panel" "tools"; }
  .editor.cards .ed-panel { height: auto; border-radius: 0; box-shadow: 0 -4px 16px rgba(15, 23, 42, .12); }
  .editor.cards .ed-header .brand { display: flex; }
  .card-sides .seg { min-width: 150px; }
  .card-view { margin-bottom: 0; }
}
/* the "add" buttons of Design: two per row, a smaller badge so "Barcode" fits */
.ed-panel .btn-grid .btn { padding-right: 6px; font-size: 10.5px; letter-spacing: 0; }
.ed-panel .btn-grid .btn > .ico:first-child { width: 28px; height: 28px; padding: 6px; }

/* ---------- M7: phones, reduced motion ---------- */
@media (max-width: 520px) {
  .home-bar .hbtn .btn-label { display: none; }                 /* Install: the icon only, so the name fits */
  .home-bar .hbtn { padding: 0; width: 40px; justify-content: center; }
  .home-bar .hbtn > .ico { background: transparent; }
}
@media (max-width: 760px) {
  .editor.cards .cards-count, .editor.cards .brand-name span { display: none; }
  .editor.cards .hbtn-primary .btn-label { display: inline; }
}
/* less movement when the system asks for it (the busy spinner keeps turning, slower) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  *:not(.spinner) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- M7: Convert (the editor's frame: files in the middle, settings on the right) ---------- */
.editor.converter { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "header header" "stage panel"; }
.conv-main { overflow-y: auto; padding: var(--s5); gap: var(--s4); }
.conv-drop { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 2px dashed var(--md-outline-variant); border-radius: 20px; background: var(--md-surface-lowest); }
.conv-files { display: flex; flex-direction: column; gap: var(--s2); }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.conv-head .btn { width: auto; }
.conv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conv-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 36px; align-items: center; gap: var(--s3); min-height: 48px; padding: 4px 6px 4px 8px; border-radius: 14px; background: var(--md-surface-lowest); box-shadow: 0 0 0 1px var(--line); }
.conv-kind { justify-self: start; padding: 3px 8px; border-radius: 10px; background: var(--md-secondary-container); color: var(--md-primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.conv-ok, .conv-err { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.conv-ok .ico, .conv-err .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; }
.conv-ok .ico { background: var(--g-success); }
.conv-err { color: var(--warn-fg); max-width: 280px; }
.conv-err .ico { background: var(--warn-fg); flex: none; }
.conv-x { width: 32px; height: 32px; }
.fmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 18px; background: var(--g-rest); box-shadow: 0 0 0 2px var(--frame), inset 0 1px 3px rgba(15, 23, 42, .1); }
.fmt-btn { height: 34px; border-radius: 17px; justify-content: center; }
.export-form .seg { flex-wrap: wrap; }
@media (max-width: 760px) {
  .editor.converter { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr) auto; grid-template-areas: "header" "stage" "panel"; }
  .editor.converter .ed-panel { height: auto; max-height: 52vh; border-radius: 0; box-shadow: 0 -4px 16px rgba(15, 23, 42, .12); }
  .editor.converter .brand { display: flex; }
  .editor.converter .brand-name span { display: none; }
  .editor.converter .hbtn-primary .btn-label { display: inline; }
  .conv-main { padding: var(--s3); }
  .conv-item { grid-template-columns: 46px minmax(0, 1fr) 32px; }
  .conv-item > :nth-child(3) { grid-column: 2; grid-row: 2; }
}

/* ---------- ads (src/ads.js): a labelled box, hidden when there is no ad ---------- */
.ad-slot { display: flex; flex-direction: column; gap: 4px; }
.ad-slot[hidden] { display: none; }
.ad-label { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--md-outline); }
.ad-box { min-height: 90px; border-radius: 12px; overflow: hidden; }
.ad-home { margin: var(--s5) 0; }
.ad-side { margin-top: auto; padding-top: var(--s4); }
.ad-side .ad-box { min-height: 250px; }
.ad-convert { margin-top: var(--s4); }
@media (max-width: 1180px) { .ad-side { display: none !important; } }

/* ---------- the guide pages (passport-photo/, id-card-maker/, …): plain reading pages in the app's look ---------- */
.guide { min-height: 100%; display: flex; flex-direction: column; background: var(--md-surface); }
.guide .home-bar .btn { width: auto; }
.guide-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s6); color: var(--md-on-surface); }
.guide-main h1 { margin: 0 0 var(--s3); font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.guide-lead { margin: 0 0 var(--s5); font-size: 18px; line-height: 28px; color: var(--md-on-surface-variant); }
.guide-main h2 { margin: var(--s6) 0 var(--s3); font-size: 22px; line-height: 28px; }
.guide-main h3 { margin: var(--s4) 0 var(--s2); font-size: 17px; }
.guide-main p, .guide-main li { font-size: 16px; line-height: 26px; }
.guide-main ol, .guide-main ul { padding-left: 22px; }
.guide-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }
.guide-cta .btn { text-decoration: none; }
.guide-table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--md-on-surface-variant); }
.guide-scroll { overflow-x: auto; }
.faq details { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.faq details p { margin: var(--s2) 0 0; color: var(--md-on-surface-variant); }
.guide-more ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.guide-more a { display: block; padding: 12px 14px; border-radius: 14px; background: var(--md-surface-lowest); box-shadow: 0 0 0 1px var(--line); color: var(--md-primary); font-weight: 700; text-decoration: none; }
.guide-more a:hover { box-shadow: 0 0 0 2px var(--md-primary); }
.guide-note { padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-fg); font-size: 14.5px !important; }
.guide a.btn { text-decoration: none; padding: 0 22px; }
@media (max-width: 640px) { .guide-main { padding: var(--s5) var(--s4); } .guide .home-bar .btn { display: none; } }

/* Home and guide pages: the same bar as draw.shiklo.com and the other Shiklo sites — full width, 24 px from the edges
   (12 px on phones), 60 px high, a 40 px logo (36 px on phones) */
.home-bar { max-width: none; height: 60px; padding: 0 24px; }
.home-bar .brand-logo { width: 40px; height: 40px; }
.home-bar .brand { gap: 10px; font-size: 1.2rem; }
@media (max-width: 768px) { .home-bar { padding: 0 12px; } }
@media (max-width: 600px) { .home-bar { height: 60px; } .home-bar .brand-logo { width: 36px; height: 36px; } }
.fmt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-panel .chips .chip { padding: 0 10px; }

/* ---------- M8: the Layers panel ---------- */
.layer-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-radius: 14px; background: var(--g-rest); box-shadow: 0 0 0 2px var(--frame), inset 0 1px 3px rgba(15, 23, 42, .1); max-height: 320px; overflow-y: auto; }
.layer-list:empty { display: none; }
.layer-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px 30px; align-items: center; gap: 4px; min-height: 38px; padding: 2px 4px 2px 6px; border-radius: 10px; cursor: pointer; background: var(--md-surface-lowest); }
.layer-row:hover { box-shadow: inset 0 0 0 1px var(--md-primary); }
.layer-row.is-chosen { background: var(--md-secondary-container); box-shadow: inset 0 0 0 2px var(--md-primary); }
.layer-row.in-group { margin-left: 16px; }
.layer-row.group-row { font-weight: 700; }
.layer-row.is-hidden .layer-name { opacity: .5; text-decoration: line-through; }
.layer-ico { display: inline-flex; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--g-primary); color: #fff; }
.layer-ico .ico { width: 16px; height: 16px; }
.group-row .layer-ico { background: var(--g-success); }
.layer-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-row .icon-btn { width: 30px; height: 30px; }
.layer-row .icon-btn .ico { width: 16px; height: 16px; }
.layer-rename { height: 30px; padding: 0 8px; font-size: 13px; }
.order-row { display: flex; gap: 6px; }
.order-row .ord-top .ico, .order-row .ord-up .ico { transform: rotate(180deg); }
.ord-top, .ord-bottom { position: relative; }
.ord-top::after, .ord-bottom::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.ord-top::after { top: 7px; }
.ord-bottom::after { bottom: 7px; }
.align-chips .chip { flex: 1 1 30%; }
.shape-props { display: flex; flex-direction: column; gap: var(--s2); }
.shape-props .color-pick { width: 100%; height: 36px; }
/* Layers / Mark Up → add: tiles, three across, the icon over its name (whole words, no cut labels) */
.add-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ed-panel .add-grid .btn {
  flex-direction: column; justify-content: center; gap: 4px; height: 70px; min-height: 70px; padding: 6px 2px; border-radius: 16px;
  font-size: 10.5px; letter-spacing: .02em; text-align: center;
}
.ed-panel .add-grid .btn > .ico:first-child { width: 28px; height: 28px; padding: 6px; }
.ed-panel .add-grid .btn .btn-label { white-space: normal; overflow: visible; line-height: 1.15; }
/* Mark Up: pen colours, the pen button while drawing */
.markup-panel .swatches { gap: 6px; flex-wrap: nowrap; padding: 5px; }
.markup-panel .swatch { width: 26px; height: 26px; flex: none; background: var(--sw); }
.markup-panel .swatch[aria-checked="true"] { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.markup-panel .swatches.is-off { opacity: .4; }
.pen-toggle[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 30%, transparent); }
/* "Make it ready for": icons only (owner, 2026-11-01) — square tiles, the name in the tooltip */
:root .ready-btn { height: 48px; padding: 0; gap: 0; }
:root .ready-btn > .ico { width: 34px; height: 34px; padding: 7px; }
:root .ready-btn .sr-only { max-width: none; }

/* ---------- M9: Batch ---------- */
.batch-photos { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.batch-photo { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr); align-items: center; gap: var(--s2); min-height: 40px; padding: 2px 6px; border-radius: 10px; cursor: pointer; }
.batch-photo:hover { background: var(--md-surface-container); }
.batch-photo input { width: 18px; height: 18px; margin: 0; accent-color: var(--md-primary); }
.batch-photo img, .batch-ph { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--md-surface-container); display: inline-flex; align-items: center; justify-content: center; }
.batch-ph .ico { width: 18px; height: 18px; }
.batch-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.preset-item { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--md-surface-container); }
.preset-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.preset-head b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-head .icon-btn { width: 30px; height: 30px; }

/* ---------- M10: Collage (the editor's frame: the preview and its photos in the middle, the settings on the right) ---------- */
.editor.collage { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "header header" "stage panel"; }
.collage-main { padding: var(--s4); gap: var(--s3); }
.collage-view { flex: 1; display: flex; align-items: center; justify-content: center; }
.collage-canvas { display: block; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); background: repeating-conic-gradient(#d7dce4 0 25%, #ffffff 0 50%) 0 0 / 16px 16px; touch-action: none; cursor: grab; }
.collage-photos { display: flex; align-items: center; gap: var(--s3); min-height: 84px; }
.collage-photos > .btn { width: auto; flex: none; }
.collage-strip { display: flex; gap: var(--s2); overflow-x: auto; padding: 8px 4px; }
.collage-item { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; display: block; }
.collage-item[aria-current="true"] { border-color: var(--md-primary); }
.collage-thumb { display: block; width: 96px; height: 64px; }
.layout-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.layout-tile { aspect-ratio: 1; padding: 6px; border: 1px solid var(--btn-edge); border-radius: 12px; background: var(--gloss), var(--g-neutral); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.layout-tile svg { width: 100%; height: 100%; display: block; }
.layout-tile rect { fill: color-mix(in srgb, var(--md-primary) 30%, transparent); stroke: var(--md-primary); stroke-width: 1.2; }
.layout-tile[aria-pressed="true"] { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary); }
.layout-tile[aria-pressed="true"] rect { fill: var(--md-primary); }
@media (max-width: 760px) {
  .editor.collage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr) auto; grid-template-areas: "header" "stage" "panel"; }
  .editor.collage .ed-panel { height: auto; max-height: 48vh; border-radius: 0; box-shadow: 0 -4px 16px rgba(15, 23, 42, .12); }
  .editor.collage .brand { display: flex; }
  .editor.collage .brand-name span { display: none; }
  .editor.collage .hbtn-primary .btn-label { display: inline; }
  .collage-main { padding: var(--s2); }
}

/* ---------- Frame (frame.js) and Photo Info (owner, 2026-11-01) ---------- */
.frame-panel .swatches, .info-panel .swatches { gap: 6px; padding: 5px; flex-wrap: wrap; }
.frame-panel .swatch, .info-panel .swatch { width: 28px; height: 28px; flex: none; background: var(--sw); }
.frame-panel .swatch[aria-checked="true"] { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.frame-swatches.is-off .swatch { opacity: .4; }
.frame-custom { width: 36px; height: 30px; padding: 0; border-radius: 8px; }
.frame-presets .chip[aria-pressed="true"], .frame-ratios .chip[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.info-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s3); margin: 0; font-size: 13px; line-height: 18px; }
.info-list dt { color: var(--md-on-surface-variant); }
.info-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.info-gps { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; padding: var(--s3); border-radius: 12px; background: color-mix(in srgb, var(--md-error) 10%, transparent); color: var(--md-on-surface); font-size: 13px; line-height: 18px; }
.info-gps[hidden] { display: none; }
.info-gps .ico { flex: none; color: var(--md-error); }
.pick-shown { display: flex; gap: var(--s3); align-items: center; }
.pick-shown[hidden] { display: none; }
.pick-swatch { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 2px var(--frame), 0 2px 6px rgba(15, 23, 42, .2); }
.pick-codes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-code { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pick-key { width: 32px; color: var(--md-on-surface-variant); font-size: 11px; font-weight: 700; }
.pick-code code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-code .icon-btn { width: 30px; height: 30px; }
.main-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.main-color { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--md-outline-variant); border-radius: 12px; background: var(--md-surface-lowest); color: var(--md-on-surface); font-size: 12px; text-align: left; }
.main-swatch { flex: none; width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
.main-color code { flex: 1; min-width: 0; }
.main-share { color: var(--md-on-surface-variant); }
/* the languages the app is in (start dialog; shown once a language's pages are built) */
.start-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--s3); font-size: 13px; }
.start-langs[hidden] { display: none; }
.start-langs a { color: var(--md-primary); text-decoration: none; }
.start-langs a:hover { text-decoration: underline; }
.start-langs a[aria-current="true"] { color: var(--md-on-surface); font-weight: 700; }
/* other languages have longer words: up to 1600 px the middle header buttons (undo, redo, reset, compare) show their
   icons only; the names stay for screen readers and as tooltips */
@media (min-width: 1181px) and (max-width: 1599px) {
  html:not([lang="en"]) .ed-header-mid .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not([lang="en"]) .ed-header-mid .hbtn { padding: 0 4px; }
}