/* Dupix design system (October 2026): self-hosted fonts, light and dark colours, base styles.
   Shared by the app, the sign-in page and the website. Dark is a soft dark grey (not black); light is lavender. Every page,
   the review screen and the editor included, follows the theme switch (owner feedback, 23 Oct 2026). */
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --grad:linear-gradient(90deg,#1C6BFF 0%,#3D4BFF 58%,#6A3CF6 100%);
  --on-accent:#fff;
}
/* dark: soft dark grey */
:root,html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#25262B; --strip:#2C2D33; --panel:#313238; --raised:#393A41; --field:#2A2B31;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --paper:#F0F1F4; --soft:#C3C6CF; --muted:#A4A8B3;
  --accent:#5C7CFF; --accent-text:#94B5FF; --keep:#5C7CFF; --reject:#FF8466; --warn:#FFC266;
  --banner-bg:#34353C; --banner-line:rgba(255,255,255,.16);
  --shadow:0 16px 40px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.18); --glow:0 10px 26px rgba(45,91,255,.32);
  --card:#2C2D33; --card-border:rgba(255,255,255,.08);
  --grad-text:linear-gradient(90deg,#4DA6FF 0%,#6C8BFF 55%,#A47BFF 100%);
  --page:radial-gradient(900px 420px at 50% -120px,rgba(80,120,255,.14) 0%,rgba(80,120,255,0) 70%),linear-gradient(180deg,#28292E 0%,#212226 100%);
  --ed-stage:#1F2024; --ed-panel:#2C2D33; --ed-well:#232428; --track:#41424A;
  --emboss:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#EEF1FF; --strip:rgba(255,255,255,.72); --panel:#FFFFFF; --raised:#FFFFFF; --field:rgba(255,255,255,.85);
  --line:rgba(76,83,132,.22); --line-strong:rgba(76,83,132,.40);
  --paper:#101436; --soft:#2A3060; --muted:#4C5384;
  --accent:#2D5BFF; --accent-text:#2350F5; --keep:#2D5BFF; --reject:#C73E24; --warn:#B7791F;
  --banner-bg:#FFF5DC; --banner-line:#E6C77A;
  --shadow:0 18px 44px rgba(84,104,190,.22); --glow:0 12px 28px rgba(45,91,255,.34);
  --card:rgba(255,255,255,.72); --card-border:rgba(255,255,255,.95);
  --grad-text:linear-gradient(90deg,#1C8CFF 0%,#2D5BFF 45%,#7A2CF5 100%);
  --page:radial-gradient(900px 520px at 18% 0%,#FFFFFF 0%,rgba(255,255,255,0) 62%),radial-gradient(800px 500px at 90% 8%,rgba(122,44,245,.08) 0%,rgba(122,44,245,0) 60%),linear-gradient(160deg,#F3F5FF 0%,#E7ECFF 55%,#DCE3FF 100%);
  --ed-stage:#DCDEE5; --ed-panel:#F6F7FC; --ed-well:#ECEEF5; --track:#D6DAEA;
  --emboss:inset 0 1px 0 rgba(255,255,255,.9);
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--paper);font-family:var(--font);font-stretch:100%}
/* The page gradient lives on its own fixed layer, painted once. As the body's own background it was repainted on every
   progress-bar update, which slowed scans and model downloads. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page);transform:translateZ(0)}
::selection{background:rgba(92,124,255,.38)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
a{color:var(--accent-text)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* theme switch: shows the sun in dark (go light) and the moon in light (go dark) */
.theme-toggle{width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:var(--raised);color:var(--paper);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.theme-toggle:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}.theme-toggle:hover{transform:none}}

/* ---------- sliders: a smooth rounded track, a gradient fill from the centre (or the start) to the knob, a soft white knob
   with a halo (owner's reference images, 23 Oct 2026). --a and --b (0..1) are set by dupix-theme.js. ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;height:24px;margin:0;background:transparent;cursor:pointer;--a:0;--b:0;
  --fill:linear-gradient(90deg,#3B8BFF,#5C6CFF 55%,#8A5CF6)}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--track) calc(9px + (100% - 18px) * var(--a)),transparent calc(9px + (100% - 18px) * var(--a)),transparent calc(9px + (100% - 18px) * var(--b)),var(--track) calc(9px + (100% - 18px) * var(--b))),var(--fill);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--track) calc(9px + (100% - 18px) * var(--a)),transparent calc(9px + (100% - 18px) * var(--a)),transparent calc(9px + (100% - 18px) * var(--b)),var(--track) calc(9px + (100% - 18px) * var(--b))),var(--fill)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-5px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 4px rgba(92,124,255,.16),0 2px 6px rgba(0,0,0,.35);transition:transform .16s cubic-bezier(.3,.7,.3,1.4),box-shadow .2s ease}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 4px rgba(92,124,255,.16),0 2px 6px rgba(0,0,0,.35)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 0 0 6px rgba(92,124,255,.20),0 2px 8px rgba(0,0,0,.35)}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.16);box-shadow:0 0 0 9px rgba(92,124,255,.24),0 3px 10px rgba(0,0,0,.35)}
input[type=range]:disabled{opacity:.45;cursor:default}
/* colour sliders show their colours along the whole track, like a photo editor */
input[type=range][data-track]::-webkit-slider-runnable-track{opacity:.9}
input[data-track="temp"]{--fill:linear-gradient(90deg,#3F86FF,#C9D4E6 50%,#FFC041)}
input[data-track="tint"]{--fill:linear-gradient(90deg,#3FCB6B,#D4D4DC 50%,#E04FD4)}
input[data-track="sat"],input[data-track="vib"]{--fill:linear-gradient(90deg,#8E8E96,#FF5A5A 40%,#FFD04A 60%,#3FCB6B 80%,#4D8BFF)}
input[data-track="exp"]{--fill:linear-gradient(90deg,#15161A,#FFFFFF)}
input[data-track="warm"]{--fill:linear-gradient(90deg,#3F86FF,#FFC041)}
.dpx-bubble{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-100%);padding:4px 9px;border-radius:9px;font:700 .76rem/1.2 var(--font);
  color:#fff;background:#1C1D22;box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .15s ease;white-space:nowrap}
.dpx-bubble::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:1px}
.dpx-bubble.on{opacity:1}

/* ---------- touch feedback: buttons press in and a soft ripple spreads from the finger or pointer ---------- */
.btn,.chip,.tab,.theme-toggle,.sbtn{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn,.chip,.tab{transition:transform .14s cubic-bezier(.3,.7,.3,1.4),box-shadow .2s ease,background-color .18s ease,border-color .18s ease,color .18s ease,filter .18s ease}
.btn:active:not(:disabled),.chip:active,.tab:active,.theme-toggle:active{transform:scale(.95)}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn:active:not(:disabled):hover{transform:scale(.95)}
.dpx-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.24;transform:scale(0);pointer-events:none;animation:dpx-ripple .62s cubic-bezier(.2,.7,.2,1) forwards}
.btn-primary .dpx-ripple,.chip[aria-pressed="true"] .dpx-ripple{background:#fff;opacity:.38}
@keyframes dpx-ripple{to{transform:scale(1);opacity:0}}
.chip[aria-pressed="true"],.tab[aria-selected="true"]{animation:dpx-pop .38s cubic-bezier(.3,.7,.3,1.5)}
@keyframes dpx-pop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .dpx-ripple{display:none}.btn,.chip,.tab{transition:none}.btn:active,.chip:active,.tab:active,.btn:not(:disabled):hover{transform:none}
  .chip[aria-pressed="true"],.tab[aria-selected="true"]{animation:none}input[type=range]::-webkit-slider-thumb{transition:none}
}