:root {
  /* SHINOBI: ink-black working surfaces with restrained chakra accents. */
  --bg: #10120f;
  --bg-2: #181b17;
  --panel: rgba(27, 30, 26, 0.94);
  --panel2: rgba(255, 255, 255, 0.052);
  --text: #f4f3ed;
  --text-secondary: #c8c9c1;
  --muted: #92978d;
  --line: rgba(255, 255, 255, 0.11);
  --accent: #f27424;
  --accent-2: #ffad45;
  --accent-grad: linear-gradient(135deg, #c14214 0%, #b52f21 100%);
  --holo-grad: linear-gradient(110deg, #f27424 0%, #f6ab3e 58%, #2aa198 100%);
  --holo-ring: #e86622;
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --accent-text: #ffffff;
  --accent-rgb: 242, 116, 36;
  --seal-rgb: 193, 66, 20;
  --seal-end: 181, 47, 33;
  --seal-ink: 74, 24, 12;
  --flare-m: 242, 116, 36;
  --flare-m-deep: 164, 54, 18;
  --aura-v: 242, 116, 36;
  --aura-c: 42, 161, 152;
  --aura-m: 181, 47, 33;
  --aura-b: 87, 104, 92;
  --aura-v2: 118, 48, 23;
  --aura-c2: 72, 168, 158;
  --aura-c3: 42, 161, 152;
  --aura-t: 104, 173, 143;
  --aura-lv: 193, 66, 20;
  --aura-lc: 23, 126, 119;
  --aura-lm: 171, 43, 35;
  --aura-lb: 73, 92, 79;
  --wm-grad: #f4f3ed;
  --wm-soft-grad: #f4f3ed;
  --danger: #e05243;
  --danger-soft: rgba(224, 82, 67, 0.14);
  --good: #48c7a2;
  --good-soft: rgba(72, 199, 162, 0.13);
  --good-ink: #071d17;
  --warn: #e7b34a;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.22);
  --radius: 10px;
  --glass: blur(18px) saturate(125%);
  --glass-sm: blur(10px) saturate(115%);
  --specular: none;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
:root.light {
  --bg: #f3f5f2;
  --bg-2: #e9ede8;
  --panel: rgba(255, 255, 255, 0.96);
  --panel2: rgba(23, 33, 25, 0.045);
  --text: #1b211c;
  --text-secondary: #4e574f;
  --muted: #687168;
  --line: rgba(27, 40, 29, 0.13);
  --accent: #b84614;
  --accent-2: #c95a1a;
  --accent-grad: linear-gradient(135deg, #b33b12 0%, #9f3024 100%);
  --holo-grad: linear-gradient(110deg, #b84614 0%, #b97816 58%, #147d76 100%);
  --holo-ring: #b84614;
  --accent-soft: rgba(184, 70, 20, 0.1);
  --accent-text: #ffffff;
  --accent-rgb: 184, 70, 20;
  --seal-rgb: 179, 59, 18;
  --seal-end: 159, 48, 36;
  --wm-grad: #1b211c;
  --wm-soft-grad: #1b211c;
  --danger: #b83228;
  --danger-soft: rgba(184, 50, 40, 0.1);
  --good: #167c60;
  --good-soft: rgba(22, 124, 96, 0.1);
  --good-ink: #ffffff;
  --warn: #9a650b;
  --shadow: 0 12px 28px rgba(28, 38, 29, 0.1), 0 2px 6px rgba(28, 38, 29, 0.06);
}

/* ═══════════════════════════ COLOUR SKINS ═══════════════════════════
   Palette is orthogonal to theme: `.light` picks the theme, `[data-skin]`
   picks the palette, and they compose. No attribute = Obsidian Iris.
   Skins remap COLOUR TOKENS ONLY — no new filters, blends or layers, so
   the swipe fast-path (html.cardDrag / .card.leaving) is untouched.
   Every --bg / --bg-2 stays #rrggbb — syncTgChrome() requires strict hex.
   Ordering note: dark skin blocks tie :root.light on specificity, so the
   light skin blocks below re-declare every token the dark blocks change. */

/* ── NOIR JADE — deep-sea emerald ink, jade-to-azure seal ── */
:root[data-skin="jade"] {
  --bg: #02100a;
  --bg-2: #072418;
  --panel: rgba(10, 40, 30, 0.62);
  --accent: #14d6c0;
  --accent-2: #7ff0d8;
  --accent-grad: linear-gradient(135deg, #0a8756 0%, #0a8588 45%, #0b76c0 76%, #1258e6 100%);
  --holo-grad: linear-gradient(
    108deg,
    #3dffa8 0%,
    #14e5c0 26%,
    #00cfff 52%,
    #3f96ff 74%,
    #a1ffd6 100%
  );
  --holo-ring: conic-gradient(from 210deg, #3dffa8, #14e5c0, #00cfff, #3f96ff, #a1ffd6, #3dffa8);
  --accent-soft: rgba(20, 214, 192, 0.16);
  --accent-rgb: 20, 214, 192;
  --seal-rgb: 12, 186, 150;
  --seal-end: 18, 88, 230;
  --seal-ink: 4, 64, 48;
  --flare-m: 61, 255, 168;
  --flare-m-deep: 7, 138, 100;
  --aura-v: 22, 214, 150;
  --aura-c: 0, 213, 255;
  --aura-m: 52, 240, 170;
  --aura-b: 61, 150, 255;
  --aura-v2: 12, 190, 140;
  --aura-lv: 10, 170, 120;
  --aura-lc: 6, 160, 200;
  --aura-lm: 20, 180, 140;
  --aura-lb: 30, 110, 220;
  --wm-grad: linear-gradient(
    108deg,
    #f2fff9 0%,
    #3dffa8 16%,
    #14e5c0 34%,
    #00cfff 52%,
    #3f96ff 68%,
    #7ff0d8 82%,
    #f2fff9 100%
  );
  /* keep verdict-green clearly green next to the teal accent */
  --good: #46e668;
  --good-soft: rgba(70, 230, 104, 0.14);
  --shadow:
    0 32px 80px rgba(1, 18, 12, 0.68), 0 8px 24px rgba(1, 18, 12, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root.light[data-skin="jade"] {
  --bg: #edf8f2;
  --bg-2: #f9fdfb;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #077a58;
  --accent-2: #0b9b74;
  --accent-grad: linear-gradient(135deg, #077645 0%, #076f6b 45%, #085da8 76%, #0d47c8 100%);
  --holo-grad: linear-gradient(
    108deg,
    #067a45 0%,
    #077a72 30%,
    #0770b4 56%,
    #2050d0 78%,
    #069a63 100%
  );
  --holo-ring: conic-gradient(from 210deg, #067a45, #077a72, #0770b4, #2050d0, #069a63, #067a45);
  --accent-soft: rgba(7, 122, 88, 0.1);
  --good: #0a7d3c;
  --good-soft: rgba(10, 125, 60, 0.1);
  --wm-grad: linear-gradient(
    108deg,
    #024d33 0%,
    #067a45 22%,
    #077a72 44%,
    #0764b4 66%,
    #1d49c9 84%,
    #024d33 100%
  );
  --wm-soft-grad: linear-gradient(108deg, #067a45, #077a72, #0764b4);
  --shadow:
    0 18px 50px rgba(8, 84, 58, 0.13), 0 4px 12px rgba(8, 84, 58, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── GILDED EMBER — molten gold over espresso ink; the seal is a flame,
      so the CTA text flips to dark roast (--accent-text) for contrast ── */
:root[data-skin="ember"] {
  --bg: #150701;
  --bg-2: #2c1204;
  --panel: rgba(50, 24, 8, 0.62);
  --accent: #ffab2e;
  --accent-2: #ffd27a;
  --accent-text: #331303;
  --accent-grad: linear-gradient(135deg, #ff4b1f 0%, #ff7a1c 42%, #ffb31f 72%, #ffd75e 100%);
  --holo-grad: linear-gradient(
    108deg,
    #ffe08a 0%,
    #ffb42e 26%,
    #ff7a29 52%,
    #ff4d3d 74%,
    #ffd9a0 100%
  );
  --holo-ring: conic-gradient(from 210deg, #ffe08a, #ffb42e, #ff7a29, #ff4d3d, #ffd9a0, #ffe08a);
  --accent-soft: rgba(255, 171, 46, 0.15);
  --accent-rgb: 255, 171, 46;
  --seal-rgb: 255, 122, 28;
  --seal-end: 255, 190, 60;
  --seal-ink: 96, 32, 4;
  --flare-m: 255, 154, 61;
  --flare-m-deep: 194, 87, 10;
  --aura-v: 255, 140, 40;
  --aura-c: 255, 200, 80;
  --aura-m: 255, 84, 60;
  --aura-b: 255, 60, 90;
  --aura-v2: 230, 110, 20;
  --aura-c2: 255, 214, 130;
  --aura-c3: 255, 190, 70;
  --aura-t: 255, 224, 150;
  --aura-lv: 235, 140, 20;
  --aura-lc: 214, 160, 7;
  --aura-lm: 228, 70, 16;
  --aura-lb: 232, 56, 90;
  --wm-grad: linear-gradient(
    108deg,
    #fff8ec 0%,
    #ffd75e 16%,
    #ffb42e 34%,
    #ff7a29 52%,
    #ff4d3d 68%,
    #ffc46a 82%,
    #fff8ec 100%
  );
  /* pull danger to crimson so "bad" never reads as the amber accent */
  --danger: #ff3b5c;
  --danger-soft: rgba(255, 59, 92, 0.15);
  --shadow:
    0 32px 80px rgba(24, 8, 1, 0.68), 0 8px 24px rgba(24, 8, 1, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root.light[data-skin="ember"] {
  --bg: #faf3e7;
  --bg-2: #fffbf4;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #a35503;
  --accent-2: #c96a06;
  --accent-text: #ffffff;
  --accent-grad: linear-gradient(135deg, #c22415 0%, #bf4c04 45%, #a66a00 76%, #8a5a04 100%);
  --holo-grad: linear-gradient(
    108deg,
    #a66a00 0%,
    #c2570a 30%,
    #c22415 56%,
    #ad1a3d 78%,
    #8a6a08 100%
  );
  --holo-ring: conic-gradient(from 210deg, #a66a00, #c2570a, #c22415, #ad1a3d, #8a6a08, #a66a00);
  --accent-soft: rgba(163, 85, 3, 0.1);
  --danger: #c2103a;
  --danger-soft: rgba(194, 16, 58, 0.1);
  --wm-grad: linear-gradient(
    108deg,
    #6b3400 0%,
    #b25f04 22%,
    #c2570a 44%,
    #c22415 66%,
    #a01535 84%,
    #6b3400 100%
  );
  --wm-soft-grad: linear-gradient(108deg, #c2570a, #c22415, #a01535);
  --shadow:
    0 18px 50px rgba(104, 56, 8, 0.13), 0 4px 12px rgba(104, 56, 8, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── VELVET ROSE — wine-black ink, crimson→rose→orchid seal ── */
:root[data-skin="rose"] {
  --bg: #170310;
  --bg-2: #300a20;
  --panel: rgba(52, 14, 34, 0.62);
  --accent: #ff4d88;
  --accent-2: #ffa1c4;
  --accent-grad: linear-gradient(135deg, #d40f31 0%, #e0186e 45%, #b12dbb 76%, #7a3df0 100%);
  --holo-grad: linear-gradient(
    108deg,
    #ff5e8a 0%,
    #ff3da0 26%,
    #e04dff 52%,
    #9d5bff 74%,
    #ffc4d4 100%
  );
  --holo-ring: conic-gradient(from 210deg, #ff5e8a, #ff3da0, #e04dff, #9d5bff, #ffc4d4, #ff5e8a);
  --accent-soft: rgba(255, 77, 136, 0.16);
  --accent-rgb: 255, 77, 136;
  --seal-rgb: 224, 24, 110;
  --seal-end: 122, 61, 240;
  --seal-ink: 92, 6, 40;
  --flare-m: 255, 61, 160;
  --flare-m-deep: 192, 18, 96;
  --aura-v: 255, 46, 130;
  --aura-c: 208, 80, 255;
  --aura-m: 255, 80, 170;
  --aura-b: 150, 90, 255;
  --aura-v2: 220, 30, 120;
  --aura-c2: 230, 110, 255;
  --aura-c3: 214, 92, 255;
  --aura-t: 255, 160, 200;
  --aura-lv: 226, 24, 130;
  --aura-lc: 170, 40, 235;
  --aura-lm: 235, 40, 150;
  --aura-lb: 120, 56, 232;
  --wm-grad: linear-gradient(
    108deg,
    #fff4f8 0%,
    #ff5e8a 16%,
    #ff3da0 34%,
    #e04dff 52%,
    #9d5bff 68%,
    #ffb0c8 82%,
    #fff4f8 100%
  );
  /* danger keeps reading "bad": vermilion, clearly apart from rose-pink */
  --danger: #ff5433;
  --danger-soft: rgba(255, 84, 51, 0.15);
  --shadow:
    0 32px 80px rgba(24, 2, 14, 0.68), 0 8px 24px rgba(24, 2, 14, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root.light[data-skin="rose"] {
  --bg: #fbeff4;
  --bg-2: #fff8fb;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #c41a5e;
  --accent-2: #de2f7c;
  --accent-grad: linear-gradient(135deg, #b00c28 0%, #c01260 45%, #9222a8 76%, #6030d8 100%);
  --holo-grad: linear-gradient(
    108deg,
    #c01260 0%,
    #ad14a0 30%,
    #8a1fd9 56%,
    #6030d8 78%,
    #b00c40 100%
  );
  --holo-ring: conic-gradient(from 210deg, #c01260, #ad14a0, #8a1fd9, #6030d8, #b00c40, #c01260);
  --accent-soft: rgba(196, 26, 94, 0.1);
  --danger: #c8330e;
  --danger-soft: rgba(200, 51, 14, 0.1);
  --wm-grad: linear-gradient(
    108deg,
    #6b0530 0%,
    #c01260 22%,
    #ad14a0 44%,
    #7a16cc 66%,
    #5330d0 84%,
    #6b0530 100%
  );
  --wm-soft-grad: linear-gradient(108deg, #c01260, #ad14a0, #7a16cc);
  --shadow:
    0 18px 50px rgba(104, 12, 58, 0.13), 0 4px 12px rgba(104, 12, 58, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── ARCTIC GLACIER — polar-night ink, ice-cyan→ultramarine seal ── */
:root[data-skin="glacier"] {
  --bg: #020a12;
  --bg-2: #081c30;
  --panel: rgba(10, 30, 48, 0.62);
  --accent: #2fc9ff;
  --accent-2: #a5e9ff;
  --accent-grad: linear-gradient(135deg, #0a7f9e 0%, #0b6fd8 45%, #2450f0 76%, #4436e0 100%);
  --holo-grad: linear-gradient(
    108deg,
    #b8f6ff 0%,
    #4fe0ff 26%,
    #26a9ff 52%,
    #4f7dff 74%,
    #d6fbff 100%
  );
  --holo-ring: conic-gradient(from 210deg, #b8f6ff, #4fe0ff, #26a9ff, #4f7dff, #8fb8ff, #b8f6ff);
  --accent-soft: rgba(47, 201, 255, 0.15);
  --accent-rgb: 47, 201, 255;
  --seal-rgb: 24, 144, 230;
  --seal-end: 68, 54, 224;
  --seal-ink: 8, 34, 92;
  --flare-m: 79, 224, 255;
  --flare-m-deep: 8, 110, 190;
  --aura-v: 60, 170, 255;
  --aura-c: 0, 229, 255;
  --aura-m: 90, 140, 255;
  --aura-b: 70, 110, 255;
  --aura-v2: 40, 120, 240;
  --aura-c2: 120, 235, 255;
  --aura-c3: 0, 208, 255;
  --aura-t: 170, 240, 255;
  --aura-lv: 30, 130, 230;
  --aura-lc: 7, 170, 214;
  --aura-lm: 60, 100, 240;
  --aura-lb: 56, 80, 232;
  --wm-grad: linear-gradient(
    108deg,
    #f4fcff 0%,
    #4fe0ff 16%,
    #26a9ff 34%,
    #4f7dff 52%,
    #3358f0 68%,
    #b8f6ff 82%,
    #f4fcff 100%
  );
  --shadow:
    0 32px 80px rgba(1, 10, 20, 0.68), 0 8px 24px rgba(1, 10, 20, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root.light[data-skin="glacier"] {
  --bg: #edf4fb;
  --bg-2: #f8fbff;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #0369b4;
  --accent-2: #0487d8;
  --accent-grad: linear-gradient(135deg, #076d94 0%, #085bc4 45%, #1c3fd8 76%, #3527c0 100%);
  --holo-grad: linear-gradient(
    108deg,
    #076d94 0%,
    #0862b8 30%,
    #1c3fd8 56%,
    #4230c8 78%,
    #0a85a8 100%
  );
  --holo-ring: conic-gradient(from 210deg, #076d94, #0862b8, #1c3fd8, #4230c8, #0a85a8, #076d94);
  --accent-soft: rgba(3, 105, 180, 0.1);
  --wm-grad: linear-gradient(
    108deg,
    #063a5e 0%,
    #076d94 22%,
    #0862b8 44%,
    #1c3fd8 66%,
    #4230c8 84%,
    #063a5e 100%
  );
  --wm-soft-grad: linear-gradient(108deg, #076d94, #0862b8, #1c3fd8);
  --shadow:
    0 18px 50px rgba(8, 48, 104, 0.13), 0 4px 12px rgba(8, 48, 104, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── VINTED — house teal, deliberately the most restrained skin: petrol ink,
      brand #007782/#09B1BA, near-monochrome ring, single-hue muted auras ── */
:root[data-skin="vinted"] {
  --bg: #061316;
  --bg-2: #0b2429;
  --panel: rgba(12, 38, 44, 0.62);
  --accent: #09b1ba;
  --accent-2: #7adfe4;
  --accent-grad: linear-gradient(135deg, #00838f 0%, #007782 45%, #06626f 76%, #0a4d63 100%);
  --holo-grad: linear-gradient(
    108deg,
    #7fe3e8 0%,
    #2ec9d2 26%,
    #09b1ba 52%,
    #0d8ea6 74%,
    #bdeef0 100%
  );
  --holo-ring: conic-gradient(from 210deg, #7fe3e8, #2ec9d2, #09b1ba, #0d8ea6, #56c7cf, #7fe3e8);
  --accent-soft: rgba(9, 177, 186, 0.14);
  --accent-rgb: 9, 177, 186;
  --seal-rgb: 0, 131, 143;
  --seal-end: 10, 77, 99;
  --seal-ink: 3, 42, 48;
  --flare-m: 46, 201, 210;
  --flare-m-deep: 7, 110, 120;
  --aura-v: 14, 165, 175;
  --aura-c: 40, 190, 200;
  --aura-m: 10, 140, 155;
  --aura-b: 20, 110, 135;
  --aura-v2: 8, 120, 130;
  --aura-lv: 8, 122, 132;
  --aura-lc: 6, 140, 160;
  --aura-lm: 10, 130, 140;
  --aura-lb: 12, 95, 130;
  --wm-grad: linear-gradient(
    108deg,
    #f0fbfc 0%,
    #7fe3e8 16%,
    #2ec9d2 34%,
    #09b1ba 52%,
    #0d8ea6 68%,
    #56c7cf 82%,
    #f0fbfc 100%
  );
  /* keep verdict-green clearly green next to the teal accent */
  --good: #3fd968;
  --good-soft: rgba(63, 217, 104, 0.14);
  --shadow:
    0 32px 80px rgba(2, 16, 19, 0.68), 0 8px 24px rgba(2, 16, 19, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
:root.light[data-skin="vinted"] {
  --bg: #f2f7f7;
  --bg-2: #fafdfd;
  --panel: rgba(255, 255, 255, 0.8);
  --accent: #007782;
  --accent-2: #099099;
  --accent-grad: linear-gradient(135deg, #007c87 0%, #007782 45%, #05616f 76%, #094b60 100%);
  --holo-grad: linear-gradient(
    108deg,
    #00707b 0%,
    #007782 30%,
    #056a80 56%,
    #0a5578 78%,
    #08858d 100%
  );
  --holo-ring: conic-gradient(from 210deg, #00707b, #007782, #056a80, #0a5578, #08858d, #00707b);
  --accent-soft: rgba(0, 119, 130, 0.1);
  --good: #0c7d3f;
  --good-soft: rgba(12, 125, 63, 0.1);
  --wm-grad: linear-gradient(
    108deg,
    #093a40 0%,
    #007782 22%,
    #00838f 44%,
    #056a80 66%,
    #0a5578 84%,
    #093a40 100%
  );
  --wm-soft-grad: linear-gradient(108deg, #007782, #00838f, #0a5578);
  --shadow:
    0 18px 50px rgba(6, 66, 72, 0.13), 0 4px 12px rgba(6, 66, 72, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── PLAIN — strict flat mode, Vinted-style: solid surfaces, hairline lines,
      no foil, no glow, no glass, no ambient motion. Unlike the palettes above
      this skin also switches OFF the decorative effect layers (orbs, grain,
      backdrop blur, blend maths, keyframe sheens), so it stays perfectly
      still and cheap to composite on low-end phones. The only motion kept is
      the functional refresh spinner (re-enabled at the end of this block). ── */
:root[data-skin="plain"] {
  --bg: #0e1113;
  --bg-2: #14181b;
  /* SOLID panel — backdrop blur is disabled in this skin */
  --panel: #171a1d;
  --panel2: rgba(255, 255, 255, 0.045);
  --text: #f2f4f5;
  --text-secondary: #b7bfc4;
  --muted: #8a949a;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #0aa8b0;
  --accent-2: #3ec1c7;
  /* every decorative gradient collapses to one flat ink */
  --accent-grad: #0aa8b0;
  --holo-grad: #0aa8b0;
  --holo-ring: #0aa8b0;
  --wm-grad: #f2f4f5;
  --wm-soft-grad: #f2f4f5;
  --specular: none;
  --accent-soft: rgba(10, 168, 176, 0.16);
  --accent-text: #ffffff;
  --accent-rgb: 10, 168, 176;
  /* seal glows become ordinary dark elevation shadows */
  --seal-rgb: 0, 0, 0;
  --seal-end: 0, 0, 0;
  --seal-ink: 0, 0, 0;
  --flare-m: 10, 168, 176;
  --flare-m-deep: 7, 110, 120;
  /* aura washes go panel-neutral so nothing tints surfaces or backdrops */
  --aura-v: 23, 26, 29;
  --aura-c: 23, 26, 29;
  --aura-m: 23, 26, 29;
  --aura-b: 23, 26, 29;
  --aura-v2: 23, 26, 29;
  --aura-c2: 23, 26, 29;
  --aura-c3: 23, 26, 29;
  --aura-t: 23, 26, 29;
  --aura-lv: 229, 231, 235;
  --aura-lc: 229, 231, 235;
  --aura-lm: 229, 231, 235;
  --aura-lb: 229, 231, 235;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --radius: 12px;
  --glass: none;
  --glass-sm: none;
}
:root.light[data-skin="plain"] {
  --bg: #ffffff;
  --bg-2: #f7f8f8;
  --panel: #ffffff;
  --panel2: rgba(0, 0, 0, 0.035);
  --text: #171717;
  --text-secondary: #4b5563;
  --muted: #6b7280;
  --line: rgba(0, 0, 0, 0.1);
  --accent: #007782;
  --accent-2: #0a8a94;
  --accent-grad: #007782;
  --holo-grad: #007782;
  --holo-ring: #007782;
  --wm-grad: #171717;
  --wm-soft-grad: #171717;
  --accent-soft: rgba(0, 119, 130, 0.1);
  --accent-rgb: 0, 119, 130;
  --flare-m: 0, 119, 130;
  --flare-m-deep: 0, 119, 130;
  --aura-v: 229, 231, 235;
  --aura-c: 229, 231, 235;
  --aura-m: 229, 231, 235;
  --aura-b: 229, 231, 235;
  --aura-v2: 229, 231, 235;
  --aura-c2: 229, 231, 235;
  --aura-c3: 229, 231, 235;
  --aura-t: 229, 231, 235;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* plain: the decorative layers never paint — drifting orbs and film grain */
html[data-skin="plain"] .ambient,
html[data-skin="plain"] .grain {
  display: none !important;
}
/* plain: no backdrop sampling, no blend maths, no keyframe sheens anywhere.
   Transitions are untouched — the card swipe fast-path relies on them. */
html[data-skin="plain"] *,
html[data-skin="plain"] *::before,
html[data-skin="plain"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
/* plain: the refresh spinner is functional, not decorative — keep it alive */
html[data-skin="plain"] .iconBtn.loading svg {
  animation: spin 0.8s linear infinite !important;
}
/* plain: flat page — no aurora washes behind the panels */
html[data-skin="plain"] body {
  background-image: none !important;
}
/* plain: wordmark set in flat ink — no foil pan, no glints, no halo */
html[data-skin="plain"] .brandName {
  background: var(--wm-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: none !important;
}
html[data-skin="plain"] .brandName::before,
html[data-skin="plain"] .brandName::after {
  display: none !important;
}
/* plain: cards are solid panel slabs with the hairline --line border; the
   holo seal ring (::before) and top specular (::after) are pure sheen */
html[data-skin="plain"] .card {
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}
html[data-skin="plain"] .card::before,
html[data-skin="plain"] .card::after {
  background: transparent !important;
}
html[data-skin="plain"] .cardGhost {
  background-color: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}
/* plain: the deck veil keeps its job (next photo sinking into the stack)
   but drops the violet ink for a neutral one */
html[data-skin="plain"] .cardGhost::after {
  background: linear-gradient(
    180deg,
    rgba(14, 17, 19, 0.4) 0%,
    rgba(14, 17, 19, 0.72) 42%,
    rgba(14, 17, 19, 0.88) 100%
  ) !important;
  box-shadow: none !important;
}
html.light[data-skin="plain"] .cardGhost::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(255, 255, 255, 0.82) 42%,
    rgba(255, 255, 255, 0.94) 100%
  ) !important;
}
/* plain: flat chrome — no glow halos on the dock, glider, badges or the
   seal hairlines; the verdict stamp keeps its border, not its neon */
html[data-skin="plain"] .tabs {
  box-shadow: var(--shadow) !important;
}
html[data-skin="plain"] .tabGlider,
html[data-skin="plain"] .badge,
html[data-skin="plain"] .abSheet::before,
html[data-skin="plain"] .drOwnCard::after {
  box-shadow: none !important;
}
html[data-skin="plain"] .swipeCue {
  box-shadow: none !important;
  text-shadow: none !important;
}
/* plain: no whole-screen verdict glow and no photo colour flood — the stamp
   itself is the swipe feedback */
html[data-skin="plain"] .swipeGlow,
html[data-skin="plain"] .swipeCue::before {
  display: none !important;
}

@keyframes bgFloat {
  0% {
    background-position: 0% 0%;
  }
  33% {
    background-position: 100% 30%;
  }
  66% {
    background-position: 40% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* --sx/--sy are the cluster centre, swept across the wordmark in 2D.
   Registering them lets the values interpolate smoothly, so the spray
   glides along any direction instead of jumping. JS sets the from/to
   endpoints (--sweep-*) from the user's cursor travel or tap. */
@property --sx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --sy {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@keyframes logoSparkle {
  0% {
    --sx: var(--sweep-fx, 150%);
    --sy: var(--sweep-fy, 50%);
    opacity: 0;
  }
  14% {
    opacity: 0.5;
  }
  46% {
    opacity: 0.92;
  }
  72% {
    opacity: 0.58;
  }
  100% {
    --sx: var(--sweep-tx, -50%);
    --sy: var(--sweep-ty, 50%);
    opacity: 0;
  }
}
@keyframes pulseBorder {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 14px rgba(var(--accent-rgb), 0.15);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 36px rgba(var(--accent-rgb), 0.38);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Deck card entrance — dealt from the stack with a soft overshoot settle.
   Kept short: the deck re-renders on every photo tap, so this replays there. */
@keyframes cardDealIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.955);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes modalBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modalSheetIn {
  from {
    opacity: 0;
    transform: translateY(38px) scale(0.945);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes modalSheetOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body {
  min-height: 100%;
  -ms-overflow-style: none;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 62% at 12% -8%, rgba(var(--aura-v), 0.34) 0%, transparent 56%),
    radial-gradient(ellipse 90% 55% at 102% 18%, rgba(var(--aura-c), 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 100% 70% at 58% 108%, rgba(var(--aura-m), 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 70% 48% at -6% 72%, rgba(var(--aura-b), 0.16) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--aura-v2), 0.1) 0%, transparent 62%);
  background-attachment: fixed;
  background-size: 180% 180%;
  animation: bgFloat 30s ease infinite;
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 0.3s ease;
}
:root.light body {
  background-image:
    radial-gradient(ellipse 110% 62% at 12% -8%, rgba(var(--aura-lv), 0.15) 0%, transparent 56%),
    radial-gradient(ellipse 90% 55% at 102% 18%, rgba(var(--aura-lc), 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 100% 70% at 58% 108%, rgba(var(--aura-lm), 0.11) 0%, transparent 58%),
    radial-gradient(ellipse 70% 48% at -6% 72%, rgba(var(--aura-lb), 0.09) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 62%);
}

/* Film-grain finish — one static noise layer over the whole app, like a
   camera filter: kills gradient banding and gives the glass a physical,
   printed feel. Static texture, zero animation cost. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}
:root.light .grain {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* Ambient "liquid glass" backdrop — soft colour orbs in the brand palette that
   slowly drift and breathe, overlapping so the same colours shimmer like the
   Apple Music lyrics backdrop. Sits behind everything; the glass panels above
   sample it through their backdrop-filter, so the whole UI feels alive.
   `translate` drifts, `scale`/`opacity` breathe — separate properties so the
   two animations compose instead of fighting over `transform`. */
.ambient {
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.3;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.ambient .o1 {
  width: 46vmax;
  height: 46vmax;
  left: 1%;
  top: -4%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.52), transparent 68%);
  animation:
    orbDrift1 27s ease-in-out infinite,
    orbBreath 9s ease-in-out infinite;
}
.ambient .o2 {
  width: 40vmax;
  height: 40vmax;
  right: -2%;
  top: 6%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--aura-m), 0.42), transparent 68%);
  animation:
    orbDrift2 33s ease-in-out infinite,
    orbBreath 11s ease-in-out -3s infinite;
}
.ambient .o3 {
  width: 50vmax;
  height: 50vmax;
  left: 16%;
  bottom: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--aura-c3), 0.34), transparent 70%);
  animation:
    orbDrift3 39s ease-in-out infinite,
    orbBreath 13s ease-in-out -6s infinite;
}
.ambient .o4 {
  width: 34vmax;
  height: 34vmax;
  right: 10%;
  bottom: 2%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--aura-b), 0.38), transparent 68%);
  animation:
    orbDrift4 31s ease-in-out infinite,
    orbBreath 10s ease-in-out -4s infinite;
}
.ambient .o5 {
  width: 30vmax;
  height: 30vmax;
  left: 38%;
  top: 28%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--aura-t), 0.22), transparent 70%);
  animation:
    orbDrift5 35s ease-in-out infinite,
    orbBreath 12s ease-in-out -8s infinite;
}
.ambient .o6 {
  width: 26vmax;
  height: 26vmax;
  left: -6%;
  top: 44%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--aura-c2), 0.28), transparent 68%);
  animation:
    orbDrift2 41s ease-in-out -12s infinite,
    orbBreath 14s ease-in-out -5s infinite;
}
:root.light .ambient span {
  mix-blend-mode: normal;
  filter: blur(80px) opacity(0.5);
}
@keyframes orbDrift1 {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 8vmax 6vmax;
  }
  50% {
    translate: -4vmax 11vmax;
  }
  75% {
    translate: -9vmax 3vmax;
  }
}
@keyframes orbDrift2 {
  0%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: -10vmax 5vmax;
  }
  60% {
    translate: -3vmax -8vmax;
  }
  85% {
    translate: 6vmax -3vmax;
  }
}
@keyframes orbDrift3 {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 9vmax -6vmax;
  }
  55% {
    translate: 4vmax -12vmax;
  }
  80% {
    translate: -7vmax -4vmax;
  }
}
@keyframes orbDrift4 {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: -8vmax -7vmax;
  }
  65% {
    translate: -12vmax 4vmax;
  }
  85% {
    translate: -2vmax 9vmax;
  }
}
@keyframes orbDrift5 {
  0%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 11vmax 4vmax;
  }
  55% {
    translate: 5vmax 12vmax;
  }
  80% {
    translate: -6vmax 7vmax;
  }
}
@keyframes orbBreath {
  0%,
  100% {
    opacity: 0.16;
    scale: 1;
  }
  50% {
    opacity: 0.32;
    scale: 1.14;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background: rgba(var(--accent-rgb), 0.38);
  color: inherit;
}
:root.light ::selection {
  background: rgba(143, 34, 221, 0.22);
}
:where(button, [role="button"], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.app {
  width: min(1120px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom));
}

.topbar {
  position: relative;
  margin: 0 100px 16px 0;
  min-height: 54px;
  display: flex;
  align-items: center;
}
.brandMark {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.brandName {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin: 0;
  width: fit-content;
  font-family: var(--font-display);
  font-size: clamp(23px, 6.2vw, 33px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0;
  color: transparent;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.98) 0 9%, transparent 18%),
    var(--wm-grad);
  background-size:
    260% 120%,
    340% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 10px 34px rgba(var(--flare-m), 0.26),
    0 0 22px rgba(var(--aura-c2), 0.12);
  animation: foilPan 11s ease-in-out infinite alternate;
}
/* The foil breathes: the whole spectrum slides through the letters. */
@keyframes foilPan {
  0% {
    background-position:
      0% 0%,
      0% 50%;
  }
  100% {
    background-position:
      100% 40%,
      100% 50%;
  }
}
.brandName::before,
.brandName::after {
  content: attr(data-logo);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.brandName::before {
  z-index: -1;
  background: var(--holo-grad);
  background-size: 340% 100%;
  filter: blur(10px);
  opacity: 0.24;
  animation: foilPan 11s ease-in-out infinite alternate;
}
.brandName::after {
  z-index: 1;
  background-repeat: no-repeat;
  /* a scatter of soft radial glints of different sizes — each fades to
     transparent, so there are no straight edges like the old strip had */
  background-image:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0)),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-size:
    28px 28px,
    18px 18px,
    13px 13px,
    22px 22px,
    11px 11px,
    16px 16px,
    9px 9px;
  /* every layer hangs off the swept cluster centre (--sx,--sy) at its own
     scatter offset, so the spray drifts as a loose cloud — in any direction
     the sweep takes — instead of a straight band. */
  background-position:
    calc(var(--sx, 50%) + 0%) calc(var(--sy, 50%) - 28%),
    calc(var(--sx, 50%) + 9%) calc(var(--sy, 50%) + 18%),
    calc(var(--sx, 50%) - 7%) calc(var(--sy, 50%) - 6%),
    calc(var(--sx, 50%) + 14%) calc(var(--sy, 50%) + 30%),
    calc(var(--sx, 50%) - 12%) calc(var(--sy, 50%) - 20%),
    calc(var(--sx, 50%) + 4%) calc(var(--sy, 50%) + 6%),
    calc(var(--sx, 50%) - 15%) calc(var(--sy, 50%) + 24%);
  opacity: 0;
}
.brandName.sheen-run::after {
  animation: logoSparkle var(--sheen-dur, 2.4s) cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
:root.light .brandName {
  /* same laser seal, driven deep so it holds contrast on pearl */
  background: var(--wm-grad);
  background-size: 340% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 6px 26px rgba(var(--flare-m-deep), 0.24);
  animation: foilPan 11s ease-in-out infinite alternate;
}
:root.light .brandName::before {
  background: var(--wm-soft-grad);
  opacity: 0.14;
  filter: blur(9px);
}
:root.light .brandName::after {
  /* keep the sheen a gentle gloss on light — full-white glints would otherwise
     punch holes through the letters against the pale background */
  filter: opacity(0.5);
}
.brandTagline {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  /* Fade out instead of a hard "…" when the floating buttons squeeze it. */
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 78%, transparent 98%);
}

.iconBtn {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  backdrop-filter: var(--glass-sm);
  -webkit-backdrop-filter: var(--glass-sm);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: transform 0.15s ease;
}
.iconBtn > * {
  position: relative;
  z-index: 1;
}
.iconBtn svg {
  width: 17px;
  height: 17px;
  display: block;
  margin: 0;
  transform: translateY(1px) translateZ(0);
}
.iconBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.iconBtn.loading {
  opacity: 0.78;
  pointer-events: none;
}
.iconBtn.loading svg {
  animation: spin 0.8s linear infinite;
}
.iconBtn:active {
  transform: scale(0.88);
}
.floatingRefresh {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 70;
}
.floatingTutorial {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 58px;
  z-index: 70;
}

/* ── Tab bar ── */
.tabs {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 45;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow:
    0 26px 80px rgba(2, 2, 10, 0.56),
    0 6px 22px rgba(2, 2, 10, 0.36),
    0 0 44px rgba(var(--accent-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateX(-50%);
  overflow: hidden;
}
:root.light .tabs {
  box-shadow:
    0 22px 60px rgba(50, 10, 90, 0.16),
    0 4px 16px rgba(50, 10, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
/* Sliding active-tab pill: --tabi (0..3) is set from setTab(). */
.tabGlider {
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 24px) / 4);
  border-radius: 24px;
  background: var(--accent-grad);
  overflow: hidden;
  box-shadow:
    0 6px 26px rgba(var(--seal-rgb), 0.44),
    0 2px 18px rgba(var(--seal-end), 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -6px 14px rgba(var(--seal-ink), 0.3);
  transform: translateX(calc(var(--tabi, 0) * (100% + 4px)));
  transition: transform 0.34s cubic-bezier(0.3, 1.3, 0.4, 1);
  pointer-events: none;
}
/* Foil glint slides across the active pill — the seal never sits still. */
.tabGlider::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.34) 50%,
    transparent 66%
  );
  background-size: 250% 100%;
  animation: shimmer 4.2s ease-in-out infinite;
  opacity: 0.75;
}
.tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
}
.tab .ti {
  display: grid;
  place-items: center;
  transition: transform 0.22s ease;
}
.tab .ti svg {
  width: 21px;
  height: 21px;
}
.tab.active {
  background: transparent;
  color: var(--accent-text);
}
.tab.active .ti {
  transform: translateY(-1px) scale(1.06);
  animation: tabIconPop 0.34s cubic-bezier(0.3, 1.6, 0.4, 1);
}
@keyframes tabIconPop {
  0% {
    transform: translateY(0) scale(0.72);
  }
  60% {
    transform: translateY(-2px) scale(1.18);
  }
  100% {
    transform: translateY(-1px) scale(1.06);
  }
}
@keyframes tabEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
#feedTab.tabEnter,
#searchTab.tabEnter,
#watchesTab.tabEnter {
  animation: tabEnter 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Language toggle */
.langToggle {
  position: absolute;
  top: 6px;
  right: 0;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  backdrop-filter: var(--glass-sm);
  -webkit-backdrop-filter: var(--glass-sm);
}
.langToggle button {
  min-width: 34px;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  transition: 0.18s ease;
}
.langToggle button.active {
  background: var(--accent-grad);
  color: var(--accent-text);
  box-shadow:
    0 2px 8px rgba(var(--seal-rgb), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ── Segmented control ── */
.mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  margin-bottom: 10px;
}
.mode button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: 0.2s ease;
}
.mode button.active {
  background: var(--accent-grad);
  color: var(--accent-text);
  box-shadow:
    0 2px 10px rgba(var(--seal-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── Deck ── */
.deckShell {
  display: grid;
  gap: 12px;
}
.deckTop {
  min-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
#deckCount {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.raterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
.raterChip.warn {
  border-color: rgba(255, 193, 61, 0.4);
  background: rgba(255, 193, 61, 0.13);
  color: var(--warn);
}
.kbdHint {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.kbdHint .kb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kbdHint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .kbdHint {
    display: inline-flex;
  }
}
.deck {
  min-height: calc(100vh - 240px);
  display: grid;
  place-items: start center;
  padding-bottom: 24px;
  overflow: hidden;
}
.deck .empty {
  width: min(470px, 100%);
  align-self: start;
}
/* Upcoming-card peek: ghosts stack under the active card in the same grid cell. */
.deck > .card,
.deck > .cardGhost {
  grid-area: 1 / 1;
}
.deck > .card {
  z-index: 1;
}
.cardGhost {
  position: relative;
  z-index: 0;
  width: min(460px, 100%);
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Opaque surface: nothing translucent under the deck to re-composite. */
  background-color: #150829;
  background-size: cover;
  background-position: center 22%;
  box-shadow: 0 14px 34px rgba(4, 1, 14, 0.45);
  transform-origin: 50% 0;
  pointer-events: none;
}
:root.light .cardGhost {
  background-color: #efe8f9;
  box-shadow: 0 10px 26px rgba(58, 12, 104, 0.1);
}
/* Graded veil: the next photo peeks through a brighter top sliver, then sinks
   into the deck — reads as a real stack of printed cards. */
.cardGhost::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 4, 24, 0.4) 0%,
    rgba(10, 4, 24, 0.72) 42%,
    rgba(10, 4, 24, 0.88) 100%
  );
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
:root.light .cardGhost::after {
  background: linear-gradient(
    180deg,
    rgba(242, 237, 251, 0.58) 0%,
    rgba(242, 237, 251, 0.82) 42%,
    rgba(242, 237, 251, 0.94) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.cardGhost.g1 {
  transform: translateY(12px) scale(0.958);
}
.cardGhost.g2 {
  transform: translateY(22px) scale(0.914);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge.hot {
  color: var(--accent-text);
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(var(--seal-rgb), 0.35);
}
.badge.risk {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255, 77, 66, 0.35);
}
.badge.good {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(38, 240, 174, 0.35);
}

/* ── Card ── */
.card {
  position: relative;
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Opaque obsidian slab. The hero card covers most of the viewport, so glass
     bought nothing visually — but its backdrop-filter forced the GPU to
     re-sample and re-blur the animated aurora on EVERY dragged frame, which
     was the source of the swipe jank on phones. The slab is pre-painted once
     into the card's own layer; dragging is then a pure compositor move. */
  background:
    radial-gradient(130% 62% at 88% -12%, rgba(var(--accent-rgb), 0.2), transparent 56%),
    radial-gradient(92% 54% at -12% 112%, rgba(var(--seal-end), 0.13), transparent 60%),
    linear-gradient(168deg, #221041 0%, #150829 52%, #0e0420 100%);
  box-shadow:
    0 0 52px rgba(178, 64, 255, 0.16),
    0 0 26px rgba(var(--aura-c), 0.07),
    var(--shadow);
  touch-action: pan-y;
  transform-origin: 50% 90%;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  /* No resting will-change: an idle card does NOT need a permanent GPU layer —
     it only wastes the Telegram iOS webview's tight GPU-memory budget and
     pressures the compositor into evicting + re-rasterising the card texture
     mid-swipe (a prime suspect for the residual micro-lag on a flagship, where
     it clearly isn't fill-rate bound). Promote ONLY for the gesture — see
     .card.dragging/.leaving. The deal-in keyframe and the snap-back/fly-off
     transitions are RUNNING transform/opacity animations, which WebKit
     auto-promotes for their duration anyway, so the motion stays composited. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
  /* fill must NOT be "both": a filled `to` keyframe pins transform/opacity at
     the animation-cascade level forever, silently disabling the inline
     transforms that make the card follow the finger and fly off on swipe. */
  animation: cardDealIn 0.3s cubic-bezier(0.22, 0.9, 0.32, 1) backwards;
}
:root.light .card {
  background:
    radial-gradient(130% 62% at 88% -12%, rgba(157, 43, 245, 0.08), transparent 56%),
    linear-gradient(168deg, #ffffff 0%, #f9f5fe 58%, #f0e9fa 100%);
}
.card * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
/* Nothing inside the moving card may carry a backdrop-filter: a blur that
   rides a per-frame transform re-samples the page underneath on every frame
   (the cue/badge/counter pills all did). Solid pills instead — same look,
   zero per-frame paint. */
.card *,
.card *::before,
.card *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Holo seal ring — the authenticity-foil edge around the hero card. A thin
   conic spectrum masked to the border; it steps aside the moment a verdict
   colour takes the border during a swipe. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  border-radius: var(--radius);
  padding: 1.5px;
  background: var(--holo-ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.card[data-swipe="fake"]::before,
.card[data-swipe="orig"]::before,
.card[data-swipe="deep"]::before,
.card[data-swipe="open"]::before {
  opacity: 0;
}
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44%;
  background: var(--specular);
  pointer-events: none;
  z-index: 3;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card.leaving {
  pointer-events: none;
}
/* Drag state, toggled from app.js on pointerdown/up. While a finger holds the
   card we freeze the aurora field and the desktop background drift, so the
   glass panels above them stop re-sampling their backdrops mid-gesture and
   the whole frame budget goes to the one moving layer. */
.card.dragging {
  cursor: grabbing;
  transition: none;
}
html.cardDrag body,
html.cardDrag .ambient span,
body:has(.card.leaving),
body:has(.card.leaving) .ambient span {
  animation-play-state: paused;
}
/* A paused orb is still a BLENDED layer: mix-blend-mode means its pixels must
   be re-combined with the backdrop group each composite, so the compositor
   can't just cache-and-move textures while the card layer transforms above it
   — and each orb also carries a 72px blur the GPU re-runs whenever the group
   re-renders. Drop the blend to source-over for the gesture and the fly-off;
   the orbs are opacity-.3 blurred washes on a near-black page, so screen vs
   normal is imperceptible for ~300ms. Light mode is already `normal` (see
   :root.light .ambient span), so this is dark-only in effect. */
html.cardDrag .ambient span,
body:has(.card.leaving) .ambient span {
  mix-blend-mode: normal !important;
}
/* The real mobile-swipe jank: .grain is a full-screen fixed layer sitting
   ABOVE the card (z-120) with mix-blend-mode. A blended layer's result depends
   on the pixels beneath it, so every frame the card slides under the grain the
   compositor must RE-BLEND the whole overlap — cheap on a desktop GPU, brutal
   in the Telegram mobile webview. Neutralise the blend for the gesture and the
   fly-off (`:has` is a progressive enhancement; ignored where unsupported).
   Grain is opacity .05, so dropping it for ~300ms is imperceptible. */
html.cardDrag .grain,
body:has(.card.leaving) .grain {
  mix-blend-mode: normal !important;
  opacity: 0 !important;
}
/* The other, bigger mobile-swipe killer: the fixed chrome that OVERLAPS the
   card carries live backdrop-filters — the bottom tab bar is a 52px-blur
   (`--glass`) panel the card's lower edge slides under, and the two top-right
   floating buttons blur what's behind them. A backdrop-filter re-samples and
   re-blurs its backdrop on EVERY frame the opaque card moves beneath it —
   free on a desktop GPU, the dominant cost in the Telegram phone webview.
   Freeze the live blur for the gesture and the fly-off and paint a near-solid
   panel instead; the finger is on the card, so the ~300ms swap is invisible.
   (`html.cardDrag` covers the drag; `:has` catches the fly-off after release
   and is a progressive enhancement — ignored where unsupported.) */
html.cardDrag .tabs,
body:has(.card.leaving) .tabs {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(20, 10, 36, 0.94) !important;
}
:root.light.cardDrag .tabs,
:root.light body:has(.card.leaving) .tabs {
  background: rgba(255, 255, 255, 0.94) !important;
}
html.cardDrag .floatingRefresh .iconBtn,
html.cardDrag .floatingTutorial .iconBtn,
body:has(.card.leaving) .floatingRefresh .iconBtn,
body:has(.card.leaving) .floatingTutorial .iconBtn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The toast is the last unfrozen fixed glass over the deck: bottom-centre at
   ~88px, z-60, with the HEAVIEST blur in the app (--glass, 52px) — and it is
   `.show` for 2s after every action (deep-check start/finish, open-with-no-
   link, errors), which is exactly when the user is already dragging the NEXT
   card underneath it. Its `transition: .26s` is on ALL properties, so merely
   zeroing the filter would ANIMATE the 52px blur down over a quarter second
   of the gesture — freeze the transition too so the swap is instant both
   ways. Near-solid panel replaces the blur (same values as the .tabs freeze);
   the holo border-box ring is kept so the pill reads the same in motion. */
html.cardDrag .toast,
body:has(.card.leaving) .toast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
  background:
    linear-gradient(rgba(20, 10, 36, 0.94), rgba(20, 10, 36, 0.94)) padding-box,
    var(--holo-grad) border-box !important;
}
:root.light.cardDrag .toast,
:root.light body:has(.card.leaving) .toast {
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    var(--holo-grad) border-box !important;
}
/* The last overlapping blur, and the sneakiest: the peek ghost(s) sit in the
   SAME deck cell DIRECTLY under the moving card (grid-area 1/1), and their
   `::after` veil carries a 7px backdrop-filter. iOS WebKit re-rasterises a
   backdrop-filter layer whenever a sibling composited layer (the dragged card)
   transforms in its stacking context — so the ghost blur was being recomputed
   every single swipe frame, right under the finger. With g1+g2 that's two live
   blur layers. Freeze the blur for the gesture and the fly-off; the opaque
   gradient veil stays, and the ghost is mostly covered by the card anyway, so
   the ~300ms swap is invisible. This is what still janked on the iPhone 13. */
html.cardDrag .cardGhost::after,
body:has(.card.leaving) .cardGhost::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The verdict glow's opacity is rewritten every drag frame from JS. With the
   default `transition: opacity .16s` each write kicks off a fresh 160ms ease,
   so the full-screen glow TRAILS the finger and the compositor keeps
   interpolating full-screen frames after you stop — the residual "floaty /
   slightly laggy" feel after the blur fixes. During the active gesture, track
   the finger 1:1 (no transition). NOT scoped to `.leaving`: the release pulse
   (pulseSwipeGlow) still wants the transition to fade the flash out smoothly. */
html.cardDrag .swipeGlow {
  transition: none !important;
}
/* LIGHT-mode swipe killer: the verdict glow carries `mix-blend-mode: multiply`
   so it inks nicely onto pale surfaces. But a blended full-screen layer whose
   opacity is rewritten every drag frame CANNOT be composited from a cached
   texture — the compositor must RE-BLEND the whole screen against everything
   under it each frame (will-change:opacity can't promote a blended layer). On
   a light skin that is the dominant swipe cost. Drop the blend to `normal` for
   the gesture AND the fly-off pulse: the glow is still a translucent coloured
   wash, just less inky for ~300ms while a finger is on the card — invisible in
   motion, and now a cheap cached-opacity composite. Dark mode is already
   `normal`, so this is light-only. */
:root.light.cardDrag .swipeGlow,
:root.light body:has(.card.leaving) .swipeGlow {
  mix-blend-mode: normal !important;
}
/* The verdict stamp's reveal (opacity 0→1 + the overshoot-spring scale + the
   760×1100 colour flood + the specular sweep) all animate INSIDE the card,
   which is a `contain: paint` compositor layer during the drag. So every frame
   of that ~0.3s reveal re-rasterises the WHOLE card texture — photo included —
   at exactly the moment the finger is dragging it. That per-frame card re-raster
   is the micro-lag that survived the blur/blend freezes on a fast phone. Promote
   the one VISIBLE stamp to its own compositor layer for the gesture: its reveal
   then composites independently and the card backing is never re-rastered.
   `will-change` only changes layerisation, never pixels, so the stamp looks
   identical; the other three stamps stay opacity:0 and cost nothing. */
html.cardDrag .card[data-swipe="fake"] .swipeCue.fake,
html.cardDrag .card[data-swipe="orig"] .swipeCue.orig,
html.cardDrag .card[data-swipe="deep"] .swipeCue.deep,
html.cardDrag .card[data-swipe="open"] .swipeCue.open {
  will-change: transform, opacity;
}
/* Belt-and-braces while the card layer is transformed: strip the paints iOS
   re-rasterises when a rounded/shadowed layer moves — the big blurred glow, the
   masked holo ring, the photo grade. All restored the instant the finger lifts;
   invisible during a fast gesture, so the resting card is untouched. */
.card.dragging,
.card.leaving {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  /* Gesture-only layer promotion (rest state carries none — see .card). The
     class is set on pointerdown, before the 8px move threshold, so the layer is
     created while the finger is still — the one promotion paint never lands
     mid-motion. */
  will-change: transform, opacity;
}
/* Holo ring is a conic-gradient behind a mask-composite mask — one of the most
   expensive layers on iOS WebKit. `opacity:0` keeps the masked layer live and
   still processed every frame; `display:none` drops it outright for the drag. */
.card.dragging::before,
.card.leaving::before {
  display: none !important;
}
.card.dragging .photoStage img,
.card.leaving .photoStage img {
  filter: none;
}

/* Verdict states recolour ONLY the border. The old rules also swapped the
   card's multi-layer blurred box-shadow mid-drag, forcing a full shadow
   repaint while the card was transforming; the big colour read now comes from
   cheap composited layers instead (the cue wash + the whole-screen glow). */
.card[data-swipe="fake"] {
  border-color: rgba(255, 77, 66, 0.9);
}
.card[data-swipe="orig"] {
  border-color: rgba(38, 240, 174, 0.9);
}
.card[data-swipe="deep"] {
  border-color: rgba(var(--accent-rgb), 0.9);
}
.card[data-swipe="open"] {
  border-color: rgba(255, 193, 61, 0.9);
}

/* ── Photo stage ── */
.photoStage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: min(67vh, 580px);
  /* Fast-swipe: the incoming card is rebuilt with a FRESH <img> that must
     re-decode, so on rapid swipes you'd see the #08080f base flash before the
     bitmap paints. The same photo was already decoded + painted as the prior
     ghost card's background-image, so we paint it here too (inline bg-image set
     in renderDeck) under the <img>: it shows instantly from the decoded cache
     and the <img> lands seamlessly on top. cover/top must mirror the img's
     object-fit/position so the fallback is pixel-aligned. */
  background-color: #08080f;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  touch-action: none;
}
.photoStage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  /* Editorial grade on the listing photo — static filter, painted once into
     the card's layer, free during the drag. */
  filter: saturate(1.06) contrast(1.04);
  transition: opacity 0.2s ease;
}
/* Cinematic scrims + hairline: top fade seats the progress dots, bottom fade
   seats the counter, the vignette pulls the eye to the garment. Static paint. */
.photoStage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 1, 12, 0.44) 0%, transparent 19%),
    linear-gradient(0deg, rgba(8, 2, 18, 0.5) 0%, transparent 24%),
    radial-gradient(140% 105% at 50% 20%, transparent 62%, rgba(5, 1, 14, 0.26) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.noPhoto {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 56px;
  color: var(--muted);
}

/* Progress dots */
.photoDots {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(var(--photo-count, 1), minmax(0, 1fr));
  gap: 5px;
  pointer-events: none;
  z-index: 4;
}
.photoDot {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.photoDot.active {
  background: rgba(255, 255, 255, 0.96);
}
/* A single photo needs no progress bar — hide the lone full-width dot. */
.photoDot:only-child {
  display: none;
}

/* Swipe labels — verdict stamps that SLAM in: an overshoot spring un-twists
   the stamp as it lands, a specular flash sweeps it once, and a huge
   pre-painted colour wash floods the photo from the stamp's corner. All of it
   is transform + opacity only, so it stays butter during the drag. */
.swipeCue {
  position: absolute;
  top: 28px;
  z-index: 5;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  border: 2.5px solid currentColor;
  border-radius: 16px;
  padding: 0 19px;
  background: rgba(8, 3, 20, 0.76);
  box-shadow:
    0 0 40px currentColor,
    0 0 9px currentColor,
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.2),
    inset 0 0 18px rgba(0, 0, 0, 0.3);
  opacity: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 0 16px currentColor;
  pointer-events: none;
  transition:
    opacity 0.09s linear,
    transform 0.32s cubic-bezier(0.14, 1.9, 0.3, 1);
}
/* Pre-painted verdict flood: a giant radial in the stamp's own colour that
   tints the photo from the stamp's corner. It lives behind the stamp and
   inherits its opacity/scale reveal — fading it in is compositor-only work,
   unlike the old mid-drag box-shadow swaps. Clipped by the photo stage. */
.swipeCue::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 760px;
  height: 1100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, currentColor, transparent 72%);
  opacity: 0.32;
  pointer-events: none;
}
/* One-shot specular sweep across the stamp face on reveal (opacity only). */
.swipeCue::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
}
@keyframes cueFlash {
  0% {
    opacity: 0;
  }
  32% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
.swipeCue.fake {
  left: 20px;
  color: #ff4d42;
  transform: rotate(-17deg) scale(0.55);
}
.swipeCue.orig {
  right: 20px;
  color: #26f0ae;
  transform: rotate(17deg) scale(0.55);
}
.swipeCue.deep {
  left: 50%;
  color: var(--accent-2);
  transform: translateX(-50%) translateY(8px) scale(0.55);
}
.swipeCue.open {
  left: 50%;
  bottom: 28px;
  top: auto;
  color: #ffc13d;
  transform: translateX(-50%) translateY(-8px) scale(0.55);
}
.card[data-swipe="fake"] .swipeCue.fake {
  opacity: 1;
  transform: rotate(-9deg) scale(1);
}
.card[data-swipe="orig"] .swipeCue.orig {
  opacity: 1;
  transform: rotate(9deg) scale(1);
}
.card[data-swipe="deep"] .swipeCue.deep {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.card[data-swipe="open"] .swipeCue.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.card[data-swipe="fake"] .swipeCue.fake::after,
.card[data-swipe="orig"] .swipeCue.orig::after,
.card[data-swipe="deep"] .swipeCue.deep::after,
.card[data-swipe="open"] .swipeCue.open::after {
  animation: cueFlash 0.5s ease-out 0.05s;
}

/* Whole-screen verdict glow: the edges of the app light up in the verdict
   colour while a card is being dragged, and pulse once on commit. */
.swipeGlow {
  position: fixed;
  inset: 0;
  z-index: 44;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  /* Promote to its own compositor layer: the drag writes this full-screen
     layer's opacity every frame, and without promotion iOS repaints the whole
     radial-gradient each time instead of just compositing an opacity change. */
  will-change: opacity;
  transform: translateZ(0);
}
.swipeGlow[data-mode="fake"] {
  background: radial-gradient(120% 70% at 0% 50%, rgba(255, 77, 66, 0.46), transparent 60%);
}
.swipeGlow[data-mode="orig"] {
  background: radial-gradient(120% 70% at 100% 50%, rgba(38, 240, 174, 0.46), transparent 60%);
}
.swipeGlow[data-mode="deep"] {
  background: radial-gradient(140% 60% at 50% 0%, rgba(var(--accent-rgb), 0.5), transparent 60%);
}
.swipeGlow[data-mode="open"] {
  background: radial-gradient(140% 60% at 50% 100%, rgba(255, 193, 61, 0.42), transparent 60%);
}
:root.light .swipeGlow {
  mix-blend-mode: multiply;
}

/* Photo overlay — title + price over gradient */
.photoOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 88px 16px 16px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 4, 14, 0.34) 32%,
    rgba(5, 4, 14, 0.74) 62%,
    rgba(5, 4, 14, 0.95) 100%
  );
  pointer-events: none;
}
.overlayBadges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.photoOverlay .title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.photoOverlay .amount {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(var(--accent-rgb), 0.35);
}

/* Photo tools — bottom-right rail inside the photo stage (holds the counter).
   Was previously unpositioned, which pushed the counter out of the stage. */
.photoTools {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
/* Photo counter pill */
.photoNav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 4;
  pointer-events: none;
}
.photoIndex {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(6, 2, 16, 0.62);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── Card details below photo ── */
.details {
  padding: 14px 16px 16px;
  display: grid;
  gap: 12px;
}
.details .title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.details .price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
/* The price is the hero number of the card: display face, laser-foil ink. */
.details .price .amount {
  margin-right: 3px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent-2);
  background: var(--holo-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.meta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel2);
  min-height: 54px;
}
.meta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.meta span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.meta b {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ── Deep check panel ── */
.deepPanel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
  padding: 13px;
}
.deepPanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 100%);
  pointer-events: none;
}
.deepPanel.loading {
  border-color: var(--accent);
  animation: pulseBorder 1.4s ease-in-out infinite;
}
.deepHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.deepHeader span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
/* Verdict-first hero: the panel's headline result, colour-coded so fake/real
       reads in a glance. Tones reuse the same tokens as the swipe states + badges. */
.deepVerdict {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
  line-height: 1.15;
}
.deepVerdict .dvDot {
  font-size: 17px;
  line-height: 1;
  flex: none;
}
.deepVerdict .dvLabel {
  font-size: 14.5px;
  flex: 1;
  min-width: 0;
}
.deepVerdict .dvProb {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.deepVerdict.vReal {
  border-color: rgba(38, 240, 174, 0.55);
  background: linear-gradient(135deg, rgba(38, 240, 174, 0.18), rgba(var(--aura-c2), 0.07));
  color: var(--good);
  box-shadow: 0 0 26px rgba(38, 240, 174, 0.14);
}
.deepVerdict.vFake {
  border-color: rgba(255, 77, 66, 0.55);
  background: linear-gradient(135deg, rgba(255, 77, 66, 0.18), rgba(var(--flare-m), 0.07));
  color: var(--danger);
  box-shadow: 0 0 26px rgba(255, 77, 66, 0.14);
}
.deepVerdict.vNeed {
  border-color: rgba(255, 193, 61, 0.5);
  background: linear-gradient(135deg, rgba(255, 193, 61, 0.16), rgba(var(--flare-m), 0.06));
  color: var(--warn);
}
.deepVerdict.vNone {
  color: var(--muted);
}
.deepButton.cta {
  border-color: transparent;
  background: var(--accent-grad);
  color: var(--accent-text);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.36);
}
.deepConf {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.deepConfTrack {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.deepConfTrack > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-2);
}
.deepConf b {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  flex: none;
}
.metricStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.metricStrip.cols3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metricStrip.cols2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  text-align: center;
}
.metric span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.metric b {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}
.metric b.okMark {
  color: var(--good);
}
/* Our local ML leads the verdict, so its tile is visually the primary one:
   accent gradient, glow ring and a small "наша модель" tag. */
.metric.primary {
  position: relative;
  border-color: rgba(var(--accent-rgb), 0.55);
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--flare-m), 0.12));
  box-shadow:
    0 6px 18px rgba(var(--accent-rgb), 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.metric.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}
.metric.primary .metricLead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--accent-2);
}
.metric.primary .metricLead svg {
  width: 12px;
  height: 12px;
}
.metric.primary .metricTag {
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-grad);
  padding: 1px 5px;
  border-radius: 999px;
}
.metric.primary b {
  position: relative;
  color: var(--text);
  font-size: 17px;
}
/* Updating numbers use tabular figures so prices/counters don't jump width. */
.amount,
.metric b,
#deckCount,
.drCount,
.photoIndex,
.stPill {
  font-variant-numeric: tabular-nums;
}
.deepNotes {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
  max-height: 120px;
  overflow: auto;
}
.deepNotes div::before {
  content: "·  ";
  color: var(--muted);
}
.deepRuleHits {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(26, 226, 148, 0.28);
  background: rgba(26, 226, 148, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}
.deepRuleHits b {
  color: var(--good);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}
.deepRuleHits span {
  overflow-wrap: anywhere;
}
.deepActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.48fr);
  gap: 7px;
}
.deepButton {
  min-height: 42px;
  border: 1px solid rgba(var(--accent-rgb), 0.46);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.deepButton:disabled {
  opacity: 0.62;
  cursor: default;
}
/* Settled "done" state after a check has run: calm green, not a CTA. */
.deepButton.done {
  border-color: rgba(38, 240, 174, 0.45);
  background: var(--good-soft);
  color: var(--good);
  opacity: 1;
}
.deepRuleButton {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  min-width: 0;
}
.deepShareButton {
  width: 100%;
  margin-top: 7px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(26, 226, 148, 0.5);
  background: rgba(26, 226, 148, 0.16);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.deepShareButton svg {
  width: 15px;
  height: 15px;
}
.planBadgeWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.founderPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  color: #4a3500;
  background: linear-gradient(135deg, #ffd24a, #f0a91e);
  border: 1px solid rgba(180, 120, 0, 0.5);
}
.founderPill svg {
  width: 13px;
  height: 13px;
}
.founderBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(240, 169, 30, 0.5);
  background: rgba(240, 169, 30, 0.12);
}
.founderBanner svg {
  width: 22px;
  height: 22px;
  color: #f0a91e;
  flex: none;
}
.founderBanner b {
  display: block;
  font-size: 13.5px;
}
.founderBanner span {
  font-size: 12px;
  color: var(--muted);
}
.founderCard {
  margin: 4px 0 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(240, 169, 30, 0.5);
  background: rgba(240, 169, 30, 0.08);
}
.founderHead {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
  font-size: 13px;
  margin: 2px 4px 9px;
}
.founderHead svg {
  width: 16px;
  height: 16px;
  color: #f0a91e;
}

/* ── Empty state ── */
/* Empty feed = an invitation, not a dead end: card fan + one clear CTA. */
.deckEmpty {
  align-content: center;
  gap: 6px;
}
.deckEmptyFan {
  margin-bottom: 26px;
}
.deckEmptyText {
  max-width: 300px;
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.45;
  text-wrap: balance;
}
.deckEmptyCta {
  min-height: 48px;
  margin-top: 14px;
  padding: 0 26px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    0 10px 28px rgba(var(--accent-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.empty {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  color: var(--muted);
  text-align: center;
  padding: 32px 24px;
  font-weight: 500;
}
.empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.emptyIcon {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 8px 22px rgba(var(--aura-v), 0.4));
  animation: emptyFloat 4.6s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.emptyText {
  font-size: 15px;
  line-height: 1.5;
}

/* ── Skeleton loader ── */
.skelCard {
  width: min(460px, 100%);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.skelPhoto {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: min(62vh, 540px);
  background: linear-gradient(
    90deg,
    var(--panel2) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--panel2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
.skelBody {
  padding: 14px;
  display: grid;
  gap: 10px;
  background: var(--panel2);
}
.skelLine {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--panel) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    var(--panel) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite 0.1s;
}

/* ── Forms ── */
.form {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 14px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
}
.form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  color: var(--text);
  padding: 0 14px;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s ease;
}
textarea {
  min-height: 66px;
  padding: 12px 14px;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

/* ── Autocomplete ── */
.autocomplete {
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  box-shadow:
    0 14px 52px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.dropdown.show {
  display: block;
  animation: fadeUp 0.18s ease;
}
.dropdown-item {
  padding: 11px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
}
.dropdown-item:hover {
  background: var(--accent);
  color: var(--accent-text);
}
.dropdown-empty {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ── Category picker (Vinted-style drill-down sheet) ── */
/* Pickers are always opened FROM another modal (watch-edit / deep-rule
       form), so they must stack ABOVE the base .abModal (z-index 80) — DOM
       order alone would put them under a modal declared later in the markup. */
#catPickerModal,
#listPickerModal {
  z-index: 92;
}
.cpSheet {
  display: flex;
  flex-direction: column;
  max-height: min(640px, calc(100vh - 24px));
}
/* .abSheetHead is defined later in this sheet with a 2-col grid — the
       3-col override needs the compound selector to actually win the cascade
       (otherwise the title lands in the 38px close-button track). */
.abSheetHead.cpHead {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}
.abSheetHead.cpHead h3 {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cpBack.off {
  visibility: hidden;
  pointer-events: none;
}
.cpSearchWrap {
  position: relative;
  flex: none;
}
.cpSearchWrap .cpSearchIcon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
#cpSearch {
  width: 100%;
  padding-left: 40px;
}
.cpList {
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 220px;
}
.cpRow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13.5px 10px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 520;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
  min-height: 50px;
}
.cpRow:last-child {
  border-bottom: none;
}
.cpRow:active {
  background: var(--accent-soft);
}
@media (hover: hover) {
  .cpRow:hover {
    background: var(--panel2);
  }
}
.cpRow .cpChev {
  margin-left: auto;
  width: 17px;
  height: 17px;
  color: var(--muted);
  flex: none;
}
.cpAll {
  font-weight: 650;
}
.cpAll svg,
.cpAll i {
  width: 18px;
  height: 18px;
  color: var(--good);
  flex: none;
}
.cpAny {
  color: var(--text-secondary);
}
.cpAny svg,
.cpAny i {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: none;
}
.cpMain {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  min-width: 0;
}
.cpPath {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpDrill {
  margin-left: auto;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.cpDrill:active {
  border-color: var(--accent);
  color: var(--accent-2);
}
.cpDrill svg,
.cpDrill i {
  width: 16px;
  height: 16px;
}
.cpEmpty {
  padding: 28px 12px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.cpField {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.cpField input {
  pointer-events: none;
  padding-right: 40px;
  text-overflow: ellipsis;
}
.cpField .cpFieldChev {
  position: absolute;
  right: 13px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
}

/* multi-select list picker (colors / condition) — same sheet language */
.lpDot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lpCheck {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}
.lpCheck svg,
.lpCheck i {
  width: 14px;
  height: 14px;
}
.cpRow.lpOn {
  background: var(--accent-soft);
  border-radius: 12px;
  border-bottom-color: transparent;
}
.cpRow.lpOn .lpCheck {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.lpFoot {
  flex: none;
  padding-top: 12px;
}
.lpFoot .primary {
  width: 100%;
}

/* ── Buttons ── */
.primary {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: var(--accent-grad);
  background-size: 220% 220%;
  color: var(--accent-text);
  font-weight: 750;
  font-size: 15.5px;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(var(--seal-rgb), 0.36),
    0 2px 14px rgba(var(--seal-end), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -8px 18px rgba(var(--seal-ink), 0.22);
  animation: sealPan 7s ease-in-out infinite alternate;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}
/* The laser seal drifts through the CTA — alive, never strobing. */
@keyframes sealPan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, transparent 52%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.07) saturate(1.08);
    box-shadow:
      0 14px 38px rgba(var(--seal-rgb), 0.46),
      0 3px 18px rgba(var(--seal-end), 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -8px 18px rgba(var(--seal-ink), 0.22);
  }
}
.primary:active {
  transform: scale(0.97);
  filter: brightness(0.98);
  box-shadow:
    0 3px 12px rgba(var(--seal-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.secondary {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s ease;
}
.secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.secondary:active {
  transform: scale(0.975);
}
#searchTab .primary,
#searchTab .secondary {
  min-height: 42px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow:
    0 3px 12px rgba(var(--accent-rgb), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
#searchTab .secondary {
  box-shadow: none;
}
#searchTab .mode button {
  min-height: 30px;
  font-size: 11.5px;
}

/* ── Watches ── */
.watchAdv {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  padding: 0 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.watchAdv > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.watchAdv > summary::after {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  font-size: 14px;
  line-height: 1;
}
.watchAdv[open] > summary::after {
  content: "-";
}
.watchAdv > summary::-webkit-details-marker {
  display: none;
}
.watchAdv[open] > summary {
  border-bottom: 1px solid var(--line);
}
.watchAdv .wadvBody {
  padding: 6px 0 14px;
  display: grid;
  gap: 10px;
}
.watchAdv .wadvBody label {
  font-size: 10.5px;
  letter-spacing: 0;
}
.watchAdv .seg {
  margin-top: 6px;
}
.watchActions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.watchIconBtn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.watchIconBtn svg {
  width: 15px;
  height: 15px;
}
.watchList {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.watchRow {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: var(--glass-sm);
  -webkit-backdrop-filter: var(--glass-sm);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  animation: fadeUp 0.24s ease both;
}
.watchRow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.watchRow b {
  font-size: 15.5px;
  font-weight: 700;
}
.miniMeta {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.miniMeta span {
  padding: 2px 8px;
  background: var(--panel2);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}
.snipeToggle {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  /* This is a composite <label>: undo the uppercase micro-label defaults. */
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}
.snipeToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.snipeToggle .stIcon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--warn);
  background: rgba(255, 193, 61, 0.12);
  border: 1px solid rgba(255, 193, 61, 0.32);
}
.snipeToggle .stIcon svg {
  width: 19px;
  height: 19px;
}
.snipeToggle .stTitle {
  display: block;
  font-size: 13.5px;
  font-weight: 850;
}
.snipeToggle .stSub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}
.snipeToggle .stPill {
  min-width: 48px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}
.snipeToggle.on {
  border-color: rgba(255, 193, 61, 0.58);
  background: rgba(255, 193, 61, 0.11);
}
.snipeToggle.on .stPill {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}

/* ── Profile / Shop / Referral ── */
.profileCard {
  position: relative;
  overflow: hidden;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: var(--glass-sm);
  -webkit-backdrop-filter: var(--glass-sm);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.profileCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.profTop {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profAvatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 19px;
  color: var(--accent-text);
  background: var(--accent-grad);
  box-shadow: 0 4px 14px rgba(var(--seal-rgb), 0.38);
}
.profName {
  font-weight: 800;
  font-size: 16px;
}
.profId {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.planBadge {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--accent-text);
  background: var(--accent-grad);
  box-shadow: 0 2px 10px rgba(var(--seal-rgb), 0.35);
  white-space: nowrap;
}
.planBadge.free {
  background: var(--panel2);
  color: var(--muted);
  box-shadow: none;
  border: 1px solid var(--line);
}
.profStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.profStat {
  text-align: center;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.profStat b {
  display: block;
  font-size: 18px;
  font-weight: 800;
}
.profStat span {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}
.profStat.clickable {
  cursor: pointer;
  transition: 0.16s ease;
}
.profStat.clickable:hover {
  border-color: rgba(var(--accent-rgb), 0.42);
  transform: translateY(-1px);
}
.profStat.clickable:active {
  transform: translateY(0);
}
.profServices {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.profService {
  min-height: 44px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}
.profServiceIcon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
}
.profServiceIcon svg {
  width: 17px;
  height: 17px;
}
.profServiceTitle {
  font-size: 12.5px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profServiceSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profServiceState {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.profService.clickable {
  cursor: pointer;
  transition: 0.18s ease;
}
.profService.clickable:hover {
  border-color: rgba(var(--accent-rgb), 0.38);
  background: var(--panel);
  transform: translateY(-1px);
}
.profService.clickable:active {
  transform: translateY(0);
}
.profServiceState.ok {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}
.profServiceState.warn {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}
.profServiceState.bad {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

.abModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(var(--aura-v), 0.18), transparent 55%),
    radial-gradient(90% 60% at 85% -10%, rgba(var(--aura-c), 0.1), transparent 50%),
    rgba(5, 1, 16, 0.66);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
:root.light .abModal {
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(143, 34, 221, 0.12), transparent 55%),
    radial-gradient(90% 60% at 85% -10%, rgba(var(--aura-lc), 0.08), transparent 50%),
    rgba(30, 14, 62, 0.36);
}
.abModal[hidden] {
  display: none !important;
}
.abModal:not([hidden]) {
  animation: modalBackdropIn 0.18s ease both;
}
.abModal.closing {
  animation: modalBackdropOut 0.16s ease both;
  pointer-events: none;
}
.abSheet {
  position: relative;
  isolation: isolate;
  width: min(760px, 100%);
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 28px 28px 22px 22px;
  background: var(--panel);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
  padding: 14px;
  overscroll-behavior: contain;
  transform-origin: bottom center;
}
/* Prism hairline along the sheet lip — every sheet opens under the seal. */
.abSheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2.5px;
  z-index: 9;
  border-radius: 999px;
  background: var(--holo-grad);
  box-shadow: 0 0 14px rgba(var(--aura-v), 0.5);
  pointer-events: none;
}
.abModal:not([hidden]) .abSheet {
  animation: modalSheetIn 0.4s cubic-bezier(0.22, 1.18, 0.32, 1) both;
}
.abModal.closing .abSheet {
  animation: modalSheetOut 0.16s ease both;
}
.abSheetHead {
  position: sticky;
  top: -14px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin: -14px -14px 12px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17, 17, 31, 0.96), rgba(17, 17, 31, 0.84));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
:root.light .abSheetHead {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84));
}
.abSheetHead h3 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abClose {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}
.abCloseFloat {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: 0 0 10px auto;
  background: rgba(17, 17, 31, 0.86);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
:root.light .abCloseFloat {
  background: rgba(255, 255, 255, 0.9);
}
.abClose:active {
  transform: scale(0.92);
}
.abClose svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0;
  transform: translateY(1px);
}

/* ── First-run tutorial — full-screen story onboarding ── */
.tutorialModal {
  z-index: 95;
  place-items: center;
  background: rgba(3, 5, 14, 0.84);
  padding: 0;
}
.tutorialSheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background:
    radial-gradient(circle at 82% -6%, rgba(var(--aura-v), 0.3), transparent 42%),
    radial-gradient(circle at 8% 104%, rgba(var(--aura-c), 0.18), transparent 40%),
    radial-gradient(circle at 96% 68%, rgba(var(--aura-m), 0.12), transparent 36%),
    linear-gradient(180deg, #170529 0%, #080211 52%, #140423 100%);
}
:root.light .tutorialSheet {
  background:
    radial-gradient(circle at 82% -6%, rgba(var(--aura-lv), 0.14), transparent 42%),
    radial-gradient(circle at 8% 104%, rgba(var(--aura-lc), 0.1), transparent 40%),
    linear-gradient(180deg, #fbf7ff 0%, #efe8f9 60%, #f6f0fc 100%);
}
@media (min-width: 560px) {
  .tutorialModal {
    padding: 24px;
  }
  .tutorialSheet {
    width: min(470px, 100%);
    height: min(780px, calc(100dvh - 48px));
    border: 1px solid var(--line);
    border-radius: 28px;
  }
}
.tutorialAurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tutorialAurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.42;
}
.tutorialAurora .ta1 {
  width: 320px;
  height: 320px;
  left: -110px;
  top: -90px;
  background: var(--accent);
  animation: tourAurora1 14s ease-in-out infinite;
}
.tutorialAurora .ta2 {
  width: 260px;
  height: 260px;
  right: -100px;
  top: 34%;
  background: rgb(var(--aura-c3));
  opacity: 0.22;
  animation: tourAurora2 17s ease-in-out infinite;
}
.tutorialAurora .ta3 {
  width: 300px;
  height: 300px;
  left: 24%;
  bottom: -140px;
  background: var(--accent-2);
  opacity: 0.26;
  animation: tourAurora3 19s ease-in-out infinite;
}
:root.light .tutorialAurora span {
  opacity: 0.16;
}
.tutorialTop {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 0;
}
.tutorialSegs {
  display: flex;
  gap: 5px;
}
.tutorialSeg {
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s ease;
}
:root.light .tutorialSeg {
  background: rgba(20, 22, 50, 0.13);
}
.tutorialSeg.done {
  background: var(--accent);
}
.tutorialSeg.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75);
  animation: tourSegIn 0.4s ease both;
}
.tutorialTopRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tutorialProgress {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.tutorialSkipLink {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  transition:
    color 0.16s ease,
    transform 0.16s ease;
}
.tutorialSkipLink:active {
  transform: scale(0.95);
}
.tutorialStage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 0;
}
.tutorialVisual {
  position: relative;
  flex: 1 1 220px;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 36%),
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.22), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(38, 240, 174, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.04);
}
:root.light .tutorialVisual {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), transparent 42%),
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(15, 169, 104, 0.1), transparent 34%),
    rgba(20, 22, 50, 0.035);
}
.tourNavZone {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 21%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tourNavZone.left {
  left: 0;
}
.tourNavZone.right {
  right: 0;
}
.tutorialCopy {
  flex-shrink: 0;
  padding: 16px 4px 6px;
}
.tutorialCopy h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}
.tutorialCopy p {
  margin: 8px 0 0;
  min-height: 3.9em;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 650;
  text-wrap: pretty;
}
/* Direction-aware step entrance: visual, then title, then body. */
.tutorialStage.stepFwd {
  --step-dx: 44px;
}
.tutorialStage.stepBack {
  --step-dx: -44px;
}
.tutorialStage.stepFwd .tutorialVisual,
.tutorialStage.stepBack .tutorialVisual {
  animation: tourStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tutorialStage.stepFwd .tutorialCopy h3,
.tutorialStage.stepBack .tutorialCopy h3 {
  animation: tourStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.tutorialStage.stepFwd .tutorialCopy p,
.tutorialStage.stepBack .tutorialCopy p {
  animation: tourStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.09s both;
}
.tutorialActions {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}
.tutorialActions .tutorialBack {
  flex: 1;
  min-height: 52px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 850;
}
.tutorialActions .tutorialNext {
  flex: 2.2;
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
  box-shadow:
    0 10px 30px rgba(var(--accent-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.tutorialActions button:focus-visible,
.tutorialTop .abClose:focus-visible,
.tutorialSkipLink:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.tourMockCard {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 158px;
  height: 182px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background: rgba(8, 9, 15, 0.86);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  transition: transform 0.32s cubic-bezier(0.22, 1.5, 0.36, 1);
}
.tourMockCard.dragging {
  cursor: grabbing;
  transition: none;
}
.tourMockCard.fly {
  transition:
    transform 0.4s cubic-bezier(0.5, 0, 0.75, 0.45),
    opacity 0.4s ease;
  opacity: 0;
}
.tourMockCard.spawn {
  animation: tourSpawn 0.36s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
:root.light .tourMockCard {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(20, 22, 50, 0.1);
}
.tourMockPhoto {
  height: 104px;
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.78), rgba(38, 240, 174, 0.52)),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25% 50%,
      rgba(255, 255, 255, 0.1) 50% 75%,
      transparent 75%
    );
  background-size:
    auto,
    18px 18px;
}
.tourMockCard.v2 .tourMockPhoto {
  background:
    linear-gradient(160deg, rgba(255, 77, 66, 0.72), rgba(255, 193, 61, 0.55)),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25% 50%,
      rgba(255, 255, 255, 0.1) 50% 75%,
      transparent 75%
    );
  background-size:
    auto,
    18px 18px;
}
.tourMockCard.v3 .tourMockPhoto {
  background:
    linear-gradient(160deg, rgba(224, 139, 255, 0.8), rgba(236, 72, 153, 0.45)),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25% 50%,
      rgba(255, 255, 255, 0.1) 50% 75%,
      transparent 75%
    );
  background-size:
    auto,
    18px 18px;
}
.tourMockInfo {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
}
.tourMockLine {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
:root.light .tourMockLine {
  background: rgba(20, 22, 50, 0.14);
}
.tourMockLine.short {
  width: 58%;
}
.tourMockPrice {
  width: 72px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 900;
}
.tourSwipeLabel {
  position: absolute;
  z-index: 3;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0 18px currentColor;
  opacity: 0.62;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease;
}
.tourSwipeLabel.hot {
  opacity: 1;
  box-shadow:
    0 0 26px currentColor,
    0 0 3px currentColor;
}
.tourSwipeLabel.real {
  right: 16px;
  top: 58px;
  color: #26f0ae;
  transform: rotate(9deg);
}
.tourSwipeLabel.real.hot {
  transform: rotate(9deg) scale(1.16);
}
.tourSwipeLabel.fake {
  left: 16px;
  top: 58px;
  color: #ff4d42;
  transform: rotate(-9deg);
}
.tourSwipeLabel.fake.hot {
  transform: rotate(-9deg) scale(1.16);
}
.tourSwipeLabel.deep {
  left: 50%;
  top: 8px;
  color: var(--accent-2);
  transform: translateX(-50%);
}
.tourSwipeLabel.deep.hot {
  transform: translateX(-50%) scale(1.16);
}
.tourSwipeLabel.open {
  left: 50%;
  bottom: 8px;
  color: #ffc13d;
  transform: translateX(-50%);
}
.tourSwipeLabel.open.hot {
  transform: translateX(-50%) scale(1.16);
}
.tourTryHint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(224, 139, 255, 0.4);
  border-radius: 999px;
  background: rgba(10, 11, 20, 0.72);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: tourHintPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
:root.light .tourTryHint {
  background: rgba(255, 255, 255, 0.86);
}
.tourTryHint svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
}
.tourTryHint.off {
  animation: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tourHand {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)),
    rgba(var(--accent-rgb), 0.86);
  color: #fff;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.34),
    0 0 0 8px rgba(var(--accent-rgb), 0.16);
}
.tourHand svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.9;
}
.tourHand.swipe {
  left: 50%;
  top: 51%;
  animation: tourHandSwipe 5.2s ease-in-out infinite;
}
.tourHand.tap {
  right: 34px;
  top: 72px;
  animation: tourHandTap 2.2s ease-in-out infinite;
}
.tourFilterPanel,
.tourDeepPanel,
.tourRoutePanel,
.tourDonePanel {
  position: absolute;
  inset: 18px;
  display: grid;
  gap: 10px;
  align-content: center;
}
.tourInputMock {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
:root.light .tourInputMock {
  background: rgba(255, 255, 255, 0.74);
}
.tourInputMock svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}
.tourWord {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 900;
}
.tourListing {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.tourListing.hiddenListing {
  opacity: 0.42;
}
.tourListing.hiddenListing::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: var(--danger);
  transform: rotate(-3deg);
}
.tourThumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--good));
}
.tourListingText {
  display: grid;
  gap: 6px;
}
.tourListingText b {
  min-width: 0;
  color: var(--text);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tourListingText span {
  width: 70%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
:root.light .tourListingText span {
  background: rgba(20, 22, 50, 0.12);
}
.tourPill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.tourAiCore {
  position: relative;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--accent), #26f0ae);
  color: #fff;
  box-shadow: 0 18px 44px rgba(var(--accent-rgb), 0.3);
}
.tourAiCore svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.8;
}
.tourScanRing {
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(224, 139, 255, 0.55);
  border-radius: 34px;
  animation: tourScan 1.8s ease-out infinite;
}
.tourScanRing.second {
  animation-delay: 0.45s;
}
.tourRuleRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.tourRuleChip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 850;
}
.tourRuleChip svg {
  width: 14px;
  height: 14px;
}
.tourRoutePanel {
  grid-template-columns: 1fr 1fr;
  align-content: stretch;
}
.tourRouteCard {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}
.tourRouteCard.seller {
  grid-column: 1 / -1;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}
.tourRouteIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.tourRouteIcon svg {
  width: 18px;
  height: 18px;
}
.tourRouteCard b {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tourRouteCard span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}
.tourFlowArrow {
  justify-self: end;
  color: var(--good);
}
.tourDonePanel {
  place-items: center;
  text-align: center;
}
.tourDoneCheck {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: var(--good);
  color: var(--good-ink);
  box-shadow: 0 20px 46px rgba(38, 240, 174, 0.32);
  animation: tourDonePop 1.8s ease-in-out infinite;
}
.tourDoneCheck svg {
  width: 42px;
  height: 42px;
  stroke-width: 2.1;
}
.tourDoneGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@keyframes tourHandSwipe {
  0%,
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
  14%,
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  32% {
    opacity: 1;
    transform: translate(42px, -50%) rotate(8deg);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  52% {
    opacity: 1;
    transform: translate(-100px, -50%) rotate(-8deg);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -118px) rotate(-3deg);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, 48px) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
}
@keyframes tourHandTap {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(14px) scale(0.92);
  }
  62% {
    transform: translateY(8px) scale(0.96);
  }
}
@keyframes tourScan {
  0% {
    opacity: 0.95;
    transform: scale(0.78);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes tourDonePop {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
}

/* ── Tutorial v4: interactive demo, intro fan, confetti ── */
.tourSwipeStage {
  position: absolute;
  inset: 0;
}
.tourSwipeStage .tourMockCard {
  top: 46%;
}
.tourSwipeStage .tourHand.swipe {
  top: 47%;
}
.tourHand.quiet {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.tourIntroPanel {
  position: absolute;
  inset: 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
}
.tourFan {
  position: relative;
  width: 170px;
  height: 128px;
  animation: tourFanFloat 4.6s ease-in-out infinite;
}
.tourFanCard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 108px;
  margin: -54px 0 0 -42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, transparent 58%, rgba(8, 9, 15, 0.72) 59%),
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.85), rgba(38, 240, 174, 0.5));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transform-origin: 50% 128%;
}
:root.light .tourFanCard {
  border-color: rgba(20, 22, 50, 0.12);
}
.tourFanCard::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 26px;
  bottom: 14px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}
.tourFanCard.c1 {
  animation: tourFanL 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) 0.12s both;
}
.tourFanCard.c2 {
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 58%, rgba(8, 9, 15, 0.72) 59%),
    linear-gradient(160deg, rgba(224, 139, 255, 0.9), rgba(236, 72, 153, 0.45));
  animation: tourFanC 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.tourFanCard.c3 {
  background:
    linear-gradient(180deg, transparent 58%, rgba(8, 9, 15, 0.72) 59%),
    linear-gradient(160deg, rgba(255, 193, 61, 0.85), rgba(255, 77, 66, 0.55));
  animation: tourFanR 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) 0.12s both;
}
.tourIntroBrand {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  background: linear-gradient(100deg, var(--text) 20%, var(--accent-2) 50%, var(--text) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.4s linear infinite;
}
.tourConfettiBit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44%;
  width: 8px;
  height: 13px;
  border-radius: 2.5px;
  background: var(--clr, var(--accent));
  opacity: 0;
  pointer-events: none;
  animation: tourConfetti 1.05s cubic-bezier(0.16, 0.62, 0.4, 1) var(--delay, 0s) both;
}

@keyframes tourAurora1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(70px, 48px) scale(1.12);
  }
}
@keyframes tourAurora2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-64px, -40px) scale(1.16);
  }
}
@keyframes tourAurora3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(44px, -54px) scale(0.94);
  }
}
@keyframes tourSegIn {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
}
@keyframes tourStepIn {
  from {
    opacity: 0;
    transform: translateX(var(--step-dx, 44px));
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
@keyframes tourSpawn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}
@keyframes tourHintPulse {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.94;
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
    opacity: 0.7;
  }
}
@keyframes tourFanL {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-15deg);
  }
}
@keyframes tourFanC {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
@keyframes tourFanR {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(15deg);
  }
}
@keyframes tourFanFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes tourConfetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.6);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -120px)) rotate(var(--rot, 200deg)) scale(1);
  }
}
@media (max-height: 600px) {
  .tutorialVisual {
    min-height: 138px;
  }
  .tutorialCopy h3 {
    font-size: 20px;
  }
  .tutorialCopy p {
    min-height: 0;
    font-size: 13.5px;
  }
  .tutorialActions .tutorialBack,
  .tutorialActions .tutorialNext {
    min-height: 46px;
  }
}

/* Rhythm: big gap BEFORE a section, tight binding to its own sub/card —
   groups must read as groups (proximity), not one even column of boxes. */
.sectionHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 2px 8px;
}
/* Seal dash — every section is "stamped" by the same laser gradient. */
.sectionHead::before {
  content: "";
  width: 16px;
  height: 4px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(var(--seal-rgb), 0.42);
}
.sectionHead:first-child {
  margin-top: 8px;
}
.sectionHead h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
.sectionHead .pill {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}

.shopItem {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
}
.shopItem.featured {
  border-color: rgba(255, 193, 61, 0.55);
  background: linear-gradient(
    135deg,
    rgba(255, 193, 61, 0.14),
    rgba(var(--accent-rgb), 0.1) 46%,
    var(--panel2)
  );
}
.shopItem.current {
  border-color: rgba(38, 240, 174, 0.55);
  box-shadow: inset 0 0 0 1px rgba(38, 240, 174, 0.14);
}
.shopItem > div:first-child {
  min-width: 0;
}
.shopItem .si-title {
  font-weight: 800;
  font-size: 14.5px;
}
.shopItem .si-desc {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.si-kicker {
  margin-bottom: 4px;
  color: var(--warn);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.shopTags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.shopTag {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.shopTag.good {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}
.shopTag.warn {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}

.shopIntro {
  font-size: 12px;
  color: var(--text-secondary);
  margin: -2px 2px 14px;
  line-height: 1.45;
}
.planCard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel2);
  padding: 15px 16px 14px;
  margin-bottom: 11px;
}
.planCard.popular {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(
    165deg,
    rgba(var(--accent-rgb), 0.16),
    rgba(224, 139, 255, 0.05) 52%,
    var(--panel2)
  );
  box-shadow: 0 12px 34px rgba(var(--accent-rgb), 0.18);
}
.planCard.current {
  border-color: rgba(38, 240, 174, 0.5);
  box-shadow: inset 0 0 0 1px rgba(38, 240, 174, 0.14);
}
.planRibbon {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}
.planHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.planName {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}
.planNowTag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--good);
  color: var(--good-ink);
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}
.planPrice {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.planPrice b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.planPrice span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.planBenefits {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.planBenefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.planBenefits svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent-2);
}
.planBtns {
  margin-top: 14px;
}
.planBuy {
  min-height: 40px;
  font-size: 13.5px;
}
.founderCard .planCard {
  margin-bottom: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 0 0;
}
.abNote {
  font-size: 11.5px;
  color: var(--muted);
  margin: 4px 2px 10px;
  line-height: 1.4;
}
.abNote.warn {
  color: var(--warn);
}
.abWarn {
  font-size: 12px;
  font-weight: 650;
  color: var(--warn);
  background: rgba(255, 193, 61, 0.1);
  border: 1px solid rgba(255, 193, 61, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  line-height: 1.4;
}
:root.light .abWarn {
  background: rgba(196, 122, 8, 0.08);
  border-color: rgba(196, 122, 8, 0.32);
}
.abRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 2px;
  font-size: 13px;
  /* Often a composite <label>: undo the uppercase micro-label defaults. */
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.abRow.abConsent {
  justify-content: flex-start;
}
.abInp {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: inherit;
  font-size: 13px;
  max-width: 120px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.abInp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.abInp.wide {
  max-width: 100%;
  width: 100%;
  margin: 4px 0;
}
.abRuleForm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.abRuleForm .abInp {
  flex: 1 1 100px;
}
.dkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dkField {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel2);
}
.dkField::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.dkField > * {
  position: relative;
}
.dkField > span {
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
}
.dkField b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dkField em {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
.dkField em.on {
  border-color: rgba(38, 240, 174, 0.38);
  background: var(--good-soft);
  color: var(--good);
}
.dkField small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.dkField .abInp {
  width: 100%;
}
.abLog {
  font-size: 11px;
  color: var(--muted);
  padding: 3px 2px;
  border-bottom: 1px solid var(--line);
}
.abAct {
  flex: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel2);
}
.abAct.bought {
  color: var(--good);
  background: var(--good-soft);
}
.abAct.failed {
  color: var(--danger);
  background: var(--danger-soft);
}
.abAct.capped {
  color: var(--warn);
  background: rgba(255, 193, 61, 0.12);
}
:root.light .abAct.capped {
  background: rgba(196, 122, 8, 0.1);
}
.abAct.dry_run {
  color: var(--accent-2);
  background: var(--accent-soft);
}
:root.light .abAct.dry_run {
  color: var(--accent);
}
.shopBtns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.buyBtn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-text);
  background: var(--accent-grad);
  box-shadow: 0 3px 12px rgba(var(--seal-rgb), 0.32);
  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
}
.buyBtn:active {
  transform: scale(0.96);
}
.buyBtn.alt {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
}
.buyBtn.points {
  color: var(--good-ink);
  background: var(--good);
  box-shadow: 0 3px 12px rgba(38, 240, 174, 0.32);
}
.buyBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.refBox {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
}
.refLink {
  display: block;
  width: 100%;
  margin: 4px 0 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  word-break: break-all;
  outline: none;
}
.refActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.langGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.langGrid .buyBtn {
  min-height: 38px;
}
.refStats {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.refStats div {
  font-size: 12px;
  color: var(--muted);
}
.refStats b {
  color: var(--text);
  font-weight: 800;
}
.themeRow {
  width: 100%;
  margin-top: 14px;
}
/* Palette switcher — colour skins, rendered by renderLang() in the profile tab */
.skinLbl {
  margin: 18px 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}
.skinSeg {
  width: 100%;
  grid-auto-columns: 1fr;
  /* 6 skins: wrap into equal rows of 3 so labels never overflow at <=360px;
     also lays out fine with 5 (3+2) — still a segmented control */
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skinSeg button {
  min-height: 38px;
  padding: 0 4px;
  font-size: 11.5px;
}
.mlBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--good);
  color: var(--good-ink);
  font-size: 16px;
  font-weight: 900;
}
.shopItem.mlUnlimited {
  border-color: rgba(38, 240, 174, 0.5);
}
.frList {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.frRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}
.frWho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.frHandle {
  font-weight: 800;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frDate {
  font-size: 10.5px;
  color: var(--muted);
}
.frBadge {
  flex: none;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel);
}
.frBadge.frJoined {
  color: var(--muted);
}
.frBadge.frActivated {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}
.frBadge.frPaid {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}

.abHero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
}
.abHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
/* Seal hairline on the state hero — the sheet's verdict banner. */
.abHero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 999px;
  background: var(--holo-grad);
  opacity: 0.85;
  pointer-events: none;
}
.abHero.good {
  background: linear-gradient(155deg, var(--good-soft), transparent 58%), var(--panel2);
}
.abHero.warn {
  background: linear-gradient(155deg, rgba(255, 193, 61, 0.12), transparent 58%), var(--panel2);
}
:root.light .abHero.warn {
  background: linear-gradient(155deg, rgba(196, 122, 8, 0.08), transparent 58%), var(--panel2);
}
.abHero.bad {
  background: linear-gradient(155deg, var(--danger-soft), transparent 58%), var(--panel2);
}
.abHeroIcon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.abHeroIcon svg {
  width: 21px;
  height: 21px;
}
.abHero.good .abHeroIcon {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}
.abHero.warn .abHeroIcon {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}
.abHero.bad .abHeroIcon {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}
.abHeroTitle {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.abHeroSub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.abHeroPill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.abHeroPill svg {
  width: 13px;
  height: 13px;
}
.abPanel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
  padding: 13px;
  margin: 12px 0;
}
.abPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.abPanelHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 10px;
}
.abPanelTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--muted);
}
.abPanelTitle svg {
  width: 15px;
  height: 15px;
  color: var(--accent-2);
}
.abPanelStatus {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.abPanelStatus.good {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}
.abPanelStatus.warn {
  color: #111827;
  background: var(--warn);
  border-color: transparent;
}
.abSettingList {
  position: relative;
  display: grid;
  gap: 8px;
}
.abToggleRow {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.abToggleRow span:first-child {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.abToggleRow small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}
.abToggleRow input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.abSwitch {
  position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  transition: 0.22s ease;
}
.abSwitch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.abToggleRow input:checked + .abSwitch {
  background: var(--accent);
  border-color: transparent;
}
.abToggleRow input:checked + .abSwitch::after {
  transform: translateX(18px);
}
.abLimitGrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.abField {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.abField > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}
.abField .abInp,
.abField select.abInp {
  max-width: none;
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
}
.abActions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.abActions .buyBtn,
.abActions .miniBtn {
  min-height: 36px;
}
.premiumHintActions {
  margin-top: 4px;
}
.premiumHintActions .buyBtn,
.premiumHintActions .miniBtn {
  flex: 1 1 170px;
  justify-content: center;
}
.abConsentCard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0 0 10px;
  padding: 11px;
  border-radius: 13px;
  border: 1px solid rgba(255, 193, 61, 0.42);
  background: rgba(255, 193, 61, 0.1);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.abConsentCard input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 1px;
  accent-color: var(--warn);
}
.abConsentCard span {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}
.disclosureRow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.disclosureLink {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px 0;
  min-height: 24px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(160, 163, 190, 0.42);
  text-underline-offset: 4px;
}
.disclosureLink:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
.infoSheet {
  width: min(560px, 100%);
}
.infoBody {
  display: grid;
  gap: 9px;
}
.infoIntro {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.infoItem {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  overflow: hidden;
}
.infoItem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.infoIcon {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-2);
  background: var(--panel);
  border: 1px solid var(--line);
  line-height: 0;
  flex: none;
}
.infoIcon svg {
  width: 17px;
  height: 17px;
  display: block;
  margin: 0;
}
.infoText,
.infoText b,
.infoText span {
  position: relative;
}
.infoText {
  display: block;
  min-width: 0;
}
.infoText b {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0;
}
.infoText span {
  display: block;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: 650;
}
.abCredGrid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
}
.abCredGrid .wide {
  grid-column: 1 / -1;
  margin: 0;
}
.abRuleList {
  position: relative;
  display: grid;
  gap: 8px;
}
.abRuleItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.abRuleItem.off {
  opacity: 0.62;
}
.abRuleTitle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 900;
}
.abRuleTitle span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abRuleState {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  flex: none;
}
.abRuleState.on {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}
.abRuleChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.abRuleChip {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.abRuleChip svg {
  width: 12px;
  height: 12px;
}
.abRuleMeta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.abRuleBtns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
/* Long-reservation panel: live holds the scheduler keeps re-reserving. */
.abResList {
  display: grid;
  gap: 8px;
}
.abResItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.abResTitle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 900;
}
.abResTitle > span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abResTitle svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-2);
}
.abResPrice {
  flex: none;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.abResMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.abResBtns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.miniBtn.danger {
  color: var(--danger);
  border-color: rgba(255, 77, 66, 0.4);
}
.abResGet {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent-2);
}
.abRuleForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
@media (min-width: 520px) {
  .abRuleForm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.abRuleForm .full {
  grid-column: 1 / -1;
}
.abRuleForm .abInp {
  flex: initial;
  max-width: none;
  width: 100%;
  min-height: 40px;
}
.abLogList {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.abLog {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}
.abLog i {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buyBtn i,
.miniBtn i {
  display: inline-flex;
}
.buyBtn svg {
  width: 14px;
  height: 14px;
}

.watchEditHero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
}
.watchEditHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.watchEditIcon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.34);
}
.watchEditIcon svg {
  width: 20px;
  height: 20px;
}
.watchEditTitle {
  position: relative;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.watchEditSub {
  position: relative;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}
.watchEditPanel {
  position: relative;
  overflow: hidden;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
}
.watchEditPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.watchEditPanel > * {
  position: relative;
}
.watchEditPanel .abPanelHead {
  position: relative;
  top: auto;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.watchEditGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.watchEditActions {
  position: sticky;
  bottom: -14px;
  z-index: 6;
  margin: 12px -14px -14px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, rgba(17, 17, 31, 0.96), rgba(17, 17, 31, 0.82));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
:root.light .watchEditActions {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
}
.watchEditActions .buyBtn {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.refBox {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border-radius: 16px;
  background: var(--panel2);
}
.refBox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
}
.refTop {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.refIcon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 3px 12px rgba(var(--accent-rgb), 0.3);
}
.refIcon svg {
  width: 19px;
  height: 19px;
}
.refTitle {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}
.refIntro {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.refStats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.refStats div {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  font-size: 10px;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}
.refStats b {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}
.refLinkRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  margin-top: 10px;
}
.refLink {
  margin: 0;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
}
.refCodeRow,
.refApplyRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  margin-top: 8px;
}
.refCodePill {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}
.refCodePill b {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.refActions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.refActions .buyBtn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.frSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.frMetric {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel2);
}
.frMetric b {
  font-size: 16px;
  font-weight: 900;
}
.frMetric span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}
.frList {
  gap: 8px;
}
.frRow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px 11px;
  border-radius: 14px;
}
.frAvatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.frBadge {
  gap: 5px;
}
.frBadge svg {
  width: 12px;
  height: 12px;
}
.frEmpty {
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  padding: 22px 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--panel2);
  color: var(--muted);
}
.frEmptyIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--accent-2);
}
.frEmptyIcon svg {
  width: 22px;
  height: 22px;
}
.frEmpty b {
  color: var(--text);
  font-size: 14px;
}

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  /* Idle toast is a fixed 52px-blur layer parked over the deck. opacity:0 alone
     keeps that backdrop-filter layer live, so WebKit re-samples the swiping card
     under it even with nothing showing. Hide it outright when idle — the show
     state restores visibility instantly and visibility transitions step-end, so
     the fade-out still completes before it drops. Zero visual change. */
  visibility: hidden;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  /* prism ring: translucent glass inside, the laser seal along the edge */
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--holo-grad) border-box;
  color: var(--text);
  font-weight: 700;
  font-size: 13.5px;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow:
    0 12px 40px rgba(4, 1, 16, 0.52),
    0 0 26px rgba(var(--aura-v), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 60;
  pointer-events: none;
  text-align: center;
  max-width: calc(100vw - 48px);
}
:root.light .toast {
  box-shadow:
    0 12px 36px rgba(58, 12, 104, 0.18),
    0 0 22px rgba(143, 34, 221, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[hidden] {
  display: none !important;
}

/* ── Filters ── */
.fhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 14px;
}
.fhead h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
.fhead h2::before {
  content: "";
  width: 16px;
  height: 4px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(var(--seal-rgb), 0.42);
}
.savePill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.25s ease;
  white-space: nowrap;
}
.savePill.dirty {
  color: var(--accent-text);
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--seal-rgb), 0.38);
}
.savePill.saved {
  color: var(--good-ink);
  background: var(--good);
  border-color: transparent;
}

.fcard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: var(--glass-sm);
  -webkit-backdrop-filter: var(--glass-sm);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 16px 16px 7px;
  margin-bottom: 16px;
  animation: fadeUp 0.26s ease both;
}
.fcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: var(--specular);
  pointer-events: none;
}
.fcardTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--muted);
  text-wrap: balance;
}
.fcardTitle .ic {
  display: inline-grid;
  place-items: center;
  color: var(--accent-2);
}
.fcardTitle .ic svg {
  width: 16px;
  height: 16px;
}
.fcardSub {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}
.uxFaq {
  display: grid;
  gap: 9px;
  margin: 12px 0 10px;
}
.filterFaq details {
  animation: fadeUp 0.26s ease both;
}
.uxFaq.compact {
  margin: 2px 0 10px;
}
.uxFaq details {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel2);
}
.uxFaq details::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.uxFaq summary {
  position: relative;
  list-style: none;
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0;
}
.uxFaq summary::-webkit-details-marker {
  display: none;
}
.uxFaq summary::after {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  font-size: 14px;
  line-height: 1;
}
.uxFaq details[open] summary::after {
  content: "-";
}
.uxFaq summary i {
  color: var(--accent-2);
}
.uxFaq p {
  position: relative;
  margin: -2px 0 0;
  padding: 0 12px 12px 42px;
  color: var(--text-secondary);
  font-size: 11.8px;
  font-weight: 650;
  line-height: 1.45;
}
/* answer reveal — same fadeUp the rest of the UI uses, so opening a question
       feels like the other panels appearing */
.uxFaq details[open] > summary ~ * {
  animation: fadeUp 0.22s ease both;
}
.uxFaqA {
  position: relative;
  margin: -2px 0 0;
  padding: 0 12px 12px 42px;
  color: var(--text-secondary);
  font-size: 11.8px;
  font-weight: 650;
  line-height: 1.5;
}
.uxFaqA ol {
  margin: 2px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.uxFaqA li {
  padding-left: 2px;
}
.uxFaqA code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--accent-2);
  white-space: nowrap;
}
.uxFaqA b {
  color: var(--text);
  font-weight: 800;
}
.faqTip {
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.faqGroupHead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 2px 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}
.faqGroupHead svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
}
/* In the Autobuy modal the FAQ lives in an .abPanel (no per-element entrance),
       so without this it popped in flat while the rest of the UI fades up. Give it
       the same fadeUp the cards use so it appears together with everything else. */
.abCredFaq {
  margin-top: 10px;
  animation: fadeUp 0.26s ease both;
}

.frow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.frow:first-of-type {
  border-top: 0;
}
/* Long labels + wide segmented controls: let the control drop to its own
   line instead of squeezing the label into a 3-line column. */
.frow .lbl {
  flex: 1 1 auto;
  min-width: 130px;
  font-size: 13.5px;
  font-weight: 650;
}
.frow .seg {
  margin-left: auto;
}
.frow .lbl small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.dualInput {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dualInput input {
  width: 76px;
  min-height: 38px;
  text-align: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 0 8px;
  outline: none;
  transition: 0.15s ease;
}
.dualInput input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.dualInput input::placeholder {
  color: var(--muted);
  font-weight: 600;
}
.dualInput .sep {
  color: var(--muted);
  font-weight: 800;
}

/* Segmented (compact) */
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
}
.seg button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.seg button:active {
  transform: scale(0.96);
}
.seg button.active {
  background: var(--accent-grad);
  color: var(--accent-text);
  box-shadow:
    0 2px 10px rgba(var(--seal-rgb), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.seg.tone-risk button.active[data-v="suspicious"] {
  background: var(--danger);
  color: #fff;
}
.seg.tone-risk button.active[data-v="safe"] {
  background: var(--good);
  color: var(--good-ink);
}
.abModeSeg {
  width: 100%;
  grid-auto-columns: 1fr;
}
.abModeSeg button {
  min-height: 40px;
}
.abModeSeg button.active[data-v="off"] {
  background: var(--muted);
  color: var(--bg);
  box-shadow: none;
}
.abModeSeg button.active[data-v="test"] {
  background: var(--warn);
  color: #111827;
  box-shadow: none;
}
.abModeSeg button.active[data-v="live"] {
  background: var(--good);
  color: var(--good-ink);
  box-shadow: none;
}
.abModeHelp {
  margin-top: 8px;
}

/* Toggle switch */
.fSubSeg {
  width: 100%;
  margin: 0 0 16px;
  display: grid;
  grid-auto-flow: column;
}
.drCount {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--muted);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
}
.drRow {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}
.drRow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--specular);
  pointer-events: none;
  border-radius: inherit;
}
.drRow > * {
  position: relative;
}
.drMain {
  flex: 1;
  min-width: 0;
}
.drName {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
  overflow: hidden;
  text-wrap: balance;
}
.drReason {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
  overflow: hidden;
  text-wrap: pretty;
}
.drChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.drChip {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drChip.drChipBrand {
  color: var(--text);
  font-weight: 800;
}
.drChip.actApprove,
.drChip.actReject,
.drChip.actReview {
  border-color: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 10px;
}
.drChip.actApprove::before,
.drChip.actReject::before,
.drChip.actReview::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.drChip.actApprove {
  color: var(--good);
  background: var(--good-soft);
}
.drChip.actReject {
  color: var(--danger);
  background: var(--danger-soft);
}
.drChip.actReview {
  color: var(--accent-2);
  background: var(--accent-soft);
}
:root.light .drChip.actReview {
  color: var(--accent);
}
.drActions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.drActions .primary,
.drActions .secondary {
  flex: 1 1 auto;
  min-height: 46px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 800;
}
.drActions .ghostBtn {
  min-height: 46px;
  border-radius: 13px;
}
.drMutedRow {
  opacity: 0.45;
}
.drEmpty {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}
.ghostBtn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: 0.15s ease;
}
.ghostBtn:hover {
  color: var(--text);
  border-color: var(--text);
}
.drForm label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.drForm input,
.drForm select,
.drForm textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.drForm input:focus,
.drForm select:focus,
.drForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.drForm .seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
}
.drForm .seg button {
  min-height: 40px;
}
#drFActionSeg button.active[data-v="approve"] {
  background: var(--good);
  color: var(--good-ink);
  box-shadow: none;
}
#drFActionSeg button.active[data-v="reject"] {
  background: var(--danger);
  color: #fff;
  box-shadow: none;
}
.drForm textarea {
  min-height: 70px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
.drFormHint {
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 2px 0;
  line-height: 1.45;
}
.switch {
  position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  cursor: pointer;
  transition: 0.22s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.switch.on {
  background: var(--accent);
  border-color: transparent;
}
.switch.on::after {
  transform: translateX(18px);
}
.switch.danger.on {
  background: var(--danger);
}

/* Chips (exclude keywords) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 11px;
  border-radius: 999px;
  background: rgba(255, 77, 66, 0.16);
  border: 1px solid rgba(255, 77, 66, 0.4);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  animation: fadeUp 0.18s ease both;
}
.chip button {
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chipInput {
  display: flex;
  gap: 8px;
}
.chipInput input {
  flex: 1;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 0 13px;
  font-size: 14px;
  outline: none;
}
.chipInput input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.chipInput button {
  min-width: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.quickChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
}
.quickChip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.quickChip:active {
  transform: scale(0.93);
}

/* Per-brand rows */
.brandFilter {
  border-top: 1px solid var(--line);
  padding: 11px 2px;
}
.brandFilter:first-of-type {
  border-top: 0;
}
.brandFilterTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brandFilterName {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.brandDot {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  text-transform: uppercase;
}
.brandFilterName b {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brandFilterName small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 1px;
}
.brandTools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.brandExpand {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 13px;
  background: var(--panel2);
  border: 1px solid var(--line);
  animation: fadeUp 0.18s ease both;
}
.brandExpand.hidden {
  display: none;
}
.brandFilter.off {
  opacity: 0.5;
}
.miniBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s ease;
}
.miniBtn svg {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0;
}
.miniBtn.iconBtnSm {
  padding: 0;
  width: 32px;
  justify-content: center;
  line-height: 1;
}
.miniBtn.dealsBtn.on {
  color: #fff;
  background: linear-gradient(135deg, var(--warn), var(--danger));
  border-color: transparent;
}
.miniBtn.on {
  color: var(--accent-text);
  background: var(--accent);
  border-color: transparent;
}
.fEmpty {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 18px 8px;
}
.fReset {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.filterMark {
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: none;
  place-items: center;
}
.tab.hasFilters .filterMark {
  display: grid;
}
.tab {
  position: relative;
}
.ti {
  width: 24px;
  height: 24px;
}
.ti svg,
.iconBtn svg,
.abClose svg,
.miniBtn svg,
.buyBtn svg,
.stIcon svg,
.profServiceIcon svg,
.abHeroIcon svg,
.abPanelTitle svg,
.infoIcon svg,
.watchEditIcon svg,
.refIcon svg,
.frEmptyIcon svg,
.cpDrill svg,
.lpCheck svg,
.cpField .cpFieldChev,
.uxFaq summary svg {
  display: block;
  flex: none;
  margin: 0;
  transform: none;
}
.iconBtn svg {
  width: 17px;
  height: 17px;
}
.abClose svg {
  width: 18px;
  height: 18px;
}
.cpField .cpFieldChev {
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 781px) {
  .app {
    width: min(1040px, 100%);
    padding: calc(28px + env(safe-area-inset-top)) 28px calc(116px + env(safe-area-inset-bottom));
  }
  .topbar {
    margin-bottom: 18px;
  }
  .deck {
    min-height: calc(100vh - 270px);
    padding-top: 8px;
  }
  .card,
  .skelCard,
  .cardGhost {
    width: min(430px, 100%);
  }
  .photoStage,
  .skelPhoto {
    max-height: min(58vh, 500px);
  }
  .form {
    padding: 16px;
    gap: 12px;
  }
  .tabs {
    width: min(500px, calc(100vw - 56px));
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .floatingRefresh {
    top: calc(22px + env(safe-area-inset-top));
    right: 22px;
  }
  .floatingTutorial {
    top: calc(22px + env(safe-area-inset-top));
    right: 68px;
  }
}

@media (max-width: 780px) {
  body {
    background-attachment: scroll;
    animation: none;
  }
  .app {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .topbar {
    margin-right: 100px;
  }
  .brandName {
    font-size: clamp(20px, 5.6vw, 27px);
  }
  .floatingRefresh {
    top: calc(14px + env(safe-area-inset-top));
    right: 16px;
  }
  .floatingTutorial {
    top: calc(14px + env(safe-area-inset-top));
    right: 62px;
  }
  .tabs {
    width: min(500px, calc(100vw - 36px));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .deck {
    min-height: calc(100vh - 238px);
    padding-top: 4px;
  }
  .card,
  .skelCard,
  .cardGhost,
  .deck .empty {
    width: min(430px, calc(100vw - 36px));
  }
  .photoStage {
    max-height: 54vh;
  }
  .formGrid {
    grid-template-columns: 1fr;
  }
  .shopItem {
    grid-template-columns: 1fr;
  }
  .shopBtns {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .abModal {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .abSheet {
    max-height: calc(100dvh - 28px);
    border-radius: 22px 22px 18px 18px;
  }
  .abSheetHead {
    top: -14px;
  }
  .abHero {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .abHeroPill {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .abLimitGrid,
  .abCredGrid,
  .dkGrid,
  .abRuleForm,
  .watchEditGrid {
    grid-template-columns: 1fr;
  }
  .abRuleItem {
    grid-template-columns: 1fr;
  }
  .abRuleBtns {
    flex-direction: row;
  }
  .refTop {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .refTop .miniBtn {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .refStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frRow {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .frBadge {
    grid-column: 2;
    justify-self: start;
  }
  .tourMockCard {
    width: 146px;
    height: 168px;
  }
  .tourMockPhoto {
    height: 94px;
  }
  .tourHand.swipe {
    animation-name: tourHandSwipeMobile;
  }
}

/* ── ROUND-4 · Rules pane, Deepcheck rows & autobuy sheet ─────────────
   The rules pane reads top-down as ownership: your rules (crowned by the
   prism seal) → your API key → the system defaults. One seal per surface,
   everything else stays quiet: tiled rows, dashed empty states, tone
   chips with status dots. */
#deepRulesPane .fcard {
  padding: 16px 16px 15px;
}
.drOwnCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2.5px;
  border-radius: 999px;
  background: var(--holo-grad);
  box-shadow: 0 0 12px rgba(var(--aura-v), 0.45);
  pointer-events: none;
}
:root.light .drOwnCard::after {
  box-shadow: 0 0 10px rgba(143, 34, 221, 0.25);
}
#drOwnList,
#drSystemList {
  display: grid;
  gap: 8px;
}
#deepKeysSection .abActions {
  margin: 12px 0 0;
}
.abActions.full .buyBtn {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 12px;
}
.abActions.full .miniBtn {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 14px;
}
/* Rule-row controls: honest hit areas without visual bulk. */
.drRow .miniBtn.iconBtnSm {
  width: 36px;
  min-height: 36px;
  border-radius: 11px;
}
.switch::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.abRuleBtns .miniBtn {
  min-height: 34px;
  border-radius: 10px;
  justify-content: center;
}

/* Coarse-pointer phones only (desktop stays pixel-identical): the swipe deck is
   composited-layer/GPU-memory bound in the Telegram iOS webview, not CPU bound.
   Two trims that touch ONLY the ambient backdrop layer count and the peek depth,
   never the card or any card-adjacent chrome — they cut how many large textures
   the compositor must keep resident, which is what forces it to evict and
   re-rasterise the moving card mid-gesture. Resting mobile look barely shifts:
   the dropped orbs are blurred secondaries and the dropped ghost sits behind
   another one. */
@media (hover: none) and (pointer: coarse) {
  /* 6 → 4 ambient orbs. Each .ambient span is a permanently will-change-promoted
     layer carrying a 72px blur and up to 50vmax of area. o5/o6 are the smallest,
     most-overlapped secondaries, so dropping them is invisible in the blurred
     wash but frees roughly a third of the ambient layer memory. */
  .ambient .o5,
  .ambient .o6 {
    display: none !important;
  }
  /* 2 → 1 peek ghost. g2 is almost entirely hidden behind g1 and the hero card,
     yet it decodes a full-size Vinted photo into a background AND carries a
     backdrop-blur ::after (its own composited layer). g1 alone still reads as a
     stacked deck. */
  .deck > .cardGhost.g2 {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abModal:not([hidden]),
  .abModal.closing,
  .abModal:not([hidden]) .abSheet,
  .abModal.closing .abSheet,
  .tourHand,
  .tourScanRing,
  .tourDoneCheck,
  .tutorialAurora span,
  .tutorialSeg.active::after,
  .tutorialStage.stepFwd .tutorialVisual,
  .tutorialStage.stepBack .tutorialVisual,
  .tutorialStage.stepFwd .tutorialCopy h3,
  .tutorialStage.stepBack .tutorialCopy h3,
  .tutorialStage.stepFwd .tutorialCopy p,
  .tutorialStage.stepBack .tutorialCopy p,
  .tourFan,
  .tourFanCard,
  .tourMockCard.spawn,
  .tourTryHint,
  .tourConfettiBit,
  .tourIntroBrand,
  .tabGlider,
  .tabGlider::after,
  .primary,
  #feedTab.tabEnter,
  #searchTab.tabEnter,
  #watchesTab.tabEnter,
  .brandName,
  .brandName::before,
  .brandName::after,
  .emptyIcon,
  .ambient span {
    animation: none;
    transition: none;
  }
  .brandName::after {
    opacity: 0;
  }
  /* Deck: no deal-in, no stamp slam/flash/flood — verdicts appear as a plain
     quick fade, the card still follows the finger (direct manipulation). */
  .card {
    animation: none;
  }
  .swipeCue {
    transition: opacity 0.1s linear;
  }
  .swipeCue::before {
    display: none;
  }
  .card[data-swipe="fake"] .swipeCue.fake::after,
  .card[data-swipe="orig"] .swipeCue.orig::after,
  .card[data-swipe="deep"] .swipeCue.deep::after,
  .card[data-swipe="open"] .swipeCue.open::after {
    animation: none;
  }
  .swipeGlow {
    transition: none;
  }
}

@keyframes tourHandSwipeMobile {
  0%,
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
  14%,
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  32% {
    opacity: 1;
    transform: translate(30px, -50%) rotate(8deg);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  52% {
    opacity: 1;
    transform: translate(-84px, -50%) rotate(-8deg);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -104px) rotate(-3deg);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, 42px) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

/* Professional Shinobi system: quiet operational surfaces, crisp seals and
   stable geometry for Telegram's narrow webview. */
.ambient,
.grain {
  display: none;
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.075), transparent 180px),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 54px,
      rgba(255, 255, 255, 0.012) 54px,
      rgba(255, 255, 255, 0.012) 55px
    );
  background-attachment: fixed;
  background-size: auto;
  animation: none;
}
:root.light body {
  background-image:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.055), transparent 170px),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 54px,
      rgba(24, 38, 28, 0.025) 54px,
      rgba(24, 38, 28, 0.025) 55px
    );
}

.app {
  width: min(960px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}
.topbar {
  min-height: 48px;
  margin: 2px 92px 18px 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.brandEmblem {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.brandEmblem svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}
.brandMark {
  gap: 2px;
}
.brandName,
:root.light .brandName {
  width: auto;
  color: var(--text);
  background: none;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: none;
  animation: none;
  white-space: nowrap;
}
.brandName::before,
.brandName::after {
  display: none;
}
.brandName span {
  color: var(--text);
}
.brandName strong {
  color: var(--accent);
  font-weight: 800;
}
.brandTagline {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  mask-image: none;
  -webkit-mask-image: none;
  text-overflow: ellipsis;
}

.iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.iconBtn::before {
  display: none;
}

.tabs {
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 24px));
  gap: 3px;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
:root.light .tabs {
  box-shadow: 0 10px 24px rgba(32, 46, 35, 0.13);
}
.tabs::before,
.tabGlider::after {
  display: none;
}
.tabGlider {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 17px) / 4);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(var(--seal-rgb), 0.3);
  transform: translateX(calc(var(--tabi, 0) * (100% + 3px)));
}
.tab {
  min-height: 54px;
  gap: 3px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.tab .ti svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.tab.active .ti {
  transform: none;
  animation: none;
}

.mode,
.seg {
  border-radius: 8px;
}
.mode button,
.seg button {
  border-radius: 6px;
  letter-spacing: 0;
}
.form,
.profileCard,
.watchRow,
.fcard,
.planCard,
.shopItem,
.refBox,
.uxFaq details,
.empty {
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035),
    0 7px 20px rgba(0, 0, 0, 0.12);
}
.form::before,
.profileCard::before,
.watchRow::before,
.fcard::before,
.refBox::before,
.uxFaq details::before,
.empty::before {
  display: none;
}
input,
select,
textarea,
.cpField,
.abInp,
.refLink,
.refCodePill {
  border-radius: 6px;
}
.primary,
.secondary,
.buyBtn,
.miniBtn,
.fReset {
  border-radius: 6px;
  box-shadow: none;
  letter-spacing: 0;
}
.primary::before,
.secondary::before {
  display: none;
}
.primary {
  box-shadow: 0 4px 12px rgba(var(--seal-rgb), 0.25);
}
.sectionHead {
  margin-top: 28px;
}
.sectionHead::before {
  width: 3px;
  height: 16px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: none;
}
.sectionHead h3,
.fcardTitle,
.abSheetHead h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}
.sectionHead h3 {
  font-size: 13px;
}

.card,
.cardGhost {
  border-radius: 8px;
}
.card {
  background: #1b1e1a;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
:root.light .card {
  background: #ffffff;
}
.cardGhost {
  background-color: var(--bg-2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
:root.light .cardGhost {
  background-color: var(--bg-2);
  box-shadow: 0 7px 16px rgba(30, 44, 33, 0.09);
}
.card::before {
  border-radius: 8px;
  padding: 1px;
  background: var(--accent);
  opacity: 0.55;
}
.card::after {
  display: none;
}
.badge,
.raterChip,
.miniMeta span,
.planBadge,
.shopTag,
.savePill {
  border-radius: 4px;
  box-shadow: none;
  letter-spacing: 0;
}

.abModal,
:root.light .abModal {
  background: rgba(7, 9, 7, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.abSheet {
  max-height: calc(100dvh - 24px);
  border-radius: 12px 12px 8px 8px;
  background: var(--panel);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.4);
}
.abSheet::before {
  left: 0;
  right: auto;
  width: 72px;
  height: 3px;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}
.abSheetHead,
:root.light .abSheetHead,
.watchEditActions,
:root.light .watchEditActions {
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tutorialAurora {
  display: none;
}
.tutorialSheet {
  background: var(--panel);
}

.langGrid {
  gap: 7px;
}
.langGrid .buyBtn {
  min-width: 0;
  min-height: 40px;
}
.appearancePanel {
  margin-top: 18px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
}
.appearanceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.skinLbl {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.themeSwitch {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.themeSwitch > svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.themeSwitchTrack {
  position: relative;
  width: 34px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
  transition: background-color 0.18s ease;
}
.themeSwitchTrack > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease;
}
.themeSwitch[aria-checked="true"] .themeSwitchTrack {
  border-color: transparent;
  background: var(--accent);
}
.themeSwitch[aria-checked="true"] .themeSwitchTrack > span {
  background: #ffffff;
  transform: translateX(16px);
}
.skinGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}
.skinChoice {
  position: relative;
  min-width: 0;
  min-height: 70px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  overflow: hidden;
  padding: 7px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--muted);
  cursor: pointer;
}
.skinChoice.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.skinChoice > svg {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  padding: 2px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  opacity: 0;
}
.skinChoice.active > svg {
  opacity: 1;
}
.skinSwatch {
  position: relative;
  width: 29px;
  height: 29px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: #e86622;
  box-shadow: inset 0 0 0 5px rgba(15, 18, 15, 0.82);
}
.skinSwatch::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #48c7a2;
}
.skinSwatch[data-skin-preview="plain"] {
  background: #aeb7ba;
  box-shadow: inset 0 0 0 5px #171a1d;
}
.skinSwatch[data-skin-preview="plain"]::after {
  background: #0aa8b0;
}
.skinSwatch[data-skin-preview="vinted"] {
  background: #09b1ba;
  box-shadow: inset 0 0 0 5px #0b2429;
}
.skinSwatch[data-skin-preview="vinted"]::after {
  background: #7adfe4;
}
.skinSwatch[data-skin-preview="jade"] {
  background: #14d6a0;
  box-shadow: inset 0 0 0 5px #072418;
}
.skinSwatch[data-skin-preview="jade"]::after {
  background: #3f96ff;
}
.skinSwatch[data-skin-preview="ember"] {
  background: #ff8c24;
  box-shadow: inset 0 0 0 5px #2c1204;
}
.skinSwatch[data-skin-preview="ember"]::after {
  background: #ffd75e;
}
.skinSwatch[data-skin-preview="rose"] {
  background: #e43d74;
  box-shadow: inset 0 0 0 5px #300a20;
}
.skinSwatch[data-skin-preview="rose"]::after {
  background: #b56cff;
}
.skinSwatch[data-skin-preview="glacier"] {
  background: #2fc9ff;
  box-shadow: inset 0 0 0 5px #081c30;
}
.skinSwatch[data-skin-preview="glacier"]::after {
  background: #7d8fff;
}
.skinName {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
}

.deck {
  min-height: calc(100vh - 238px);
  min-height: calc(100dvh - 238px);
}
.cpSheet {
  max-height: min(640px, calc(100dvh - 24px));
}

@media (max-width: 780px) {
  body {
    background-attachment: scroll;
  }
  .app {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
  .tabs {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
  }
  .deck {
    min-height: calc(100vh - 226px);
    min-height: calc(100dvh - 226px);
  }
}

@media (max-width: 360px) {
  .topbar {
    margin-right: 86px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }
  .brandEmblem {
    width: 32px;
    height: 32px;
  }
  .brandName,
  :root.light .brandName {
    font-size: 20px;
  }
  .brandTagline {
    font-size: 9.5px;
  }
  .skinGrid {
    gap: 6px;
  }
  .skinChoice {
    min-height: 66px;
  }
  .themeSwitch > span:not(.themeSwitchTrack) {
    display: none;
  }
}

/* Calm product system: neutral surfaces, one accent and progressive help. */
:root {
  --bg: #111210;
  --bg-2: #181916;
  --panel: #20211e;
  --panel2: #292a27;
  --text: #f7f7f4;
  --text-secondary: #c8cac4;
  --muted: #969a92;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  /* Brand mark follows the theme: light ink on dark, dark ink on light.
     --logo-paper is the knock-out behind the leaf, so it must match the
     surface the mark is drawn on. */
  --logo-ink: var(--text);
  --logo-paper: var(--bg);
  --accent: #5e9eff;
  --accent-2: #8bb9ff;
  --accent-soft: rgba(94, 158, 255, 0.14);
  --accent-rgb: 94, 158, 255;
  --accent-text: #ffffff;
  --danger: #ff6961;
  --danger-soft: rgba(255, 105, 97, 0.14);
  --good: #5fd39a;
  --good-soft: rgba(95, 211, 154, 0.14);
  --good-ink: #082117;
  --warn: #f2bd5a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.16);
  --radius: 8px;
  --glass: none;
  --glass-sm: none;
  --specular: none;
}

:root[data-skin] {
  --bg: #111210;
  --bg-2: #181916;
  --panel: #20211e;
  --panel2: #292a27;
  --text: #f7f7f4;
  --text-secondary: #c8cac4;
  --muted: #969a92;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.16);
  --radius: 8px;
  --glass: none;
  --glass-sm: none;
  --specular: none;
}

:root.light,
:root.light[data-skin] {
  --bg: #f6f7f5;
  --bg-2: #eef0ec;
  --panel: #ffffff;
  --panel2: #f1f3ef;
  --text: #202124;
  --text-secondary: #4f5350;
  --muted: #737873;
  --line: rgba(32, 33, 36, 0.11);
  --line-strong: rgba(32, 33, 36, 0.19);
  --danger: #c83b35;
  --danger-soft: rgba(200, 59, 53, 0.1);
  --good: #18845a;
  --good-soft: rgba(24, 132, 90, 0.1);
  --good-ink: #ffffff;
  --warn: #9a650b;
  --shadow: 0 1px 2px rgba(32, 33, 36, 0.08), 0 8px 24px rgba(32, 33, 36, 0.06);
}

:root.light:not([data-skin]) {
  --accent: #2e6be8;
  --accent-2: #2459c3;
  --accent-soft: rgba(46, 107, 232, 0.1);
  --accent-rgb: 46, 107, 232;
}

:root,
:root[data-skin],
:root.light,
:root.light[data-skin] {
  --accent-grad: var(--accent);
  --holo-grad: var(--accent);
  --holo-ring: var(--line-strong);
  --wm-grad: var(--text);
  --wm-soft-grad: var(--text);
}

html {
  background: var(--bg);
}

body,
:root.light body,
html[data-skin] body {
  overflow-x: clip;
  background-color: var(--bg);
  background-image: none !important;
  background-attachment: scroll;
  animation: none;
}

.app {
  width: min(880px, 100%);
  padding: calc(12px + env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom));
}

.topbar {
  min-height: 44px;
  margin: 0 0 14px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
}

.brandEmblem {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.brandEmblem svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.brandName,
:root.light .brandName,
html[data-skin] .brandName {
  color: var(--text) !important;
  background: none !important;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: none !important;
  animation: none !important;
}

.brandName::before,
.brandName::after {
  display: none !important;
}

.brandName span {
  color: var(--text);
}

.brandName strong {
  color: var(--accent);
  font-weight: 700;
}

.brandTagline {
  display: none;
}

.topbarActions {
  gap: 4px;
}

.iconBtn {
  width: 36px;
  height: 36px;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.iconBtn:hover {
  background: var(--panel2);
  color: var(--text);
}

.iconBtn.hasAttention::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
}

.tabs,
:root.light .tabs {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(500px, calc(100vw - 20px));
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tabGlider {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 14px) / 4);
  border-radius: 6px;
  background: var(--accent-soft);
  box-shadow: none;
  transform: translateX(calc(var(--tabi, 0) * (100% + 2px)));
  transition: transform 0.2s ease;
}

.tab {
  min-height: 50px;
  gap: 3px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.tab.active {
  color: var(--accent);
}

.tab.active .ti {
  transform: none;
  animation: none;
}

.tab .ti svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.sectionHead {
  margin: 24px 0 8px;
  gap: 8px;
}

.sectionHead:first-child {
  margin-top: 6px;
}

.sectionHead::before {
  display: none;
}

.sectionHead h3,
.fcardTitle,
.abSheetHead h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 650;
  text-transform: none;
}

.sectionHead h3 {
  font-size: 15px;
}

.fcardTitle {
  font-size: 13px;
}

#searchTab > .fcardSub,
#searchQuickPane > .fcardSub,
#watchSetupPane > .fcardSub {
  display: none;
}

.fcardSub,
.shopIntro {
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.45;
}

#searchTab > .form {
  padding: 0;
  border: 0;
  background: transparent;
}

.searchSubnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  position: sticky;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 20;
  margin: 14px 0 10px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.searchSubnav button {
  width: 100%;
  min-height: 38px;
}

.form,
.fcard,
.planCard,
.shopItem,
.refBox,
.empty,
.abPanel,
.watchRow {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.form,
.fcard {
  padding: 16px;
}

.form::before,
.fcard::before,
.refBox::before,
.abPanel::before,
.profileCard::before {
  display: none;
}

label {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

input,
select,
textarea,
.cpField,
.abInp,
.refLink,
.refCodePill {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 14px;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
.cpField:focus-within {
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dropdown {
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dropdown-item {
  border-radius: 6px;
}

.mode,
.seg {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}

.mode button,
.seg button {
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
}

.mode button.active,
.seg button.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.primary,
.secondary,
.buyBtn,
.miniBtn,
.fReset,
.ghostBtn {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
  animation: none;
}

.primary,
.buyBtn {
  background: var(--accent);
  color: var(--accent-text);
}

.secondary,
.miniBtn,
.fReset,
.ghostBtn,
.buyBtn.alt {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
}

.primary:hover,
.buyBtn:hover {
  filter: brightness(1.04);
  box-shadow: none;
}

.primary:disabled,
.secondary:disabled,
.buyBtn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.primary:active,
.secondary:active,
.buyBtn:active,
.miniBtn:active {
  transform: scale(0.98);
}

.deckShell {
  gap: 8px;
}

.deckTop {
  min-height: 20px;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 500;
}

.deck {
  min-height: calc(100dvh - 190px);
  padding-top: 2px;
}

.bootError {
  min-height: 190px;
  padding: 24px;
}

.card,
.cardGhost {
  border-radius: 8px;
}

.card,
:root.light .card,
html[data-skin] .card {
  border: 1px solid var(--line);
  background: var(--panel) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: none;
}

:root.light .card {
  box-shadow: 0 8px 24px rgba(32, 33, 36, 0.1);
}

.card::before {
  inset: -1px;
  padding: 1px;
  border-radius: 8px;
  background: var(--line-strong);
  opacity: 0.7;
}

.card::after {
  display: none;
}

.cardGhost,
:root.light .cardGhost {
  border-color: var(--line);
  background-color: var(--bg-2);
  box-shadow: none;
}

.cardGhost::after,
:root.light .cardGhost::after {
  background: rgba(17, 18, 16, 0.58);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root.light .cardGhost::after {
  background: rgba(246, 247, 245, 0.72);
}

.badge,
.raterChip,
.miniMeta span,
.planBadge,
.shopTag,
.savePill,
.profServiceState {
  border-radius: 6px;
  box-shadow: none;
  text-transform: none;
}

.profileCard {
  padding: 8px 0 18px;
  margin-bottom: 8px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profAvatar {
  border-radius: 8px;
  background: var(--accent);
  box-shadow: none;
}

.profStats {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profStat {
  padding: 12px 6px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.profStat:first-child {
  border-left: 0;
}

.profStat span {
  text-transform: none;
}

.profServices {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profService {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}

.profService:last-child {
  border-bottom: 0;
}

.profServiceIcon {
  border: 0;
  border-radius: 6px;
  background: var(--panel2);
}

.planCard,
.shopItem,
.refBox {
  border-radius: 8px;
}

.planCard.popular,
.shopItem.featured {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--panel);
  box-shadow: none;
}

.planRibbon,
.planNowTag {
  border-radius: 5px;
  box-shadow: none;
  text-transform: none;
}

.abModal,
:root.light .abModal {
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.abSheet,
.tutorialSheet,
:root.light .tutorialSheet {
  max-height: calc(100dvh - 20px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.tutorialSheet,
:root.light .tutorialSheet {
  height: auto;
}

.tutorialVisual,
:root.light .tutorialVisual {
  min-height: 150px;
  border-radius: 8px;
  background: var(--panel2);
}

.tutorialCopy h3 {
  font-size: 18px;
  font-weight: 650;
}

.tutorialCopy p {
  color: var(--text-secondary);
  font-weight: 450;
}

.uxFaq {
  gap: 4px;
  margin: 8px 0 4px;
}

.uxFaq details {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.uxFaq summary {
  min-height: 38px;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  padding: 7px 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.uxFaq summary::after {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.uxFaqA,
.uxFaq p {
  padding: 0 4px 10px 28px;
  color: var(--muted);
  font-weight: 450;
}

.toast,
:root.light .toast {
  top: calc(62px + env(safe-area-inset-top));
  bottom: auto;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.toast[data-kind="error"] {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}

.languageSelectWrap {
  position: relative;
}

.languageSelect {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 42px 0 13px;
  cursor: pointer;
}

.languageSelectWrap > svg {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.appearancePanel {
  margin-top: 14px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--line);
}

.appearanceHead {
  min-height: 38px;
}

.skinLbl {
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  text-transform: none;
}

.skinLbl strong {
  margin-left: 5px;
  color: var(--text);
  font-weight: 600;
}

.themeSwitch {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--panel2);
  font-weight: 550;
}

.skinGrid {
  display: flex;
  width: 100%;
  gap: 7px;
  margin-top: 8px;
  padding: 3px 1px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.skinGrid::-webkit-scrollbar {
  display: none;
}

.skinChoice {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
}

.skinChoice.active {
  border-color: var(--accent);
  background: transparent;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.skinGrid .skinSwatch {
  width: 24px;
  height: 24px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #2e6be8;
  box-shadow: none;
}

.skinSwatch::after {
  display: none;
}

.skinGrid .skinSwatch[data-skin-preview="plain"] {
  background: #687278;
  box-shadow: none;
}

.skinGrid .skinSwatch[data-skin-preview="vinted"] {
  background: #008c95;
  box-shadow: none;
}

.skinGrid .skinSwatch[data-skin-preview="jade"] {
  background: #13956f;
  box-shadow: none;
}

.skinGrid .skinSwatch[data-skin-preview="ember"] {
  background: #d97812;
  box-shadow: none;
}

.skinGrid .skinSwatch[data-skin-preview="rose"] {
  background: #d13f75;
  box-shadow: none;
}

.skinGrid .skinSwatch[data-skin-preview="glacier"] {
  background: #596fd6;
  box-shadow: none;
}

.skinChoice > svg {
  top: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  padding: 2px;
  border: 2px solid var(--panel);
}

@media (max-width: 780px) {
  .app {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-bottom: calc(106px + env(safe-area-inset-bottom));
  }

  .topbar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .tabs {
    width: calc(100vw - 20px);
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .deck {
    min-height: calc(100dvh - 174px);
  }

  .card,
  .skelCard,
  .cardGhost,
  .deck .empty {
    width: min(430px, calc(100vw - 28px));
  }

  .form,
  .fcard {
    padding: 14px;
  }

  .abModal {
    padding: 8px;
  }

  .abSheet {
    max-height: calc(100dvh - 16px);
    border-radius: 8px;
  }

  .shopBtns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopBtns .buyBtn:only-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .app {
    padding-right: 12px;
    padding-left: 12px;
  }

  .topbar,
  .topbarActions {
    gap: 3px;
  }

  .brandName,
  :root.light .brandName {
    font-size: 19px;
  }

  .iconBtn {
    width: 34px;
    height: 34px;
  }

  .themeSwitch > span:not(.themeSwitchTrack) {
    display: none;
  }
}

/* Header commands live in document flow, so they never cover profile controls
   while the page scrolls in Telegram's compact webview. */
.topbar {
  margin-right: 0;
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.topbarActions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.topbarActions .floatingTutorial,
.topbarActions .floatingRefresh {
  position: relative;
  inset: auto;
  z-index: auto;
}

/* Shinobi field manual: onboarding keeps its interactive demos, but uses the
   same restrained dossier surfaces as the rest of the operational UI. */
.tutorialModal {
  padding: 12px;
  background: rgba(7, 9, 7, 0.82);
}
.tutorialSheet,
:root.light .tutorialSheet {
  width: min(480px, 100%);
  height: min(720px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.42);
}
.tutorialTop {
  padding: 14px 14px 0;
}
.tutorialSegs {
  gap: 4px;
}
.tutorialSeg,
.tutorialSeg.active::after {
  height: 3px;
  border-radius: 1px;
  box-shadow: none;
}
.tutorialSeg {
  background: var(--line);
}
.tutorialSeg.done,
.tutorialSeg.active::after {
  background: var(--accent);
}
.tutorialProgress {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--panel2);
}
.tutorialSkipLink,
.tutorialTop .abClose {
  border-radius: 6px;
}
.tutorialStage {
  padding: 10px 14px 0;
}
.tutorialVisual,
:root.light .tutorialVisual {
  min-height: 176px;
  border-radius: 8px;
  background-color: var(--panel2);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 39px,
    rgba(var(--accent-rgb), 0.055) 39px,
    rgba(var(--accent-rgb), 0.055) 40px
  );
}
.tutorialCopy {
  padding: 14px 2px 4px;
}
.tutorialCopy h3 {
  font-size: 18px;
  font-weight: 800;
}
.tutorialCopy p {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.tutorialActions {
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
}
.tutorialActions .tutorialBack,
.tutorialActions .tutorialNext {
  min-height: 46px;
  border-radius: 6px;
  box-shadow: none;
}
.tourMockCard,
.tourFanCard,
.tourInputMock,
.tourListing,
.tourRouteCard,
.tourRuleChip,
.tourTryHint,
.tourHand,
.tourDoneCheck,
.tourAiCore {
  border-radius: 6px;
  box-shadow: none;
}
.tourMockCard,
:root.light .tourMockCard {
  background: var(--panel);
  border-color: var(--line-strong);
}
.tourMockPhoto,
.tourMockCard.v2 .tourMockPhoto,
.tourMockCard.v3 .tourMockPhoto {
  background: var(--accent-soft);
}
.tourMockPrice {
  border-radius: 4px;
  background: rgb(var(--seal-rgb));
  color: #fff;
}
.tourSwipeLabel,
.tourSwipeLabel.hot {
  border-width: 1px;
  border-radius: 4px;
  background: var(--panel);
  box-shadow: none;
}
.tourTryHint,
:root.light .tourTryHint {
  border-color: var(--line-strong);
  background: var(--panel);
  animation: none;
}
.tourHand {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tourFan {
  animation: none;
}
.tourFanCard,
.tourFanCard.c2,
.tourFanCard.c3 {
  background: var(--panel2);
  animation: none;
}
.tourFanCard.c1 {
  transform: rotate(-13deg);
}
.tourFanCard.c2 {
  transform: none;
}
.tourFanCard.c3 {
  transform: rotate(13deg);
}
.tourIntroBrand {
  background: none;
  color: var(--text);
  animation: none;
}
.tourScanRing,
.tourScanRing.second {
  animation: none;
  opacity: 0.38;
}
.tourDoneCheck {
  width: 68px;
  height: 68px;
  background: var(--good);
  animation: none;
}
.tourDoneCheck svg {
  width: 30px;
  height: 30px;
}
.tourConfettiBit {
  display: none;
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
  .topbarActions {
    gap: 5px;
  }
  .topbarActions .iconBtn {
    width: 34px;
    height: 34px;
  }
}

/* Final calm overrides sit after the legacy tutorial block. */
.topbar {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.topbarActions {
  gap: 4px;
}

.tutorialModal {
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
}

.tutorialSheet,
:root.light .tutorialSheet {
  height: auto;
  max-height: calc(100dvh - 20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.tutorialVisual,
:root.light .tutorialVisual {
  min-height: 150px;
  background-color: var(--panel2);
  background-image: none;
}

.tutorialCopy h3 {
  font-weight: 650;
}

.tutorialCopy p {
  color: var(--text-secondary);
  font-weight: 450;
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .topbarActions {
    gap: 3px;
  }
}

@media (max-width: 330px) {
  .skinGrid {
    gap: 2px;
  }
}

/* Vinted Flow v5: compact product identity, discoverable help and fast cards. */
.brandEmblem {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--logo-ink);
}

.brandEmblem .brandGlyph {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  min-height: 44px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.topbarActions .iconBtn {
  width: 44px;
  height: 44px;
}

.floatingTutorial {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: var(--accent-soft);
  color: var(--accent);
}

.floatingTutorial.hasAttention::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent);
}

.tutorialNudge[hidden] {
  display: none;
}

.tutorialNudge {
  width: min(460px, 100%);
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.tutorialNudgeMain,
.tutorialNudgeDismiss {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.tutorialNudgeMain {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  text-align: left;
}

.tutorialNudgeIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
}

.tutorialNudgeIcon svg,
.tutorialNudgeMain > svg,
.tutorialNudgeDismiss svg {
  width: 17px;
  height: 17px;
}

.tutorialNudgeText {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tutorialNudgeText strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutorialNudgeText small {
  color: var(--muted);
  font-size: 11.5px;
}

.tutorialNudgeDismiss {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  color: var(--muted);
}

.tutorialProfileRow {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tutorialProfileIcon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.tutorialProfileRow > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tutorialProfileRow strong {
  font-size: 13.5px;
  font-weight: 700;
}

.tutorialProfileRow small {
  color: var(--muted);
  font-size: 11.5px;
}

.tutorialProfileRow svg,
.tutorialProfileIcon svg {
  width: 18px;
  height: 18px;
}

.tutorialNudgeMain:focus-visible,
.tutorialNudgeDismiss:focus-visible,
.tutorialProfileRow:focus-visible,
.cardAction:focus-visible,
.photoArrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

@keyframes cardReady {
  from {
    opacity: 0.82;
    transform: translateY(9px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card,
:root.light .card,
html[data-skin] .card {
  animation: cardReady 0.14s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.photoStage {
  aspect-ratio: 4 / 5;
  max-height: min(52dvh, 440px);
  background-color: var(--bg-2);
  background-size: contain;
  background-position: center;
  touch-action: pan-y;
}

.photoStage img {
  object-fit: contain;
  object-position: center;
  filter: none;
}

.photoStage::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 16%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 18%);
  box-shadow: none;
}

.photoArrow {
  position: absolute;
  z-index: 7;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(17, 18, 16, 0.72);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}

.photoArrow.prev {
  left: 8px;
}

.photoArrow.next {
  right: 8px;
}

.photoArrow svg {
  width: 18px;
  height: 18px;
}

.cardActions {
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 44px);
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.cardAction {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel2);
  color: var(--text-secondary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.cardAction svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

.cardAction.fake {
  border-color: rgba(214, 64, 56, 0.3);
  background: var(--danger-soft);
  color: var(--danger);
}

.cardAction.deep {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: var(--accent-soft);
  color: var(--accent);
}

.cardAction.open {
  color: #b36a00;
  background: rgba(220, 142, 20, 0.1);
  border-color: rgba(220, 142, 20, 0.28);
}

.cardAction.orig {
  color: var(--good);
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}

.cardAction:active {
  transform: scale(0.9);
}

.cardAction:disabled {
  cursor: default;
  opacity: 0.38;
}

.cardGhost {
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: min(52dvh, 440px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cardGhost::after,
:root.light .cardGhost::after {
  background: rgba(17, 18, 16, 0.62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root.light .cardGhost::after {
  background: rgba(246, 247, 245, 0.74);
}

.details {
  gap: 10px;
  padding: 12px 14px 14px;
}

.details .title {
  font-size: 16px;
  font-weight: 700;
}

.details .price {
  gap: 6px;
  margin-top: 7px;
}

.details .price .amount {
  font-size: 24px;
}

.metaGrid {
  gap: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.meta {
  min-height: 48px;
  padding: 8px 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.meta:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.meta:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.meta::before {
  display: none;
}

.meta span {
  font-size: 9.5px;
  text-transform: none;
}

.meta b {
  margin-top: 2px;
  font-size: 13px;
}

.details > div:last-child > div:last-child {
  margin-top: 8px !important;
}

.deepPanel {
  gap: 8px;
  overflow: visible;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.deepPanel::before {
  display: none;
}

.deepPanel.loading {
  border-color: var(--accent);
  animation: none;
}

.deepReport {
  border-top: 1px solid var(--line);
}

.deepReport summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  list-style: none;
}

.deepReport summary::-webkit-details-marker {
  display: none;
}

.deepReport summary svg {
  width: 16px;
  height: 16px;
}

.deepReport summary svg:last-child {
  margin-left: auto;
  transition: transform 0.16s ease;
}

.deepReport[open] summary svg:last-child {
  transform: rotate(180deg);
}

.deepReportBody {
  padding: 0 0 8px;
}

.swipeCue {
  min-height: 40px;
  padding: 0 12px;
  border-width: 2px;
  border-radius: 6px;
  background: rgba(17, 18, 16, 0.84);
  box-shadow: none;
  font-size: 14px;
  text-shadow: none;
}

.swipeCue::before,
.swipeCue::after {
  display: none;
}

.swipeGlow {
  will-change: auto;
}

html.cardDrag .swipeGlow {
  will-change: opacity;
}

.tourDemoActions {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 8px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.tourDemoActions span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
}

.tourDemoActions svg {
  width: 14px;
  height: 14px;
}

.tutorialSkipLink,
.tutorialTop .abClose {
  min-width: 44px;
  min-height: 44px;
}

@media (hover: none) and (pointer: coarse) {
  .swipeGlow {
    display: none;
  }

  .swipeCue {
    top: 20px;
  }
}

@media (max-width: 780px) {
  .app {
    padding-right: 12px;
    padding-left: 12px;
  }

  .photoStage,
  .cardGhost {
    max-height: min(42dvh, 380px);
  }

  .cardGhost.g2 {
    display: none;
  }

  .details {
    padding: 11px 12px 13px;
  }
}

@media (max-width: 360px) {
  .topbar {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .topbarActions {
    gap: 2px;
  }

  .topbarActions .iconBtn {
    width: 44px;
    height: 44px;
  }

  .brandName,
  :root.light .brandName,
  html[data-skin] .brandName {
    font-size: 18px;
  }

  .tutorialModal {
    padding: 6px;
  }

  .tutorialSheet,
  :root.light .tutorialSheet {
    max-height: calc(100dvh - 12px);
  }

  .tutorialTop {
    gap: 5px;
    padding: 8px 8px 0;
  }

  .tutorialProgress {
    min-height: 28px;
    padding: 0 7px;
  }

  .tutorialStage {
    padding: 6px 8px 0;
  }

  .tutorialVisual,
  :root.light .tutorialVisual {
    min-height: 172px;
    flex-basis: 172px;
  }

  .tutorialCopy {
    padding: 9px 2px 2px;
  }

  .tutorialCopy h3 {
    font-size: 16px;
  }

  .tutorialCopy p {
    min-height: 0;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .tutorialActions {
    gap: 6px;
    padding: 7px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .tutorialActions .tutorialBack,
  .tutorialActions .tutorialNext {
    min-height: 44px;
    font-size: 13px;
  }

  .tourIntroPanel,
  .tourFilterPanel,
  .tourDeepPanel,
  .tourRoutePanel,
  .tourDonePanel {
    inset: 7px;
    gap: 6px;
  }

  .tourIntroPanel {
    gap: 6px;
  }

  .tourFan {
    width: 126px;
    height: 76px;
  }

  .tourFanCard {
    width: 58px;
    height: 76px;
    margin: -38px 0 0 -29px;
  }

  .tourFanCard::after {
    right: 18px;
    bottom: 9px;
    height: 5px;
  }

  .tourIntroBrand {
    font-size: 17px;
  }

  .tourRuleRow {
    gap: 4px;
  }

  .tourRuleChip {
    min-height: 24px;
    gap: 4px;
    padding: 0 6px;
    font-size: 9px;
  }

  .tourRuleChip svg {
    width: 12px;
    height: 12px;
  }

  .tourMockCard,
  .tourSwipeStage .tourMockCard {
    top: 44%;
    width: 122px;
    height: 140px;
  }

  .tourMockPhoto,
  .tourMockCard.v2 .tourMockPhoto,
  .tourMockCard.v3 .tourMockPhoto {
    height: 80px;
  }

  .tourMockInfo {
    gap: 4px;
    padding: 7px 8px;
  }

  .tourMockPrice {
    height: 18px;
  }

  .tourHand {
    width: 40px;
    height: 40px;
  }

  .tourHand svg {
    width: 20px;
    height: 20px;
  }

  .tourTryHint {
    bottom: 36px;
    min-height: 24px;
    padding: 0 7px;
    font-size: 9px;
  }

  .tourSwipeLabel.real {
    right: 7px;
    top: 34px;
  }

  .tourSwipeLabel.fake {
    left: 7px;
    top: 34px;
  }

  .tourInputMock {
    min-height: 36px;
    padding: 0 8px;
    font-size: 11px;
  }

  .tourListing {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 44px;
    gap: 6px;
    padding: 5px;
  }

  .tourThumb {
    width: 34px;
    height: 34px;
  }

  .tourListingText b {
    font-size: 10.5px;
  }

  .tourAiCore {
    width: 58px;
    height: 58px;
  }

  .tourAiCore svg {
    width: 26px;
    height: 26px;
  }

  .tourScanRing {
    inset: -9px;
  }

  .tourRoutePanel {
    grid-template-columns: 1fr 1fr;
    align-content: stretch;
  }

  .tourRouteCard {
    gap: 4px;
    padding: 7px;
  }

  .tourRouteCard.seller {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .tourRouteIcon {
    width: 28px;
    height: 28px;
  }

  .tourRouteCard b {
    font-size: 11px;
  }

  .tourRouteCard > span:not(.tourRouteIcon):not(.tourFlowArrow) {
    display: none;
  }

  .tourDoneCheck {
    width: 56px;
    height: 56px;
  }

  .tourDoneCheck svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  :root.light .card,
  html[data-skin] .card {
    animation: none;
  }
}

/* Vinted Flow v8: readable mobile-first system, intentional motion, and
   predictable Telegram WebView geometry. This block is deliberately appended
   so the legacy visual eras remain reversible during migration. */
:root {
  --flow-safe-top: max(
    env(safe-area-inset-top, 0px),
    var(--tg-safe-area-inset-top, 0px),
    var(--tg-content-safe-area-inset-top, 0px)
  );
  --flow-safe-right: max(
    env(safe-area-inset-right, 0px),
    var(--tg-safe-area-inset-right, 0px),
    var(--tg-content-safe-area-inset-right, 0px)
  );
  --flow-safe-bottom: max(
    env(safe-area-inset-bottom, 0px),
    var(--tg-safe-area-inset-bottom, 0px),
    var(--tg-content-safe-area-inset-bottom, 0px)
  );
  --flow-safe-left: max(
    env(safe-area-inset-left, 0px),
    var(--tg-safe-area-inset-left, 0px),
    var(--tg-content-safe-area-inset-left, 0px)
  );
  --flow-vh: var(--tg-viewport-stable-height, 100dvh);
  --control-border: #68746b;
  --focus-ring: #86b6ff;
  --curtain-dark: rgba(6, 12, 10, 0.2);
  --curtain-light: rgba(255, 255, 255, 0.16);
  --primary-curtain: var(--curtain-light);
  --danger-ink: #101611;
}
:root.light,
:root.light[data-skin] {
  --muted: #626a64;
  --text-secondary: #454d48;
  --accent: #285fcf;
  --accent-2: #1747a8;
  --control-border: #626b64;
  --focus-ring: #1747a8;
  --accent-text: #ffffff;
  --danger-ink: #ffffff;
  --primary-curtain: var(--curtain-dark);
}
:root,
:root[data-skin] {
  --accent-text: #101611;
  --danger-ink: #101611;
}
.badge.risk,
.profServiceState.bad,
.seg.tone-risk button.active[data-v="suspicious"],
#drFActionSeg button.active[data-v="reject"],
.abHero.bad .abHeroIcon {
  color: var(--danger-ink);
}
html {
  min-height: 100%;
  scroll-padding-block-start: var(--flow-safe-top);
  scroll-padding-block-end: calc(112px + var(--flow-safe-bottom));
}
body {
  min-height: var(--flow-vh);
  font-size: 1rem;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body,
:root.light body,
html[data-skin] body,
:root.light[data-skin] body {
  overflow-x: hidden;
}
.app {
  min-height: var(--flow-vh);
  width: min(960px, 100%);
  padding: max(16px, var(--flow-safe-top)) max(16px, var(--flow-safe-right))
    calc(128px + var(--flow-safe-bottom)) max(16px, var(--flow-safe-left));
}
#feedTab,
#searchTab,
#filtersTab,
#watchesTab,
.deckShell,
.form,
.fcard {
  min-width: 0;
}
.topbar {
  min-height: 52px;
  margin-bottom: 18px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
}
.brandEmblem {
  width: 44px;
  height: 44px;
}
.brandName,
:root.light .brandName,
html[data-skin] .brandName {
  font-size: 1.375rem;
  line-height: 1.15;
}
.brandTagline {
  display: block;
  max-width: 34ch;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 550;
  text-transform: none;
  white-space: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.topbarActions {
  gap: 4px;
}
.topbarActions .iconBtn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.tabs {
  bottom: calc(12px + var(--flow-safe-bottom));
  width: min(560px, calc(100vw - 20px));
  padding: 6px;
  gap: 4px;
  overflow: visible;
  border-radius: 14px;
}
.tabGlider {
  top: 6px;
  bottom: 6px;
  border-radius: 10px;
}
.tab {
  min-width: 0;
  min-height: 52px;
  padding: 5px 6px;
  gap: 4px;
  border-radius: 9px;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.tab > span:last-child {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tab:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}
.sectionHead {
  margin-top: 28px;
}
.sectionHead h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}
.savePill.error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: var(--danger-soft);
  color: var(--danger);
}
.fcardTitle {
  font-size: 1.0625rem;
  line-height: 1.3;
}
.fcardSub,
.shopIntro,
#searchTab > .fcardSub,
#searchQuickPane > .fcardSub,
#watchSetupPane > .fcardSub {
  font-size: 0.875rem;
  line-height: 1.5;
}
label,
.skinLbl {
  font-size: 0.8125rem;
  line-height: 1.35;
}
input,
select,
textarea,
.cpField,
.abInp,
.refLink,
.refCodePill {
  min-height: 48px;
  font-size: 1rem;
  line-height: 1.35;
}
.mode,
.seg {
  min-width: 0;
  gap: 4px;
}
.mode button,
.seg button,
.searchSubnav button,
.fSubSeg button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 10px;
  font-size: 0.875rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.searchSubnav button {
  min-height: 48px;
}
.frow,
.frow > *,
.formGrid > *,
.dualInput {
  min-width: 0;
}
.primary,
.secondary,
.buyBtn,
.miniBtn,
.fReset,
.ghostBtn,
.quickChip,
.deepButton,
.deepRuleButton,
.deepShareButton,
.tutorialActions button,
#runSearch,
#addUrlWatch,
#addQueryWatch,
#addSellerWatch,
#resetFilters,
#exAdd {
  min-height: 48px;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 160ms ease,
    background-color 160ms ease;
}
.primary::before,
.secondary::before,
.buyBtn::before,
.miniBtn::before,
.fReset::before,
.ghostBtn::before,
.quickChip::before,
.deepButton::before,
.deepRuleButton::before,
.deepShareButton::before,
.tutorialActions button::before,
#runSearch::before,
#addUrlWatch::before,
#addQueryWatch::before,
#addSellerWatch::before,
#resetFilters::before,
#exAdd::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: var(--primary-curtain);
  opacity: 1;
  pointer-events: none;
  transform: translateX(-101%);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.secondary::before,
.miniBtn::before,
.fReset::before,
.ghostBtn::before,
.quickChip::before,
.deepRuleButton::before {
  background: rgba(var(--accent-rgb), 0.12);
}
.primary > *,
.secondary > *,
.buyBtn > *,
.miniBtn > *,
.fReset > *,
.ghostBtn > *,
.quickChip > *,
.deepButton > *,
.deepRuleButton > *,
.deepShareButton > *,
.tutorialActions button > *,
#runSearch > *,
#addUrlWatch > *,
#addQueryWatch > *,
#addSellerWatch > *,
#resetFilters > *,
#exAdd > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .primary:hover::before,
  .secondary:hover::before,
  .buyBtn:hover::before,
  .miniBtn:hover::before,
  .fReset:hover::before,
  .ghostBtn:hover::before,
  .quickChip:hover::before,
  .deepButton:hover::before,
  .deepRuleButton:hover::before,
  .deepShareButton:hover::before,
  .tutorialActions button:hover::before,
  #runSearch:hover::before,
  #addUrlWatch:hover::before,
  #addQueryWatch:hover::before,
  #addSellerWatch:hover::before,
  #resetFilters:hover::before,
  #exAdd:hover::before {
    transform: translateX(0);
  }
  .primary:hover,
  .buyBtn:hover,
  .deepButton:hover,
  .deepShareButton:hover {
    filter: none;
  }
}
.primary:focus-visible,
.secondary:focus-visible,
.buyBtn:focus-visible,
.miniBtn:focus-visible,
.fReset:focus-visible,
.ghostBtn:focus-visible,
.quickChip:focus-visible,
.deepButton:focus-visible,
.deepRuleButton:focus-visible,
.deepShareButton:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cardActions {
  min-height: 68px;
  grid-template-columns: repeat(4, 48px);
  gap: 10px;
  padding: 9px 14px;
}
.cardAction,
.photoArrow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  height: 48px;
}
.cardAction::before,
.photoArrow::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.1;
  pointer-events: none;
  transform: translateX(-101%);
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.cardAction > *,
.photoArrow > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .cardAction:hover::before,
  .photoArrow:hover::before {
    transform: translateX(0);
  }
}
.cardAction:focus-visible,
.photoArrow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.deckShell {
  container-type: inline-size;
}
.deck {
  min-height: calc(var(--flow-vh) - 190px);
  overflow: visible;
}
.card,
:root.light .card,
html[data-skin] .card {
  width: min(480px, calc(100vw - 20px));
  border-radius: 8px;
  animation: flowCardIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.skelCard {
  width: min(480px, calc(100vw - 20px));
}
.skelPhoto {
  min-height: 300px;
  max-height: min(54dvh, 480px);
  aspect-ratio: 4 / 5;
}
.skelBody {
  min-height: 400px;
}
.skelActions {
  min-height: 68px;
  display: grid;
  grid-template-columns: repeat(4, 48px);
  place-content: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--panel2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.skelActions span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--panel);
}
.skelMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.skelMeta span {
  min-height: 54px;
  border-radius: 8px;
  background: var(--panel);
}
.skelPanel {
  min-height: 132px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--panel);
}
.cardGhost,
:root.light .cardGhost {
  width: min(480px, calc(100vw - 20px));
}
.photoStage {
  min-height: 300px;
  max-height: min(54dvh, 480px);
  aspect-ratio: 4 / 5;
}
.photoStage img {
  width: 100%;
  height: 100%;
}
.details {
  gap: 12px;
  padding: 14px 16px 16px;
}
.details .title {
  max-width: 100%;
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.details .price .amount {
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.meta {
  min-height: 52px;
  padding: 9px 11px;
}
.meta span {
  font-size: 0.75rem;
  line-height: 1.3;
}
.meta b {
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.deepPanel {
  min-height: 128px;
}
.deckTop {
  min-height: 28px;
  font-size: 0.8125rem;
}
.badge,
.raterChip,
.miniMeta span,
.planBadge,
.shopTag,
.savePill,
.profServiceState {
  font-size: 0.75rem;
  line-height: 1.25;
}
.deckStatus,
.photoLive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes flowCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes flowGhostIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.cardGhost {
  animation: flowGhostIn 200ms ease both;
}
.card.noEntrance,
.cardGhost.noEntrance {
  animation: none;
}
#feedTab.tabEnter > *,
#searchTab.tabEnter > *,
#filtersTab.tabEnter > *,
#watchesTab.tabEnter > * {
  animation: flowPanelIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes flowPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.appearanceHead {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 10px;
}
.themeSwitch {
  min-height: 48px;
  padding-inline: 12px;
  font-size: 0.8125rem;
}
.skinGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  overflow: visible;
}
.skinChoice {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text-secondary);
  text-align: left;
  overflow: visible;
}
.skinChoice::after {
  content: attr(aria-label);
  min-width: 0;
  color: currentColor;
  font-size: 0.75rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.skinChoice.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.skinGrid .skinSwatch {
  width: 24px;
  height: 24px;
  flex: none;
}
.skinChoice > svg {
  z-index: 2;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  padding: 2px;
}
:where(
  input,
  select,
  textarea,
  .cpField,
  .iconBtn,
  .skinChoice,
  .themeSwitch,
  .cardAction,
  .photoArrow
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-ring);
}
:where(
  .fcardSub,
  .shopIntro,
  .tutorialCopy p,
  .deepNotes,
  .meta b,
  .title,
  .frow,
  .lbl,
  .watchRow,
  .profileCard
) {
  overflow-wrap: anywhere;
}
@media (max-width: 780px) {
  .app {
    padding-right: max(14px, var(--flow-safe-right));
    padding-left: max(14px, var(--flow-safe-left));
    padding-bottom: calc(128px + var(--flow-safe-bottom));
  }
  .card,
  .cardGhost,
  .deck .empty {
    width: min(480px, calc(100vw - 20px));
  }
  .photoStage,
  .cardGhost {
    max-height: min(52dvh, 452px);
  }
}
@media (max-height: 640px) and (orientation: portrait) {
  .photoStage,
  .cardGhost,
  .skelPhoto {
    min-height: 240px;
    max-height: calc(100dvh - 318px);
  }
}
@media (max-width: 360px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .brandName,
  :root.light .brandName,
  html[data-skin] .brandName {
    font-size: 1.25rem;
  }
  .brandTagline {
    display: none;
  }
  .tabs {
    width: calc(100vw - 12px);
  }
  .tab {
    min-height: 54px;
    padding-inline: 3px;
  }
  .mode,
  .seg {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mode button,
  .seg button {
    min-height: 48px;
    white-space: normal;
  }
  .skinGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .app {
    padding-bottom: calc(16px + var(--flow-safe-bottom));
  }
  .tabs {
    position: static;
    width: min(560px, calc(100% - 20px));
    margin: 12px auto 0;
    transform: none;
  }
}
html[data-tg-performance="low"] .ambient span,
html[data-tg-performance="low"] .tutorialAurora,
html[data-tg-performance="low"] .swipeGlow {
  display: none !important;
}
html[data-tg-performance="low"] .card,
html[data-tg-performance="low"] .cardGhost,
html[data-tg-performance="low"] .tabs {
  box-shadow: none !important;
}
html[data-tg-performance="low"] .card,
html[data-tg-performance="low"] .cardGhost {
  animation: none !important;
}
html[data-tg-performance="low"] .cardGhost.g2 {
  display: none !important;
}
html[data-tg-performance="low"] *,
html[data-tg-network="constrained"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.tgInactive .ambient span,
html.tgInactive .tutorialAurora span {
  animation-play-state: paused !important;
}

/* Specificity-safe control sizing for Telegram's compact WebView. */
#deckCount {
  min-inline-size: 8ch;
  font-size: 0.8125rem;
  text-align: center;
}
#searchTab #limitMode button,
#searchTab #runSearch,
.frow .dualInput input,
.refActions .buyBtn,
.abActions .buyBtn,
.abActions .miniBtn {
  min-height: 48px;
}
#searchTab #limitMode button {
  font-size: 0.875rem;
}
.chip {
  min-height: 44px;
}
.chip button {
  min-width: 44px;
  min-height: 44px;
  margin-block: -8px;
  margin-right: -6px;
  font-size: 1.125rem;
}
.metric span {
  font-size: 0.75rem;
}
.deepConf {
  font-size: 0.8125rem;
}
.tabs {
  width: min(560px, calc(100vw - var(--flow-safe-left) - var(--flow-safe-right) - 20px));
}
.card,
:root.light .card,
html[data-skin] .card,
.cardGhost,
:root.light .cardGhost,
.skelCard,
.deck .empty {
  width: min(520px, 100%);
}
.photoStage {
  background-color: var(--bg-2);
  background-size: contain;
  background-blend-mode: normal;
}
html .card.noEntrance,
html .cardGhost.noEntrance {
  animation: none !important;
}
@media (forced-colors: active) {
  :root,
  :root.light,
  :root[data-skin],
  :root.light[data-skin] {
    --accent-text: ButtonText;
    --control-border: ButtonText;
    --focus-ring: Highlight;
  }
  .primary,
  .secondary,
  .buyBtn,
  .miniBtn,
  .fReset,
  .ghostBtn,
  .quickChip,
  .iconBtn,
  .cardAction,
  .photoArrow,
  .skinChoice,
  .themeSwitch,
  .tabs,
  .mode,
  .seg,
  input,
  select,
  textarea,
  .cpField {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: auto;
  }
  .tabGlider,
  .primary::before,
  .secondary::before,
  .buyBtn::before,
  .miniBtn::before,
  .fReset::before,
  .ghostBtn::before,
  .quickChip::before,
  .cardAction::before,
  .photoArrow::before {
    display: none;
  }
  .tab.active,
  .seg button.active,
  .mode button.active,
  .skinChoice.active {
    background: Highlight;
    color: HighlightText;
  }
  :where(button, input, select, textarea, [role="button"], summary):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
    color: GrayText;
    border-color: GrayText;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  html .card,
  html .cardGhost,
  #feedTab.tabEnter > *,
  #searchTab.tabEnter > *,
  #filtersTab.tabEnter > *,
  #watchesTab.tabEnter > * {
    animation: none !important;
  }
  .primary::before,
  .secondary::before,
  .buyBtn::before,
  .miniBtn::before,
  .fReset::before,
  .ghostBtn::before,
  .quickChip::before,
  .deepButton::before,
  .deepRuleButton::before,
  .deepShareButton::before,
  .tutorialActions button::before,
  .cardAction::before,
  .photoArrow::before {
    transform: none !important;
    opacity: 0 !important;
  }
}

/* ── Listing age ──────────────────────────────────────────────────────────
   Freshness is the signal the feed is built around, so the age rides on the
   photo opposite the counter instead of hiding in the meta grid. Deliberately
   no backdrop-filter: this pill travels with the card during a swipe, and a
   filtered layer there is what made dragging stutter on mobile. */
.photoAge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 4;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(6, 2, 16, 0.62);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.photoAge svg {
  width: 13px;
  height: 13px;
}

.photoAge.fresh {
  border-color: rgba(95, 211, 154, 0.55);
  color: #7ee6b0;
}

/* Freshness cutoff: number box and its unit picker share one line, and the
   picker wraps under the box on narrow screens rather than crushing it. */
.ageInput {
  min-width: 0;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.ageInput input {
  width: 76px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: 0.15s ease;
}

.ageInput input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}

.frow .ageInput .seg {
  margin-left: 0;
}

/* ── Autobuy: instrument panel, not a promo ────────────────────────────────
   This sheet spends real money, so it reads as an instrument: neutral
   surfaces, hairline rules, tabular figures, and semantic colour spent only
   on small marks. It had been left on the older holo/gradient treatment that
   the rest of the app dropped when it moved to the calm system, which is why
   it looked louder and cheaper than every screen around it. */

.abHero {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--panel);
}

/* The holo seal bar predates the calm system; nothing else still wears one. */
.abHero::after {
  display: none;
}

.abHero.good,
.abHero.warn,
.abHero.bad,
:root.light .abHero.warn {
  background: var(--panel);
}

.abHeroIcon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text-secondary);
}

.abHero.good .abHeroIcon,
.abHero.warn .abHeroIcon,
.abHero.bad .abHeroIcon {
  background: var(--bg-2);
}

.abHero.good .abHeroIcon {
  border-color: color-mix(in srgb, var(--good) 42%, var(--line));
  color: var(--good);
}

.abHero.warn .abHeroIcon {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  color: var(--warn);
}

.abHero.bad .abHeroIcon {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: var(--danger);
}

.abHeroIcon svg {
  width: 19px;
  height: 19px;
}

.abHeroTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.abHeroSub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.abHeroPill {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.abHeroPill svg {
  width: 12px;
  height: 12px;
}

/* Readiness ledger — one row per precondition, value right-aligned. */
.abReady {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}

.abReady li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
}

.abReady li:first-child {
  border-top: 0;
}

.abReadyMark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.abReady li.ok .abReadyMark {
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
}

.abReady li.no .abReadyMark {
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted);
}

.abReadyMark svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.abReadyLabel {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abReadyValue {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.abReady li.no .abReadyValue {
  color: var(--muted);
}

/* Panels */
.abPanel {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.abPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.abPanelTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.abPanelTitle svg {
  width: 14px;
  height: 14px;
}

.abPanelStatus {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

/* The older rules fill these pills solid; without resetting the background here
   the tinted text would sit on its own colour and vanish. */
.abPanelStatus.good {
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  background: transparent;
  color: var(--good);
}

.abPanelStatus.warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: transparent;
  color: var(--warn);
}

.abNote {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

/* Mode switch: live is a money state, so it is marked — but tinted, not filled. */
.abModeSeg {
  margin-bottom: 10px;
}

.abModeSeg button {
  min-height: 42px;
  font-size: 13px;
  font-weight: 700;
}

.abModeSeg button.active[data-v="off"] {
  background: var(--panel2);
  color: var(--text);
  box-shadow: none;
}

.abModeSeg button.active[data-v="test"] {
  background: color-mix(in srgb, var(--warn) 14%, var(--panel2));
  color: var(--warn);
  box-shadow: none;
}

.abModeSeg button.active[data-v="live"] {
  background: color-mix(in srgb, var(--good) 16%, var(--panel2));
  color: var(--good);
  box-shadow: none;
}

/* Forms: two columns, so nine fields stop reading as an endless scroll. */
.abLimitGrid,
.abRuleForm,
.abCredGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.abRuleForm .abActions,
.abRuleForm .abActions.full,
.abCredGrid .abField.wide,
.abRuleForm .abField.wide {
  grid-column: 1 / -1;
}

.abField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.abField > span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.abInp {
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
}

.abInp:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.abActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Icon + label on one line: these buttons carry a lucide glyph, which stacks
   above the text unless the button is an explicit row. */
.abActions .buyBtn,
.abActions .miniBtn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 11px;
}

.abActions .buyBtn {
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: none;
}

.abActions .miniBtn {
  padding: 0 14px;
  font-size: 13px;
}

.abActions .buyBtn svg,
.abActions .miniBtn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.abRuleForm .abActions .buyBtn {
  width: 100%;
  justify-content: center;
}

/* Rules */
.abRuleItem {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}

.abRuleTitle span:first-child {
  font-size: 14px;
  font-weight: 800;
}

.abRuleState {
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.abRuleState.on {
  border-color: color-mix(in srgb, var(--good) 40%, var(--line));
  background: transparent;
  color: var(--good);
}

.abRuleChip {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.abRuleChip svg {
  width: 12px;
  height: 12px;
  color: var(--muted);
}

.abRuleMeta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* Reservations */
.abResItem {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}

.abResPrice {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.abResMeta {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Log */
.abLogList {
  border-top: 1px solid var(--line);
}

.abLog {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.abLog:last-child {
  border-bottom: 0;
}

.abAct {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.abAct.bought {
  border-color: color-mix(in srgb, var(--good) 42%, var(--line));
  color: var(--good);
}

.abAct.failed {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: var(--danger);
}

.abAct.capped,
.abAct.dry_run {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  color: var(--warn);
}

.abLogItem {
  color: var(--text-secondary);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.abLogPrice {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.abLog i {
  min-width: 0;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .abLimitGrid,
  .abRuleForm,
  .abCredGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The rule's on/off pill already carries the state in green; a solid accent slab
   next to it says the same thing a second time in a second colour. The toggle is
   an action, so it stays neutral. */
.abRuleBtns .miniBtn.on {
  border-color: var(--line);
  background: var(--panel2);
  color: var(--text);
}

/* A dead Vinted session is the failure the panel most needs to shout about:
   everything else still reads "ready" while reserves quietly fail. */
.abAlert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.abAlert svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--warn);
}

/* Ceiling note under the freshness picker: the chosen window is wider than what
   ingest keeps, so it cannot do anything. */
.ageCeilingHint {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--warn);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
}