/* --- radix-colors.css --- */
/* Radix Colors — vendored from @radix-ui/colors.
 *
 * Scales: slate, indigo, red, green, amber (+ alpha), plus black/white alpha for shadows.
 *
 * Upstream ships dark mode as a `.dark-theme` class. Rewritten here to the
 * three-state convention the rest of the CSS uses: bare :root is light, the
 * media query covers "follow the system", and [data-scheme] lets an explicit
 * toggle win in both directions. Regenerate with tools/gen-radix-colors.py.
 */

:root {
  --slate-1: #fcfcfd;
  --slate-2: #f9f9fb;
  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;
  --slate-5: #e0e1e6;
  --slate-6: #d9d9e0;
  --slate-7: #cdced6;
  --slate-8: #b9bbc6;
  --slate-9: #8b8d98;
  --slate-10: #80838d;
  --slate-11: #60646c;
  --slate-12: #1c2024;
  --slate-1: color(display-p3 0.988 0.988 0.992);
  --slate-2: color(display-p3 0.976 0.976 0.984);
  --slate-3: color(display-p3 0.94 0.941 0.953);
  --slate-4: color(display-p3 0.908 0.909 0.925);
  --slate-5: color(display-p3 0.88 0.881 0.901);
  --slate-6: color(display-p3 0.85 0.852 0.876);
  --slate-7: color(display-p3 0.805 0.808 0.838);
  --slate-8: color(display-p3 0.727 0.733 0.773);
  --slate-9: color(display-p3 0.547 0.553 0.592);
  --slate-10: color(display-p3 0.503 0.512 0.549);
  --slate-11: color(display-p3 0.379 0.392 0.421);
  --slate-12: color(display-p3 0.113 0.125 0.14);
  --slate-a1: #00005503;
  --slate-a2: #00005506;
  --slate-a3: #0000330f;
  --slate-a4: #00002d17;
  --slate-a5: #0009321f;
  --slate-a6: #00002f26;
  --slate-a7: #00062e32;
  --slate-a8: #00083046;
  --slate-a9: #00051d74;
  --slate-a10: #00071b7f;
  --slate-a11: #0007149f;
  --slate-a12: #000509e3;
  --slate-a1: color(display-p3 0.024 0.024 0.349 / 0.012);
  --slate-a2: color(display-p3 0.024 0.024 0.349 / 0.024);
  --slate-a3: color(display-p3 0.004 0.004 0.204 / 0.059);
  --slate-a4: color(display-p3 0.012 0.012 0.184 / 0.091);
  --slate-a5: color(display-p3 0.004 0.039 0.2 / 0.122);
  --slate-a6: color(display-p3 0.008 0.008 0.165 / 0.15);
  --slate-a7: color(display-p3 0.008 0.027 0.184 / 0.197);
  --slate-a8: color(display-p3 0.004 0.031 0.176 / 0.275);
  --slate-a9: color(display-p3 0.004 0.02 0.106 / 0.455);
  --slate-a10: color(display-p3 0.004 0.027 0.098 / 0.499);
  --slate-a11: color(display-p3 0 0.02 0.063 / 0.62);
  --slate-a12: color(display-p3 0 0.012 0.031 / 0.887);
  --indigo-1: #fdfdfe;
  --indigo-2: #f7f9ff;
  --indigo-3: #edf2fe;
  --indigo-4: #e1e9ff;
  --indigo-5: #d2deff;
  --indigo-6: #c1d0ff;
  --indigo-7: #abbdf9;
  --indigo-8: #8da4ef;
  --indigo-9: #3e63dd;
  --indigo-10: #3358d4;
  --indigo-11: #3a5bc7;
  --indigo-12: #1f2d5c;
  --indigo-1: color(display-p3 0.992 0.992 0.996);
  --indigo-2: color(display-p3 0.971 0.977 0.998);
  --indigo-3: color(display-p3 0.933 0.948 0.992);
  --indigo-4: color(display-p3 0.885 0.914 1);
  --indigo-5: color(display-p3 0.831 0.87 1);
  --indigo-6: color(display-p3 0.767 0.814 0.995);
  --indigo-7: color(display-p3 0.685 0.74 0.957);
  --indigo-8: color(display-p3 0.569 0.639 0.916);
  --indigo-9: color(display-p3 0.276 0.384 0.837);
  --indigo-10: color(display-p3 0.234 0.343 0.801);
  --indigo-11: color(display-p3 0.256 0.354 0.755);
  --indigo-12: color(display-p3 0.133 0.175 0.348);
  --indigo-a1: #00008002;
  --indigo-a2: #0040ff08;
  --indigo-a3: #0047f112;
  --indigo-a4: #0044ff1e;
  --indigo-a5: #0044ff2d;
  --indigo-a6: #003eff3e;
  --indigo-a7: #0037ed54;
  --indigo-a8: #0034dc72;
  --indigo-a9: #0031d2c1;
  --indigo-a10: #002ec9cc;
  --indigo-a11: #002bb7c5;
  --indigo-a12: #001046e0;
  --indigo-a1: color(display-p3 0.02 0.02 0.51 / 0.008);
  --indigo-a2: color(display-p3 0.024 0.161 0.863 / 0.028);
  --indigo-a3: color(display-p3 0.008 0.239 0.886 / 0.067);
  --indigo-a4: color(display-p3 0.004 0.247 1 / 0.114);
  --indigo-a5: color(display-p3 0.004 0.235 1 / 0.169);
  --indigo-a6: color(display-p3 0.004 0.208 0.984 / 0.232);
  --indigo-a7: color(display-p3 0.004 0.176 0.863 / 0.314);
  --indigo-a8: color(display-p3 0.004 0.165 0.812 / 0.432);
  --indigo-a9: color(display-p3 0 0.153 0.773 / 0.726);
  --indigo-a10: color(display-p3 0 0.137 0.737 / 0.765);
  --indigo-a11: color(display-p3 0.256 0.354 0.755);
  --indigo-a12: color(display-p3 0.133 0.175 0.348);
  --red-1: #fffcfc;
  --red-2: #fff7f7;
  --red-3: #feebec;
  --red-4: #ffdbdc;
  --red-5: #ffcdce;
  --red-6: #fdbdbe;
  --red-7: #f4a9aa;
  --red-8: #eb8e90;
  --red-9: #e5484d;
  --red-10: #dc3e42;
  --red-11: #ce2c31;
  --red-12: #641723;
  --red-1: color(display-p3 0.998 0.989 0.988);
  --red-2: color(display-p3 0.995 0.971 0.971);
  --red-3: color(display-p3 0.985 0.925 0.925);
  --red-4: color(display-p3 0.999 0.866 0.866);
  --red-5: color(display-p3 0.984 0.812 0.811);
  --red-6: color(display-p3 0.955 0.751 0.749);
  --red-7: color(display-p3 0.915 0.675 0.672);
  --red-8: color(display-p3 0.872 0.575 0.572);
  --red-9: color(display-p3 0.83 0.329 0.324);
  --red-10: color(display-p3 0.798 0.294 0.285);
  --red-11: color(display-p3 0.744 0.234 0.222);
  --red-12: color(display-p3 0.36 0.115 0.143);
  --red-a1: #ff000003;
  --red-a2: #ff000008;
  --red-a3: #f3000d14;
  --red-a4: #ff000824;
  --red-a5: #ff000632;
  --red-a6: #f8000442;
  --red-a7: #df000356;
  --red-a8: #d2000571;
  --red-a9: #db0007b7;
  --red-a10: #d10005c1;
  --red-a11: #c40006d3;
  --red-a12: #55000de8;
  --red-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
  --red-a2: color(display-p3 0.863 0.024 0.024 / 0.028);
  --red-a3: color(display-p3 0.792 0.008 0.008 / 0.075);
  --red-a4: color(display-p3 1 0.008 0.008 / 0.134);
  --red-a5: color(display-p3 0.918 0.008 0.008 / 0.189);
  --red-a6: color(display-p3 0.831 0.02 0.004 / 0.251);
  --red-a7: color(display-p3 0.741 0.016 0.004 / 0.33);
  --red-a8: color(display-p3 0.698 0.012 0.004 / 0.428);
  --red-a9: color(display-p3 0.749 0.008 0 / 0.675);
  --red-a10: color(display-p3 0.714 0.012 0 / 0.714);
  --red-a11: color(display-p3 0.744 0.234 0.222);
  --red-a12: color(display-p3 0.36 0.115 0.143);
  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98b;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;
  --green-1: color(display-p3 0.986 0.996 0.989);
  --green-2: color(display-p3 0.963 0.983 0.967);
  --green-3: color(display-p3 0.913 0.964 0.925);
  --green-4: color(display-p3 0.859 0.94 0.879);
  --green-5: color(display-p3 0.796 0.907 0.826);
  --green-6: color(display-p3 0.718 0.863 0.761);
  --green-7: color(display-p3 0.61 0.801 0.675);
  --green-8: color(display-p3 0.451 0.715 0.559);
  --green-9: color(display-p3 0.332 0.634 0.442);
  --green-10: color(display-p3 0.308 0.595 0.417);
  --green-11: color(display-p3 0.19 0.5 0.32);
  --green-12: color(display-p3 0.132 0.228 0.18);
  --green-a1: #00c04004;
  --green-a2: #00a32f0b;
  --green-a3: #00a43319;
  --green-a4: #00a83829;
  --green-a5: #019c393b;
  --green-a6: #00963c52;
  --green-a7: #00914071;
  --green-a8: #00924ba4;
  --green-a9: #008f4acf;
  --green-a10: #008647d4;
  --green-a11: #00713fde;
  --green-a12: #002616e6;
  --green-a1: color(display-p3 0.024 0.757 0.267 / 0.016);
  --green-a2: color(display-p3 0.024 0.565 0.129 / 0.036);
  --green-a3: color(display-p3 0.012 0.596 0.145 / 0.087);
  --green-a4: color(display-p3 0.008 0.588 0.145 / 0.142);
  --green-a5: color(display-p3 0.004 0.541 0.157 / 0.204);
  --green-a6: color(display-p3 0.004 0.518 0.157 / 0.283);
  --green-a7: color(display-p3 0.004 0.486 0.165 / 0.389);
  --green-a8: color(display-p3 0 0.478 0.2 / 0.55);
  --green-a9: color(display-p3 0 0.455 0.165 / 0.667);
  --green-a10: color(display-p3 0 0.416 0.153 / 0.691);
  --green-a11: color(display-p3 0.19 0.5 0.32);
  --green-a12: color(display-p3 0.132 0.228 0.18);
  --amber-1: #fefdfb;
  --amber-2: #fefbe9;
  --amber-3: #fff7c2;
  --amber-4: #ffee9c;
  --amber-5: #fbe577;
  --amber-6: #f3d673;
  --amber-7: #e9c162;
  --amber-8: #e2a336;
  --amber-9: #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;
  --amber-1: color(display-p3 0.995 0.992 0.985);
  --amber-2: color(display-p3 0.994 0.986 0.921);
  --amber-3: color(display-p3 0.994 0.969 0.782);
  --amber-4: color(display-p3 0.989 0.937 0.65);
  --amber-5: color(display-p3 0.97 0.902 0.527);
  --amber-6: color(display-p3 0.936 0.844 0.506);
  --amber-7: color(display-p3 0.89 0.762 0.443);
  --amber-8: color(display-p3 0.85 0.65 0.3);
  --amber-9: color(display-p3 1 0.77 0.26);
  --amber-10: color(display-p3 0.959 0.741 0.274);
  --amber-11: color(display-p3 0.64 0.4 0);
  --amber-12: color(display-p3 0.294 0.208 0.145);
  --amber-a1: #c0800004;
  --amber-a2: #f4d10016;
  --amber-a3: #ffde003d;
  --amber-a4: #ffd40063;
  --amber-a5: #f8cf0088;
  --amber-a6: #eab5008c;
  --amber-a7: #dc9b009d;
  --amber-a8: #da8a00c9;
  --amber-a9: #ffb300c2;
  --amber-a10: #ffb300e7;
  --amber-a11: #ab6400;
  --amber-a12: #341500dd;
  --amber-a1: color(display-p3 0.757 0.514 0.024 / 0.016);
  --amber-a2: color(display-p3 0.902 0.804 0.008 / 0.079);
  --amber-a3: color(display-p3 0.965 0.859 0.004 / 0.22);
  --amber-a4: color(display-p3 0.969 0.82 0.004 / 0.35);
  --amber-a5: color(display-p3 0.933 0.796 0.004 / 0.475);
  --amber-a6: color(display-p3 0.875 0.682 0.004 / 0.495);
  --amber-a7: color(display-p3 0.804 0.573 0 / 0.557);
  --amber-a8: color(display-p3 0.788 0.502 0 / 0.699);
  --amber-a9: color(display-p3 1 0.686 0 / 0.742);
  --amber-a10: color(display-p3 0.945 0.643 0 / 0.726);
  --amber-a11: color(display-p3 0.64 0.4 0);
  --amber-a12: color(display-p3 0.294 0.208 0.145);
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
  --black-a1: color(display-p3 0 0 0 / 0.05);
  --black-a2: color(display-p3 0 0 0 / 0.1);
  --black-a3: color(display-p3 0 0 0 / 0.15);
  --black-a4: color(display-p3 0 0 0 / 0.2);
  --black-a5: color(display-p3 0 0 0 / 0.3);
  --black-a6: color(display-p3 0 0 0 / 0.4);
  --black-a7: color(display-p3 0 0 0 / 0.5);
  --black-a8: color(display-p3 0 0 0 / 0.6);
  --black-a9: color(display-p3 0 0 0 / 0.7);
  --black-a10: color(display-p3 0 0 0 / 0.8);
  --black-a11: color(display-p3 0 0 0 / 0.9);
  --black-a12: color(display-p3 0 0 0 / 0.95);
  --white-a1: rgba(255, 255, 255, 0.05);
  --white-a2: rgba(255, 255, 255, 0.1);
  --white-a3: rgba(255, 255, 255, 0.15);
  --white-a4: rgba(255, 255, 255, 0.2);
  --white-a5: rgba(255, 255, 255, 0.3);
  --white-a6: rgba(255, 255, 255, 0.4);
  --white-a7: rgba(255, 255, 255, 0.5);
  --white-a8: rgba(255, 255, 255, 0.6);
  --white-a9: rgba(255, 255, 255, 0.7);
  --white-a10: rgba(255, 255, 255, 0.8);
  --white-a11: rgba(255, 255, 255, 0.9);
  --white-a12: rgba(255, 255, 255, 0.95);
  --white-a1: color(display-p3 1 1 1 / 0.05);
  --white-a2: color(display-p3 1 1 1 / 0.1);
  --white-a3: color(display-p3 1 1 1 / 0.15);
  --white-a4: color(display-p3 1 1 1 / 0.2);
  --white-a5: color(display-p3 1 1 1 / 0.3);
  --white-a6: color(display-p3 1 1 1 / 0.4);
  --white-a7: color(display-p3 1 1 1 / 0.5);
  --white-a8: color(display-p3 1 1 1 / 0.6);
  --white-a9: color(display-p3 1 1 1 / 0.7);
  --white-a10: color(display-p3 1 1 1 / 0.8);
  --white-a11: color(display-p3 1 1 1 / 0.9);
  --white-a12: color(display-p3 1 1 1 / 0.95);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;
    --slate-1: color(display-p3 0.067 0.067 0.074);
    --slate-2: color(display-p3 0.095 0.098 0.105);
    --slate-3: color(display-p3 0.13 0.135 0.145);
    --slate-4: color(display-p3 0.156 0.163 0.176);
    --slate-5: color(display-p3 0.183 0.191 0.206);
    --slate-6: color(display-p3 0.215 0.226 0.244);
    --slate-7: color(display-p3 0.265 0.28 0.302);
    --slate-8: color(display-p3 0.357 0.381 0.409);
    --slate-9: color(display-p3 0.415 0.431 0.463);
    --slate-10: color(display-p3 0.469 0.483 0.514);
    --slate-11: color(display-p3 0.692 0.704 0.728);
    --slate-12: color(display-p3 0.93 0.933 0.94);
    --slate-a1: #00000000;
    --slate-a2: #d8f4f609;
    --slate-a3: #ddeaf814;
    --slate-a4: #d3edf81d;
    --slate-a5: #d9edfe25;
    --slate-a6: #d6ebfd30;
    --slate-a7: #d9edff40;
    --slate-a8: #d9edff5d;
    --slate-a9: #dfebfd6d;
    --slate-a10: #e5edfd7b;
    --slate-a11: #f1f7feb5;
    --slate-a12: #fcfdffef;
    --slate-a1: color(display-p3 0 0 0 / 0);
    --slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
    --slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
    --slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
    --slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
    --slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
    --slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
    --slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
    --slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
    --slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
    --slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
    --slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
    --indigo-1: #11131f;
    --indigo-2: #141726;
    --indigo-3: #182449;
    --indigo-4: #1d2e62;
    --indigo-5: #253974;
    --indigo-6: #304384;
    --indigo-7: #3a4f97;
    --indigo-8: #435db1;
    --indigo-9: #3e63dd;
    --indigo-10: #5472e4;
    --indigo-11: #9eb1ff;
    --indigo-12: #d6e1ff;
    --indigo-1: color(display-p3 0.068 0.074 0.118);
    --indigo-2: color(display-p3 0.081 0.089 0.144);
    --indigo-3: color(display-p3 0.105 0.141 0.275);
    --indigo-4: color(display-p3 0.129 0.18 0.369);
    --indigo-5: color(display-p3 0.163 0.22 0.439);
    --indigo-6: color(display-p3 0.203 0.262 0.5);
    --indigo-7: color(display-p3 0.245 0.309 0.575);
    --indigo-8: color(display-p3 0.285 0.362 0.674);
    --indigo-9: color(display-p3 0.276 0.384 0.837);
    --indigo-10: color(display-p3 0.354 0.445 0.866);
    --indigo-11: color(display-p3 0.63 0.69 1);
    --indigo-12: color(display-p3 0.848 0.881 0.99);
    --indigo-a1: #1133ff0f;
    --indigo-a2: #3354fa17;
    --indigo-a3: #2f62ff3c;
    --indigo-a4: #3566ff57;
    --indigo-a5: #4171fd6b;
    --indigo-a6: #5178fd7c;
    --indigo-a7: #5a7fff90;
    --indigo-a8: #5b81feac;
    --indigo-a9: #4671ffdb;
    --indigo-a10: #5c7efee3;
    --indigo-a11: #9eb1ff;
    --indigo-a12: #d6e1ff;
    --indigo-a1: color(display-p3 0.071 0.212 0.996 / 0.055);
    --indigo-a2: color(display-p3 0.251 0.345 0.988 / 0.085);
    --indigo-a3: color(display-p3 0.243 0.404 1 / 0.223);
    --indigo-a4: color(display-p3 0.263 0.42 1 / 0.324);
    --indigo-a5: color(display-p3 0.314 0.451 1 / 0.4);
    --indigo-a6: color(display-p3 0.361 0.49 1 / 0.467);
    --indigo-a7: color(display-p3 0.388 0.51 1 / 0.547);
    --indigo-a8: color(display-p3 0.404 0.518 1 / 0.652);
    --indigo-a9: color(display-p3 0.318 0.451 1 / 0.824);
    --indigo-a10: color(display-p3 0.404 0.506 1 / 0.858);
    --indigo-a11: color(display-p3 0.63 0.69 1);
    --indigo-a12: color(display-p3 0.848 0.881 0.99);
    --red-1: #191111;
    --red-2: #201314;
    --red-3: #3b1219;
    --red-4: #500f1c;
    --red-5: #611623;
    --red-6: #72232d;
    --red-7: #8c333a;
    --red-8: #b54548;
    --red-9: #e5484d;
    --red-10: #ec5d5e;
    --red-11: #ff9592;
    --red-12: #ffd1d9;
    --red-1: color(display-p3 0.093 0.068 0.067);
    --red-2: color(display-p3 0.118 0.077 0.079);
    --red-3: color(display-p3 0.211 0.081 0.099);
    --red-4: color(display-p3 0.287 0.079 0.113);
    --red-5: color(display-p3 0.348 0.11 0.142);
    --red-6: color(display-p3 0.414 0.16 0.183);
    --red-7: color(display-p3 0.508 0.224 0.236);
    --red-8: color(display-p3 0.659 0.298 0.297);
    --red-9: color(display-p3 0.83 0.329 0.324);
    --red-10: color(display-p3 0.861 0.403 0.387);
    --red-11: color(display-p3 1 0.57 0.55);
    --red-12: color(display-p3 0.971 0.826 0.852);
    --red-a1: #f4121209;
    --red-a2: #f22f3e11;
    --red-a3: #ff173f2d;
    --red-a4: #fe0a3b44;
    --red-a5: #ff204756;
    --red-a6: #ff3e5668;
    --red-a7: #ff536184;
    --red-a8: #ff5d61b0;
    --red-a9: #fe4e54e4;
    --red-a10: #ff6465eb;
    --red-a11: #ff9592;
    --red-a12: #ffd1d9;
    --red-a1: color(display-p3 0.984 0.071 0.071 / 0.03);
    --red-a2: color(display-p3 0.996 0.282 0.282 / 0.055);
    --red-a3: color(display-p3 1 0.169 0.271 / 0.156);
    --red-a4: color(display-p3 1 0.118 0.267 / 0.236);
    --red-a5: color(display-p3 1 0.212 0.314 / 0.303);
    --red-a6: color(display-p3 1 0.318 0.38 / 0.374);
    --red-a7: color(display-p3 1 0.4 0.424 / 0.475);
    --red-a8: color(display-p3 1 0.431 0.431 / 0.635);
    --red-a9: color(display-p3 1 0.388 0.384 / 0.82);
    --red-a10: color(display-p3 1 0.463 0.447 / 0.853);
    --red-a11: color(display-p3 1 0.57 0.55);
    --red-a12: color(display-p3 0.971 0.826 0.852);
    --green-1: #0e1512;
    --green-2: #121b17;
    --green-3: #132d21;
    --green-4: #113b29;
    --green-5: #174933;
    --green-6: #20573e;
    --green-7: #28684a;
    --green-8: #2f7c57;
    --green-9: #30a46c;
    --green-10: #33b074;
    --green-11: #3dd68c;
    --green-12: #b1f1cb;
    --green-1: color(display-p3 0.062 0.083 0.071);
    --green-2: color(display-p3 0.079 0.106 0.09);
    --green-3: color(display-p3 0.1 0.173 0.133);
    --green-4: color(display-p3 0.115 0.229 0.166);
    --green-5: color(display-p3 0.147 0.282 0.206);
    --green-6: color(display-p3 0.185 0.338 0.25);
    --green-7: color(display-p3 0.227 0.403 0.298);
    --green-8: color(display-p3 0.27 0.479 0.351);
    --green-9: color(display-p3 0.332 0.634 0.442);
    --green-10: color(display-p3 0.357 0.682 0.474);
    --green-11: color(display-p3 0.434 0.828 0.573);
    --green-12: color(display-p3 0.747 0.938 0.807);
    --green-a1: #00de4505;
    --green-a2: #29f99d0b;
    --green-a3: #22ff991e;
    --green-a4: #11ff992d;
    --green-a5: #2bffa23c;
    --green-a6: #44ffaa4b;
    --green-a7: #50fdac5e;
    --green-a8: #54ffad73;
    --green-a9: #44ffa49e;
    --green-a10: #43fea4ab;
    --green-a11: #46fea5d4;
    --green-a12: #bbffd7f0;
    --green-a1: color(display-p3 0 0.992 0.298 / 0.017);
    --green-a2: color(display-p3 0.341 0.98 0.616 / 0.043);
    --green-a3: color(display-p3 0.376 0.996 0.655 / 0.114);
    --green-a4: color(display-p3 0.341 0.996 0.635 / 0.173);
    --green-a5: color(display-p3 0.408 1 0.678 / 0.232);
    --green-a6: color(display-p3 0.475 1 0.706 / 0.29);
    --green-a7: color(display-p3 0.514 1 0.706 / 0.362);
    --green-a8: color(display-p3 0.529 1 0.718 / 0.442);
    --green-a9: color(display-p3 0.502 0.996 0.682 / 0.61);
    --green-a10: color(display-p3 0.506 1 0.682 / 0.66);
    --green-a11: color(display-p3 0.434 0.828 0.573);
    --green-a12: color(display-p3 0.747 0.938 0.807);
    --amber-1: #16120c;
    --amber-2: #1d180f;
    --amber-3: #302008;
    --amber-4: #3f2700;
    --amber-5: #4d3000;
    --amber-6: #5c3d05;
    --amber-7: #714f19;
    --amber-8: #8f6424;
    --amber-9: #ffc53d;
    --amber-10: #ffd60a;
    --amber-11: #ffca16;
    --amber-12: #ffe7b3;
    --amber-1: color(display-p3 0.082 0.07 0.05);
    --amber-2: color(display-p3 0.111 0.094 0.064);
    --amber-3: color(display-p3 0.178 0.128 0.049);
    --amber-4: color(display-p3 0.239 0.156 0);
    --amber-5: color(display-p3 0.29 0.193 0);
    --amber-6: color(display-p3 0.344 0.245 0.076);
    --amber-7: color(display-p3 0.422 0.314 0.141);
    --amber-8: color(display-p3 0.535 0.399 0.189);
    --amber-9: color(display-p3 1 0.77 0.26);
    --amber-10: color(display-p3 1 0.87 0.15);
    --amber-11: color(display-p3 1 0.8 0.29);
    --amber-12: color(display-p3 0.984 0.909 0.726);
    --amber-a1: #e63c0006;
    --amber-a2: #fd9b000d;
    --amber-a3: #fa820022;
    --amber-a4: #fc820032;
    --amber-a5: #fd8b0041;
    --amber-a6: #fd9b0051;
    --amber-a7: #ffab2567;
    --amber-a8: #ffae3587;
    --amber-a9: #ffc53d;
    --amber-a10: #ffd60a;
    --amber-a11: #ffca16;
    --amber-a12: #ffe7b3;
    --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
    --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
    --amber-a3: color(display-p3 1 0.6 0 / 0.118);
    --amber-a4: color(display-p3 1 0.557 0 / 0.185);
    --amber-a5: color(display-p3 1 0.592 0 / 0.24);
    --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
    --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
    --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
    --amber-a9: color(display-p3 1 0.769 0.259);
    --amber-a10: color(display-p3 1 0.871 0.149);
    --amber-a11: color(display-p3 1 0.8 0.29);
    --amber-a12: color(display-p3 0.984 0.909 0.726);
    --black-a1: rgba(0, 0, 0, 0.05);
    --black-a2: rgba(0, 0, 0, 0.1);
    --black-a3: rgba(0, 0, 0, 0.15);
    --black-a4: rgba(0, 0, 0, 0.2);
    --black-a5: rgba(0, 0, 0, 0.3);
    --black-a6: rgba(0, 0, 0, 0.4);
    --black-a7: rgba(0, 0, 0, 0.5);
    --black-a8: rgba(0, 0, 0, 0.6);
    --black-a9: rgba(0, 0, 0, 0.7);
    --black-a10: rgba(0, 0, 0, 0.8);
    --black-a11: rgba(0, 0, 0, 0.9);
    --black-a12: rgba(0, 0, 0, 0.95);
    --black-a1: color(display-p3 0 0 0 / 0.05);
    --black-a2: color(display-p3 0 0 0 / 0.1);
    --black-a3: color(display-p3 0 0 0 / 0.15);
    --black-a4: color(display-p3 0 0 0 / 0.2);
    --black-a5: color(display-p3 0 0 0 / 0.3);
    --black-a6: color(display-p3 0 0 0 / 0.4);
    --black-a7: color(display-p3 0 0 0 / 0.5);
    --black-a8: color(display-p3 0 0 0 / 0.6);
    --black-a9: color(display-p3 0 0 0 / 0.7);
    --black-a10: color(display-p3 0 0 0 / 0.8);
    --black-a11: color(display-p3 0 0 0 / 0.9);
    --black-a12: color(display-p3 0 0 0 / 0.95);
    --white-a1: rgba(255, 255, 255, 0.05);
    --white-a2: rgba(255, 255, 255, 0.1);
    --white-a3: rgba(255, 255, 255, 0.15);
    --white-a4: rgba(255, 255, 255, 0.2);
    --white-a5: rgba(255, 255, 255, 0.3);
    --white-a6: rgba(255, 255, 255, 0.4);
    --white-a7: rgba(255, 255, 255, 0.5);
    --white-a8: rgba(255, 255, 255, 0.6);
    --white-a9: rgba(255, 255, 255, 0.7);
    --white-a10: rgba(255, 255, 255, 0.8);
    --white-a11: rgba(255, 255, 255, 0.9);
    --white-a12: rgba(255, 255, 255, 0.95);
    --white-a1: color(display-p3 1 1 1 / 0.05);
    --white-a2: color(display-p3 1 1 1 / 0.1);
    --white-a3: color(display-p3 1 1 1 / 0.15);
    --white-a4: color(display-p3 1 1 1 / 0.2);
    --white-a5: color(display-p3 1 1 1 / 0.3);
    --white-a6: color(display-p3 1 1 1 / 0.4);
    --white-a7: color(display-p3 1 1 1 / 0.5);
    --white-a8: color(display-p3 1 1 1 / 0.6);
    --white-a9: color(display-p3 1 1 1 / 0.7);
    --white-a10: color(display-p3 1 1 1 / 0.8);
    --white-a11: color(display-p3 1 1 1 / 0.9);
    --white-a12: color(display-p3 1 1 1 / 0.95);
  }
}

:root[data-scheme="dark"] {
  --slate-1: #111113;
  --slate-2: #18191b;
  --slate-3: #212225;
  --slate-4: #272a2d;
  --slate-5: #2e3135;
  --slate-6: #363a3f;
  --slate-7: #43484e;
  --slate-8: #5a6169;
  --slate-9: #696e77;
  --slate-10: #777b84;
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;
  --slate-1: color(display-p3 0.067 0.067 0.074);
  --slate-2: color(display-p3 0.095 0.098 0.105);
  --slate-3: color(display-p3 0.13 0.135 0.145);
  --slate-4: color(display-p3 0.156 0.163 0.176);
  --slate-5: color(display-p3 0.183 0.191 0.206);
  --slate-6: color(display-p3 0.215 0.226 0.244);
  --slate-7: color(display-p3 0.265 0.28 0.302);
  --slate-8: color(display-p3 0.357 0.381 0.409);
  --slate-9: color(display-p3 0.415 0.431 0.463);
  --slate-10: color(display-p3 0.469 0.483 0.514);
  --slate-11: color(display-p3 0.692 0.704 0.728);
  --slate-12: color(display-p3 0.93 0.933 0.94);
  --slate-a1: #00000000;
  --slate-a2: #d8f4f609;
  --slate-a3: #ddeaf814;
  --slate-a4: #d3edf81d;
  --slate-a5: #d9edfe25;
  --slate-a6: #d6ebfd30;
  --slate-a7: #d9edff40;
  --slate-a8: #d9edff5d;
  --slate-a9: #dfebfd6d;
  --slate-a10: #e5edfd7b;
  --slate-a11: #f1f7feb5;
  --slate-a12: #fcfdffef;
  --slate-a1: color(display-p3 0 0 0 / 0);
  --slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
  --slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
  --slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
  --slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
  --slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
  --slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
  --slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
  --slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
  --slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
  --slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
  --slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
  --indigo-1: #11131f;
  --indigo-2: #141726;
  --indigo-3: #182449;
  --indigo-4: #1d2e62;
  --indigo-5: #253974;
  --indigo-6: #304384;
  --indigo-7: #3a4f97;
  --indigo-8: #435db1;
  --indigo-9: #3e63dd;
  --indigo-10: #5472e4;
  --indigo-11: #9eb1ff;
  --indigo-12: #d6e1ff;
  --indigo-1: color(display-p3 0.068 0.074 0.118);
  --indigo-2: color(display-p3 0.081 0.089 0.144);
  --indigo-3: color(display-p3 0.105 0.141 0.275);
  --indigo-4: color(display-p3 0.129 0.18 0.369);
  --indigo-5: color(display-p3 0.163 0.22 0.439);
  --indigo-6: color(display-p3 0.203 0.262 0.5);
  --indigo-7: color(display-p3 0.245 0.309 0.575);
  --indigo-8: color(display-p3 0.285 0.362 0.674);
  --indigo-9: color(display-p3 0.276 0.384 0.837);
  --indigo-10: color(display-p3 0.354 0.445 0.866);
  --indigo-11: color(display-p3 0.63 0.69 1);
  --indigo-12: color(display-p3 0.848 0.881 0.99);
  --indigo-a1: #1133ff0f;
  --indigo-a2: #3354fa17;
  --indigo-a3: #2f62ff3c;
  --indigo-a4: #3566ff57;
  --indigo-a5: #4171fd6b;
  --indigo-a6: #5178fd7c;
  --indigo-a7: #5a7fff90;
  --indigo-a8: #5b81feac;
  --indigo-a9: #4671ffdb;
  --indigo-a10: #5c7efee3;
  --indigo-a11: #9eb1ff;
  --indigo-a12: #d6e1ff;
  --indigo-a1: color(display-p3 0.071 0.212 0.996 / 0.055);
  --indigo-a2: color(display-p3 0.251 0.345 0.988 / 0.085);
  --indigo-a3: color(display-p3 0.243 0.404 1 / 0.223);
  --indigo-a4: color(display-p3 0.263 0.42 1 / 0.324);
  --indigo-a5: color(display-p3 0.314 0.451 1 / 0.4);
  --indigo-a6: color(display-p3 0.361 0.49 1 / 0.467);
  --indigo-a7: color(display-p3 0.388 0.51 1 / 0.547);
  --indigo-a8: color(display-p3 0.404 0.518 1 / 0.652);
  --indigo-a9: color(display-p3 0.318 0.451 1 / 0.824);
  --indigo-a10: color(display-p3 0.404 0.506 1 / 0.858);
  --indigo-a11: color(display-p3 0.63 0.69 1);
  --indigo-a12: color(display-p3 0.848 0.881 0.99);
  --red-1: #191111;
  --red-2: #201314;
  --red-3: #3b1219;
  --red-4: #500f1c;
  --red-5: #611623;
  --red-6: #72232d;
  --red-7: #8c333a;
  --red-8: #b54548;
  --red-9: #e5484d;
  --red-10: #ec5d5e;
  --red-11: #ff9592;
  --red-12: #ffd1d9;
  --red-1: color(display-p3 0.093 0.068 0.067);
  --red-2: color(display-p3 0.118 0.077 0.079);
  --red-3: color(display-p3 0.211 0.081 0.099);
  --red-4: color(display-p3 0.287 0.079 0.113);
  --red-5: color(display-p3 0.348 0.11 0.142);
  --red-6: color(display-p3 0.414 0.16 0.183);
  --red-7: color(display-p3 0.508 0.224 0.236);
  --red-8: color(display-p3 0.659 0.298 0.297);
  --red-9: color(display-p3 0.83 0.329 0.324);
  --red-10: color(display-p3 0.861 0.403 0.387);
  --red-11: color(display-p3 1 0.57 0.55);
  --red-12: color(display-p3 0.971 0.826 0.852);
  --red-a1: #f4121209;
  --red-a2: #f22f3e11;
  --red-a3: #ff173f2d;
  --red-a4: #fe0a3b44;
  --red-a5: #ff204756;
  --red-a6: #ff3e5668;
  --red-a7: #ff536184;
  --red-a8: #ff5d61b0;
  --red-a9: #fe4e54e4;
  --red-a10: #ff6465eb;
  --red-a11: #ff9592;
  --red-a12: #ffd1d9;
  --red-a1: color(display-p3 0.984 0.071 0.071 / 0.03);
  --red-a2: color(display-p3 0.996 0.282 0.282 / 0.055);
  --red-a3: color(display-p3 1 0.169 0.271 / 0.156);
  --red-a4: color(display-p3 1 0.118 0.267 / 0.236);
  --red-a5: color(display-p3 1 0.212 0.314 / 0.303);
  --red-a6: color(display-p3 1 0.318 0.38 / 0.374);
  --red-a7: color(display-p3 1 0.4 0.424 / 0.475);
  --red-a8: color(display-p3 1 0.431 0.431 / 0.635);
  --red-a9: color(display-p3 1 0.388 0.384 / 0.82);
  --red-a10: color(display-p3 1 0.463 0.447 / 0.853);
  --red-a11: color(display-p3 1 0.57 0.55);
  --red-a12: color(display-p3 0.971 0.826 0.852);
  --green-1: #0e1512;
  --green-2: #121b17;
  --green-3: #132d21;
  --green-4: #113b29;
  --green-5: #174933;
  --green-6: #20573e;
  --green-7: #28684a;
  --green-8: #2f7c57;
  --green-9: #30a46c;
  --green-10: #33b074;
  --green-11: #3dd68c;
  --green-12: #b1f1cb;
  --green-1: color(display-p3 0.062 0.083 0.071);
  --green-2: color(display-p3 0.079 0.106 0.09);
  --green-3: color(display-p3 0.1 0.173 0.133);
  --green-4: color(display-p3 0.115 0.229 0.166);
  --green-5: color(display-p3 0.147 0.282 0.206);
  --green-6: color(display-p3 0.185 0.338 0.25);
  --green-7: color(display-p3 0.227 0.403 0.298);
  --green-8: color(display-p3 0.27 0.479 0.351);
  --green-9: color(display-p3 0.332 0.634 0.442);
  --green-10: color(display-p3 0.357 0.682 0.474);
  --green-11: color(display-p3 0.434 0.828 0.573);
  --green-12: color(display-p3 0.747 0.938 0.807);
  --green-a1: #00de4505;
  --green-a2: #29f99d0b;
  --green-a3: #22ff991e;
  --green-a4: #11ff992d;
  --green-a5: #2bffa23c;
  --green-a6: #44ffaa4b;
  --green-a7: #50fdac5e;
  --green-a8: #54ffad73;
  --green-a9: #44ffa49e;
  --green-a10: #43fea4ab;
  --green-a11: #46fea5d4;
  --green-a12: #bbffd7f0;
  --green-a1: color(display-p3 0 0.992 0.298 / 0.017);
  --green-a2: color(display-p3 0.341 0.98 0.616 / 0.043);
  --green-a3: color(display-p3 0.376 0.996 0.655 / 0.114);
  --green-a4: color(display-p3 0.341 0.996 0.635 / 0.173);
  --green-a5: color(display-p3 0.408 1 0.678 / 0.232);
  --green-a6: color(display-p3 0.475 1 0.706 / 0.29);
  --green-a7: color(display-p3 0.514 1 0.706 / 0.362);
  --green-a8: color(display-p3 0.529 1 0.718 / 0.442);
  --green-a9: color(display-p3 0.502 0.996 0.682 / 0.61);
  --green-a10: color(display-p3 0.506 1 0.682 / 0.66);
  --green-a11: color(display-p3 0.434 0.828 0.573);
  --green-a12: color(display-p3 0.747 0.938 0.807);
  --amber-1: #16120c;
  --amber-2: #1d180f;
  --amber-3: #302008;
  --amber-4: #3f2700;
  --amber-5: #4d3000;
  --amber-6: #5c3d05;
  --amber-7: #714f19;
  --amber-8: #8f6424;
  --amber-9: #ffc53d;
  --amber-10: #ffd60a;
  --amber-11: #ffca16;
  --amber-12: #ffe7b3;
  --amber-1: color(display-p3 0.082 0.07 0.05);
  --amber-2: color(display-p3 0.111 0.094 0.064);
  --amber-3: color(display-p3 0.178 0.128 0.049);
  --amber-4: color(display-p3 0.239 0.156 0);
  --amber-5: color(display-p3 0.29 0.193 0);
  --amber-6: color(display-p3 0.344 0.245 0.076);
  --amber-7: color(display-p3 0.422 0.314 0.141);
  --amber-8: color(display-p3 0.535 0.399 0.189);
  --amber-9: color(display-p3 1 0.77 0.26);
  --amber-10: color(display-p3 1 0.87 0.15);
  --amber-11: color(display-p3 1 0.8 0.29);
  --amber-12: color(display-p3 0.984 0.909 0.726);
  --amber-a1: #e63c0006;
  --amber-a2: #fd9b000d;
  --amber-a3: #fa820022;
  --amber-a4: #fc820032;
  --amber-a5: #fd8b0041;
  --amber-a6: #fd9b0051;
  --amber-a7: #ffab2567;
  --amber-a8: #ffae3587;
  --amber-a9: #ffc53d;
  --amber-a10: #ffd60a;
  --amber-a11: #ffca16;
  --amber-a12: #ffe7b3;
  --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
  --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
  --amber-a3: color(display-p3 1 0.6 0 / 0.118);
  --amber-a4: color(display-p3 1 0.557 0 / 0.185);
  --amber-a5: color(display-p3 1 0.592 0 / 0.24);
  --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
  --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
  --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
  --amber-a9: color(display-p3 1 0.769 0.259);
  --amber-a10: color(display-p3 1 0.871 0.149);
  --amber-a11: color(display-p3 1 0.8 0.29);
  --amber-a12: color(display-p3 0.984 0.909 0.726);
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
  --black-a1: color(display-p3 0 0 0 / 0.05);
  --black-a2: color(display-p3 0 0 0 / 0.1);
  --black-a3: color(display-p3 0 0 0 / 0.15);
  --black-a4: color(display-p3 0 0 0 / 0.2);
  --black-a5: color(display-p3 0 0 0 / 0.3);
  --black-a6: color(display-p3 0 0 0 / 0.4);
  --black-a7: color(display-p3 0 0 0 / 0.5);
  --black-a8: color(display-p3 0 0 0 / 0.6);
  --black-a9: color(display-p3 0 0 0 / 0.7);
  --black-a10: color(display-p3 0 0 0 / 0.8);
  --black-a11: color(display-p3 0 0 0 / 0.9);
  --black-a12: color(display-p3 0 0 0 / 0.95);
  --white-a1: rgba(255, 255, 255, 0.05);
  --white-a2: rgba(255, 255, 255, 0.1);
  --white-a3: rgba(255, 255, 255, 0.15);
  --white-a4: rgba(255, 255, 255, 0.2);
  --white-a5: rgba(255, 255, 255, 0.3);
  --white-a6: rgba(255, 255, 255, 0.4);
  --white-a7: rgba(255, 255, 255, 0.5);
  --white-a8: rgba(255, 255, 255, 0.6);
  --white-a9: rgba(255, 255, 255, 0.7);
  --white-a10: rgba(255, 255, 255, 0.8);
  --white-a11: rgba(255, 255, 255, 0.9);
  --white-a12: rgba(255, 255, 255, 0.95);
  --white-a1: color(display-p3 1 1 1 / 0.05);
  --white-a2: color(display-p3 1 1 1 / 0.1);
  --white-a3: color(display-p3 1 1 1 / 0.15);
  --white-a4: color(display-p3 1 1 1 / 0.2);
  --white-a5: color(display-p3 1 1 1 / 0.3);
  --white-a6: color(display-p3 1 1 1 / 0.4);
  --white-a7: color(display-p3 1 1 1 / 0.5);
  --white-a8: color(display-p3 1 1 1 / 0.6);
  --white-a9: color(display-p3 1 1 1 / 0.7);
  --white-a10: color(display-p3 1 1 1 / 0.8);
  --white-a11: color(display-p3 1 1 1 / 0.9);
  --white-a12: color(display-p3 1 1 1 / 0.95);
}

/* --- ui.css --- */
/* DZecom design system.
 *
 * Built on Radix Colors (radix-colors.css) and following Radix Themes'
 * visual language: near-neutral surfaces, 1px hairline borders, restrained
 * radii, one accent used sparingly, and type that carries the hierarchy
 * instead of colour or weight alone.
 *
 * Shared by all four surfaces — www, storefront, admin, back-office — so a
 * component looks identical wherever it appears.
 *
 * RTL: every box property here is LOGICAL (margin-inline, padding-block,
 * inset-inline, border-*-*-radius via logical corners where it matters). An
 * Arabic storefront sets dir="rtl" and the whole system mirrors with no
 * second stylesheet. A physical `margin-left` in this file is a bug.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Semantic aliases over the raw Radix steps. Radix's step semantics:
   * 1-2 backgrounds, 3-5 component backgrounds, 6-8 borders,
   * 9-10 solid fills, 11 low-contrast text, 12 high-contrast text. */
  --bg: var(--slate-1);
  --bg-subtle: var(--slate-2);
  --panel: #fff;
  --panel-subtle: var(--slate-2);
  --component: var(--slate-3);
  --component-hover: var(--slate-4);
  --component-active: var(--slate-5);

  --line: var(--slate-6);
  --line-strong: var(--slate-7);
  --line-interactive: var(--slate-8);

  --text: var(--slate-12);
  --text-low: var(--slate-11);
  --text-dim: var(--slate-10);

  --accent-bg: var(--indigo-3);
  --accent-line: var(--indigo-7);
  --accent-solid: var(--indigo-9);
  --accent-solid-hover: var(--indigo-10);
  --accent-text: var(--indigo-11);
  --accent-contrast: #fff;

  --danger-bg: var(--red-3);
  --danger-line: var(--red-7);
  --danger-solid: var(--red-9);
  --danger-text: var(--red-11);

  --success-bg: var(--green-3);
  --success-line: var(--green-7);
  --success-solid: var(--green-9);
  --success-text: var(--green-11);

  --warn-bg: var(--amber-3);
  --warn-line: var(--amber-7);
  --warn-text: var(--amber-11);

  /* Radius: Radix's scale is tighter than most. Restraint reads as precision. */
  --r-1: 3px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-full: 9999px;

  /* Space: a 4px base, named rather than numeric so intent survives edits. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --shadow-1: 0 1px 2px var(--black-a3);
  --shadow-2: 0 2px 8px -2px var(--black-a4), 0 1px 2px var(--black-a3);
  --shadow-3: 0 12px 32px -12px var(--black-a6), 0 2px 8px -4px var(--black-a4);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68rem;
  --measure-prose: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --panel: var(--slate-2);
    --accent-contrast: #fff;
  }
}
:root[data-scheme="dark"] {
  --panel: var(--slate-2);
  --accent-contrast: #fff;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; text-wrap: balance; }
h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem;  letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }

p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection { background: var(--accent-bg); }

/* -------------------------------------------------------------- primitives */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1; }
.gap-1 { gap: var(--s-1) } .gap-2 { gap: var(--s-2) } .gap-3 { gap: var(--s-3) }
.gap-4 { gap: var(--s-4) } .gap-5 { gap: var(--s-5) } .gap-6 { gap: var(--s-6) }

.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container-prose { max-width: var(--measure-prose); }

.muted     { color: var(--text-low); }
.dim       { color: var(--text-dim); }
.small     { font-size: 0.85rem; }
.tiny      { font-size: 0.78rem; }
.strong    { font-weight: 600; }
.mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap    { white-space: nowrap; }
.center    { text-align: center; }
.numeric   { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ card */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-5);
}
.card-flush { padding: 0; overflow: hidden; }
.card-hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card-head {
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.card-body { padding: var(--s-5); }
.card-foot {
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line);
  background: var(--panel-subtle);
}

/* ---------------------------------------------------------------- button */

.btn {
  --btn-bg: var(--component);
  --btn-fg: var(--text);
  --btn-line: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-block: 0;
  padding-inline: var(--s-4);
  block-size: 34px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-3);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 90ms, border-color 90ms;
}
.btn:hover { --btn-bg: var(--component-hover); text-decoration: none; }
.btn:active { --btn-bg: var(--component-active); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-solid   { --btn-bg: var(--accent-solid); --btn-fg: var(--accent-contrast); }
.btn-solid:hover  { --btn-bg: var(--accent-solid-hover); }
.btn-solid:active { --btn-bg: var(--accent-solid-hover); }

.btn-outline { --btn-bg: transparent; --btn-line: var(--line-strong); }
.btn-outline:hover { --btn-bg: var(--component); }

.btn-ghost   { --btn-bg: transparent; }
.btn-ghost:hover { --btn-bg: var(--component); }

.btn-danger  { --btn-bg: var(--danger-solid); --btn-fg: #fff; }
.btn-danger:hover { --btn-bg: var(--red-10); }

.btn-lg { block-size: 42px; padding-inline: var(--s-5); font-size: 0.98rem; }
.btn-sm { block-size: 28px; padding-inline: var(--s-3); font-size: 0.82rem; }
.btn-block { inline-size: 100%; }

/* ----------------------------------------------------------------- field */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.label { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.hint  { font-size: 0.78rem; color: var(--text-low); }

.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 34px;
  padding-block: var(--s-2);
  padding-inline: var(--s-3);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  transition: border-color 90ms, box-shadow 90ms;
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-interactive); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 1px var(--accent-solid);
}
.textarea { min-block-size: 120px; resize: vertical; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; }

.select {
  appearance: none;
  /* The chevron is inlined as a data URI: an external icon request on the
   * order form would be a render-blocking dependency on the exact surface
   * where latency costs conversions. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%238b8d98' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-inline-end: var(--s-6);
}
[dir="rtl"] .select { background-position: left var(--s-3) center; }

.input-error { border-color: var(--danger-line); }

/* ------------------------------------------------------------------ badge */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding-block: 2px;
  padding-inline: var(--s-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--r-2);
  background: var(--component);
  color: var(--text-low);
  white-space: nowrap;
}
.badge-accent  { background: var(--accent-bg);  color: var(--accent-text); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-warn    { background: var(--warn-bg);    color: var(--warn-text); }

/* ------------------------------------------------------------------ table */

.table { inline-size: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th {
  text-align: start;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-low);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background: var(--bg-subtle); }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ misc */

.callout {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-4);
  border: 1px solid var(--line);
  background: var(--panel-subtle);
  font-size: 0.9rem;
}
.callout-danger  { background: var(--danger-bg);  border-color: var(--danger-line);  color: var(--danger-text); }
.callout-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success-text); }
.callout-warn    { background: var(--warn-bg);    border-color: var(--warn-line);    color: var(--warn-text); }
.callout-accent  { background: var(--accent-bg);  border-color: var(--accent-line);  color: var(--accent-text); }

.separator { block-size: 1px; background: var(--line); border: 0; margin-block: var(--s-5); }

.kbd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding-inline: var(--s-2);
  padding-block: 1px;
  border: 1px solid var(--line);
  border-block-end-width: 2px;
  border-radius: var(--r-2);
  background: var(--panel);
}

.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  color: var(--text-low);
}
.empty h3 { margin-block-end: var(--s-2); color: var(--text); }

/* Stat tiles: one number per tile, label above, no chart junk. */
.stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-4); background: var(--panel); }
.stat-label { font-size: 0.78rem; color: var(--text-low); margin-block-end: var(--s-1); }
.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-sub   { font-size: 0.78rem; color: var(--text-dim); margin-block-start: var(--s-1); }

/* A bar chart made of divs — no charting library on a page whose whole point
 * is that it loads fast. */
.bars { display: grid; gap: var(--s-2); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 22%) 1fr auto; gap: var(--s-3); align-items: center; font-size: 0.85rem; }
.bar-track { background: var(--component); border-radius: var(--r-full); block-size: 8px; overflow: hidden; }
.bar-fill { background: var(--accent-solid); block-size: 100%; border-radius: var(--r-full); }

/* ------------------------------------------------------------------ nav */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-block-end: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: var(--s-5); block-size: 56px; }

/* On a phone the bar has to give something up.
 *
 * Five items across 390px pushed the two buttons off the right edge — the
 * page scrolled sideways and "Créer ma boutique", the one thing every visitor
 * is meant to press, sat outside the screen. The secondary links go (they are
 * in the footer, and the primary action must survive), the gap tightens, and
 * the call to action stays. */
@media (max-width: 560px) {
  .topbar-inner { gap: var(--s-3); }
  .topbar-inner .nav,
  .topbar-inner .dz-scheme-toggle { display: none; }
  .topbar-inner .btn-ghost { display: none; }
}

.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  inline-size: 22px; block-size: 22px;
  border-radius: var(--r-2);
  background: var(--accent-solid);
  color: var(--accent-contrast);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  padding-block: var(--s-2); padding-inline: var(--s-3);
  border-radius: var(--r-3);
  color: var(--text-low);
  font-size: 0.9rem;
}
.nav a:hover { background: var(--component); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--component); color: var(--text); font-weight: 500; }

/* Admin shell: sidebar + content, collapsing to stacked on small screens. */
.shell { display: grid; grid-template-columns: 216px 1fr; min-block-size: 100vh; }
.sidebar {
  border-inline-end: 1px solid var(--line);
  background: var(--bg-subtle);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-2); padding-inline: var(--s-3);
  border-radius: var(--r-3);
  color: var(--text-low);
  font-size: 0.9rem;
}
.sidenav a:hover { background: var(--component); color: var(--text); text-decoration: none; }
.sidenav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent-text); font-weight: 500; }
.sidenav-group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding-inline: var(--s-3); margin-block-end: var(--s-1); }

.main { padding: var(--s-6) var(--s-5) var(--s-9); min-inline-size: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-5); flex-wrap: wrap; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .sidenav { flex-direction: row; flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ misc */

.hero { padding-block: var(--s-9) var(--s-8); text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.03em; }
.hero p { margin-block-start: var(--s-4); font-size: 1.05rem; color: var(--text-low); max-inline-size: 40rem; margin-inline: auto; }
.hero-actions { display: flex; gap: var(--s-3); justify-content: center; margin-block-start: var(--s-6); flex-wrap: wrap; }

/* Capped at three columns rather than left to auto-fit: on a wide screen a
 * six-item grid would fall as 4+2, which reads as a layout accident. */
.grid-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.price-amount { font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; }
.checklist { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); font-size: 0.9rem; color: var(--text-low); }
.checklist li { list-style: none; display: flex; gap: var(--s-2); }
.checklist { padding: 0; margin-inline: 0; }
.check { color: var(--success-text); flex: none; }

.footer { border-block-start: 1px solid var(--line); margin-block-start: var(--s-9); padding-block: var(--s-6); color: var(--text-low); font-size: 0.85rem; }

/* --- app.css --- */
/* Surfaces built on ui.css: the DZecom marketing site, the merchant admin and
 * the staff back-office. Storefronts use storefront.css instead — a merchant's
 * customers should never download admin chrome.
 */

/* --- auth screens -------------------------------------------------------- */

.auth-wrap {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
}
.auth-card { inline-size: 100%; max-inline-size: 380px; }
.auth-card .card { padding: var(--s-6); }
.auth-head { text-align: center; margin-block-end: var(--s-5); }
.auth-head h1 { font-size: 1.35rem; margin-block-end: var(--s-2); }
.auth-foot { text-align: center; margin-block-start: var(--s-4); font-size: 0.85rem; color: var(--text-low); }

/* --- marketing ----------------------------------------------------------- */

/* Rhythm. Sections are separated by space rather than by rules: a page that
 * changes background every 200px reads as a template, not as a product. */
.section { padding-block: var(--s-9); }
.section-head { max-inline-size: 34rem; margin-block-end: var(--s-6); }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.section-head p { margin-block-start: var(--s-3); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  padding-block: var(--s-1); padding-inline: var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-bg); color: var(--accent-text);
  border: 1px solid var(--accent-line);
}

/* The marketing site's own furniture.
 *
 * The admin is deliberately plain — a merchant works in it all day. The
 * marketing site is read once, by someone deciding whether to pay, and a page
 * of centred type on white tells them nothing about what they are buying. So:
 * a tinted band behind the fold, photographs at human scale, and a call to
 * action wherever a section has just made its case. */
.hero-band {
  background:
    radial-gradient(120% 120% at 85% 0%, var(--accent-bg), transparent 60%),
    linear-gradient(180deg, var(--panel-subtle), var(--bg));
  border-block-end: 1px solid var(--line);
}
.hero-band .logos { border-block: 0; padding-block-start: 0; }

.hero-split {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-block: var(--s-8) var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  /* The marketing site's own furniture.
 *
 * The admin is deliberately plain — a merchant works in it all day. The
 * marketing site is read once, by someone deciding whether to pay, and a page
 * of centred type on white tells them nothing about what they are buying. So:
 * a tinted band behind the fold, photographs at human scale, and a call to
 * action wherever a section has just made its case. */
.hero-band {
  background:
    radial-gradient(120% 120% at 85% 0%, var(--accent-bg), transparent 60%),
    linear-gradient(180deg, var(--panel-subtle), var(--bg));
  border-block-end: 1px solid var(--line);
}
.hero-band .logos { border-block: 0; padding-block-start: 0; }

.hero-split { grid-template-columns: 1fr 1fr; gap: var(--s-8); padding-block: var(--s-9) var(--s-8); }
}
.hero-split h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-block: var(--s-4) 0;
  text-wrap: balance;
}
.hero-split .lead { margin-block-start: var(--s-4); font-size: 1.06rem; color: var(--text-low); max-inline-size: 34rem; }
.hero-split .hero-actions { justify-content: flex-start; margin-block-start: var(--s-6); }

.tick-list { list-style: none; margin-block-start: var(--s-6); padding: 0; display: grid; gap: var(--s-2); }
.tick-list li { position: relative; padding-inline-start: var(--s-6); font-size: 0.9rem; color: var(--text-low); }
.tick-list li::before {
  content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--success-solid); font-weight: 600;
}

/* The hero figure: a photograph of the work, with the product laid over it.
 *
 * The mock overlaps rather than sitting beside — two rectangles side by side
 * read as two screenshots, and the point is that the tool belongs to the shop
 * in the picture. On a phone they stack: an overlap that covers half the
 * photograph on a 360px screen hides both. */
.hero-figure { position: relative; }
.hero-photo {
  inline-size: 100%; block-size: auto; display: block;
  aspect-ratio: 7 / 5; object-fit: cover;
  border-radius: var(--r-5);
  box-shadow: var(--shadow-3);
}
.hero-figure .mock { margin-block-start: calc(var(--s-6) * -1); margin-inline: var(--s-4); }
@media (min-width: 900px) {
  .hero-figure .mock {
    position: absolute; inset-block-end: calc(var(--s-6) * -1);
    inset-inline-start: calc(var(--s-7) * -1);
    inline-size: 66%; margin: 0;
  }
  .hero-figure { margin-block-end: var(--s-6); }
}

/* Product mock: a miniature of the real thing, drawn with the same tokens so
 * it can never go stale the way a screenshot does. */
.mock {
  border: 1px solid var(--line); border-radius: var(--r-5);
  background: var(--panel); box-shadow: var(--shadow-3);
  overflow: hidden;
}
.mock-flat { box-shadow: var(--shadow-2); }
.mock-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border-block-end: 1px solid var(--line);
  background: var(--panel-subtle);
}
.mock-dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-full); background: var(--line-strong); }
.mock-url {
  margin-inline-start: var(--s-3); font-size: 0.72rem; color: var(--text-dim);
  font-family: var(--font-mono);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-2);
  padding-block: 1px; padding-inline: var(--s-2);
}
.mock-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-4); }
.mock-body-col { padding: var(--s-4); }
.mock-media {
  border-radius: var(--r-4); min-block-size: 150px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, var(--accent-bg), transparent 70%),
    var(--component);
  border: 1px solid var(--line);
}
.mock-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.mock-lines { display: grid; gap: var(--s-2); align-content: start; }
.mock-line { block-size: 9px; border-radius: var(--r-full); background: var(--component-active); }
.mock-line.w-90 { inline-size: 90%; }
.mock-line.w-70 { inline-size: 70%; block-size: 13px; background: var(--line-interactive); }
.mock-line.w-50 { inline-size: 50%; }
.mock-price { font-weight: 700; font-size: 1.05rem; color: var(--accent-text); }
.mock-field { block-size: 26px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--bg-subtle); }
.mock-cta {
  margin-block-start: var(--s-1); text-align: center;
  padding-block: var(--s-2); border-radius: var(--r-3);
  background: var(--accent-solid); color: var(--accent-contrast);
  font-size: 0.8rem; font-weight: 600;
}

.logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
}
.logos-label { font-size: 0.78rem; color: var(--text-dim); margin-inline-end: var(--s-2); }
.logo-chip {
  font-size: 0.86rem; font-weight: 600; color: var(--text-low);
  padding-block: var(--s-2); padding-inline: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel);
}

.band { padding-block: var(--s-8); }
.metrics, .metrics-band {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* The numbers get a ground of their own: four figures floating on white read
 * as a footnote, which is the opposite of what they are for. */
.metrics-band {
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-5);
  background:
    radial-gradient(100% 160% at 0% 0%, var(--accent-bg), transparent 60%),
    var(--panel-subtle);
}
.metric { display: grid; gap: var(--s-1); }
.metric-value { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metric-label { font-size: 0.85rem; color: var(--text-low); }

.showcase { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); } }
.showcase-top { align-items: start; }
/* Image first in the markup so it comes first on a phone, where a photograph
 * is the faster thing to understand — and second on a wide screen, where the
 * words should start on the reading edge. */
@media (min-width: 900px) {
  .showcase-reverse { grid-template-columns: 0.9fr 1.1fr; }
}

.photo-card { margin: 0; }
.photo-card img {
  inline-size: 100%; block-size: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-5); box-shadow: var(--shadow-2);
}

/* A full-bleed photograph with the words over it. One per page: it is the
 * loudest thing here, and two of them turn a page into a slideshow. */
.photo-band {
  position: relative; isolation: isolate;
  margin-block: var(--s-8);
  display: grid; align-items: center;
  min-block-size: 26rem;
  overflow: hidden;
}
.photo-band img {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  /* Lifted, because the wash below has to leave a photograph rather than a
   * dark rectangle: under a flat scrim a warm, low-key picture reads as a
   * rendering failure. */
  filter: brightness(1.25) saturate(1.05);
}
.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(12, 10, 9, 0.82) 0%, rgba(12, 10, 9, 0.55) 45%, rgba(12, 10, 9, 0.2) 100%);
}
.photo-band-body { color: #fff; padding-block: var(--s-8); max-inline-size: 42rem; }
.photo-band-body h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; margin-block: var(--s-3) var(--s-4); }
.photo-band-body p { color: rgba(255, 255, 255, 0.84); margin-block-end: var(--s-6); max-inline-size: 34rem; }
.eyebrow-invert {
  background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.3);
}

.steps { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.step { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-4); background: var(--panel); }
.step h3 { margin-block: var(--s-4) var(--s-2); font-size: 1.02rem; }
.step p { color: var(--text-low); font-size: 0.9rem; }
.step-n {
  display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: var(--r-full);
  background: var(--accent-solid); color: var(--accent-contrast);
  font-size: 0.82rem; font-weight: 700;
}

.faq-item { border-block-end: 1px solid var(--line); padding-block: var(--s-4); }
.faq-item summary { cursor: pointer; font-weight: 500; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: inline-end; color: var(--text-dim); font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-block-start: var(--s-3); color: var(--text-low); font-size: 0.92rem; }

.cta-band {
  text-align: center; padding: var(--s-8) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-5);
  background:
    radial-gradient(90% 140% at 50% 0%, var(--accent-bg), transparent 70%),
    var(--panel-subtle);
}
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.cta-band p { margin-block-start: var(--s-3); color: var(--text-low); }
/* The last one on the page is the one that has to land. */
.cta-band-strong {
  background:
    radial-gradient(90% 140% at 50% 0%, var(--accent-bg), transparent 65%),
    var(--panel);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-2);
}

.feature { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-4); background: var(--panel); }
.feature h3 { margin-block-end: var(--s-2); }
.feature p { color: var(--text-low); font-size: 0.9rem; }
.feature-icon {
  inline-size: 32px; block-size: 32px; border-radius: var(--r-3);
  background: var(--accent-bg); color: var(--accent-text);
  display: grid; place-items: center; margin-block-end: var(--s-3);
  font-size: 15px;
}

.plan { display: flex; flex-direction: column; }
.plan-featured { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.plan-name { font-weight: 600; margin-block-end: var(--s-1); }
.plan-price { display: flex; align-items: baseline; gap: var(--s-2); margin-block: var(--s-3); }
.plan-period { color: var(--text-low); font-size: 0.85rem; }
/* The button sits on the floor of the card, whatever the list above it says.
 * Three plans with three different feature counts otherwise put three calls to
 * action at three different heights, and the eye reads that as three different
 * levels of importance. */
.plan .checklist { flex: 1 1 auto; }
.plan .btn { margin-block-start: var(--s-5); }

.footer-cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-brand { max-inline-size: 22rem; }
.footer-brand p { margin-block-start: var(--s-3); }
.footer-title { display: block; font-weight: 600; color: var(--text); margin-block-end: var(--s-3); font-size: 0.85rem; }
.footer-cols a { display: block; margin-block-end: var(--s-2); color: var(--text-low); }
.footer-cols a:hover { color: var(--text); }
.footer-legal { margin-block-start: var(--s-6); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }

.store-card { display: flex; flex-direction: column; gap: var(--s-2); }
.store-card-name { font-weight: 600; }
.store-card-meta { font-size: 0.82rem; color: var(--text-low); }

/* --- admin --------------------------------------------------------------- */

.toolbar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-block-end: var(--s-4); }

.thumb { inline-size: 40px; block-size: 40px; border-radius: var(--r-3); object-fit: cover; border: 1px solid var(--line); background: var(--component); flex: none; }
.thumb-lg { inline-size: 72px; block-size: 72px; }

.order-row-risk { display: inline-flex; align-items: center; gap: var(--s-1); }

/* Reliability band. Shown ONLY on orders the merchant received — there is no
 * lookup screen anywhere in the product (ADR 0006). */
.risk { font-size: 0.72rem; font-weight: 600; padding-block: 1px; padding-inline: var(--s-2); border-radius: var(--r-2); }
.risk-trusted   { background: var(--success-bg); color: var(--success-text); }
.risk-neutral   { background: var(--component);  color: var(--text-low); }
.risk-caution   { background: var(--warn-bg);    color: var(--warn-text); }
.risk-high_risk { background: var(--danger-bg);  color: var(--danger-text); }
.risk-unknown   { background: var(--component);  color: var(--text-dim); }

.reliability { display: grid; gap: var(--s-2); }
.reliability-counts { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: 0.85rem; color: var(--text-low); }
.reliability-counts b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Editor: code pane beside a live preview. */
.editor { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
/* The canvas gets the room, the controls get a column. The sidebar used to
 * take 42% of the window, which on a laptop left the storefront rendered in a
 * strip narrower than a phone — so the merchant was checking a layout their
 * customers would never see. */
@media (min-width: 1100px) { .editor { grid-template-columns: minmax(320px, 380px) 1fr; align-items: start; } }
/* The preview pane sticks and fills the window.
 *
 * A fixed-height frame in a scrolling column is not a live preview: the
 * merchant scrolls the controls, the preview leaves with them, and the storefront
 * gets a letterbox instead of a page. Sticking it to the viewport and sizing it
 * to what is left of the screen is the whole point of a side-by-side editor. */
.editor-preview {
  border: 1px solid var(--line); border-radius: var(--r-4);
  overflow: hidden; background: var(--panel);
  position: sticky;
  inset-block-start: var(--s-4);
  /* The bar plus a breath of margin; the frame takes the rest. */
  block-size: calc(100vh - var(--s-6) * 2);
  block-size: calc(100dvh - var(--s-6) * 2);
  display: flex; flex-direction: column;
}
.editor-preview .viewport-frame { flex: 1 1 auto; min-block-size: 0; }
.editor-preview iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0; display: block; background: #fff;
}
/* Below the split, the preview stops being sticky — a full-height sticky frame
 * on a phone would bury the controls it is meant to accompany. */
@media (max-width: 1099px) {
  .editor-preview { position: static; block-size: auto; }
  .editor-preview .viewport-frame { block-size: 70vh; flex: none; }
}
.editor-preview-bar { padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); background: var(--panel-subtle); font-size: 0.78rem; color: var(--text-low); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }

.swatches { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.swatch { inline-size: 28px; block-size: 28px; border-radius: var(--r-2); border: 1px solid var(--line); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent-solid); outline-offset: 2px; }

/* Colour tokens: a dense grid of swatches, so a whole palette is visible at
 * once rather than as a column of coloured bars. */
.color-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.color-field {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--panel); cursor: pointer;
}
.color-field:hover { border-color: var(--line-interactive); }
.color-field span { font-size: 0.82rem; color: var(--text-low); }
.color-field input[type="color"] {
  inline-size: 34px; block-size: 24px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: none; cursor: pointer;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }

.theme-option { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-4); cursor: pointer; }
.theme-option:has(input:checked) { border-color: var(--accent-solid); background: var(--accent-bg); }
.theme-preview { inline-size: 56px; block-size: 40px; border-radius: var(--r-2); border: 1px solid var(--line); flex: none; }

/* Node list for the page editor. Server-rendered reordering, not drag-drop —
 * the React canvas is phase 6 (ADR 0003). */
.node { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); margin-block-end: var(--s-2); }
.node-type { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-low); }
.node-actions { display: flex; gap: var(--s-1); margin-inline-start: auto; }

/* htmx: a subtle busy state so an action never looks like it did nothing. */
.htmx-request { opacity: 0.6; transition: opacity 120ms; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

.flash { margin-block-end: var(--s-4); }

/* Ad creative: the current artwork, the replace control and the remove control
 * in one field. They used to be three places — a file input here, a preview in
 * a card on the other side of the page, and no removal at all. */
.creative { display: grid; gap: var(--s-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 620px) { .creative { grid-template-columns: 140px 1fr; } }
.creative-current {
  inline-size: 100%; block-size: auto;
  aspect-ratio: 4 / 3; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--panel-subtle); padding: var(--s-2);
}
.creative-empty {
  display: grid; place-items: center;
  font-size: 0.78rem; color: var(--text-dim);
  border-style: dashed;
}
.creative-controls { display: grid; gap: var(--s-2); }

/* --- theme gallery -------------------------------------------------------
 *
 * Each card previews the theme on the merchant's OWN storefront, live. The
 * frame renders at desktop width and is scaled down with a transform rather
 * than sized down: a storefront rendered into a 380px box is the mobile layout,
 * and a merchant comparing themes is choosing a desktop design. */
.theme-gallery {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.theme-card {
  border: 1px solid var(--line); border-radius: var(--r-4);
  background: var(--panel); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 140ms, box-shadow 140ms;
}
.theme-card:hover { border-color: var(--line-interactive); box-shadow: var(--shadow-2); }
.theme-card-active { border-color: var(--accent-solid); box-shadow: 0 0 0 1px var(--accent-solid); }

.theme-shot {
  position: relative;
  block-size: 260px;
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background: var(--bg-subtle);
}
.theme-shot iframe {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 1280px; block-size: 900px;
  border: 0;
  transform: scale(0.36);
  transform-origin: top left;
  pointer-events: none;
}
/* RTL keeps the frame pinned to the visual start of the box. */
[dir="rtl"] .theme-shot iframe { inset-inline-start: auto; inset-inline-end: 0; transform-origin: top right; }

/* The actions live over the screenshot, WordPress-style: the picture is what a
 * merchant is choosing between, so it gets the room. They fade in on hover but
 * are always present and always focusable — a card whose only actions appear on
 * hover is a card with no actions on a phone. */
.theme-shot-overlay {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-3);
  background: rgba(15, 17, 21, 0.5);
  opacity: 0; transition: opacity 140ms;
}
/* Wrapping is not optional: a theme that ships a page has four actions and the
 * card is 380px wide, so a single row pushed the first and last button off both
 * edges — they were there, focusable, and half of each was outside the card. */
.theme-shot-overlay .btn,
.theme-shot-overlay form { flex: 0 0 auto; }
/* Every action gets its own ground. They sit on a photograph, and a ghost
 * button over somebody's hero image is a button you cannot read — which is
 * what "Aperçu" and "Appliquer" were, in white text over whatever the theme's
 * hero happened to be. Set through the button's own variables so hover and
 * active keep working. */
.theme-shot-overlay .btn {
  --btn-bg: var(--panel);
  --btn-fg: var(--text);
  --btn-line: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}
.theme-shot-overlay .btn:hover { --btn-bg: var(--bg-subtle); }
.theme-shot-overlay .btn-solid { --btn-bg: var(--accent-solid); --btn-fg: var(--accent-contrast); }
.theme-shot-overlay .btn-solid:hover { --btn-bg: var(--accent-solid-hover); }
.theme-card:hover .theme-shot-overlay,
.theme-shot-overlay:focus-within { opacity: 1; }
@media (hover: none) {
  /* No hover to reveal them, so they sit permanently along the bottom edge. */
  .theme-shot-overlay {
    opacity: 1; background: rgba(15, 17, 21, 0.28);
    align-content: flex-end;
  }
}

.theme-card-body { padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; flex: 1; }
.theme-card-meta { display: flex; justify-content: space-between; gap: var(--s-2); }
.theme-card-body .row:last-child { margin-block-start: auto; padding-block-start: var(--s-2); }

/* Full-screen try-on: the real storefront under a bar that applies or leaves. */
.tryon {
  border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden;
  display: flex; flex-direction: column;
  block-size: calc(100dvh - var(--s-9) * 2);
  min-block-size: 520px;
}
.tryon-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line); background: var(--panel-subtle);
}
.tryon-frame { flex: 1 1 auto; inline-size: 100%; min-block-size: 0; border: 0; background: #fff; }

/* --- media library ------------------------------------------------------- */
.media-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.media-item {
  border: 1px solid var(--line); border-radius: var(--r-4);
  background: var(--panel); overflow: hidden;
  display: flex; flex-direction: column;
}
.media-thumb {
  display: block; aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  border-block-end: 1px solid var(--line);
}
.media-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.media-meta { padding: var(--s-3); display: grid; gap: 2px; flex: 1; }
.media-meta code { overflow: hidden; text-overflow: ellipsis; }

/* Gallery filters: a search box and tag chips, so thirty themes stay
 * browsable. Server-side and in the URL, so "the dark ones" is a link a
 * merchant can send to someone else. */
.theme-filters { display: flex; gap: var(--s-2); margin-block-end: var(--s-3); max-inline-size: 30rem; }
.theme-filters .input { flex: 1; }

.theme-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-5); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-low);
  padding-block: var(--s-1); padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel);
}
.tag-chip:hover { border-color: var(--line-interactive); color: var(--text); }
.tag-chip span { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tag-chip-on { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-contrast); }
.tag-chip-on span { color: var(--accent-contrast); opacity: 0.75; }


/* --- theme gallery toolbar
 *
 * Forty-eight tags in one row is a wall, not a filter. Three grouped menus ask
 * three short questions instead, and <details> means they work with no script:
 * a filter that needs a bundle is the first thing to break. */
.theme-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-block-end: var(--s-3);
}
.theme-toolbar .theme-filters { margin-block-end: 0; }

.theme-facets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.facet { position: relative; }
.facet > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--text-low);
  padding-block: var(--s-2); padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel);
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: "▾"; font-size: 0.7em; color: var(--text-dim); }
.facet > summary:hover { border-color: var(--line-interactive); color: var(--text); }
.facet[data-on] > summary {
  border-color: var(--accent-solid); color: var(--accent-solid); font-weight: 600;
}
.facet-menu {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 6px); inset-inline-start: 0;
  min-inline-size: 15rem; max-block-size: 60vh; overflow-y: auto;
  display: grid; gap: 2px; padding: var(--s-2);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
}
.facet-item {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: 0.85rem; color: var(--text-low);
  padding-block: 6px; padding-inline: var(--s-2); border-radius: var(--r-2);
}
.facet-item:hover { background: var(--bg-subtle); color: var(--text); }
.facet-item span { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.facet-item-on { color: var(--accent-solid); font-weight: 600; }

.theme-sort { display: inline-flex; margin-inline-start: auto; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.seg {
  font-size: 0.82rem; color: var(--text-low);
  padding-block: var(--s-2); padding-inline: var(--s-3);
  background: var(--panel);
}
.seg + .seg { border-inline-start: 1px solid var(--line); }
.seg:hover { color: var(--text); background: var(--bg-subtle); }
.seg-on { background: var(--accent-solid); color: var(--accent-contrast); }

.theme-count {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: 0.85rem; color: var(--text-low);
  margin-block-end: var(--s-4);
}

/* --- pagination */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2); margin-block-start: var(--s-6);
}
.pager-n {
  min-inline-size: 2rem; text-align: center;
  font-size: 0.85rem; color: var(--text-low);
  padding-block: 6px; padding-inline: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-2);
  font-variant-numeric: tabular-nums;
}
.pager-n:hover { border-color: var(--line-interactive); color: var(--text); }
.pager-n-on { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--accent-contrast); }

/* --- the author's way in */
.theme-submit {
  margin-block-start: var(--s-7);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.theme-submit h3 { margin-block-end: var(--s-2); }
.theme-submit p { max-inline-size: 44rem; }

.steps-list { display: grid; gap: var(--s-3); padding-inline-start: var(--s-5); }
.steps-list li { color: var(--text-low); }


/* --- the one irreversible control in the editor
 *
 * Framed rather than coloured red: a red button among ordinary ones is a thing
 * people click by accident and then read. A bordered zone with its own heading
 * is read first and clicked second, which is the order that matters here. */
.danger-zone {
  margin-block-start: var(--s-6);
  border-color: var(--danger-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.danger-zone h3 { color: var(--danger-text); margin-block-end: var(--s-2); }
.danger-zone p { max-inline-size: 38rem; }
.danger-zone .btn-outline { color: var(--danger-text); border-color: var(--danger-line); }
.danger-zone .btn-outline:hover { background: var(--danger-bg); }

.reset-list { display: grid; gap: var(--s-2); padding-inline-start: var(--s-5); color: var(--text-low); }
.reset-list li { font-size: 0.9rem; }


/* --- viewport switch
 *
 * Narrowing the frame IS the feature: the preview is the real storefront, so
 * its own media queries do the rest. Radios and labels rather than script —
 * this has to work before any bundle loads and survive an htmx swap, and three
 * inputs cannot get out of sync with anything.
 *
 * The inputs are matched by position, which is why viewportSizes must stay in
 * order and desktop must stay first. */
.viewport > input.vp { position: absolute; inline-size: 0; block-size: 0; opacity: 0; pointer-events: none; }

.viewport-frame {
  display: flex; justify-content: center;
  overflow: hidden;
  background: var(--bg-subtle);
}
/* flex: 0 0 auto is load-bearing. The frame is a flex row, and the iframe kept
 * its old `flex: 1 1 auto` — so it grew back to the full width whatever size it
 * had been given, and the switch looked like it did nothing at all. */
.viewport-frame > iframe {
  flex: 0 0 auto;
  block-size: 100%;
  max-inline-size: 100%;
  transition: inline-size 160ms ease;
}

.viewport > input.vp:nth-of-type(2):checked ~ .viewport-frame > iframe { inline-size: 834px; }
.viewport > input.vp:nth-of-type(3):checked ~ .viewport-frame > iframe { inline-size: 390px; }

.viewport-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.viewport-switch label {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 30px; block-size: 24px;
  color: var(--text-dim); background: var(--panel);
  cursor: pointer;
}
.viewport-switch label + label { border-inline-start: 1px solid var(--line); }
.viewport-switch label:hover { color: var(--text); background: var(--component); }

.viewport > input.vp:nth-of-type(1):checked ~ * .viewport-switch label:nth-child(1),
.viewport > input.vp:nth-of-type(2):checked ~ * .viewport-switch label:nth-child(2),
.viewport > input.vp:nth-of-type(3):checked ~ * .viewport-switch label:nth-child(3) {
  background: var(--accent-solid); color: var(--accent-contrast);
}
/* Focus has to be visible on the LABEL, since the input it drives is hidden. */
.viewport > input.vp:nth-of-type(1):focus-visible ~ * .viewport-switch label:nth-child(1),
.viewport > input.vp:nth-of-type(2):focus-visible ~ * .viewport-switch label:nth-child(2),
.viewport > input.vp:nth-of-type(3):focus-visible ~ * .viewport-switch label:nth-child(3) {
  outline: 2px solid var(--accent-solid); outline-offset: 1px;
}

/* On a narrow admin screen the controls are already the size of a phone. */
@media (max-width: 900px) { .viewport-switch { display: none; } }

/* The scheme switch sits beside it and looks the same, but is buttons rather
 * than radios: this one asks the server for the page again. */
.scheme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.scheme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 30px; block-size: 24px;
  color: var(--text-dim); background: var(--panel);
  border: 0; padding: 0; cursor: pointer;
}
.scheme-btn + .scheme-btn { border-inline-start: 1px solid var(--line); }
.scheme-btn:hover { color: var(--text); background: var(--component); }
.scheme-on, .scheme-on:hover { background: var(--accent-solid); color: var(--accent-contrast); }
.scheme-switch[hidden] { display: none; }

.tryon .viewport-frame { flex: 1 1 auto; min-block-size: 0; }
.tryon-frame { block-size: 100%; }


/* A colour setting and its "leave it to the theme" switch. The switch exists
 * because <input type="color"> has no empty state: an untouched one posts
 * black, and a merchant who opened a block and saved it would find it painted. */
.setting-color { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.setting-color input[type="color"] {
  inline-size: 42px; block-size: 30px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel);
  cursor: pointer;
}
.setting-unset { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-low); cursor: pointer; }

/* --- plans
 *
 * The question a merchant arrives with is "why can I not use this theme", so
 * each plan states what it unlocks and not only what it costs. */
.plan-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
.plan-card { display: grid; gap: var(--s-2); align-content: start; }
.plan-card-on { border-color: var(--accent-solid); }
.plan-price { font-size: 1.3rem; font-weight: 700; }
.plan-limits { display: grid; gap: 4px; margin: 0; padding-inline-start: var(--s-4); color: var(--text-low); font-size: 0.88rem; }
.plan-card form { margin-block-start: var(--s-2); }

/* --- the page editor's canvas
 *
 * The preview is the editing surface: a merchant clicks a block in the page,
 * and its card opens here. So the sidebar is a column of cards where the
 * selected one is marked, and the canvas gets the room. */
/* The controls scroll inside their column, the canvas sticks beside it. */
@media (min-width: 1100px) {
  .editor-side {
    position: sticky;
    inset-block-start: var(--s-4);
    max-block-size: calc(100dvh - var(--s-4) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--s-2);
  }
}
.block-card { transition: border-color 120ms, box-shadow 120ms; }
.block-card-on {
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 1px var(--accent-solid);
}
.block-card-on .block-head .strong { color: var(--accent-solid); }

/* Upload straight onto the block being edited. The file input sits in the
 * props form and belongs to the upload form beside it — nested forms are
 * invalid, and form= is how an input escapes its ancestor. */
.media-upload { display: flex; gap: var(--s-2); align-items: center; margin-block-start: var(--s-2); }
.media-upload .input { flex: 1 1 auto; min-inline-size: 0; font-size: 0.82rem; }
.input-sm { padding-block: 5px; }

/* --- carrier logos
 *
 * Every one of these is somebody else's mark, in somebody else's colours, and
 * half are dark type on a transparent background — so each sits on its own
 * white card. That also makes them survive the dark scheme, where black type
 * would simply be gone. */
.carrier-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.carrier-logo {
  display: grid; place-items: center;
  inline-size: 132px; block-size: 52px; padding-inline: var(--s-3);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-3);
}
.carrier-logo img {
  max-inline-size: 100%; max-block-size: 30px;
  inline-size: auto; block-size: auto; object-fit: contain;
}
.carrier-more { font-size: 0.85rem; color: var(--text-dim); }
.logos .carrier-row { flex: 1 1 auto; }

/* --- the pixel section
 *
 * On its own ground because it is one of the two reasons a merchant here buys
 * anything — the other is delivery — and a feature card was underselling it. */
.pixel-section {
  padding-block: var(--s-9);
  margin-block: var(--s-8);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--accent-bg), transparent 60%),
    var(--panel-subtle);
}
.pixel-section .section-head { max-inline-size: 46rem; }

/* The deduplication, drawn: two copies of one event joined by an id. */
/* Stacked, not a row: the column this sits in is half a page wide, and a row
 * wrapped mid-diagram — the arrow ended a line pointing at nothing. */
.flow { display: grid; justify-items: start; gap: var(--s-2); }
.flow-pair { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); }
.flow-step {
  display: grid; gap: 2px; align-content: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--panel);
}
.flow-step-end { border-color: var(--accent-line); background: var(--accent-bg); }
.flow-label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.flow-body { font-size: 0.9rem; font-weight: 600; }
.flow-join { display: grid; place-items: center; padding-inline: var(--s-1); }
.flow-id {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--accent-text); background: var(--accent-bg);
  border: 1px dashed var(--accent-line); border-radius: var(--r-full);
  padding-block: 2px; padding-inline: var(--s-2);
}
.flow-arrow { color: var(--text-dim); padding-inline-start: var(--s-5); line-height: 1; }
.flow-arrow::before { content: "↓"; }

.mode-list { display: grid; gap: var(--s-3); }
.mode {
  display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--panel);
}
.mode-name { font-weight: 600; font-size: 0.92rem; }
.mode-body { font-size: 0.86rem; color: var(--text-low); }

/* --- delivery
 *
 * The money a carrier is holding is the number a merchant opens this screen
 * for, so it is the biggest thing on it. */
.owed-amount { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.warn { color: var(--warn-text); }

/* What a carrier can do, from its own capability flags — shown before a
 * merchant dispatches, not discovered at the depot. */
.chip {
  display: inline-flex; align-items: center;
  font-size: 0.76rem; color: var(--accent-text);
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  border-radius: var(--r-full); padding-block: 2px; padding-inline: var(--s-3);
}
.chip-quiet { color: var(--text-low); background: var(--panel-subtle); border-color: var(--line); }

/* Overruling the carrier is folded away: it is the rare action on this panel,
 * and an always-open form invites correcting what was never wrong. */
.correction summary { cursor: pointer; list-style: none; }
.correction summary::-webkit-details-marker { display: none; }
.correction summary::before { content: "✎ "; }