@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

  /* The hidden attribute is how this panel puts a box away, and a class that
     sets display on that same box quietly beats it: the browser's own
     "[hidden] { display: none }" has the lowest strength of any rule, so
     ".thing { display: flex }" wins and the box stays on screen no matter what
     the markup says. That is how the payment celebration came to sit over the
     code the customer was trying to pay with.

     Saying it once, with the weight it needs, keeps the attribute meaning what
     it says for every box on both sides of the panel. */
  [hidden] { display: none !important; }
    :root {
      color-scheme: dark;
      --night: #050419;
      --deep: #090725;
      --panel: #0b0a31;
      --violet: #8b2bff;
      --purple: #c03dff;
      --lilac: #c89bff;
      --blue: #438eff;
      --ink: #f8f5ff;
      --muted: #b7b2d3;
      --subtle: #7d79a9;
      --line: rgba(153, 84, 255, .38);
      --display: "Space Grotesk", sans-serif;
      --body: "DM Sans", sans-serif;
    }
    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--night); }
    body {
      margin: 0; min-height: 100dvh; color: var(--ink); font-family: var(--body);
      background: radial-gradient(ellipse at 50% 0%, rgba(69, 17, 153, .28), transparent 38%), var(--night);
      -webkit-font-smoothing: antialiased;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    .app {
      width: min(100%, 480px); min-height: 100dvh; position: relative; overflow: visible;
      margin: 0 auto; padding: 12px 18px calc(108px + env(safe-area-inset-bottom));
      background:
       radial-gradient(ellipse at 110% 83%, rgba(101, 17, 227, .12), transparent 30%),
       radial-gradient(ellipse at 2% 48%, rgba(39, 22, 145, .13), transparent 30%);
    }
    .sticky-header {
      position:sticky;top:0;z-index:25;margin:-12px -18px 0;padding:12px 18px 0;
      background:linear-gradient(180deg,rgba(5,4,25,.99),rgba(5,4,25,.94));
      backdrop-filter:blur(12px);
    }
    .topbar { height:64px; display:flex; align-items:center; gap:12px; }
    .icon-button {
      position:relative; padding:0; border:0; display:grid; place-items:center; flex:none;
      background:transparent; cursor:pointer; color:#f9f4ff;
    }
    .menu-btn { width:36px;height:42px; margin-left:-5px; }
    .menu-btn svg { width:27px;height:27px; }
    .brand { display:flex; align-items:center; gap:7px; margin-right:auto; min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer; }
    .brand:focus-visible { outline:2px solid var(--lilac);outline-offset:3px;border-radius:6px; }
    .brand-crown { width:51px;height:47px; color:#d18aff; filter:drop-shadow(0 0 7px rgba(177,50,255,.82)); }

  /* An uploaded mark stands on its own in the header -- the name is not printed
     beside it -- so it is given room to be read. Logos are often much wider than
     they are tall, and holding one to the space the drawn crown used to take
     leaves it too small to recognise. It is fitted whole rather than cropped, so
     a mark of any shape is shown in full and never stretched. */
  .brand-logo {
    max-height:42px;
    max-width:170px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    flex:0 0 auto;
  }
    .brand-name { font:700 24px/.93 var(--display); letter-spacing:.35px; }
    .brand-name span { display:block; margin-top:4px; color:#c379ff; font-size:14px; letter-spacing:.4px; }
    .head-action { width:40px;height:40px; border:1px solid rgba(178,103,255,.72); border-radius:50%; background:linear-gradient(150deg,rgba(74,25,142,.62),rgba(11,9,48,.9)); box-shadow:0 0 13px rgba(136,34,255,.25), inset 0 0 9px rgba(142,55,255,.17); }
    .head-action svg { width:22px;height:22px; }
    .notify-count { position:absolute; top:-4px; right:-2px; display:grid; place-items:center; width:18px;height:18px; border-radius:50%; background:#ff277f; color:white; font-size:11px; border:1px solid #120926; }
    .search-row { display:flex; gap:10px; height:42px; margin-top:4px; }
    .searchbox,.trust-pill {
      height:42px; border:1px solid #8c36e8; border-radius:24px; display:flex; align-items:center;
      box-shadow:0 0 9px rgba(154,48,255,.38), inset 0 0 9px rgba(126,39,227,.18);
      background:linear-gradient(110deg,rgba(35,16,83,.85),rgba(10,8,42,.97));
    }
    .searchbox { flex:1; min-width:0; padding:0 13px; gap:10px; }
    .searchbox svg { width:19px;height:19px;color:#c78fff;flex:none; }
    .searchbox input { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; }
    .searchbox input::placeholder { color:#c6bedc; opacity:.9; }
    .trust-pill { flex:none; padding:0 11px; gap:7px; font-size:11px; font-weight:600; white-space:nowrap; }
    .trust-pill svg { width:17px;height:17px;color:#e0a1ff; filter:drop-shadow(0 0 4px #bb51ff); }
    .welcome {
      position:relative; min-height:190px; margin-top:17px; padding:15px 18px 13px;
      overflow:hidden; border:1px solid rgba(187,111,255,.88); border-radius:19px;
      background:
       radial-gradient(ellipse at 78% 52%,rgba(111,14,211,.42),transparent 36%),
       radial-gradient(ellipse at 46% 0%,rgba(56,17,125,.43),transparent 53%),
       linear-gradient(120deg,#0d082d 5%,#090725 66%,#10082e);
      box-shadow:0 0 12px rgba(172,61,255,.3), inset 0 0 16px rgba(111,33,211,.17);
    }
    .welcome:before,.welcome:after { content:"";position:absolute;pointer-events:none;border-radius:50%; }
    .welcome:before { width:220px;height:220px;right:-38px;top:-13px;border:1px solid rgba(142,58,255,.2);box-shadow:0 0 28px rgba(138,31,255,.26),inset 0 0 25px rgba(138,31,255,.11); }
    .welcome:after { width:175px;height:175px;right:-16px;top:8px;border:1px solid rgba(190,77,255,.18); }
    .welcome-copy { position:relative;z-index:2;width:58%; }
    .premium-tag { display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:14px;background:rgba(101,37,173,.36);border:1px solid rgba(164,81,255,.45);font-size:10px; }
    .premium-tag svg { width:15px;height:15px;color:#e5a4ff; }
    .welcome h1 { margin:12px 0 1px;font:700 21px/1.15 var(--display);letter-spacing:-.5px;white-space:nowrap; }
    .welcome h2 { margin:1px 0 7px;color:#d86bff;font:700 28px/.98 var(--display);letter-spacing:.1px;text-shadow:0 0 12px rgba(211,78,255,.4);white-space:nowrap; }
    .welcome h2 svg { width:28px;height:28px;vertical-align:-4px;margin-left:4px;color:#d084ff; }
    .welcome-note { margin:0;color:#e2dcf2;font-size:9.5px;white-space:nowrap; }
    .welcome-cta {
      display:inline-flex;align-items:center;gap:8px;margin-top:13px;padding:8px 14px;
      border:1px solid #d45dff;border-radius:20px;background:linear-gradient(100deg,#4810b5,#7e16d8);
      color:#fff;font-size:11px;font-weight:700;box-shadow:0 0 12px rgba(168,36,255,.6),inset 0 1px rgba(255,255,255,.18);cursor:pointer;
    }
    .welcome-cta svg { width:14px;height:14px; }
    .hero-art { position:absolute;z-index:1;right:4px;top:30px;width:49%;height:145px; }
    .hero-disc { position:absolute;right:10px;top:18px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:2px solid #c34dff;background:radial-gradient(circle,#430b80 0%,#100828 69%);box-shadow:0 0 9px #b62aff,0 0 28px rgba(151,19,255,.84),inset 0 0 18px rgba(203,40,255,.4);animation:breath 3.8s ease-in-out infinite; }
    .hero-disc svg { width:62px;height:62px;color:#f0bdff;filter:drop-shadow(0 0 5px #e341ff); }
    .hero-pedestal { position:absolute;right:2px;bottom:4px;width:143px;height:30px;border:2px solid #8a22ff;border-top-color:#e15dff;border-radius:50%;transform:perspective(70px) rotateX(18deg);box-shadow:0 5px 17px #8f17ff, inset 0 0 13px #9a2aff; }
    .hero-pedestal:after { content:"";position:absolute;left:15px;right:15px;top:7px;height:13px;border:1px solid rgba(226,91,255,.65);border-radius:50%; }
    .social-float { position:absolute;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;box-shadow:0 0 12px currentColor;background:#10102e;border:1px solid rgba(255,255,255,.15); }
    .social-float svg { width:22px;height:22px; }
    .sf-insta { left:0;top:9px;color:#ff43b0; }.sf-youtube {right:1px;top:9px;color:#ff354c}.sf-telegram {left:26px;top:66px;color:#40c9ff}.sf-tiktok {right:-1px;top:65px;color:#f5fbff}
    .stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:17px; }
    .stat {
      min-height:118px;padding:9px 8px 8px;border:1px solid rgba(123,68,225,.58);border-radius:16px;
      background:linear-gradient(145deg,rgba(19,13,64,.97),rgba(7,9,42,.98));
      box-shadow:0 0 8px rgba(107,44,201,.18),inset 0 0 13px rgba(68,39,152,.12);
      /* A figure far longer than the card would otherwise push its way out of the
         box and over the card below it. */
      overflow:hidden;
      /* The label, the figure and the line under it all sit on the middle of the
         card, the same way the round mark above them does. */
      text-align:center;
    }
    .stat-icon { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;color:#ddaaff;background:radial-gradient(circle,rgba(154,55,255,.42),rgba(40,17,92,.5));box-shadow:0 0 11px rgba(157,55,255,.56),inset 0 0 4px rgba(255,255,255,.3); }
    .stat-icon svg { width:20px;height:20px; }
    .stat:nth-child(2) .stat-icon { color:#59bdff;background:radial-gradient(circle,rgba(19,122,255,.5),rgba(5,38,113,.7));box-shadow:0 0 12px rgba(47,135,255,.52); }
    .stat:nth-child(3) .stat-icon { color:#f39cff;background:radial-gradient(circle,rgba(195,41,255,.55),rgba(63,14,111,.7)); }
    .stat:nth-child(4) .stat-icon { color:#ffe064;background:radial-gradient(circle,rgba(227,169,13,.45),rgba(79,51,9,.7));box-shadow:0 0 11px rgba(255,200,21,.43); }
    .stat-label { font-size:9px;line-height:1.15;color:#ece7f7;white-space:nowrap;letter-spacing:-.2px; }
    .stat-value { margin-top:4px;font:700 17px/1 var(--display);white-space:nowrap; }
    .stat-foot { display:flex;align-items:center;justify-content:center;gap:3px;margin-top:6px;color:#b9b5d2;font-size:8px;white-space:nowrap; }
    .stat-foot.good { color:#4ee29a; }.stat-foot.link { color:#52d1e8; }.stat-foot.gold { color:#ffdb66; }
    .stat-foot svg { width:11px;height:11px; }
    .services-head { display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px; }
    .services-title { display:flex;align-items:center;gap:7px;margin:0;font:700 16px/1.2 var(--display); }
    .services-title svg { width:21px;height:23px;color:#e77cff;filter:drop-shadow(0 0 5px #8a27f7); }
    .view-all { display:inline-flex;align-items:center;gap:4px;padding:5px 0;border:0;background:none;color:#c280ff;font-size:10px;cursor:pointer; }
    .view-all svg { width:13px;height:13px; }
    .service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
    .service {
      position:relative;min-height:88px;padding:9px 10px 8px;text-align:left;overflow:hidden;cursor:pointer;
      border:1px solid rgba(130,83,255,.58);border-radius:15px;
      background:linear-gradient(145deg,rgba(13,16,58,.96),rgba(7,12,43,.98));
      box-shadow:inset 0 0 15px rgba(71,43,185,.17),0 0 7px rgba(100,54,237,.2);
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
    }
    .service:hover,.service:focus-visible { transform:translateY(-2px);border-color:rgba(173,110,255,.85);box-shadow:0 0 12px rgba(114,63,255,.36),inset 0 0 12px rgba(84,54,177,.15);outline:0; }
    .service-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#151a50;box-shadow:0 0 12px var(--glow); overflow:hidden; }
    .service-icon svg { width:26px;height:26px; }
    /* A category can carry a picture of its own instead of a font icon. It is
       held to the size of the box and fitted rather than cropped, so a logo of
       any shape is drawn whole rather than with its edges cut off. */
    .service-icon img { width:26px;height:26px;object-fit:contain;display:block; }
    .service-name { display:block;margin-top:5px;font-size:11px;font-weight:600;line-height:1.15;white-space:nowrap; }
    .service-desc { display:block;margin-top:2px;color:#c2c1dd;font-size:8px;line-height:1.2;white-space:nowrap;letter-spacing:-.12px; }
    .service-arrow { position:absolute;right:8px;top:27px;width:14px;height:14px;color:#a46aff; }
    .instagram { --glow:#ee3aa0;background:linear-gradient(135deg,#fbaf45,#e82987 50%,#7745ec); }
    .youtube { --glow:#ff2742;background:#f21d36; }
    .tiktok { --glow:#12d5dd;background:#080b13; }
    .telegram { --glow:#329fff;background:linear-gradient(145deg,#52d7ff,#0876df); }
    .twitter { --glow:#9c91ff;background:#080b14; }
    .facebook { --glow:#278cff;background:#1877f2; }
    .linkedin { --glow:#36b6ff;background:#0a76ac; }
    .snapchat { --glow:#ffe600;background:#f7e900;color:#111; }
    .website { --glow:#bd35ff;background:linear-gradient(140deg,#cc54ff,#6111d7); }
    .spotify { --glow:#16df83;background:#18c76a; }
    .pinterest { --glow:#ff315c;background:#df1737; }
    .discord { --glow:#8993ff;background:#5865f2; }
    .empty-results { display:none;padding:28px 12px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:15px; }
    .page-view { display:none; animation:page-in .22s ease-out; }
    .page-view.active { display:block; }
    .page-heading { margin:20px 0 15px; }
    .page-eyebrow { color:#c379ff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; }
    .page-heading h1 { margin:5px 0 0;font:700 25px/1.1 var(--display);letter-spacing:-.5px; }
    .page-heading p { margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.5; }
    .surface-card {
      border:1px solid rgba(143,82,232,.55);border-radius:17px;
      background:linear-gradient(145deg,rgba(20,13,62,.97),rgba(8,8,38,.98));
      box-shadow:0 0 10px rgba(107,44,201,.16),inset 0 0 15px rgba(68,39,152,.12);
    }
    .empty-state { padding:26px 18px;text-align:center; }
    .empty-mark { width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border:1px solid rgba(185,94,255,.65);border-radius:17px;background:radial-gradient(circle,rgba(127,42,220,.45),rgba(29,13,72,.5));color:#e0a6ff;box-shadow:0 0 18px rgba(160,55,255,.22); }
    .empty-mark svg { width:27px;height:27px; }
    .empty-state h2 { margin:0;font:700 17px var(--display); }
    .empty-state p { max-width:280px;margin:8px auto 0;color:var(--muted);font-size:12px;line-height:1.55; }
    .outline-action { margin-top:16px;padding:10px 15px;border:1px solid rgba(199,117,255,.74);border-radius:12px;background:rgba(80,27,148,.35);color:#f6eaff;font-weight:700;font-size:12px;cursor:pointer; }
    .order-list { display:grid;gap:10px;margin-bottom:10px; }

      /* One card per order.

         Every article carries its own border, padding and background, so the
         list reads as separate orders rather than one block of text: without
         them the rows sit on top of each other and only the gap between them
         says that anything is separate at all. */
      .order-row {
        padding:13px 14px;
        border:1px solid rgba(143,82,232,.45);
        border-radius:15px;
        background:linear-gradient(145deg,rgba(20,13,62,.97),rgba(8,8,38,.98));
        box-shadow:0 0 10px rgba(107,44,201,.14),inset 0 0 15px rgba(68,39,152,.1);
      }
      .order-row-top {
        display:flex;align-items:center;justify-content:space-between;gap:10px;
        font-size:13px;color:#f2eaff;
      }
      .order-row-top strong { font:700 13px var(--display);letter-spacing:.3px; }
      /* The service name is whatever the supplier called it and can be long and
         in another script, so it is given room and allowed to break rather than
         pushing the card wider. */
      .order-row-mid {
        margin-top:8px;
        font-size:12.5px;
        line-height:1.55;
        color:#ded0f7;
        overflow-wrap:anywhere;
      }
      .order-row-bot {
        display:flex;align-items:center;justify-content:space-between;gap:10px;
        margin-top:10px;
        font-size:11px;
        color:#b9a6d8;
      }
      .order-row-bot strong { font:700 13px var(--display);color:#f2eaff;white-space:nowrap; }

      /* Status as a pill, coloured by what it means. Each one names itself
         rather than relying on position or colour alone. */
      .order-status {
        flex:none;
        padding:3px 10px;
        border:1px solid transparent;
        border-radius:999px;
        font-size:10px;
        font-weight:700;
        letter-spacing:.4px;
        text-transform:capitalize;
        white-space:nowrap;
      }
      .st-pending    { background:rgba(255,196,84,.15);border-color:rgba(255,196,84,.45);color:#ffcf6b; }
      .st-processing,
      .st-inprogress { background:rgba(110,168,255,.15);border-color:rgba(110,168,255,.45);color:#8fc0ff; }
      .st-partial    { background:rgba(255,164,96,.15);border-color:rgba(255,164,96,.45);color:#ffb478; }
      .st-completed  { background:rgba(117,234,181,.15);border-color:rgba(117,234,181,.45);color:#75eab5; }
      .st-failed     { background:rgba(255,122,138,.15);border-color:rgba(255,122,138,.45);color:#ff8b9c; }
      .st-canceled,
      .st-cancelled  { background:rgba(160,160,190,.15);border-color:rgba(160,160,190,.45);color:#b6b6d4; }

    .order-record { padding:14px;overflow:hidden; }
    .order-record-top { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }
    .order-platform { font:700 15px var(--display); }
    .order-date { margin-top:4px;color:var(--subtle);font-size:10px; }
    .local-badge { flex:none;padding:5px 8px;border:1px solid rgba(87,222,167,.42);border-radius:20px;background:rgba(29,139,95,.12);color:#80edbd;font-size:9px;font-weight:700; }
    .order-link { display:block;margin-top:11px;padding:9px 0 0;border-top:1px solid rgba(153,84,255,.18);color:#d9c6f5;font-size:11px;font-weight:600;overflow-wrap:anywhere; }
      .order-link:hover,.order-link:focus-visible { color:#fff; }
    .order-meta { display:flex;gap:18px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(153,84,255,.2);color:var(--muted);font-size:10px; }
    .order-meta strong { color:#fff;margin-left:4px; }
    .local-note { margin:12px 2px 0;color:#a7a0c5;font-size:10px;line-height:1.5; }
    .account-card { padding:16px;margin-bottom:11px; }
    .account-card-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
    .account-label { color:#c8b7e8;font-size:11px; }
    .account-value { margin-top:5px;font:700 23px var(--display); }
    .account-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
    .add-money { padding:9px 11px;border:1px solid #d45dff;border-radius:11px;background:linear-gradient(100deg,#4810b5,#7e16d8);font-size:11px;font-weight:700;cursor:pointer; }
    .account-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px; }
    .account-cell { padding:12px;border:1px solid rgba(123,68,225,.35);border-radius:12px;background:rgba(7,8,37,.55); }
    .account-cell .account-value { font-size:16px; }
    .account-cell .account-label { font-size:10px; }
    .client-id { margin-top:11px;padding:12px;border:1px solid rgba(123,68,225,.35);border-radius:12px;background:rgba(7,8,37,.55); }
    .status-active { color:#75eab5; }
    .section-label { margin:20px 2px 9px;font:700 15px var(--display); }
/* Referral card.

   A surface card carries no padding of its own -- each one that needs it asks
   for it -- so this card asks for its own. Without it the link, the code and
   the figures all sit flat against the border.

   The heading row keeps the button on the same line as the note it belongs to,
   the link sits on its own full width row because it is the thing being copied,
   and the three figures are given a third column each so none of them is left
   stranded on a row of its own. */
      .ref-card { padding:16px;margin-bottom:11px; }
      .ref-top { display:flex;align-items:flex-start;gap:12px;justify-content:space-between; }
      .ref-top > div { min-width:0; }
      .ref-note { margin:5px 0 0;font-size:11px;line-height:1.55;color:#b9a6d8; }
      .ref-copy { flex:none;padding:9px 15px;border:1px solid rgba(159,90,236,.5);border-radius:10px;background:linear-gradient(135deg,#6d2dae,#8b3dd6);color:#fff;font:600 12px var(--display);cursor:pointer;white-space:nowrap; }
      .ref-copy:hover,.ref-copy:focus-visible { filter:brightness(1.12);outline:0; }
      .ref-link-row { margin-top:12px; }
      /* A link that wraps is easy to copy half of, so it is scrolled sideways
         instead and the whole of it is still there to be copied. */
      .ref-link { width:100%;height:42px;padding:0 12px;border:1px solid rgba(123,68,225,.4);border-radius:10px;background:rgba(7,8,37,.6);color:#cdb9f2;font-size:12px;text-overflow:ellipsis; }
      .ref-link:focus { outline:2px solid #7b44e1;outline-offset:1px; }
      .ref-code { margin-top:10px;font-size:11px;color:#b9a6d8; }
      .ref-code strong { color:#d89cff;font:700 13px var(--display);letter-spacing:.4px; }
      .ref-stats { margin-top:12px;grid-template-columns:repeat(3,1fr); }
      .ref-copied { display:inline-block;margin-top:10px;padding:6px 11px;border-radius:8px;background:rgba(117,234,181,.14);color:#75eab5;font-size:11px;font-weight:600; }
      @media (max-width:420px) {
        .ref-top { flex-direction:column;align-items:stretch; }
        .ref-copy { width:100%; }
        .ref-stats { grid-template-columns:1fr 1fr; }
      }
    .help-list { overflow:hidden; }
    .help-action { width:100%;min-height:49px;display:flex;align-items:center;gap:11px;padding:11px 13px;border:0;border-bottom:1px solid rgba(153,84,255,.2);background:transparent;text-align:left;color:#f2eaff;font-size:12px;font-weight:600;cursor:pointer; }
    .help-action:last-child { border-bottom:0; }
    .help-action:hover,.help-action:focus-visible { background:rgba(108,45,174,.18);outline:0; }
    .help-icon { width:28px;height:28px;display:grid;place-items:center;flex:none;border:1px solid rgba(159,90,236,.35);border-radius:9px;color:#d89cff;background:rgba(81,32,143,.28);font:700 13px var(--display); }
    .help-chevron { margin-left:auto;color:#9871c4;font-size:16px; }
    .history-panel { margin-top:11px;padding:20px 14px;text-align:center;color:var(--muted);font-size:12px; }
    .history-panel h3 { margin:0 0 8px;color:#f0e8ff;font:700 14px var(--display); }
    .instructions { padding:14px 16px;margin-top:12px;color:#e4dcf3;font-size:12px;line-height:1.65; }
    .instructions ol { margin:8px 0 0;padding-left:18px; }
    .instructions li+li { margin-top:5px; }
    .sheet select { width:100%;height:43px;padding:0 12px;border:1px solid rgba(155,98,231,.55);border-radius:11px;outline:0;background:#090822;color:white; }
    .form-error { min-height:16px;margin:7px 0 0;color:#ff9ab9;font-size:11px; }
    /* Auth styles */
    .auth-card { padding-top:22px; }
    .auth-mark { width:58px;height:58px;margin:0 auto 13px;display:grid;place-items:center;border:1px solid rgba(212,111,255,.8);border-radius:19px;background:radial-gradient(circle,rgba(153,47,255,.55),rgba(40,13,91,.68));color:#f0c2ff;box-shadow:0 0 22px rgba(174,55,255,.36); }
    .auth-mark svg { width:30px;height:30px; }
    .auth-copy { margin:0 auto;max-width:330px;text-align:center; }
    .auth-copy h3 { margin:0;font:700 22px/1.15 var(--display); }
    .auth-copy p { margin:9px 0 0;color:#c8c0df;font-size:12px;line-height:1.55; }
    .auth-field { margin-top:14px; text-align:left; }
    .auth-field label { display:block; margin-bottom:6px; color:#d8cfee; font-size:11px; font-weight:600; }
    .auth-field input { width:100%; height:43px; padding:0 12px; border:1px solid rgba(155,98,231,.55); border-radius:11px; outline:0; background:#090822; color:white; }
    .auth-field input:focus { border-color:#c56bff; box-shadow:0 0 8px rgba(160,60,255,.4); }
    .auth-error { min-height:18px; margin:7px 0 0; color:#ff9ab9; font-size:11px; text-align:left; }
    .auth-actions { display:grid; gap:9px; margin-top:16px; }
    .auth-submit { width:100%; height:46px; border:1px solid #dc72ff; border-radius:13px; background:linear-gradient(100deg,#6314d0,#ad29ed); font-weight:700; box-shadow:0 0 15px rgba(158,45,255,.35); cursor:pointer; }
    .auth-switch { margin:14px 0 0; text-align:center; font-size:12px; color:#b9a9d4; }
    .auth-switch button { background:none; border:0; color:#d08aff; font-weight:700; cursor:pointer; text-decoration:underline; padding:0 3px; font-size:12px; }
    .auth-switch button:hover { color:#e5b6ff; }
    .terms-row { display:flex; align-items:flex-start; gap:8px; margin-top:14px; text-align:left; }
    .terms-row input[type="checkbox"] { width:18px; height:18px; margin-top:1px; accent-color:#a138ff; flex:none; }
    .terms-row label { font-size:11px; color:#cfc5e6; line-height:1.4; }
    .terms-row a { color:#d08aff; text-decoration:underline; }
    /* Google button */
    .google-btn {
      display:flex; align-items:center; justify-content:center; gap:10px;
      width:100%; height:46px; margin-top:14px;
      border:1px solid rgba(255,255,255,.2); border-radius:13px;
      background:#ffffff; color:#3c4043; font-weight:600; font-size:13px;
      cursor:pointer; transition:box-shadow .2s, background .2s;
    }
    .google-btn:hover { box-shadow:0 2px 12px rgba(255,255,255,.15); background:#f5f5f5; }
    .google-btn svg { width:20px; height:20px; flex:none; }
    .divider { display:flex; align-items:center; gap:10px; margin:16px 0 2px; color:#8a7fb0; font-size:10px; text-transform:uppercase; letter-spacing:1px; }
    .divider::before, .divider::after { content:""; flex:1; height:1px; background:rgba(153,84,255,.25); }

    /* REGISTER PAGE: HIDDEN SCROLLBAR */
    #registerView {
      max-height: 70dvh;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-right: 4px;
    }
    #registerView::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .auth-card:has(#registerView:not([hidden])) {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .auth-card:has(#registerView:not([hidden]))::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    /* ============ ADD MONEY DIALOG ============ */
    .addmoney-card {
      text-align: left;
    }
    .addmoney-head {
      text-align: center;
      margin-bottom: 6px;
    }
    .addmoney-icon {
      width: 58px; height: 58px; margin: 0 auto 13px;
      display: grid; place-items: center;
      border: 1px solid rgba(212,111,255,.8);
      border-radius: 19px;
      background: radial-gradient(circle, rgba(153,47,255,.55), rgba(40,13,91,.68));
      color: #f0c2ff;
      box-shadow: 0 0 22px rgba(174,55,255,.36);
    }
    .addmoney-icon svg { width: 30px; height: 30px; }
    .addmoney-head h3 { margin: 0; font: 700 20px/1.15 var(--display); }
    .addmoney-head p { margin: 7px 0 0; color: #c8c0df; font-size: 12px; line-height: 1.5; }
    .amount-wrap {
      position: relative;
      margin-top: 16px;
    }
    .amount-wrap .currency-sign {
      position: absolute;
      left: 14px; top: 50%; transform: translateY(-50%);
      font: 700 18px var(--display);
      color: #d08aff;
      pointer-events: none;
    }
    .amount-wrap input {
      width: 100%; height: 52px;
      padding: 0 14px 0 38px;
      border: 1px solid rgba(155,98,231,.65);
      border-radius: 14px;
      outline: 0;
      background: #090822;
      color: #fff;
      font: 700 19px var(--display);
      letter-spacing: .5px;
    }
    .amount-wrap input:focus {
      border-color: #c56bff;
      box-shadow: 0 0 12px rgba(160,60,255,.5);
    }
    .quick-amounts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .quick-amount {
      flex: 1 1 auto;
      min-width: 64px;
      height: 38px;
      padding: 0 10px;
      border: 1px solid rgba(146,86,231,.5);
      border-radius: 10px;
      background: rgba(20,13,62,.7);
      color: #e3d4ff;
      font: 700 12px var(--display);
      cursor: pointer;
      transition: all .2s ease;
    }
    .quick-amount:hover,
    .quick-amount:focus-visible {
      border-color: #d08aff;
      background: rgba(80,27,148,.5);
      color: #fff;
      outline: none;
      transform: translateY(-1px);
    }
    .quick-amount.selected {
      border-color: #dc72ff;
      background: linear-gradient(100deg, #6314d0, #ad29ed);
      color: #fff;
      box-shadow: 0 0 12px rgba(158,45,255,.5);
    }
    .addmoney-summary {
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(123,68,225,.4);
      border-radius: 12px;
      background: rgba(7,8,37,.6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #c8b7e8;
    }
    .addmoney-summary strong {
      color: #fff;
      font: 700 17px var(--display);
    }
    .pay-btn {
      width: 100%;
      height: 48px;
      margin-top: 16px;
      border: 1px solid #dc72ff;
      border-radius: 13px;
      background: linear-gradient(100deg, #6314d0, #ad29ed);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 0 15px rgba(158,45,255,.45);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .pay-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(158,45,255,.65); }
    .pay-btn:active { transform: translateY(0) scale(.98); }
    .pay-btn svg { width: 18px; height: 18px; }
    .addmoney-cancel {
      width: 100%;
      height: 40px;
      margin-top: 8px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: #c9bddf;
      font-size: 12px;
      cursor: pointer;
    }
    .addmoney-cancel:hover,
    .addmoney-cancel:focus-visible {
      color: #fff;
      background: rgba(108,45,174,.18);
      outline: 0;
    }

    /* The methods are written out as cards rather than hidden in a dropdown, so
       a customer can see which one they are choosing, and whether it is instant,
       before they commit to anything. */
    .addmoney-step-title {
      margin: 0 0 10px;
      font-size: .8rem;
      font-weight: 600;
      color: #d8cfee;
    }

    .pay-method-list {
      display: grid;
      gap: 8px;
      max-height: 42vh;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .pay-method {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 3px 10px;
      width: 100%;
      padding: 11px 13px;
      text-align: left;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: inherit;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }

    .pay-method:hover {
      border-color: rgba(217,107,255,.45);
      background: rgba(217,107,255,.09);
    }

    .pay-method.is-on {
      border-color: #d76bff;
      background: rgba(217,107,255,.16);
      box-shadow: 0 0 0 1px rgba(217,107,255,.4) inset;
    }

    .pay-method-name {
      grid-column: 1;
      font-size: .88rem;
      font-weight: 600;
      color: #f0e7ff;
    }

    .pay-method-tag {
      grid-column: 2;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase;
      color: #a99cc4;
      white-space: nowrap;
    }

    /* The word says which it is as well as colouring it, so the meaning does
       not rest on colour alone. */
    .pay-method.is-instant .pay-method-tag { color: #6ee7a8; }

    .pay-method-limits {
      grid-column: 1 / -1;
      font-size: .71rem;
      color: #9b90b5;
    }
    .amount-error {
      min-height: 16px;
      margin: 7px 0 0;
      color: #ff9ab9;
      font-size: 11px;
    }

    /* ============ PAGE LOADING ANIMATION ============ */
    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 22px;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(123,31,224,.35), transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(60,12,140,.28), transparent 55%),
        rgba(5,4,25,.96);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .32s ease, visibility .32s ease;
    }
    .page-loader.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .loader-ring-wrap {
      position: relative;
      width: 106px;
      height: 106px;
      display: grid;
      place-items: center;
    }
    .loader-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #d96bff;
      border-right-color: #8b2bff;
      box-shadow: 0 0 20px rgba(191,55,255,.65), inset 0 0 22px rgba(139,43,255,.35);
      animation: loader-spin 1s linear infinite;
    }
    .loader-ring.inner {
      inset: 11px;
      border-top-color: #7fb0ff;
      border-right-color: #c03dff;
      border-width: 2.5px;
      animation: loader-spin-rev .85s linear infinite;
      box-shadow: 0 0 16px rgba(120,80,255,.55), inset 0 0 14px rgba(80,40,200,.35);
    }
    .loader-crown {
      position: relative;
      z-index: 2;
      width: 46px;
      height: 42px;
      color: #e9bdff;
      filter: drop-shadow(0 0 10px rgba(200,70,255,.95));
      animation: loader-pulse 1.25s ease-in-out infinite;
    }
    .loader-brand {
      font: 700 17px/1.2 var(--display);
      letter-spacing: .6px;
      color: #f2e6ff;
      text-shadow: 0 0 14px rgba(190,70,255,.6);
      text-align: center;
    }
    .loader-brand span {
      display: block;
      margin-top: 5px;
      color: #bd77ff;
      font-size: 10px;
      letter-spacing: 3.5px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .loader-dots {
      display: flex;
      gap: 7px;
      margin-top: 2px;
    }
    .loader-dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #c05dff;
      box-shadow: 0 0 10px rgba(192,93,255,.9);
      animation: loader-bounce 1.05s ease-in-out infinite;
    }
    .loader-dots i:nth-child(2) { animation-delay: .15s; }
    .loader-dots i:nth-child(3) { animation-delay: .3s; }
    @keyframes loader-spin { to { transform: rotate(360deg); } }
    @keyframes loader-spin-rev { to { transform: rotate(-360deg); } }
    @keyframes loader-pulse {
      0%,100% { transform: scale(1); opacity: .92; }
      50% { transform: scale(1.12); opacity: 1; }
    }
    @keyframes loader-bounce {
      0%,100% { transform: translateY(0); opacity: .5; }
      50% { transform: translateY(-8px); opacity: 1; }
    }

    /* ============ SUPPORT FAB ============ */
    .support-fab {
      position: fixed;
      right: 18px;
      bottom: calc(118px + env(safe-area-inset-bottom));
      z-index: 56;
      width: 56px;
      height: 56px;
      pointer-events: none;
    }
    .support-fab > * { pointer-events: auto; }
    .support-channel-wrap {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 52px;
      height: 52px;
      transform: translate(0, 0) scale(.3) rotate(-45deg);
      opacity: 0;
      pointer-events: none;
      transition:
        transform .55s cubic-bezier(.34, 1.8, .5, 1),
        opacity .35s ease;
      will-change: transform, opacity;
    }
    .support-fab.open .support-channel-wrap { opacity: 1; pointer-events: auto; }
    .support-fab.open .support-channel-wrap.wa {
      transform: translate(0, -78px) scale(1) rotate(0deg);
      transition-delay: .14s;
    }
    .support-fab.open .support-channel-wrap.tg {
      transform: translate(-70px, -46px) scale(1) rotate(0deg);
      transition-delay: .06s;
    }
    .support-toggle {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      color: #ffffff;
      background: radial-gradient(circle at 30% 25%, #4be07a, #25d366 55%, #12a150);
      box-shadow:
        0 6px 20px rgba(18, 140, 70, .55),
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 0 18px rgba(37, 211, 102, .55);
      transition: transform .45s cubic-bezier(.5, 1.7, .4, 1), background .3s ease, box-shadow .3s ease;
      animation: fab-float 3s ease-in-out infinite;
    }
    .support-toggle:hover,
    .support-toggle:focus-visible {
      outline: none;
      box-shadow:
        0 8px 26px rgba(18, 140, 70, .75),
        0 0 0 1px rgba(255,255,255,.18) inset,
        0 0 26px rgba(37, 211, 102, .8);
    }
    .support-toggle:active { transform: scale(.9); }
    .support-toggle::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(37, 211, 102, .55);
      animation: fab-pulse 2.4s ease-out infinite;
      pointer-events: none;
    }
    .support-toggle svg {
      width: 28px; height: 28px;
      transition: transform .45s cubic-bezier(.5, 1.7, .4, 1), opacity .3s ease;
      position: absolute;
    }
    .support-toggle .icon-close { opacity: 0; transform: rotate(-120deg) scale(.3); }
    .support-toggle.open .icon-chat { opacity: 0; transform: rotate(120deg) scale(.3); }
    .support-toggle.open .icon-close { opacity: 1; transform: rotate(0) scale(1); }
    .support-toggle.open {
      background: radial-gradient(circle at 30% 25%, #ff6b8a, #e53a5e 55%, #b3123b);
      box-shadow:
        0 6px 20px rgba(229, 58, 94, .6),
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 0 18px rgba(229, 58, 94, .6);
      animation: none;
      transform: rotate(0) scale(1.04);
    }
    .support-toggle.open::after { border-color: rgba(229, 58, 94, .55); animation: fab-pulse 1.8s ease-out infinite; }
    .support-channel {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      cursor: pointer;
      text-decoration: none;
      color: #fff;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 6px 16px rgba(0,0,0,.45);
      transition: transform .3s cubic-bezier(.34, 1.6, .5, 1), box-shadow .25s ease;
    }
    .support-channel svg { width: 27px; height: 27px; }
    .support-channel.wa {
      background: radial-gradient(circle at 30% 25%, #4be07a, #25d366 60%, #12a150);
      box-shadow: 0 6px 16px rgba(18,140,70,.55), 0 0 16px rgba(37,211,102,.5);
    }
    .support-channel.tg {
      background: radial-gradient(circle at 30% 25%, #59c9ff, #229ed9 60%, #0f6ea6);
      box-shadow: 0 6px 16px rgba(34,158,217,.55), 0 0 16px rgba(34,158,217,.5);
    }
    .support-channel:hover,
    .support-channel:focus-visible {
      outline: none;
      transform: scale(1.15);
      box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 24px rgba(255,255,255,.3);
    }
    .support-channel-wrap::before {
      content: attr(data-label);
      position: absolute;
      right: 62px;
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      padding: 5px 10px;
      border-radius: 8px;
      background: rgba(17, 12, 44, .95);
      border: 1px solid rgba(153,84,255,.4);
      color: #e9dcff;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      box-shadow: 0 4px 14px rgba(0,0,0,.4);
    }
    .support-channel-wrap:hover::before,
    .support-channel-wrap:focus-within::before {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    @keyframes fab-pulse {
      0% { transform: scale(.85); opacity: .9; }
      70% { transform: scale(1.4); opacity: 0; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    @keyframes fab-float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    @media (min-width:600px) {
      .support-fab { right: calc(50% - 240px + 18px); bottom: calc(144px + env(safe-area-inset-bottom)); }
    }
    @media (max-width:370px) {
      .support-fab { width: 50px; height: 50px; right: 14px; }
      .support-toggle { width: 50px; height: 50px; }
      .support-toggle svg { width: 25px; height: 25px; }
      .support-channel-wrap { width: 46px; height: 46px; }
      .support-channel { width: 46px; height: 46px; }
      .support-channel svg { width: 23px; height: 23px; }
      .support-fab.open .support-channel-wrap.wa { transform: translate(0, -70px) scale(1) rotate(0deg); }
      .support-fab.open .support-channel-wrap.tg { transform: translate(-62px, -42px) scale(1) rotate(0deg); }
    }
    @media (prefers-reduced-motion:reduce) {
      .support-toggle, .support-toggle::after, .support-fab { animation: none !important; }
      .support-channel-wrap { transition: none !important; }
    }

    @keyframes page-in { from { opacity:.65;transform:translateY(5px); } to { opacity:1;transform:translateY(0); } }
    .bottom-nav {
      position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,480px);margin:0;
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:7px;padding:9px 23px calc(10px + env(safe-area-inset-bottom));
      background:linear-gradient(180deg,rgba(5,4,25,0),rgba(5,4,25,.92) 20%,#050419 70%);
    }
    .nav-item {
      min-height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
      border:1px solid rgba(132,59,255,.75);border-radius:30px;background:linear-gradient(145deg,rgba(44,16,100,.95),rgba(9,7,42,.98));
      color:#f6edff;box-shadow:0 0 12px rgba(133,30,255,.4),inset 0 0 10px rgba(157,54,255,.15);cursor:pointer;
      font-size:10px;font-weight:700;letter-spacing:.1px;
    }
    .nav-item svg { width:22px;height:22px; }
    .nav-item.active:not(.new-order) { border-color:#e34bff;background:linear-gradient(145deg,rgba(67,23,132,.98),rgba(12,8,48,.98));box-shadow:0 0 15px rgba(186,43,255,.55),inset 0 0 12px rgba(231,120,255,.18); }
    .nav-item.new-order { height:69px;min-height:69px;margin:0 -2px 0;position:relative;z-index:1;border-color:#e34bff;background:radial-gradient(ellipse at 50% 0%,#8b18e4,#4510a3 58%,#10072f);box-shadow:0 0 20px rgba(186,43,255,.85),inset 0 0 12px rgba(231,120,255,.24); }
    .nav-item.new-order:before { content:"";position:absolute;width:36px;height:36px;top:-12px;border-radius:50%;background:#831adb;border:1px solid #ec7bff;box-shadow:0 0 14px #bf37ff;z-index:-1; }
    .nav-item.new-order svg { width:23px;height:23px;transform:translateY(-18px); }
    .nav-item small { font-size:9px;font-weight:500;color:#e7d8f9; }
    .toast {
      position:fixed;z-index:70;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));transform:translate(-50%,12px);
      padding:11px 16px;border:1px solid rgba(191,107,255,.8);border-radius:22px;background:#17103c;
      color:#fff;font-size:12px;box-shadow:0 0 18px rgba(151,50,255,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;
    }
    .toast.show { opacity:1;transform:translate(-50%,0); }
    .modal-backdrop { position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;background:rgba(3,2,18,.75);backdrop-filter:blur(7px); }
    .modal-backdrop.open { display:flex; }
.sheet {
     width:min(100%,480px);padding:19px 20px calc(22px + env(safe-area-inset-bottom));border:1px solid rgba(181,97,255,.75);
     border-bottom:0;border-radius:24px 24px 0 0;background:linear-gradient(160deg,#191046,#080722 65%);
     box-shadow:0 -10px 35px rgba(105,34,207,.28);animation:rise .24s ease-out;
     max-height: 90dvh; overflow-y: auto;
     /* Anything laid over the sheet is measured against the sheet, so a
        celebration covers this box and nothing of the page behind it. */
     position:relative;
   }
    .sheet-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:13px; }
    .sheet h2 { margin:0;font:700 19px var(--display); }
    .close-sheet { width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#100b36;display:grid;place-items:center;cursor:pointer; }
    .close-sheet svg { width:18px;height:18px; }
    .selected-service { display:flex;align-items:center;gap:11px;padding:12px;border:1px solid rgba(132,82,230,.42);border-radius:14px;background:rgba(8,7,34,.75); }
    .selected-service strong { display:block;font-size:13px; }.selected-service span { display:block;margin-top:3px;color:var(--muted);font-size:11px; }
    .sheet label { display:block;margin:14px 0 6px;color:#d8cfee;font-size:11px;font-weight:600; }
    .sheet input { width:100%;height:43px;padding:0 12px;border:1px solid rgba(155,98,231,.55);border-radius:11px;outline:0;background:#090822;color:white; }
    .submit-order { width:100%;height:45px;margin-top:15px;border:1px solid #dc72ff;border-radius:13px;background:linear-gradient(100deg,#6314d0,#ad29ed);font-weight:700;box-shadow:0 0 15px rgba(158,45,255,.35);cursor:pointer; }
    @keyframes breath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }
    @keyframes rise { from { transform:translateY(16px);opacity:.7; } to { transform:translateY(0);opacity:1; } }
    @media (min-width:600px) {
      body { padding:24px 0;background-color:#030314; }
      .app { min-height:calc(100dvh - 48px);padding-bottom:122px;border:1px solid rgba(116,56,201,.3);border-radius:28px;box-shadow:0 0 60px rgba(75,28,156,.22); }
      .bottom-nav { bottom:24px;border-radius:0 0 28px 28px; }
      .modal-backdrop { align-items:center; }
      .sheet { border-bottom:1px solid rgba(181,97,255,.75);border-radius:24px; }
    }
    @media (max-width:370px) {
      .app { padding-left:13px;padding-right:13px; }
      .trust-pill { padding:0 8px;font-size:10px; }
      .brand-name { font-size:21px; }.brand-crown { width:44px; }.brand-logo { max-height:34px; max-width:138px; }
      .service { padding-left:8px;padding-right:7px; }.service-desc { font-size:7px; }
      .stat { padding-left:6px;padding-right:6px; }.stat-label { font-size:8px; }.stat-value { font-size:15px; }.stat-foot { font-size:7px; }
      .welcome-copy { width:64%; }.welcome h1 { font-size:19px; }.welcome h2 { font-size:25px; }
      .bottom-nav { padding-left:14px;padding-right:14px;gap:5px; }
      .nav-item { font-size:8px;padding-left:3px;padding-right:3px; }
    }
    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
    }
/* ============ SERVICES BY CATEGORY ============
   A visitor thinks in two steps: which platform, then which kind. The shelf is
   drawn that way round, so each category reads as a heading with its services
   listed under it rather than as one long mixed grid. */

.service-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-group {
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px;
}

.service-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.service-group-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(217,107,255,.16);
  color: #e9bdff;
}
.service-group-icon svg { width: 18px; height: 18px; }

.service-group-name {
  font: 700 .95rem/1.2 var(--display);
  letter-spacing: .2px;
  color: #f4ecff;
}

.service-group-count {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 600;
  color: #a99cc4;
}

.service-group-list {
  display: grid;
  gap: 8px;
}

.service-group-list .service {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.service-group-list .service:hover {
  border-color: rgba(217,107,255,.45);
  background: rgba(217,107,255,.09);
}
.service-group-list .service:active { transform: scale(.99); }

.service-group-list .service-name {
  grid-column: 1;
  font-size: .88rem;
  font-weight: 600;
  color: #f0e7ff;
}

.service-group-list .service-price {
  grid-column: 2;
  font-size: .84rem;
  font-weight: 700;
  color: #c79bff;
  white-space: nowrap;
}

.service-group-list .service-desc {
  grid-column: 1 / -1;
  font-size: .72rem;
  color: #9b90b5;
}

.service-group-list .service-arrow {
  display: none;
}

/* ============ ORDER FORM ============ */

  /* The services of the chosen category are written out rather than hidden in a
     dropdown: a visitor can read what they are buying before they commit to it,
     and one that carries a description says so in place rather than in a list
     they have to open to understand. */
  .order-cat-name {
    margin: 0 0 10px;
    font: 700 15px/1.3 var(--display);
    color: #f4ecff;
  }

  /* The order is asked for in one fixed order: category, then service, then the
     description it carries, then the link, the quantity and the cost. Each step
     is labelled so it is obvious what is still to be chosen. */
  .order-step-label {
    margin: 15px 0 7px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #a99cc4;
  }

  /* The description a supplier wrote for the chosen service is shown under the
     box it was chosen in, on its own lines, because these are written as short
     labelled lines and run together into one unreadable row. */
  .order-picked-desc {
    white-space: pre-line;
    line-height: 1.55;
  }


  .order-service-detail {
    margin: 12px 0 2px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(217,107,255,.32);
    background: rgba(217,107,255,.08);
  }

  .order-picked {
    margin: 0;
    font-size: .87rem;
    font-weight: 600;
    color: #f0e7ff;
  }

  .order-picked-desc {
    margin: 6px 0 0;
    font-size: .74rem;
    line-height: 1.5;
    color: #a99cc4;
    white-space: pre-line;
  }

  .order-service-detail .form-hint { margin-top: 7px; }

  .order-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid rgba(217,107,255,.3);
    background: rgba(217,107,255,.07);
  }

  .order-total-row span {
    font-size: .78rem;
    font-weight: 600;
    color: #d8cfee;
  }

  .order-total-row strong {
    font: 700 1.05rem/1 var(--display);
    color: #e9bdff;
  }

  .submit-order[disabled] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* The gateway's paying view replaces the amount sheet rather than opening on
     top of it: the amount is already fixed by then, and leaving the old boxes
     underneath would invite a second order to be started by accident. */
  #payView { text-align: center; padding-top: 4px; }

  .pay-amount-line { margin: 0 0 14px; font-size: .95rem; color: var(--muted); }
  .pay-amount-line strong { display: block; margin-top: 2px; font-size: 1.6rem; color: var(--ink); }

  /* The code is drawn by the panel as an svg, so it stays sharp on any screen
     and nothing about the payment is sent anywhere to be drawn. */
  .pay-qr { margin: 0 auto 14px; }
  .pay-qr img {
    width: 240px;
    height: 240px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  .pay-qr-note { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }

  .pay-link-btn {
    display: inline-block;
    margin-bottom: 12px;
    padding: 11px 18px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
  }
  .pay-link-btn:hover { background: #111; color: #fff; text-decoration: none; }

  .pay-ref { margin: 0 0 12px; font-size: .76rem; color: var(--muted); }
  .pay-ref code { background: var(--line); padding: 2px 7px; border-radius: 5px; font-size: .72rem; }

  .pay-state {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--line);
    font-size: .82rem;
    color: var(--muted);
    min-height: 20px;
  }
  .pay-state.is-paid { background: #e7f7ee; color: #12734a; font-weight: 600; }

  /* ============ PAYMENT SUCCESS ============ */

    /* The celebration sits over the paying view rather than in place of it, so
       the order that was being paid for is still there when it is dismissed. */
    .pay-success {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 22px;
      text-align: center;
      border-radius: 24px;
      background: radial-gradient(120% 90% at 50% 0%, #1c1140 0%, #0a0620 62%, #06031a 100%);
      animation: cpSuccessIn .38s cubic-bezier(.2,.9,.25,1) both;
      overflow: hidden;
    }

    @keyframes cpSuccessIn {
      from { opacity: 0; transform: scale(.94); }
      to   { opacity: 1; transform: scale(1); }
    }

    .pay-confetti {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* The ring is drawn around the tick rather than the other way round, so the
       circle completes first and the tick lands inside a finished shape. */
    .pay-success-ring { position: relative; width: 88px; height: 88px; margin-bottom: 12px; }
    .pay-success-ring svg { width: 100%; height: 100%; overflow: visible; }

    .pay-ring-track {
      stroke: rgba(255,255,255,.09);
      stroke-width: 3;
    }

    .pay-ring-draw {
      stroke: #31d68a;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 145;
      stroke-dashoffset: 145;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      filter: drop-shadow(0 0 6px rgba(49,214,138,.55));
      animation: cpRing .62s cubic-bezier(.22,1,.36,1) .1s both;
    }

    @keyframes cpRing { to { stroke-dashoffset: 0; } }

    .pay-tick {
      stroke: #31d68a;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 40;
      stroke-dashoffset: 40;
      filter: drop-shadow(0 0 5px rgba(49,214,138,.5));
      animation: cpTick .34s cubic-bezier(.3,1.4,.5,1) .55s both;
    }

    @keyframes cpTick { to { stroke-dashoffset: 0; } }

    .pay-success-title {
      margin: 0;
      font: 700 1.16rem/1.3 var(--display);
      color: #fff;
      letter-spacing: .2px;
      animation: cpRise .45s ease .62s both;
    }

    .pay-success-amount {
      margin: 7px 0 0;
      font: 700 1.55rem/1.1 var(--display);
      color: #6ee7a8;
      text-shadow: 0 0 18px rgba(110,231,168,.4);
      animation: cpRise .45s ease .72s both;
    }

    .pay-success-note {
      margin: 6px 0 0;
      font-size: .78rem;
      color: #b7aed4;
      animation: cpRise .45s ease .8s both;
    }

    @keyframes cpRise {
      from { opacity: 0; transform: translateY(9px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .pay-success-btn {
      margin-top: 18px;
      padding: 11px 30px;
      border: 1px solid rgba(110,231,168,.4);
      border-radius: 12px;
      background: linear-gradient(100deg, #12794f, #1b9e68);
      color: #fff;
      font-size: .86rem;
      font-weight: 700;
      cursor: pointer;
      animation: cpRise .45s ease .88s both;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .pay-success-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,158,104,.45); }
    .pay-success-btn:active { transform: translateY(0); }

    /* The celebration is drawn once and then stopped, so a sheet left open on a
       phone does not keep a canvas busy in the background. */
    .pay-success.is-done .pay-success-ring,
    .pay-success.is-done .pay-success-title,
    .pay-success.is-done .pay-success-amount,
    .pay-success.is-done .pay-success-note,
    .pay-success.is-done .pay-success-btn { animation: none; opacity: 1; transform: none; }
    .pay-success.is-done .pay-ring-draw { stroke-dashoffset: 0; animation: none; }
    .pay-success.is-done .pay-tick { stroke-dashoffset: 0; animation: none; }

    /* Someone who has asked for less motion still gets the words and the tick;
       only the movement and the falling paper are taken away. */
    @media (prefers-reduced-motion: reduce) {
      .pay-success, .pay-success * { animation: none !important; opacity: 1 !important; transform: none !important; }
      .pay-ring-draw { stroke-dashoffset: 0 !important; }
      .pay-tick { stroke-dashoffset: 0 !important; }
      .pay-confetti { display: none; }
    }