/* Shared customer theme tokens (Home, merchant queue, Akun Saya, customer login).
   These :root values are the classic look; premium skins redefine them on customer
   pages only (see "Premium appearance" below). Other pages keep their existing appearance. */
:root {
    --queue-background: #eaeaea;
    --queue-surface: #eaeaea;
    --queue-text: #202020;
    --queue-success: #247c2b;
    --queue-pending: #805600;
    --queue-current: #2457bd;
    --queue-personal: #a95300;
    --queue-called: #387b0a;
    --queue-border: #a7a7a7;
    --queue-input: #d5d5d5;
    --queue-focus: #227099;
    --queue-disabled-background: #d0d0d0;
    --queue-disabled-text: #626262;
    --queue-error: #a22218;
    --queue-secondary: #d2d2d2;
    --queue-cancel: #c92119;
    --queue-advertisement: #0a7aa4;
    --queue-hold: #a22218;
    --queue-warning: #b32016;
    --queue-refresh: #ffb300;
    --queue-recovering: #737373;
    --queue-page-border: #d3d3d3;
    --queue-dialog-border: #a7a7a7;
    --queue-muted: #555555;
    --queue-primary: #5cb85c;
    --queue-color-scheme: light;
    --queue-divider: #a7a7a7;
    --queue-on-primary: #000000;
    --queue-on-cancel: #ffffff;
    --queue-on-refresh: #000000;
    --queue-accent: #087ea3;
    --queue-accent-hover: #0c92bf;
    --queue-on-accent: #ffffff;
    --queue-icon: #000000;
    --queue-scrollbar: #555;
    --queue-backdrop: rgb(0 0 0 / 70%);
    --queue-shadow: none;
    /* --queue-link is skin-only: classic links inherit (use var(--queue-link, inherit)).
       Page-specific classic values; skins map them to the shared tokens. */
    --queue-home-muted: #555555;
    --queue-home-feedback: #555555;
    --queue-home-distance: #146078;
    --queue-home-focus: #227099;
    --queue-login-field: #fff;
    --queue-login-field-border: #aaa;
    --queue-login-field-text: #202020;
    --queue-login-on-primary: #101010;
    --queue-login-error: #b72017;
    /* Radius scale; data-wl-corners redefines it on customer pages. */
    --queue-radius-pill: 999px;
    --queue-radius-xl: 1.5rem;
    --queue-radius-lg: 1.4rem;
    --queue-radius-md: 1.25rem;
    --queue-radius-sm: .5rem;
}

/* Klasik (no data-wl-skin), light mode, customer pages only: a near-white grey canvas
   with white containers. Dark mode, the other skins, the merchant login, the Merchant
   PWA and the CMS keep their values. */
:root:not([data-wl-skin]):not([data-queue-theme="dark"]):has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #f7f7f7;
    --queue-surface: #ffffff;
    --queue-input: #e5e5e5;
    --queue-secondary: var(--queue-input);
    --queue-neutral-control: var(--queue-input);
}
:root:not([data-wl-skin]):not([data-queue-theme="dark"]) .queue-page { --qp-card: var(--queue-surface); }
/* Classic Light fields and neutral controls share the same fill. Action colours
   and other skins are unchanged; login fields stay white. */
:root:not([data-wl-skin]):not([data-queue-theme="dark"])
    :is(.queue-page, .home-page, .customer-page, .customer-login-page)
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .phone-country-button) {
    --queue-disabled-background: #dedede;
}

:root[data-queue-theme="dark"] {
    --queue-background: #1d1d1d;
    --queue-surface: #1d1d1d;
    --queue-text: #ffffff;
    --queue-success: #5cb85c;
    --queue-pending: #e7b566;
    --queue-current: #4f7df3;
    --queue-personal: #ff9800;
    --queue-called: #66c51c;
    --queue-border: #444444;
    --queue-input: #666666;
    --queue-focus: #4a9ac2;
    --queue-disabled-background: #555555;
    --queue-disabled-text: #cccccc;
    --queue-error: #ffb4ab;
    --queue-secondary: #3d3d3d;
    --queue-hold: #df5555;
    --queue-warning: #ff5b4f;
    --queue-page-border: #2d2d2d;
    --queue-dialog-border: #555555;
    --queue-muted: #bbbbbb;
    --queue-color-scheme: dark;
    --queue-divider: #444444;
    --queue-icon: #ffffff;
    --queue-home-muted: #dddddd;
    --queue-home-feedback: #d7d7d7;
    --queue-home-distance: #b5e5f3;
    --queue-home-focus: #8cdaef;
}

body:has(.queue-page, .home-page, .merchant-login-page, .customer-page, .customer-login-page) {
    background: var(--queue-background);
}

/* Merchant PWA pages use their own scoped tokens; match the page background. */
body:has(.merchant-page, .merchant-staff-page) { background: #f3f5f9; }
/* The Merchant PWA is an app shell (header, scrolling content, bottom navigation), so the document
   itself must never scroll. .waitless-app's min-height: 100vh is the large viewport on iOS Safari,
   taller than the visible area while the toolbar shows: the page then scrolled as a whole and took
   the bottom navigation with it. Only .merchant-content scrolls. */
:is(html, body):has(.merchant-page) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body:has(.merchant-page) .waitless-app { min-height: 0; }
:root[data-queue-theme="dark"] body:has(.merchant-page, .merchant-staff-page) { background: #0f131a; }

/* =========================================================
   Premium appearance (Services/CustomerAppearance.cs)
   <html data-wl-skin / data-wl-font / data-wl-corners>, rendered for subscribed
   customers. Every rule requires a customer page root, so the merchant login,
   Merchant PWA and CMS keep their look even when the attributes are present.
   Skins only redefine tokens; light/dark (data-queue-theme) combines with each.
   ========================================================= */

/* Page-specific tokens follow the shared ones; the canvas matches the page. Every premium
   skin carries data-wl-skin (Klasik, the default, renders no attribute), so shared rules
   select [data-wl-skin] and a new skin only needs its two token blocks below. */
:root[data-wl-skin]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-home-muted: var(--queue-muted);
    --queue-home-feedback: var(--queue-muted);
    --queue-home-distance: var(--queue-link);
    --queue-home-focus: var(--queue-focus);
    --queue-login-field: var(--queue-surface);
    --queue-login-field-border: var(--queue-border);
    --queue-login-field-text: var(--queue-text);
    --queue-login-on-primary: var(--queue-on-primary);
    --queue-login-error: var(--queue-error);
    background: var(--queue-background);
}

:root[data-wl-skin="ocean"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #e8f1f8; --queue-surface: #f7fbfe; --queue-text: #0f2738; --queue-muted: #3f5b70;
    --queue-border: #6a8aa3; --queue-divider: #bdd1e0; --queue-input: #d3e3f0; --queue-focus: #0a63a0;
    --queue-primary: #1576a6; --queue-on-primary: #ffffff; --queue-secondary: #cfe0ee;
    --queue-accent: #0e7c86; --queue-accent-hover: #0b8f9a; --queue-on-accent: #ffffff; --queue-link: #0b5f8f; --queue-icon: #0f2738;
    --queue-success: #1b7a3c; --queue-pending: #835a00; --queue-current: #1f56b8; --queue-personal: #a65000; --queue-called: #2e7a0c;
    --queue-error: #b3261e; --queue-hold: #b3261e; --queue-warning: #b3261e;
    --queue-cancel: #c0352b; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #5d7286;
    --queue-advertisement: #0d6f8f; --queue-disabled-background: #cddbe6; --queue-disabled-text: #546b7d;
    --queue-page-border: #c9dbe8; --queue-dialog-border: #a9c2d5; --queue-scrollbar: #6a8aa3;
    --queue-backdrop: rgb(8 27 41 / 62%); --queue-shadow: 0 1px 2px rgb(15 39 56 / 8%), 0 6px 20px rgb(15 39 56 / 7%);
}
:root[data-wl-skin="ocean"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #0c1b26; --queue-surface: #132a3c; --queue-text: #e6f2fa; --queue-muted: #a3bfd3;
    --queue-border: #5f84a0; --queue-divider: #284559; --queue-input: #1e3a4f; --queue-focus: #5cc8ee;
    --queue-primary: #4cc3e8; --queue-on-primary: #04202e; --queue-secondary: #22425a;
    --queue-accent: #127f8a; --queue-accent-hover: #1597a3; --queue-on-accent: #ffffff; --queue-link: #7fd3f0; --queue-icon: #e6f2fa;
    --queue-success: #5cc97a; --queue-pending: #e8b866; --queue-current: #7aa5ff; --queue-personal: #ffa040; --queue-called: #74d13a;
    --queue-error: #ffb4ab; --queue-hold: #ff8a80; --queue-warning: #ff7a6e;
    --queue-cancel: #c63a30; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #5d7286;
    --queue-advertisement: #0f6f8f; --queue-disabled-background: #2a4255; --queue-disabled-text: #9fb5c6;
    --queue-page-border: #1a3142; --queue-dialog-border: #3a5a73; --queue-scrollbar: #5f84a0;
    --queue-backdrop: rgb(2 10 16 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="forest"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #edf3ea; --queue-surface: #f8fbf6; --queue-text: #1b2e1d; --queue-muted: #435a45;
    --queue-border: #6c8a6e; --queue-divider: #c3d5bc; --queue-input: #d9e6d3; --queue-focus: #2b6f45;
    --queue-primary: #2f7d3d; --queue-on-primary: #ffffff; --queue-secondary: #d3e2cc;
    --queue-accent: #2e7d62; --queue-accent-hover: #36906f; --queue-on-accent: #ffffff; --queue-link: #2a6a35; --queue-icon: #1b2e1d;
    --queue-success: #237a32; --queue-pending: #7d5a00; --queue-current: #2457ad; --queue-personal: #a24f00; --queue-called: #2f7a0c;
    --queue-error: #b02a1e; --queue-hold: #b02a1e; --queue-warning: #b02a1e;
    --queue-cancel: #bf3a2c; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #66786a;
    --queue-advertisement: #2e6f52; --queue-disabled-background: #d2ddcd; --queue-disabled-text: #59705b;
    --queue-page-border: #cfdcc9; --queue-dialog-border: #afc4a7; --queue-scrollbar: #6c8a6e;
    --queue-backdrop: rgb(17 30 19 / 62%); --queue-shadow: 0 1px 2px rgb(27 46 29 / 8%), 0 6px 20px rgb(27 46 29 / 7%);
}
:root[data-wl-skin="forest"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #111c13; --queue-surface: #18271b; --queue-text: #e8f3e6; --queue-muted: #a9c4a8;
    --queue-border: #5f8a63; --queue-divider: #2a3f2d; --queue-input: #26402a; --queue-focus: #8fd99a;
    --queue-primary: #7ccf86; --queue-on-primary: #0b1f0e; --queue-secondary: #233826;
    --queue-accent: #2f7d62; --queue-accent-hover: #389274; --queue-on-accent: #ffffff; --queue-link: #9fe0a8; --queue-icon: #e8f3e6;
    --queue-success: #7ccf86; --queue-pending: #e5bd6a; --queue-current: #86a8ff; --queue-personal: #ffa04a; --queue-called: #8fd94f;
    --queue-error: #ffb4ab; --queue-hold: #ff8f84; --queue-warning: #ff7f72;
    --queue-cancel: #c4402f; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #5f6f62;
    --queue-advertisement: #2c6e52; --queue-disabled-background: #2a3a2c; --queue-disabled-text: #a3b5a2;
    --queue-page-border: #1d2c1f; --queue-dialog-border: #3d5a41; --queue-scrollbar: #5f8a63;
    --queue-backdrop: rgb(4 10 5 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="sunset"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #fbf0e6; --queue-surface: #fffaf5; --queue-text: #3a2414; --queue-muted: #6b4a33;
    --queue-border: #a07556; --queue-divider: #e8cdb4; --queue-input: #f2dcc7; --queue-focus: #8a4a1f;
    --queue-primary: #b5531d; --queue-on-primary: #ffffff; --queue-secondary: #efd8c2;
    --queue-accent: #8f4a2a; --queue-accent-hover: #a3582f; --queue-on-accent: #ffffff; --queue-link: #9a4512; --queue-icon: #3a2414;
    --queue-success: #2f7a2c; --queue-pending: #7a5200; --queue-current: #2a55b0; --queue-personal: #a34700; --queue-called: #3a7a0e;
    --queue-error: #a8242f; --queue-hold: #a8242f; --queue-warning: #a8242f;
    --queue-cancel: #a8242f; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #7a6a5e;
    --queue-advertisement: #9b4f2b; --queue-disabled-background: #ecdccd; --queue-disabled-text: #73594a;
    --queue-page-border: #ecd9c6; --queue-dialog-border: #d2b296; --queue-scrollbar: #a07556;
    --queue-backdrop: rgb(45 24 10 / 60%); --queue-shadow: 0 1px 2px rgb(58 36 20 / 8%), 0 6px 20px rgb(58 36 20 / 7%);
}
:root[data-wl-skin="sunset"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #1f1510; --queue-surface: #2a1d16; --queue-text: #fbeee2; --queue-muted: #d2b8a2;
    --queue-border: #9a7457; --queue-divider: #3d2c21; --queue-input: #43301f; --queue-focus: #f6b27e;
    --queue-primary: #f2a066; --queue-on-primary: #2a1306; --queue-secondary: #3a2a1f;
    --queue-accent: #9a4f2c; --queue-accent-hover: #ad5c35; --queue-on-accent: #ffffff; --queue-link: #f6b27e; --queue-icon: #fbeee2;
    --queue-success: #8fd17a; --queue-pending: #f0c070; --queue-current: #8eaaff; --queue-personal: #ffab5c; --queue-called: #9bd65a;
    --queue-error: #ffb4ab; --queue-hold: #ff8f84; --queue-warning: #ff8073;
    --queue-cancel: #b8303a; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #6e6058;
    --queue-advertisement: #8f4a2a; --queue-disabled-background: #3a2d24; --queue-disabled-text: #bba796;
    --queue-page-border: #2e211a; --queue-dialog-border: #5a4232; --queue-scrollbar: #9a7457;
    --queue-backdrop: rgb(10 5 2 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="lavender"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #f1edf8; --queue-surface: #fbf9fe; --queue-text: #2a1f3d; --queue-muted: #584a70;
    --queue-border: #7f6ea0; --queue-divider: #d3c8e6; --queue-input: #e0d7f0; --queue-focus: #5b36b0;
    --queue-primary: #6c4cb8; --queue-on-primary: #ffffff; --queue-secondary: #dcd2ee;
    --queue-accent: #8a4f8f; --queue-accent-hover: #9b5aa0; --queue-on-accent: #ffffff; --queue-link: #5b3ab0; --queue-icon: #2a1f3d;
    --queue-success: #237a3a; --queue-pending: #7d5600; --queue-current: #2f55b8; --queue-personal: #a14e00; --queue-called: #3a7a12;
    --queue-error: #b42330; --queue-hold: #b42330; --queue-warning: #b42330;
    --queue-cancel: #bd2f3b; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #6f6680;
    --queue-advertisement: #6a4fa8; --queue-disabled-background: #ddd5ea; --queue-disabled-text: #61567a;
    --queue-page-border: #ded6ec; --queue-dialog-border: #b9abd6; --queue-scrollbar: #7f6ea0;
    --queue-backdrop: rgb(30 20 50 / 60%); --queue-shadow: 0 1px 2px rgb(42 31 61 / 8%), 0 6px 20px rgb(42 31 61 / 7%);
}
:root[data-wl-skin="lavender"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #17121f; --queue-surface: #201a2c; --queue-text: #f1ecfa; --queue-muted: #c2b5da;
    --queue-border: #7d6ca0; --queue-divider: #322945; --queue-input: #352a49; --queue-focus: #c9b2ff;
    --queue-primary: #b79cf2; --queue-on-primary: #1d1036; --queue-secondary: #2e2540;
    --queue-accent: #7f4a86; --queue-accent-hover: #92569a; --queue-on-accent: #ffffff; --queue-link: #cdb8ff; --queue-icon: #f1ecfa;
    --queue-success: #7fd39a; --queue-pending: #ecc070; --queue-current: #93acff; --queue-personal: #ffa65a; --queue-called: #9bd960;
    --queue-error: #ffb4b8; --queue-hold: #ff8f99; --queue-warning: #ff7f8a;
    --queue-cancel: #b8323e; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #665e78;
    --queue-advertisement: #6a4fa8; --queue-disabled-background: #2f2840; --queue-disabled-text: #b6aacb;
    --queue-page-border: #251e33; --queue-dialog-border: #4b3d66; --queue-scrollbar: #7d6ca0;
    --queue-backdrop: rgb(6 3 12 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="sakura"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #fbeef3; --queue-surface: #fff8fb; --queue-text: #3a1528; --queue-muted: #6e4057;
    --queue-border: #a86a87; --queue-divider: #efc9d9; --queue-input: #f6dce7; --queue-focus: #b0245f;
    --queue-primary: #c2185b; --queue-on-primary: #ffffff; --queue-secondary: #f3d6e2;
    --queue-accent: #a3326a; --queue-accent-hover: #8c2459; --queue-on-accent: #ffffff; --queue-link: #a3164f; --queue-icon: #3a1528;
    --queue-success: #237a3a; --queue-pending: #7d5600; --queue-current: #2f55b8; --queue-personal: #a14e00; --queue-called: #3a7a12;
    --queue-error: #b3261e; --queue-hold: #b3261e; --queue-warning: #b3261e;
    --queue-cancel: #b3261e; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #7a5c6a;
    --queue-advertisement: #9c2f66; --queue-disabled-background: #efdbe4; --queue-disabled-text: #6b5260;
    --queue-page-border: #f0d6e1; --queue-dialog-border: #d9a9bf; --queue-scrollbar: #a86a87;
    --queue-backdrop: rgb(48 14 32 / 60%); --queue-shadow: 0 1px 2px rgb(58 21 40 / 8%), 0 6px 20px rgb(58 21 40 / 7%);
}
:root[data-wl-skin="sakura"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #1d1118; --queue-surface: #2a1823; --queue-text: #fbeaf2; --queue-muted: #d8b3c6;
    --queue-border: #a06b86; --queue-divider: #3f2634; --queue-input: #3e2333; --queue-focus: #ff9cc8;
    --queue-primary: #f48fb1; --queue-on-primary: #3a0a20; --queue-secondary: #382030;
    --queue-accent: #f2a7c8; --queue-accent-hover: #f8c4dc; --queue-on-accent: #2a0c1c; --queue-link: #ffadd2; --queue-icon: #fbeaf2;
    --queue-success: #7fd39a; --queue-pending: #ecc070; --queue-current: #93acff; --queue-personal: #ffa65a; --queue-called: #9bd960;
    --queue-error: #ffb4ab; --queue-hold: #ff8a80; --queue-warning: #ff7a6e;
    --queue-cancel: #ff8f86; --queue-on-cancel: #2a0a0a; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #c4a8b6;
    --queue-advertisement: #e89ac0; --queue-disabled-background: #3a2a33; --queue-disabled-text: #c9b3bf;
    --queue-page-border: #2c1a24; --queue-dialog-border: #5e3a4e; --queue-scrollbar: #a06b86;
    --queue-backdrop: rgb(10 3 7 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="coffee"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #f2ebe4; --queue-surface: #fbf8f5; --queue-text: #2b1d14; --queue-muted: #5c4839;
    --queue-border: #8a7262; --queue-divider: #dacbbd; --queue-input: #e6d9cc; --queue-focus: #6b4226;
    --queue-primary: #6f4a2f; --queue-on-primary: #ffffff; --queue-secondary: #e2d5c7;
    --queue-accent: #7a5236; --queue-accent-hover: #6a462d; --queue-on-accent: #ffffff; --queue-link: #74462a; --queue-icon: #2b1d14;
    --queue-success: #2b7432; --queue-pending: #765000; --queue-current: #2a55b0; --queue-personal: #9c4500; --queue-called: #367310;
    --queue-error: #a8242f; --queue-hold: #a8242f; --queue-warning: #a8242f;
    --queue-cancel: #a8242f; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #6b5c51;
    --queue-advertisement: #6b4a33; --queue-disabled-background: #e2d7cc; --queue-disabled-text: #66544a;
    --queue-page-border: #e2d6ca; --queue-dialog-border: #c4b09f; --queue-scrollbar: #8a7262;
    --queue-backdrop: rgb(34 23 15 / 62%); --queue-shadow: 0 1px 2px rgb(43 29 20 / 8%), 0 6px 20px rgb(43 29 20 / 7%);
}
:root[data-wl-skin="coffee"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #1a1411; --queue-surface: #241c17; --queue-text: #f4ebe2; --queue-muted: #cbb8a8;
    --queue-border: #8c7462; --queue-divider: #372b23; --queue-input: #3a2e25; --queue-focus: #e2bd94;
    --queue-primary: #d2a478; --queue-on-primary: #23160c; --queue-secondary: #33281f;
    --queue-accent: #c69e7a; --queue-accent-hover: #d8b391; --queue-on-accent: #1e140c; --queue-link: #e6c29c; --queue-icon: #f4ebe2;
    --queue-success: #8fd17a; --queue-pending: #ecc06e; --queue-current: #8eaaff; --queue-personal: #ffab5c; --queue-called: #9bd65a;
    --queue-error: #ffb4ab; --queue-hold: #ff9a8f; --queue-warning: #ff8a7e;
    --queue-cancel: #f08c80; --queue-on-cancel: #2a0e09; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #ab9a8d;
    --queue-advertisement: #c29a75; --queue-disabled-background: #352b24; --queue-disabled-text: #b6a596;
    --queue-page-border: #271e19; --queue-dialog-border: #523f33; --queue-scrollbar: #8c7462;
    --queue-backdrop: rgb(8 5 3 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="grayscale"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #efefef; --queue-surface: #fafafa; --queue-text: #1f1f1f; --queue-muted: #4f4f4f;
    --queue-border: #7a7a7a; --queue-divider: #cfcfcf; --queue-input: #e1e1e1; --queue-focus: #333333;
    --queue-primary: #3d3d3d; --queue-on-primary: #ffffff; --queue-secondary: #dcdcdc;
    --queue-accent: #4f4f4f; --queue-accent-hover: #626262; --queue-on-accent: #ffffff; --queue-link: #363636; --queue-icon: #1f1f1f;
    --queue-success: #2a7034; --queue-pending: #775400; --queue-current: #2d55a6; --queue-personal: #9a4d00; --queue-called: #3a700f;
    --queue-error: #a8271f; --queue-hold: #a8271f; --queue-warning: #a8271f;
    --queue-cancel: #b3352b; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #616161;
    --queue-advertisement: #575757; --queue-disabled-background: #d8d8d8; --queue-disabled-text: #555555;
    --queue-page-border: #d9d9d9; --queue-dialog-border: #b3b3b3; --queue-scrollbar: #7a7a7a;
    --queue-backdrop: rgb(20 20 20 / 62%); --queue-shadow: 0 1px 2px rgb(31 31 31 / 8%), 0 6px 20px rgb(31 31 31 / 7%);
}
:root[data-wl-skin="grayscale"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #161616; --queue-surface: #212121; --queue-text: #ededed; --queue-muted: #b3b3b3;
    --queue-border: #767676; --queue-divider: #333333; --queue-input: #2c2c2c; --queue-focus: #d6d6d6;
    --queue-primary: #d6d6d6; --queue-on-primary: #141414; --queue-secondary: #2a2a2a;
    --queue-accent: #a6a6a6; --queue-accent-hover: #bcbcbc; --queue-on-accent: #111111; --queue-link: #d0d0d0; --queue-icon: #ededed;
    --queue-success: #6fc77e; --queue-pending: #e3b866; --queue-current: #8aa8f5; --queue-personal: #f5a25a; --queue-called: #8ccf55;
    --queue-error: #ffb4ab; --queue-hold: #ff8f84; --queue-warning: #ff8073;
    --queue-cancel: #f28b82; --queue-on-cancel: #111111; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #8f8f8f;
    --queue-advertisement: #9a9a9a; --queue-disabled-background: #333333; --queue-disabled-text: #b3b3b3;
    --queue-page-border: #262626; --queue-dialog-border: #474747; --queue-scrollbar: #767676;
    --queue-backdrop: rgb(4 4 4 / 72%); --queue-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%); --queue-color-scheme: dark;
}

:root[data-wl-skin="contrast"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #ffffff; --queue-surface: #ffffff; --queue-text: #000000; --queue-muted: #333333;
    --queue-border: #000000; --queue-divider: #595959; --queue-input: #ffffff; --queue-focus: #0b3ea8;
    --queue-primary: #075c1a; --queue-on-primary: #ffffff; --queue-secondary: #e6e6e6;
    --queue-accent: #00507a; --queue-accent-hover: #003e60; --queue-on-accent: #ffffff; --queue-link: #0040a0; --queue-icon: #000000;
    --queue-success: #0b5e1c; --queue-pending: #5c3d00; --queue-current: #0d3fa6; --queue-personal: #7a3a00; --queue-called: #2a5a00;
    --queue-error: #8e0b0b; --queue-hold: #8e0b0b; --queue-warning: #8e0b0b;
    --queue-cancel: #8e0b0b; --queue-on-cancel: #ffffff; --queue-refresh: #ffb300; --queue-on-refresh: #000000; --queue-recovering: #4d4d4d;
    --queue-advertisement: #00507a; --queue-disabled-background: #e0e0e0; --queue-disabled-text: #4d4d4d;
    --queue-page-border: #000000; --queue-dialog-border: #000000; --queue-scrollbar: #000000;
    --queue-backdrop: rgb(0 0 0 / 80%); --queue-shadow: none;
}
:root[data-wl-skin="contrast"][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-background: #000000; --queue-surface: #000000; --queue-text: #ffffff; --queue-muted: #e0e0e0;
    --queue-border: #ffffff; --queue-divider: #a6a6a6; --queue-input: #000000; --queue-focus: #ffd60a;
    --queue-primary: #7dff8f; --queue-on-primary: #000000; --queue-secondary: #262626;
    --queue-accent: #7fd7ff; --queue-accent-hover: #b3e8ff; --queue-on-accent: #000000; --queue-link: #8cc8ff; --queue-icon: #ffffff;
    --queue-success: #7dff8f; --queue-pending: #ffd27a; --queue-current: #9cc2ff; --queue-personal: #ffb35c; --queue-called: #b6ff6b;
    --queue-error: #ffb4ab; --queue-hold: #ffa3a3; --queue-warning: #ff9e9e;
    --queue-cancel: #ff9a91; --queue-on-cancel: #000000; --queue-refresh: #ffd60a; --queue-on-refresh: #000000; --queue-recovering: #bdbdbd;
    --queue-advertisement: #7fd7ff; --queue-disabled-background: #333333; --queue-disabled-text: #d6d6d6;
    --queue-page-border: #ffffff; --queue-dialog-border: #ffffff; --queue-scrollbar: #ffffff;
    --queue-backdrop: rgb(0 0 0 / 85%); --queue-shadow: none; --queue-color-scheme: dark;
}

/* Login form controls and the Blazor reconnect dialog follow the skin too. */
:root[data-wl-skin] .customer-login-page { color-scheme: var(--queue-color-scheme); }
:root[data-wl-skin]:has(.queue-page, .home-page, .customer-page, .customer-login-page) #components-reconnect-modal { border: 1px solid var(--queue-dialog-border); background-color: var(--queue-surface); color: var(--queue-text); }
:root[data-wl-skin]:has(.queue-page, .home-page, .customer-page, .customer-login-page) #components-reconnect-modal button { background-color: var(--queue-primary); color: var(--queue-on-primary); }

/* Text scale: customer pages size text in rem. */
:root[data-wl-font="s"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { font-size: 93.75%; }
:root[data-wl-font="l"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { font-size: 115%; }
:root[data-wl-font="xl"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { font-size: 125%; }

/* Corners: the radius scale of the customer pages. */
:root[data-wl-corners="soft"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-radius-pill: 1rem;
    --queue-radius-xl: 1rem;
    --queue-radius-lg: .9rem;
    --queue-radius-md: .7rem;
    --queue-radius-sm: .4rem;
}

:root[data-wl-corners="square"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) {
    --queue-radius-pill: .35rem;
    --queue-radius-xl: .35rem;
    --queue-radius-lg: .3rem;
    --queue-radius-md: .25rem;
    --queue-radius-sm: .2rem;
}

/* Background pattern (data-wl-pattern; absent = Polos): one fixed layer behind every customer page, drawn
   with an SVG mask in a colour derived from the skin (primary + text), so it follows every
   skin and light/dark. Low opacity keeps all text pairs readable (checked per skin x mode).
   The tiles are also used by the Tampilan previews. */
:root {
    --wl-pattern-ink: color-mix(in srgb, var(--queue-primary) 55%, var(--queue-text));
    --wl-pattern-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0-100C42-62 46 38 0 100C-46 38-42-62 0-100Z' fill-opacity='.45'/%3E%3Cpath d='M0-96V96M0-72l28-20M0-72l-28-20M0-48l33-22M0-48l-33-22M0-24l35-22M0-24l-35-22M0 0l35-20M0 0l-35-20M0 24l32-18M0 24l-32-18M0 48l25-14M0 48l-25-14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/defs%3E%3Cg id='t'%3E%3Cuse href='%23l' transform='translate(78 92) rotate(-38) scale(.92)'/%3E%3Cuse href='%23l' transform='translate(262 70) rotate(42) scale(.78)'/%3E%3Cuse href='%23l' transform='translate(196 238) rotate(-72) scale(1.05)'/%3E%3Cuse href='%23l' transform='translate(58 300) rotate(24) scale(.7)'/%3E%3Cuse href='%23l' transform='translate(330 300) rotate(-18) scale(.62)'/%3E%3C/g%3E%3Cuse href='%23t' x='-360' y='-360'/%3E%3Cuse href='%23t' x='-360' y='0'/%3E%3Cuse href='%23t' x='-360' y='360'/%3E%3Cuse href='%23t' x='0' y='-360'/%3E%3Cuse href='%23t' x='0' y='360'/%3E%3Cuse href='%23t' x='360' y='-360'/%3E%3Cuse href='%23t' x='360' y='0'/%3E%3Cuse href='%23t' x='360' y='360'/%3E%3C/svg%3E");
    --wl-pattern-leaves-size: 360px 360px;
    --wl-pattern-leaves-preview-size: 180px 180px;
    --wl-pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='1.6'/%3E%3Ccircle cx='18' cy='18' r='1.6'/%3E%3C/svg%3E");
    --wl-pattern-dots-size: 24px 24px;
    --wl-pattern-dots-preview-size: 16px 16px;
    --wl-pattern-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cpath d='M-4 52L52-4' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-4 28L28-4M20 52L52 20' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-dasharray='1.5 4.5'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-48' y='-48'/%3E%3Cuse href='%23t' x='-48' y='0'/%3E%3Cuse href='%23t' x='-48' y='48'/%3E%3Cuse href='%23t' x='0' y='-48'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='48'/%3E%3Cuse href='%23t' x='48' y='-48'/%3E%3Cuse href='%23t' x='48' y='0'/%3E%3Cuse href='%23t' x='48' y='48'/%3E%3C/svg%3E");
    --wl-pattern-lines-size: 48px 48px;
    --wl-pattern-lines-preview-size: 28.8px 28.8px;
    --wl-pattern-scrapbook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(38 42) rotate(-9)'%3E%3Crect x='-16' y='-19' width='32' height='38' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='-12' y='-15' width='24' height='22' opacity='.3'/%3E%3C/g%3E%3Cg transform='translate(40 19) rotate(-9)'%3E%3Crect x='-15' y='-5' width='30' height='10' opacity='.45'/%3E%3Cpath d='M-15-5l-2 2.5 2 2.5-2 2.5 2 2.5M15-5l2 2.5-2 2.5 2 2.5-2 2.5' fill='none' stroke='%23000' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3Cg transform='translate(118 30) rotate(25)'%3E%3Cpath d='M-4 12V-8A4 4 0 0 1 4-8V9A2.6 2.6 0 0 1-1.2 9V-6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(112 84) rotate(8)'%3E%3Crect x='-13' y='-10' width='26' height='20' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2 1.6'/%3E%3Cg transform='translate(0 0)'%3E%3Cpolygon points='0,-5 1.32,-1.82 4.76,-1.55 2.14,0.7 2.94,4.05 0,2.25 -2.94,4.05 -2.14,0.7 -4.76,-1.55 -1.32,-1.82'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(66 92) rotate(12) scale(0.8)' opacity='0.7'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3Cg transform='translate(30 112)'%3E%3Ccircle r='9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle r='5' opacity='.35'/%3E%3C/g%3E%3Cg transform='translate(128 132) rotate(32)'%3E%3Crect x='-14' y='-4' width='28' height='8' opacity='.35'/%3E%3C/g%3E%3Cg transform='translate(82 54)'%3E%3Cpath d='M0 -4.4Q0.9680000000000001 -0.9680000000000001 4.4 0Q0.9680000000000001 0.9680000000000001 0 4.4Q-0.9680000000000001 0.9680000000000001 -4.4 0Q-0.9680000000000001 -0.9680000000000001 0 -4.4Z'/%3E%3C/g%3E%3Cg transform='translate(66 140)'%3E%3Cpath d='M-8-4L-4 0M-4-4L-8 0M0-4L4 0M4-4L0 0M8-4L12 0M12-4L8 0' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(150 60) rotate(10)'%3E%3Cpolygon points='0,-3 0.79,-1.09 2.85,-0.93 1.28,0.42 1.76,2.43 0,1.35 -1.76,2.43 -1.28,0.42 -2.85,-0.93 -0.79,-1.09'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-160' y='-160'/%3E%3Cuse href='%23t' x='-160' y='0'/%3E%3Cuse href='%23t' x='-160' y='160'/%3E%3Cuse href='%23t' x='0' y='-160'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='160'/%3E%3Cuse href='%23t' x='160' y='-160'/%3E%3Cuse href='%23t' x='160' y='0'/%3E%3Cuse href='%23t' x='160' y='160'/%3E%3C/svg%3E");
    --wl-pattern-scrapbook-size: 160px 160px;
    --wl-pattern-scrapbook-preview-size: 72px 72px;
    --wl-pattern-marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cpath d='M-10 40C40 20 70 70 120 50S190 20 230 60' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M120 50C130 90 110 120 150 160S200 190 210 230' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M-10 140C30 120 60 170 100 150S150 110 160 120' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M60 60C70 80 60 100 80 120' fill='none' stroke='%23000' stroke-width='0.7' stroke-linecap='round' opacity='0.45'/%3E%3Cpath d='M30 190C60 170 90 200 130 180' fill='none' stroke='%23000' stroke-width='0.9' stroke-linecap='round' opacity='0.45'/%3E%3Cpath d='M150 120C170 100 180 80 210 90' fill='none' stroke='%23000' stroke-width='0.8' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M90 0C100 20 95 30 110 44' fill='none' stroke='%23000' stroke-width='0.7' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M20 100C50 90 80 110 110 95C80 115 50 100 20 100Z' opacity='.25'/%3E%3Cpath d='M140 30C160 26 180 36 200 30C180 42 160 34 140 30Z' opacity='.25'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-220' y='-220'/%3E%3Cuse href='%23t' x='-220' y='0'/%3E%3Cuse href='%23t' x='-220' y='220'/%3E%3Cuse href='%23t' x='0' y='-220'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='220'/%3E%3Cuse href='%23t' x='220' y='-220'/%3E%3Cuse href='%23t' x='220' y='0'/%3E%3Cuse href='%23t' x='220' y='220'/%3E%3C/svg%3E");
    --wl-pattern-marble-size: 220px 220px;
    --wl-pattern-marble-preview-size: 99px 99px;
    --wl-pattern-flowers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(26 28) rotate(10)'%3E%3Cg opacity='.5'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-7.44 -4.56 -7.92 -11.4 -2.88 -13.44L0 -11.04L2.88 -13.44C7.92 -11.4 7.44 -4.56 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(72)'%3E%3Cpath d='M0 0C-7.44 -4.56 -7.92 -11.4 -2.88 -13.44L0 -11.04L2.88 -13.44C7.92 -11.4 7.44 -4.56 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(144)'%3E%3Cpath d='M0 0C-7.44 -4.56 -7.92 -11.4 -2.88 -13.44L0 -11.04L2.88 -13.44C7.92 -11.4 7.44 -4.56 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(216)'%3E%3Cpath d='M0 0C-7.44 -4.56 -7.92 -11.4 -2.88 -13.44L0 -11.04L2.88 -13.44C7.92 -11.4 7.44 -4.56 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(288)'%3E%3Cpath d='M0 0C-7.44 -4.56 -7.92 -11.4 -2.88 -13.44L0 -11.04L2.88 -13.44C7.92 -11.4 7.44 -4.56 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Ccircle r='1.92' opacity='.9'/%3E%3Cpath d='M0 0L2.82 -3.88' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L4.57 1.48' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L0 4.8' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-4.57 1.48' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-2.82 -3.88' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(84 30) rotate(20)'%3E%3Cg opacity='.6'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-1.55 -3.1 -6.94 -3.84 -6.94 -7.75C-6.94 -10.54 -3.1 -11.47 0 -8.56C3.1 -11.47 6.94 -10.54 6.94 -7.75C6.94 -3.84 1.55 -3.1 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(90)'%3E%3Cpath d='M0 0C-1.55 -3.1 -6.94 -3.84 -6.94 -7.75C-6.94 -10.54 -3.1 -11.47 0 -8.56C3.1 -11.47 6.94 -10.54 6.94 -7.75C6.94 -3.84 1.55 -3.1 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(180)'%3E%3Cpath d='M0 0C-1.55 -3.1 -6.94 -3.84 -6.94 -7.75C-6.94 -10.54 -3.1 -11.47 0 -8.56C3.1 -11.47 6.94 -10.54 6.94 -7.75C6.94 -3.84 1.55 -3.1 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(270)'%3E%3Cpath d='M0 0C-1.55 -3.1 -6.94 -3.84 -6.94 -7.75C-6.94 -10.54 -3.1 -11.47 0 -8.56C3.1 -11.47 6.94 -10.54 6.94 -7.75C6.94 -3.84 1.55 -3.1 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 0Q3.1 7.44 1.24 12.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(92 86) rotate(-14)'%3E%3Cg opacity='.5'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-4.34 -2.66 -4.62 -6.65 -1.68 -7.84L0 -6.44L1.68 -7.84C4.62 -6.65 4.34 -2.66 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(72)'%3E%3Cpath d='M0 0C-4.34 -2.66 -4.62 -6.65 -1.68 -7.84L0 -6.44L1.68 -7.84C4.62 -6.65 4.34 -2.66 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(144)'%3E%3Cpath d='M0 0C-4.34 -2.66 -4.62 -6.65 -1.68 -7.84L0 -6.44L1.68 -7.84C4.62 -6.65 4.34 -2.66 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(216)'%3E%3Cpath d='M0 0C-4.34 -2.66 -4.62 -6.65 -1.68 -7.84L0 -6.44L1.68 -7.84C4.62 -6.65 4.34 -2.66 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(288)'%3E%3Cpath d='M0 0C-4.34 -2.66 -4.62 -6.65 -1.68 -7.84L0 -6.44L1.68 -7.84C4.62 -6.65 4.34 -2.66 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Ccircle r='1.12' opacity='.9'/%3E%3Cpath d='M0 0L1.65 -2.27' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L2.66 0.87' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L0 2.8' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-2.66 0.87' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-1.65 -2.27' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(30 88) rotate(-25)'%3E%3Cg opacity='.6'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-1.35 -2.7 -6.05 -3.35 -6.05 -6.75C-6.05 -9.18 -2.7 -9.99 0 -7.45C2.7 -9.99 6.05 -9.18 6.05 -6.75C6.05 -3.35 1.35 -2.7 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(120)'%3E%3Cpath d='M0 0C-1.35 -2.7 -6.05 -3.35 -6.05 -6.75C-6.05 -9.18 -2.7 -9.99 0 -7.45C2.7 -9.99 6.05 -9.18 6.05 -6.75C6.05 -3.35 1.35 -2.7 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(240)'%3E%3Cpath d='M0 0C-1.35 -2.7 -6.05 -3.35 -6.05 -6.75C-6.05 -9.18 -2.7 -9.99 0 -7.45C2.7 -9.99 6.05 -9.18 6.05 -6.75C6.05 -3.35 1.35 -2.7 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 0Q2.7 6.48 1.08 10.8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(58 60) rotate(30)'%3E%3Cg opacity='.5'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-2.85 -1.75 -3.04 -4.37 -1.1 -5.15L0 -4.23L1.1 -5.15C3.04 -4.37 2.85 -1.75 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(72)'%3E%3Cpath d='M0 0C-2.85 -1.75 -3.04 -4.37 -1.1 -5.15L0 -4.23L1.1 -5.15C3.04 -4.37 2.85 -1.75 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(144)'%3E%3Cpath d='M0 0C-2.85 -1.75 -3.04 -4.37 -1.1 -5.15L0 -4.23L1.1 -5.15C3.04 -4.37 2.85 -1.75 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(216)'%3E%3Cpath d='M0 0C-2.85 -1.75 -3.04 -4.37 -1.1 -5.15L0 -4.23L1.1 -5.15C3.04 -4.37 2.85 -1.75 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(288)'%3E%3Cpath d='M0 0C-2.85 -1.75 -3.04 -4.37 -1.1 -5.15L0 -4.23L1.1 -5.15C3.04 -4.37 2.85 -1.75 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Ccircle r='0.74' opacity='.9'/%3E%3Cpath d='M0 0L1.08 -1.49' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L1.75 0.57' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L0 1.84' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-1.75 0.57' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3Cpath d='M0 0L-1.08 -1.49' fill='none' stroke='%23000' stroke-width='.7' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(110 6)'%3E%3Cg opacity='.6'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0C-0.9 -1.8 -4.03 -2.23 -4.03 -4.5C-4.03 -6.12 -1.8 -6.66 0 -4.97C1.8 -6.66 4.03 -6.12 4.03 -4.5C4.03 -2.23 0.9 -1.8 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(90)'%3E%3Cpath d='M0 0C-0.9 -1.8 -4.03 -2.23 -4.03 -4.5C-4.03 -6.12 -1.8 -6.66 0 -4.97C1.8 -6.66 4.03 -6.12 4.03 -4.5C4.03 -2.23 0.9 -1.8 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(180)'%3E%3Cpath d='M0 0C-0.9 -1.8 -4.03 -2.23 -4.03 -4.5C-4.03 -6.12 -1.8 -6.66 0 -4.97C1.8 -6.66 4.03 -6.12 4.03 -4.5C4.03 -2.23 0.9 -1.8 0 0Z'/%3E%3C/g%3E%3Cg transform='translate(0 0) rotate(270)'%3E%3Cpath d='M0 0C-0.9 -1.8 -4.03 -2.23 -4.03 -4.5C-4.03 -6.12 -1.8 -6.66 0 -4.97C1.8 -6.66 4.03 -6.12 4.03 -4.5C4.03 -2.23 0.9 -1.8 0 0Z'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 0Q1.8 4.32 0.72 7.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-120' y='-120'/%3E%3Cuse href='%23t' x='-120' y='0'/%3E%3Cuse href='%23t' x='-120' y='120'/%3E%3Cuse href='%23t' x='0' y='-120'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='120'/%3E%3Cuse href='%23t' x='120' y='-120'/%3E%3Cuse href='%23t' x='120' y='0'/%3E%3Cuse href='%23t' x='120' y='120'/%3E%3C/svg%3E");
    --wl-pattern-flowers-size: 120px 120px;
    --wl-pattern-flowers-preview-size: 72px 72px;
    --wl-pattern-squares: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cg id='t'%3E%3Crect x='9' y='9' width='22' height='22' rx='2' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='16' y='16' width='8' height='8' rx='1' opacity='.45'/%3E%3Crect x='-2.4' y='-2.4' width='4.8' height='4.8' transform='rotate(45 0 0)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-40' y='-40'/%3E%3Cuse href='%23t' x='-40' y='0'/%3E%3Cuse href='%23t' x='-40' y='40'/%3E%3Cuse href='%23t' x='0' y='-40'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='40'/%3E%3Cuse href='%23t' x='40' y='-40'/%3E%3Cuse href='%23t' x='40' y='0'/%3E%3Cuse href='%23t' x='40' y='40'/%3E%3C/svg%3E");
    --wl-pattern-squares-size: 40px 40px;
    --wl-pattern-squares-preview-size: 24px 24px;
    --wl-pattern-galaxy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(72.38 89.56) rotate(20.31)' opacity='0.81'%3E%3Ccircle r='1.07'/%3E%3C/g%3E%3Cg transform='translate(29.55 81.91) rotate(3.76)' opacity='0.69'%3E%3Ccircle r='1.33'/%3E%3C/g%3E%3Cg transform='translate(14.51 129.54) rotate(39.29)' opacity='0.98'%3E%3Ccircle r='0.73'/%3E%3C/g%3E%3Cg transform='translate(104.63 98.49) rotate(21.14)' opacity='0.58'%3E%3Cpath d='M0 -3.245002210848815Q0.7139004863867393 -0.7139004863867393 3.245002210848815 0Q0.7139004863867393 0.7139004863867393 0 3.245002210848815Q-0.7139004863867393 0.7139004863867393 -3.245002210848815 0Q-0.7139004863867393 -0.7139004863867393 0 -3.245002210848815Z'/%3E%3C/g%3E%3Cg transform='translate(30.43 38.71) rotate(17.62)' opacity='0.93'%3E%3Cpath d='M0 -4.591803383669854Q1.0101967444073678 -1.0101967444073678 4.591803383669854 0Q1.0101967444073678 1.0101967444073678 0 4.591803383669854Q-1.0101967444073678 1.0101967444073678 -4.591803383669854 0Q-1.0101967444073678 -1.0101967444073678 0 -4.591803383669854Z'/%3E%3C/g%3E%3Cg transform='translate(83.06 102.45) rotate(18.29)' opacity='0.68'%3E%3Cpolygon points='0,-3.66 0.97,-1.33 3.48,-1.13 1.57,0.51 2.15,2.96 0,1.65 -2.15,2.96 -1.57,0.51 -3.48,-1.13 -0.97,-1.33'/%3E%3C/g%3E%3Cg transform='translate(159.62 159.31) rotate(12.61)' opacity='0.65'%3E%3Ccircle r='1.27'/%3E%3C/g%3E%3Cg transform='translate(46.25 11.24) rotate(33.86)' opacity='0.72'%3E%3Ccircle r='1.02'/%3E%3C/g%3E%3Cg transform='translate(153.29 135.57) rotate(36.41)' opacity='0.76'%3E%3Cpath d='M0 -3.8291522441888337Q0.8424134937215434 -0.8424134937215434 3.8291522441888337 0Q0.8424134937215434 0.8424134937215434 0 3.8291522441888337Q-0.8424134937215434 0.8424134937215434 -3.8291522441888337 0Q-0.8424134937215434 -0.8424134937215434 0 -3.8291522441888337Z'/%3E%3C/g%3E%3Cg transform='translate(156.86 63.59) rotate(31.14)' opacity='0.67'%3E%3Cpath d='M0 -5.088364736702072Q1.1194402420744558 -1.1194402420744558 5.088364736702072 0Q1.1194402420744558 1.1194402420744558 0 5.088364736702072Q-1.1194402420744558 1.1194402420744558 -5.088364736702072 0Q-1.1194402420744558 -1.1194402420744558 0 -5.088364736702072Z'/%3E%3C/g%3E%3Cg transform='translate(13.94 53.21) rotate(4.72)' opacity='0.66'%3E%3Ccircle r='1.31'/%3E%3C/g%3E%3Cg transform='translate(16.17 9.58) rotate(22.37)' opacity='0.75'%3E%3Ccircle r='0.84'/%3E%3C/g%3E%3Cg transform='translate(30.51 117.1) rotate(4.66)' opacity='0.74'%3E%3Cpath d='M0 -5.131145371133502Q1.1288519816493705 -1.1288519816493705 5.131145371133502 0Q1.1288519816493705 1.1288519816493705 0 5.131145371133502Q-1.1288519816493705 1.1288519816493705 -5.131145371133502 0Q-1.1288519816493705 -1.1288519816493705 0 -5.131145371133502Z'/%3E%3C/g%3E%3Cg transform='translate(34.06 43.17) rotate(12.17)' opacity='0.95'%3E%3Ccircle r='1.34'/%3E%3C/g%3E%3Cg transform='translate(33.71 63.08) rotate(4.01)' opacity='1.0'%3E%3Ccircle r='1.21'/%3E%3C/g%3E%3Cg transform='translate(34.12 41.32) rotate(11.85)' opacity='0.58'%3E%3Ccircle r='0.96'/%3E%3C/g%3E%3Cg transform='translate(14.42 93.24) rotate(14.87)' opacity='0.75'%3E%3Cpath d='M0 -5.003851530745816Q1.1008473367640796 -1.1008473367640796 5.003851530745816 0Q1.1008473367640796 1.1008473367640796 0 5.003851530745816Q-1.1008473367640796 1.1008473367640796 -5.003851530745816 0Q-1.1008473367640796 -1.1008473367640796 0 -5.003851530745816Z'/%3E%3C/g%3E%3Cg transform='translate(153.46 77.4) rotate(7.31)' opacity='0.62'%3E%3Cpolygon points='0,-4.11 1.09,-1.49 3.91,-1.27 1.76,0.57 2.41,3.32 0,1.85 -2.41,3.32 -1.76,0.57 -3.91,-1.27 -1.09,-1.49'/%3E%3C/g%3E%3Cg transform='translate(145.35 130.85) rotate(29.58)' opacity='0.97'%3E%3Cpath d='M0 -3.7694019978897804Q0.8292684395357517 -0.8292684395357517 3.7694019978897804 0Q0.8292684395357517 0.8292684395357517 0 3.7694019978897804Q-0.8292684395357517 0.8292684395357517 -3.7694019978897804 0Q-0.8292684395357517 -0.8292684395357517 0 -3.7694019978897804Z'/%3E%3C/g%3E%3Cg transform='translate(31.45 152.02) rotate(16.86)' opacity='0.6'%3E%3Ccircle r='1.18'/%3E%3C/g%3E%3Cg transform='translate(6.19 154.03) rotate(10.28)' opacity='0.92'%3E%3Cpath d='M0 -5.313738381675131Q1.1690224439685288 -1.1690224439685288 5.313738381675131 0Q1.1690224439685288 1.1690224439685288 0 5.313738381675131Q-1.1690224439685288 1.1690224439685288 -5.313738381675131 0Q-1.1690224439685288 -1.1690224439685288 0 -5.313738381675131Z'/%3E%3C/g%3E%3Cg transform='translate(95.43 46.95) rotate(2.75)' opacity='0.65'%3E%3Cpath d='M0 -5.361059982564559Q1.1794331961642028 -1.1794331961642028 5.361059982564559 0Q1.1794331961642028 1.1794331961642028 0 5.361059982564559Q-1.1794331961642028 1.1794331961642028 -5.361059982564559 0Q-1.1794331961642028 -1.1794331961642028 0 -5.361059982564559Z'/%3E%3C/g%3E%3Cg transform='translate(89.5 136.38) rotate(36.69)' opacity='0.64'%3E%3Ccircle r='0.92'/%3E%3C/g%3E%3Cg transform='translate(2.65 43.07) rotate(7.05)' opacity='0.72'%3E%3Cpolygon points='0,-2.33 0.62,-0.85 2.22,-0.72 1,0.32 1.37,1.89 0,1.05 -1.37,1.89 -1,0.32 -2.22,-0.72 -0.62,-0.85'/%3E%3C/g%3E%3Cg transform='translate(91.55 21.05) rotate(39.22)' opacity='0.85'%3E%3Cpolygon points='0,-4.16 1.1,-1.51 3.96,-1.29 1.78,0.58 2.45,3.37 0,1.87 -2.45,3.37 -1.78,0.58 -3.96,-1.29 -1.1,-1.51'/%3E%3C/g%3E%3Cg transform='translate(110.6 93.51) rotate(0.72)' opacity='0.96'%3E%3Cpath d='M0 -3.305241609891967Q0.7271531541762327 -0.7271531541762327 3.305241609891967 0Q0.7271531541762327 0.7271531541762327 0 3.305241609891967Q-0.7271531541762327 0.7271531541762327 -3.305241609891967 0Q-0.7271531541762327 -0.7271531541762327 0 -3.305241609891967Z'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-160' y='-160'/%3E%3Cuse href='%23t' x='-160' y='0'/%3E%3Cuse href='%23t' x='-160' y='160'/%3E%3Cuse href='%23t' x='0' y='-160'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='160'/%3E%3Cuse href='%23t' x='160' y='-160'/%3E%3Cuse href='%23t' x='160' y='0'/%3E%3Cuse href='%23t' x='160' y='160'/%3E%3C/svg%3E");
    --wl-pattern-galaxy-size: 160px 160px;
    --wl-pattern-galaxy-preview-size: 72px 72px;
    --wl-pattern-cloudmix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='160' viewBox='0 0 170 160'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(46 42)'%3E%3Cpath d='M-15.64 7.36H15.64A7.36 7.36 0 0 0 15.64 -7.36A11.96 11.96 0 0 0 -2.76 -15.46A9.2 9.2 0 0 0 -16.56 -6.18A7.36 7.36 0 0 0 -15.64 7.36Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(126 112)' opacity='0.55'%3E%3Crect x='-15' y='-4.8' width='30' height='9.6' rx='4.8'/%3E%3Ccircle cx='-5.4' cy='-5.28' r='6'/%3E%3Ccircle cx='3.6' cy='-7.2' r='7.8'/%3E%3C/g%3E%3Cg transform='translate(36 66)' opacity='0.8'%3E%3Cpath d='M0-3.4C1.6-1 2.6.4 2.6 1.6A2.6 2.6 0 0 1-2.6 1.6C-2.6.4-1.6-1 0-3.4Z'/%3E%3C/g%3E%3Cg transform='translate(48 74)' opacity='0.8'%3E%3Cpath d='M0-3.4C1.6-1 2.6.4 2.6 1.6A2.6 2.6 0 0 1-2.6 1.6C-2.6.4-1.6-1 0-3.4Z'/%3E%3C/g%3E%3Cg transform='translate(58 64)' opacity='0.8'%3E%3Cpath d='M0-3.4C1.6-1 2.6.4 2.6 1.6A2.6 2.6 0 0 1-2.6 1.6C-2.6.4-1.6-1 0-3.4Z'/%3E%3C/g%3E%3Cg transform='translate(120 46)' opacity='0.85'%3E%3Cpath d='M-16 0A16 16 0 0 1 16 0M-11 0A11 11 0 0 1 11 0M-6 0A6 6 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(150 76)'%3E%3Cpath d='M0 -5.5Q1.21 -1.21 5.5 0Q1.21 1.21 0 5.5Q-1.21 1.21 -5.5 0Q-1.21 -1.21 0 -5.5Z'/%3E%3C/g%3E%3Cg transform='translate(92 22)'%3E%3Cpath d='M0 -3.6Q0.792 -0.792 3.6 0Q0.792 0.792 0 3.6Q-0.792 0.792 -3.6 0Q-0.792 -0.792 0 -3.6Z'/%3E%3C/g%3E%3Cg transform='translate(20 120) rotate(15)'%3E%3Cpolygon points='0,-3.4 0.9,-1.24 3.23,-1.05 1.46,0.47 2,2.75 0,1.53 -2,2.75 -1.46,0.47 -3.23,-1.05 -0.9,-1.24'/%3E%3C/g%3E%3Cg transform='translate(70 138)'%3E%3Cpath d='M-14 0C-8-5-2 5 4 0S12-4 16 0' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='154' cy='142' r='2.2'/%3E%3Ccircle cx='18' cy='16' r='1.6'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-170' y='-160'/%3E%3Cuse href='%23t' x='-170' y='0'/%3E%3Cuse href='%23t' x='-170' y='160'/%3E%3Cuse href='%23t' x='0' y='-160'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='160'/%3E%3Cuse href='%23t' x='170' y='-160'/%3E%3Cuse href='%23t' x='170' y='0'/%3E%3Cuse href='%23t' x='170' y='160'/%3E%3C/svg%3E");
    --wl-pattern-cloudmix-size: 170px 160px;
    --wl-pattern-cloudmix-preview-size: 76.5px 72px;
    --wl-pattern-catdog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(30 30)'%3E%3Cg opacity='.42'%3E%3Cellipse cx='0' cy='2' rx='14' ry='12'/%3E%3Cpath d='M-13-2L-11-15L-3-9Z'/%3E%3Cpath d='M13-2L11-15L3-9Z'/%3E%3C/g%3E%3Cpath d='M-8 0Q-5.5-3-3 0M3 0Q5.5-3 8 0' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-1.6 3.4H1.6L0 5.2Z'/%3E%3Cpath d='M-3.6 6.4Q-1.8 8.6 0 6.4Q1.8 8.6 3.6 6.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-9 4.6H-15M-9 6.8L-14.5 8.6M9 4.6H15M9 6.8L14.5 8.6' fill='none' stroke='%23000' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(96 34)'%3E%3Cg opacity='.42'%3E%3Cellipse cx='0' cy='1' rx='12.5' ry='12'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Cellipse cx='-12' cy='-1' rx='4.6' ry='9' transform='rotate(18 -12 -1)'/%3E%3Cellipse cx='12' cy='-1' rx='4.6' ry='9' transform='rotate(-18 12 -1)'/%3E%3C/g%3E%3Ccircle cx='-4.8' cy='-2' r='1.9'/%3E%3Ccircle cx='4.8' cy='-2' r='1.9'/%3E%3Cellipse cx='0' cy='3.6' rx='3' ry='2.2'/%3E%3Cpath d='M-4 6.6Q-2 8.4 0 6.6Q2 8.4 4 6.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-2 7.6H2V9.6A2 2 0 0 1-2 9.6Z'/%3E%3C/g%3E%3Cg transform='translate(32 96)'%3E%3Cg opacity='.42'%3E%3Cellipse cx='0' cy='1' rx='12.5' ry='12'/%3E%3C/g%3E%3Cg opacity='.7'%3E%3Cellipse cx='-12' cy='-1' rx='4.6' ry='9' transform='rotate(18 -12 -1)'/%3E%3Cellipse cx='12' cy='-1' rx='4.6' ry='9' transform='rotate(-18 12 -1)'/%3E%3C/g%3E%3Ccircle cx='-4.8' cy='-2' r='1.9'/%3E%3Cpath d='M2.6-1.6Q4.8-4 7-1.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='0' cy='3.6' rx='3' ry='2.2'/%3E%3Cpath d='M-4 6.6Q-2 8.4 0 6.6Q2 8.4 4 6.6' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-2 7.6H2V9.6A2 2 0 0 1-2 9.6Z'/%3E%3C/g%3E%3Cg transform='translate(98 98)'%3E%3Cg opacity='.42'%3E%3Cellipse cx='0' cy='2' rx='14' ry='12'/%3E%3Cpath d='M-13-2L-11-15L-3-9Z'/%3E%3Cpath d='M13-2L11-15L3-9Z'/%3E%3C/g%3E%3Ccircle cx='-5.5' cy='-0.5' r='2.2'/%3E%3Ccircle cx='5.5' cy='-0.5' r='2.2'/%3E%3Cpath d='M-1.6 3.4H1.6L0 5.2Z'/%3E%3Ccircle cx='0' cy='7.6' r='1.9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-9 4.6H-15M-9 6.8L-14.5 8.6M9 4.6H15M9 6.8L14.5 8.6' fill='none' stroke='%23000' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-128' y='-128'/%3E%3Cuse href='%23t' x='-128' y='0'/%3E%3Cuse href='%23t' x='-128' y='128'/%3E%3Cuse href='%23t' x='0' y='-128'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='128'/%3E%3Cuse href='%23t' x='128' y='-128'/%3E%3Cuse href='%23t' x='128' y='0'/%3E%3Cuse href='%23t' x='128' y='128'/%3E%3C/svg%3E");
    --wl-pattern-catdog-size: 128px 128px;
    --wl-pattern-catdog-preview-size: 76.8px 76.8px;
    --wl-pattern-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(26 28)'%3E%3Ccircle r='6.5'/%3E%3Cpath d='M9.5 0L14 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.72 6.72L9.9 9.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 9.5L0 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-6.72 6.72L-9.9 9.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-9.5 0L-14 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-6.72 -6.72L-9.9 -9.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-0 -9.5L-0 -14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.72 -6.72L9.9 -9.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(86 82) rotate(-20)'%3E%3Cpath d='M2.7 -9A9 9 0 1 0 8.55 4.05A7.02 7.02 0 0 1 2.7 -9Z'/%3E%3C/g%3E%3Cg transform='translate(88 24) rotate(12)'%3E%3Cpolygon points='0,-4.2 1.11,-1.53 3.99,-1.3 1.8,0.58 2.47,3.4 0,1.89 -2.47,3.4 -1.8,0.58 -3.99,-1.3 -1.11,-1.53'/%3E%3C/g%3E%3Cg transform='translate(30 92)'%3E%3Cpath d='M0 -5Q1.1 -1.1 5 0Q1.1 1.1 0 5Q-1.1 1.1 -5 0Q-1.1 -1.1 0 -5Z'/%3E%3C/g%3E%3Cg transform='translate(56 58) rotate(30)'%3E%3Cpolygon points='0,-2.6 0.69,-0.95 2.47,-0.8 1.11,0.36 1.53,2.1 0,1.17 -1.53,2.1 -1.11,0.36 -2.47,-0.8 -0.69,-0.95'/%3E%3C/g%3E%3Ccircle cx='60' cy='14' r='1'/%3E%3Ccircle cx='110' cy='52' r='1'/%3E%3Ccircle cx='8' cy='62' r='1'/%3E%3Ccircle cx='64' cy='104' r='1'/%3E%3Ccircle cx='112' cy='112' r='1'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-120' y='-120'/%3E%3Cuse href='%23t' x='-120' y='0'/%3E%3Cuse href='%23t' x='-120' y='120'/%3E%3Cuse href='%23t' x='0' y='-120'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='120'/%3E%3Cuse href='%23t' x='120' y='-120'/%3E%3Cuse href='%23t' x='120' y='0'/%3E%3Cuse href='%23t' x='120' y='120'/%3E%3C/svg%3E");
    --wl-pattern-sky-size: 120px 120px;
    --wl-pattern-sky-preview-size: 72px 72px;
    --wl-pattern-love: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='150' viewBox='0 0 160 150'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(44 58) scale(1.25)'%3E%3Cg opacity='.55'%3E%3Ccircle cx='-7' cy='-11' r='3.6'/%3E%3Cpath d='M-10.6-6H-3.4L-3.4 4H-4.6V12H-6.2V5H-7.8V12H-9.4V4H-10.6Z'/%3E%3Ccircle cx='7' cy='-11' r='3.6'/%3E%3Cpath d='M4.6-6H9.4L12.6 5H9.6V12H8V5H6V12H4.4V5H1.4Z'/%3E%3C/g%3E%3Cpath d='M-3.6-3Q0 0 3.4-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(0 -21) scale(0.42)'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(118 30) rotate(-12) scale(1.25)' opacity='0.8'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3Cg transform='translate(120 100) rotate(14) scale(0.75)'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3Cg transform='translate(24 126) rotate(-8) scale(0.6)' opacity='0.7'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3Cg transform='translate(84 132) rotate(-8)'%3E%3Crect x='-11' y='-7.5' width='22' height='15' rx='1.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-11-7L0 2L11-7' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(0 1) scale(0.32)'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(80 70) rotate(10)'%3E%3Ccircle cx='-3.5' cy='2' r='5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='3.5' cy='2' r='5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-2-6L0-3L2-6Z'/%3E%3C/g%3E%3Cg transform='translate(150 64)'%3E%3Cpath d='M0 -3.4Q0.748 -0.748 3.4 0Q0.748 0.748 0 3.4Q-0.748 0.748 -3.4 0Q-0.748 -0.748 0 -3.4Z'/%3E%3C/g%3E%3Cg transform='translate(10 18)'%3E%3Cpath d='M0 -2.6Q0.5720000000000001 -0.5720000000000001 2.6 0Q0.5720000000000001 0.5720000000000001 0 2.6Q-0.5720000000000001 0.5720000000000001 -2.6 0Q-0.5720000000000001 -0.5720000000000001 0 -2.6Z'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-160' y='-150'/%3E%3Cuse href='%23t' x='-160' y='0'/%3E%3Cuse href='%23t' x='-160' y='150'/%3E%3Cuse href='%23t' x='0' y='-150'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='150'/%3E%3Cuse href='%23t' x='160' y='-150'/%3E%3Cuse href='%23t' x='160' y='0'/%3E%3Cuse href='%23t' x='160' y='150'/%3E%3C/svg%3E");
    --wl-pattern-love-size: 160px 150px;
    --wl-pattern-love-preview-size: 72px 67.5px;
    --wl-pattern-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(18 20) scale(0.95)'%3E%3Cpath d='M0 4.6C-2-0.4-8-0.6-8-5.4C-8-8.6-5.4-10.2-3.2-10.2C-1.6-10.2-0.6-9.2 0-8C0.6-9.2 1.6-10.2 3.2-10.2C5.4-10.2 8-8.6 8-5.4C8-0.6 2-0.4 0 4.6Z'/%3E%3C/g%3E%3Cg transform='translate(54 18) scale(0.95)'%3E%3Cpath d='M0-9.5L6.6 0L0 9.5L-6.6 0Z'/%3E%3C/g%3E%3Cg transform='translate(18 55) scale(0.95)'%3E%3Cg%3E%3Ccircle cx='0' cy='-4.6' r='3.9'/%3E%3Ccircle cx='-4.3' cy='1.4' r='3.9'/%3E%3Ccircle cx='4.3' cy='1.4' r='3.9'/%3E%3Cpath d='M-0.9 0L0.9 0L2.6 8.4L-2.6 8.4Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(54 55) scale(0.95)'%3E%3Cg%3E%3Cpath d='M0-9.8C-1.8-6.4-8-3.6-8 1C-8 3.8-5.8 5.4-3.6 5.4C-2 5.4-0.8 4.6 0 3.4C0.8 4.6 2 5.4 3.6 5.4C5.8 5.4 8 3.8 8 1C8-3.6 1.8-6.4 0-9.8Z'/%3E%3Cpath d='M-0.9 2L0.9 2L2.6 9.4L-2.6 9.4Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-72' y='-72'/%3E%3Cuse href='%23t' x='-72' y='0'/%3E%3Cuse href='%23t' x='-72' y='72'/%3E%3Cuse href='%23t' x='0' y='-72'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='72'/%3E%3Cuse href='%23t' x='72' y='-72'/%3E%3Cuse href='%23t' x='72' y='0'/%3E%3Cuse href='%23t' x='72' y='72'/%3E%3C/svg%3E");
    --wl-pattern-cards-size: 72px 72px;
    --wl-pattern-cards-preview-size: 43.2px 43.2px;
    --wl-pattern-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cpath d='M10 22C16 12 24 30 30 20S42 12 46 22' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M120 26C120 20 128 20 128 26C128 34 116 34 116 26C116 16 132 16 132 26' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M70 50L76 42L82 50L88 42L94 50' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 82C34 72 46 92 36 98C26 104 18 90 30 84' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M104 86L116 78M116 78L111 77M116 78L114.6 82.6M98 92C102 90 104 88 104 86' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M62 120M58 116L66 124M66 116L58 124M62 114V126M56 120H68' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M140 126C136 116 150 112 152 120S142 134 136 128' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 140L14 134L20 140L26 134' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M86 140C90 136 96 146 100 142S108 136 112 142' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='140' cy='62' r='2'/%3E%3Ccircle cx='54' cy='70' r='1.4'/%3E%3Ccircle cx='150' cy='150' r='1.4'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-160' y='-160'/%3E%3Cuse href='%23t' x='-160' y='0'/%3E%3Cuse href='%23t' x='-160' y='160'/%3E%3Cuse href='%23t' x='0' y='-160'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='160'/%3E%3Cuse href='%23t' x='160' y='-160'/%3E%3Cuse href='%23t' x='160' y='0'/%3E%3Cuse href='%23t' x='160' y='160'/%3E%3C/svg%3E");
    --wl-pattern-doodle-size: 160px 160px;
    --wl-pattern-doodle-preview-size: 72px 72px;
    --wl-pattern-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cg transform='translate(52 46)' opacity='0.5'%3E%3Crect x='-31' y='-9.92' width='62' height='19.84' rx='9.92'/%3E%3Ccircle cx='-11.16' cy='-10.91' r='12.4'/%3E%3Ccircle cx='7.44' cy='-14.88' r='16.12'/%3E%3C/g%3E%3Cg transform='translate(150 34)' opacity='0.75'%3E%3Crect x='-17' y='-5.44' width='34' height='10.88' rx='5.44'/%3E%3Ccircle cx='-6.12' cy='-5.98' r='6.8'/%3E%3Ccircle cx='4.08' cy='-8.16' r='8.84'/%3E%3C/g%3E%3Cg transform='translate(132 118)' opacity='0.45'%3E%3Crect x='-24' y='-7.68' width='48' height='15.36' rx='7.68'/%3E%3Ccircle cx='-8.64' cy='-8.45' r='9.6'/%3E%3Ccircle cx='5.76' cy='-11.52' r='12.48'/%3E%3C/g%3E%3Cg transform='translate(38 128)' opacity='0.8'%3E%3Crect x='-13' y='-4.16' width='26' height='8.32' rx='4.16'/%3E%3Ccircle cx='-4.68' cy='-4.58' r='5.2'/%3E%3Ccircle cx='3.12' cy='-6.24' r='6.76'/%3E%3C/g%3E%3Cg transform='translate(86 178)' opacity='0.35'%3E%3Crect x='-40' y='-12.8' width='80' height='25.6' rx='12.8'/%3E%3Ccircle cx='-14.4' cy='-14.08' r='16'/%3E%3Ccircle cx='9.6' cy='-19.2' r='20.8'/%3E%3C/g%3E%3Cg transform='translate(182 168)' opacity='0.7'%3E%3Crect x='-10' y='-3.2' width='20' height='6.4' rx='3.2'/%3E%3Ccircle cx='-3.6' cy='-3.52' r='4'/%3E%3Ccircle cx='2.4' cy='-4.8' r='5.2'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23t' x='-200' y='-200'/%3E%3Cuse href='%23t' x='-200' y='0'/%3E%3Cuse href='%23t' x='-200' y='200'/%3E%3Cuse href='%23t' x='0' y='-200'/%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='0' y='200'/%3E%3Cuse href='%23t' x='200' y='-200'/%3E%3Cuse href='%23t' x='200' y='0'/%3E%3Cuse href='%23t' x='200' y='200'/%3E%3C/svg%3E");
    --wl-pattern-clouds-size: 200px 200px;
    --wl-pattern-clouds-preview-size: 90px 90px;
    /* Galaxy: exactly one sun and one moon, drawn once over the repeating stars. */
    --wl-pattern-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(24 24)'%3E%3Ccircle r='13'/%3E%3Cpath d='M16 0L20.5 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.94 9.4L16.58 12.05' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.94 15.22L6.33 19.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-4.94 15.22L-6.33 19.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-12.94 9.4L-16.58 12.05' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-16 0L-20.5 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-12.94 -9.4L-16.58 -12.05' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-4.94 -15.22L-6.33 -19.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.94 -15.22L6.33 -19.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.94 -9.4L16.58 -12.05' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    --wl-pattern-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(24 24) rotate(-18)'%3E%3Cpath d='M5.4 -18A18 18 0 1 0 17.1 8.1A14.04 14.04 0 0 1 5.4 -18Z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-wl-pattern="leaves"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-leaves); --wl-pattern-size: var(--wl-pattern-leaves-size); --wl-pattern-opacity: .13; }
:root[data-wl-pattern="dots"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-dots); --wl-pattern-size: var(--wl-pattern-dots-size); --wl-pattern-opacity: .17; }
:root[data-wl-pattern="lines"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-lines); --wl-pattern-size: var(--wl-pattern-lines-size); --wl-pattern-opacity: 0.12; }
:root[data-wl-pattern="scrapbook"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-scrapbook); --wl-pattern-size: var(--wl-pattern-scrapbook-size); --wl-pattern-opacity: 0.13; }
:root[data-wl-pattern="marble"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-marble); --wl-pattern-size: var(--wl-pattern-marble-size); --wl-pattern-opacity: 0.16; }
:root[data-wl-pattern="flowers"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-flowers); --wl-pattern-size: var(--wl-pattern-flowers-size); --wl-pattern-opacity: 0.12; }
:root[data-wl-pattern="squares"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-squares); --wl-pattern-size: var(--wl-pattern-squares-size); --wl-pattern-opacity: 0.11; }
:root[data-wl-pattern="galaxy"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-galaxy); --wl-pattern-size: var(--wl-pattern-galaxy-size); --wl-pattern-opacity: 0.14; }
:root[data-wl-pattern="cloudmix"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-cloudmix); --wl-pattern-size: var(--wl-pattern-cloudmix-size); --wl-pattern-opacity: 0.13; }
:root[data-wl-pattern="catdog"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-catdog); --wl-pattern-size: var(--wl-pattern-catdog-size); --wl-pattern-opacity: 0.12; }
:root[data-wl-pattern="sky"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-sky); --wl-pattern-size: var(--wl-pattern-sky-size); --wl-pattern-opacity: 0.13; }
:root[data-wl-pattern="love"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-love); --wl-pattern-size: var(--wl-pattern-love-size); --wl-pattern-opacity: 0.13; }
:root[data-wl-pattern="cards"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-cards); --wl-pattern-size: var(--wl-pattern-cards-size); --wl-pattern-opacity: 0.1; }
:root[data-wl-pattern="doodle"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-doodle); --wl-pattern-size: var(--wl-pattern-doodle-size); --wl-pattern-opacity: 0.14; }
:root[data-wl-pattern="clouds"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-pattern: var(--wl-pattern-clouds); --wl-pattern-size: var(--wl-pattern-clouds-size); --wl-pattern-opacity: 0.12; }
:root[data-wl-pattern]:has(.queue-page, .home-page, .customer-page, .customer-login-page) body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--wl-pattern-ink); opacity: var(--wl-pattern-opacity);
    -webkit-mask: var(--wl-pattern) 0 0 / var(--wl-pattern-size) repeat; mask: var(--wl-pattern) 0 0 / var(--wl-pattern-size) repeat;
}
/* Galaxy: stars repeat, the sun and the moon are single layers (top left, right). */
:root[data-wl-pattern="galaxy"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) body::before {
    -webkit-mask: var(--wl-pattern-sun) left 7% top 9% / 88px 88px no-repeat, var(--wl-pattern-moon) right 8% top 52% / 76px 76px no-repeat, var(--wl-pattern) 0 0 / var(--wl-pattern-size) repeat;
    mask: var(--wl-pattern-sun) left 7% top 9% / 88px 88px no-repeat, var(--wl-pattern-moon) right 8% top 52% / 76px 76px no-repeat, var(--wl-pattern) 0 0 / var(--wl-pattern-size) repeat;
}
/* Dark mode: a light ink lifts a dark canvas faster, so the layer is fainter there. */
:root[data-wl-pattern][data-queue-theme="dark"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) body::before { opacity: calc(var(--wl-pattern-opacity) * .75); }
/* Text that sits directly on the canvas keeps its contrast over the pattern: a soft halo in the
   canvas colour (cards are opaque already) and a solid fill behind the live-status pill. */
:root[data-wl-pattern]:has(.queue-page, .home-page, .customer-page, .customer-login-page) :is(.queue-status, .queue-ticket-status, .queue-waiting-position, .queue-hold, .queue-intake-reopened, .queue-refresh-message, .queue-error, .queue-disclaimer, .register-promo, .queue-turn-message) { text-shadow: 0 0 2px var(--queue-background), 0 0 6px var(--queue-background); }
:root[data-wl-pattern]:has(.queue-page, .home-page, .customer-page, .customer-login-page) :is(.queue-page, .home-page) .queue-status { background: var(--queue-background); }
/* The canvas colour moves to <html> (skins already paint it there) and body and the page roots
   become transparent, so the layer sits between the canvas and the content. Same colours. */
:root[data-wl-pattern]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { background: var(--queue-background); }
:root[data-wl-pattern]:has(.queue-page, .home-page, .customer-page, .customer-login-page) :is(body, .queue-page, .home-page, .customer-page, .customer-login-page) { background: transparent; }

/* Typeface (data-wl-typeface; Akun Saya → Tampilan → Gaya huruf): nine openly licensed fonts served
   from wwwroot/fonts/customer (licences and attribution in its licenses/ folder), so every browser
   shows the same letters; nothing is fetched from a third party. The 'WL ' family names never match
   a font installed on the device. A browser downloads a file only when text uses it: a page loads
   the chosen typeface (Profesional, the default, when none is chosen); the picker loads all nine.
   Without an attribute the customer pages use the default; the font size setting is untouched. */
@font-face { font-family: 'WL Arimo'; src: url('../fonts/customer/arimo-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Arimo'; src: url('../fonts/customer/arimo-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Cagliostro'; src: url('../fonts/customer/cagliostro-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Comic Neue'; src: url('../fonts/customer/comic-neue-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Comic Neue'; src: url('../fonts/customer/comic-neue-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Short Stack'; src: url('../fonts/customer/short-stack-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Sniglet'; src: url('../fonts/customer/sniglet-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Sniglet'; src: url('../fonts/customer/sniglet-latin-800.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Dancing Script'; src: url('../fonts/customer/dancing-script-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Dancing Script'; src: url('../fonts/customer/dancing-script-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL DejaVu Sans Mono'; src: url('../fonts/customer/dejavu-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL DejaVu Sans Mono'; src: url('../fonts/customer/dejavu-mono-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL Audiowide'; src: url('../fonts/customer/audiowide-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL DejaVu Sans'; src: url('../fonts/customer/dejavu-sans-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'WL DejaVu Sans'; src: url('../fonts/customer/dejavu-sans-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
    --wl-typeface-default: 'WL Arimo', Arial, Helvetica, sans-serif;
    --wl-typeface-artistic: 'WL Cagliostro', 'WL Arimo', sans-serif;
    --wl-typeface-casual: 'WL Comic Neue', 'WL Arimo', cursive;
    --wl-typeface-expressive: 'WL Short Stack', 'WL Arimo', cursive;
    --wl-typeface-cheerful: 'WL Sniglet', 'WL Arimo', sans-serif;
    --wl-typeface-elegant: 'WL Dancing Script', 'WL Arimo', cursive;
    --wl-typeface-minimal: 'WL DejaVu Sans Mono', monospace;
    --wl-typeface-futuristic: 'WL Audiowide', 'WL Arimo', sans-serif;
    --wl-typeface-friendly: 'WL DejaVu Sans', 'WL Arimo', sans-serif;
}
:root[data-wl-typeface="artistic"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-artistic); }
:root[data-wl-typeface="casual"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-casual); }
:root[data-wl-typeface="expressive"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-expressive); }
:root[data-wl-typeface="cheerful"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-cheerful); }
:root[data-wl-typeface="elegant"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-elegant); }
:root[data-wl-typeface="minimal"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-minimal); }
:root[data-wl-typeface="futuristic"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-futuristic); }
:root[data-wl-typeface="friendly"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) { --wl-typeface: var(--wl-typeface-friendly); }
:root:has(.queue-page, .home-page, .customer-page, .customer-login-page) body { font-family: var(--wl-typeface, var(--wl-typeface-default)); }

.queue-page,
.home-page,
.queue-confirmation {
    color-scheme: var(--queue-color-scheme);
}

.queue-theme-toggle {
    grid-column: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--queue-icon);
    cursor: pointer;
    touch-action: manipulation;
}

.queue-theme-toggle svg { width: 24px; height: 24px; }
/* Customer header (Components/Customer/CustomerHeader) on every customer page: the title alone on the
   first line (long names wrap), then Home + theme switch (CustomerNavStart) | the page's own control |
   the account entry (CustomerAccountButton) on the second. One gutter, spacing and row height for all
   pages, so both lines sit at the same place everywhere. The safe-area inset (viewport-fit=cover: notch,
   installed app) replaces the top gap instead of adding to it. */
:is(.queue-page, .home-page, .customer-page, .customer-login-page) { --customer-gutter: 1.25rem; }
@media (max-width: 379px) {
    :is(.queue-page, .home-page, .customer-page, .customer-login-page) { --customer-gutter: 1rem; }
}
.customer-top { min-width: 0; padding: max(.5rem, env(safe-area-inset-top)) var(--customer-gutter) .4rem; text-align: center; }
@media (min-width: 600px) {
    .customer-top { padding-top: max(1rem, env(safe-area-inset-top)); }
}
.customer-top-title { margin-bottom: .3rem; }
.customer-top-title > :is(h1, a) { display: block; margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.customer-top-bar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); column-gap: .5rem; align-items: center; min-height: 44px; container-type: inline-size; }
@media (max-width: 379px) {
    .customer-top-bar { column-gap: .25rem; }
}
.customer-nav-start { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.customer-top-bar > .customer-nav-start { grid-column: 1; grid-row: 1; justify-self: start; }
.customer-nav-home { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--queue-border); border-radius: 50%; background: var(--queue-input); color: var(--queue-text); text-decoration: none; }
.customer-nav-home:hover { background: var(--queue-secondary); }
.customer-nav-home:focus-visible { outline: 2px solid var(--queue-focus); outline-offset: 2px; }
.customer-account-slot, .customer-account-link, .customer-login-link { grid-column: 3; grid-row: 1; justify-self: end; }
.customer-account-slot { width: 44px; height: 44px; }
.customer-login-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--queue-border); border-radius: var(--queue-radius-pill); background: var(--queue-input); color: var(--queue-text); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.customer-login-link:focus-visible, .customer-account-link:focus-visible { outline: 2px solid var(--queue-focus); outline-offset: 2px; }
.customer-account-link { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--queue-border); border-radius: 50%; background: var(--queue-input); color: var(--queue-text); text-decoration: none; }
.customer-account-link img { width: 100%; height: 100%; object-fit: cover; }
.customer-account-initials { font-size: .85rem; font-weight: 700; }
.queue-theme-sun { display: none; }
:root[data-queue-theme="dark"] .queue-theme-toggle { color: var(--queue-icon); }
:root[data-queue-theme="dark"] .queue-theme-moon { display: none; }
:root[data-queue-theme="dark"] .queue-theme-sun { display: block; }
.queue-theme-toggle:focus-visible { outline: 2px solid var(--queue-focus); outline-offset: 2px; }
.queue-theme-toggle:hover { background: var(--queue-secondary); }

/* =========================================================
   WaitLess - Queue
   Mobile First
   ========================================================= */

.queue-page {
    width: 100%;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    overflow: hidden;
    background: var(--queue-background);
    color: var(--queue-text);
}


/* =========================================================
   HEADER (layout: .customer-top, CustomerHeader)
   ========================================================= */

.queue-status {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;
    font-size: 0.95rem;
}

.status-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--queue-success);
}

.queue-status-current {
    color: var(--queue-success);
}

.queue-status-offline {
    color: var(--queue-pending);
}

.queue-status-offline .status-dot {
    background: currentColor;
}


/* =========================================================
   SCROLLABLE CONTENT
   ========================================================= */

.queue-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 0.5rem 1.25rem 1.5rem;
    scrollbar-width: thin;
}


/* =========================================================
   QUEUE NUMBERS
   ========================================================= */

.queue-numbers {
    display: flex;
    flex-direction: column;

    gap: 1.25rem;
    margin-top: 0.5rem;
}

.queue-number-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 1rem;

    font-size: 1.15rem;
    line-height: 1.2;
}

.queue-number-row strong {
    flex-shrink: 0;

    font-size: 2rem;
    line-height: 1;
    font-weight: 400;
}

.queue-current-number {
    color: var(--queue-current);
}

.queue-personal-number-row {
    font-weight: 700;
}

.queue-personal-number-row .queue-personal-number {
    color: var(--queue-personal);
    font-weight: 700;
}

.queue-waiting-position {
    margin: 0.5rem 0 0;
    text-align: right;
    font-size: 1rem;
}

/* Near-turn presentation uses the existing actions and connection guards. */
.queue-near-turn .queue-current-number {
    color: var(--queue-called);
}

.queue-near-turn .queue-personal-number-row {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 1.3rem;
}

.queue-near-turn .queue-personal-number-row .queue-personal-number {
    font-size: clamp(3.25rem, 12vw, 4rem);
    line-height: 1.1;
}

.queue-near-turn .queue-waiting-position {
    margin-top: clamp(2rem, 8dvh, 4rem);
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
}

.queue-near-turn .queue-form,
.queue-near-turn .queue-advertisement {
    display: none;
}

/* Called and missed tickets share one layout; only their status text changes. */
.queue-your-turn .queue-total-number-row {
    display: none;
}

.queue-your-turn .queue-personal-number-row {
    margin-top: clamp(1.5rem, 5dvh, 2.5rem);
    gap: 1rem;
}

.queue-your-turn .queue-turn-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5rem;
    line-height: 1.3;
}

.queue-your-turn .queue-personal-number-row .queue-personal-number {
    font-size: clamp(4.25rem, 22vw, 6.5rem);
}

.queue-your-turn .queue-waiting-position {
    margin-top: clamp(2rem, 8dvh, 4rem);
    font-size: 1rem;
    font-weight: 400;
}


/* =========================================================
   OPTIONAL FORM
   ========================================================= */

.queue-form {
    display: flex;
    flex-direction: column;

    gap: 0.5rem;
    margin-top: 1.5rem;
}

.queue-form input,
.queue-form select {
    width: 100%;
    height: 2.75rem;

    padding: 0 0.85rem;

    border: 1px solid var(--queue-border);
    border-radius: var(--queue-radius-pill);
    outline: none;
    background: var(--queue-input);
    color: var(--queue-text);
    font-size: 1rem;
}

.queue-form input::placeholder {
    color: var(--queue-text);
    font-style: italic;
    opacity: 1;
}

.queue-form input:focus,
.queue-form select:focus {
    border-color: var(--queue-focus);
}

.queue-form input:disabled,
.queue-form select:disabled,
.queue-form input:disabled.valid,
.queue-form input:disabled.invalid {
    background: var(--queue-disabled-background);
    border-color: var(--queue-disabled-background);
    color: var(--queue-disabled-text);
    -webkit-text-fill-color: var(--queue-disabled-text);
    opacity: 1;
    cursor: default;
}

.queue-form .validation-message,
.queue-error {
    color: var(--queue-error);
    font-size: 0.9rem;
}

.queue-error {
    margin-top: 1.25rem;
}

.queue-merchant-conflict {
    margin-top: 1.25rem;
    color: var(--queue-error);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.queue-merchant-return {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background: var(--queue-secondary);
    color: var(--queue-text);
    text-align: center;
    text-decoration: none;
}

.queue-merchant-return:focus-visible {
    outline: 3px solid var(--queue-success);
    outline-offset: 3px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.queue-footer {
    padding: 0.75rem 1.25rem 1rem;
    flex-shrink: 0;
}

.queue-action {
    width: 100%;
    min-height: 3.8rem;

    border: 0;
    border-radius: var(--queue-radius-lg);

    font-size: 1.15rem;
    font-weight: 500;

    cursor: pointer;
}

.queue-action-primary {
    background: var(--queue-primary);
    color: var(--queue-on-primary);
}

.queue-action-cancel {
    background: var(--queue-cancel);
    color: var(--queue-on-cancel);
}

.queue-advertisement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Partner banners are 2:1 (up to 1000 x 500 px): the height follows the width. */
    width: min(100%, 1000px);
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0 auto 0.85rem;
    background: var(--queue-advertisement);
    color: var(--queue-on-accent);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}

.queue-hold {
    margin: 0 0 0.8rem;
    color: var(--queue-hold);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
}

.queue-action:active {
    transform: scale(0.99);
}

.queue-action:disabled {
    cursor: default;
    opacity: 0.65;
    transform: none;
}


/* =========================================================
   BROWSER CONNECTION AND RECOVERY
   ========================================================= */

.queue-connection-status,
.queue-refresh-message,
.queue-action-refresh {
    display: none;
}

.queue-refresh-message {
    margin: 0 0 1.25rem;
    color: var(--queue-warning);
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}

.queue-action-refresh {
    background: var(--queue-refresh);
    color: var(--queue-on-refresh);
}

/* First 2 s after a page load (queue-connection.js): visibly not usable yet. */
.queue-action-refresh:disabled {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed;
}

.queue-action-cancel {
    transition: background-color 0.25s ease;
}

.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-status {
    color: var(--queue-warning);
}

.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .status-dot {
    background: currentColor;
}

.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-status-label,
.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-advertisement,
.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-action-cancel {
    display: none;
}

.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-connection-status {
    display: inline;
}

.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-refresh-message,
.queue-page[data-queue-active="true"]:is([data-queue-connection="offline"], [data-queue-server-connected="false"]) .queue-action-refresh {
    display: block;
}

.queue-page[data-queue-active="true"][data-queue-connection="recovering"] .queue-action-cancel {
    background: var(--queue-recovering);
    color: var(--queue-on-cancel);
    cursor: default;
    opacity: 1;
    transform: none;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.queue-disclaimer {
    margin: 0.65rem 0 0;

    font-size: 0.7rem;
    line-height: 1.25;

    text-align: center;
    color: var(--queue-text);
}

.queue-disclaimer a {
    color: var(--queue-link, inherit);

    font-weight: 700;
    text-decoration: underline;
}

@media (max-height: 650px) {
    .queue-numbers {
        gap: 1rem;
    }

    .queue-content {
        padding-bottom: 0.75rem;
    }
}

@media (max-height: 450px) {
    .queue-advertisement {
        /* Short screens: a smaller banner, still 2:1. */
        width: min(100%, 10rem);
        margin-bottom: 0.5rem;
    }

    .queue-action {
        min-height: 2.75rem;
    }

    .queue-footer {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 600px) {

    .queue-page {
        max-width: 480px;

        border-left: 1px solid var(--queue-page-border);
        border-right: 1px solid var(--queue-page-border);
    }

    .queue-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .queue-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* The queue keeps its refresh action available while Blazor reconnects. */
#components-reconnect-modal[data-queue-inline="true"] {
    display: none !important;
}

.queue-confirmation {
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid var(--queue-dialog-border);
    border-radius: var(--queue-radius-xl);
    background: var(--queue-surface);
    color: var(--queue-text);
    box-shadow: var(--queue-shadow);
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.queue-confirmation::backdrop { background: var(--queue-backdrop, rgb(0 0 0 / 70%)); }
.queue-confirmation p { line-height: 1.5; }
.queue-confirmation-summary { margin: 1rem 0; }
.queue-confirmation-summary div { padding: .65rem 0; border-bottom: 1px solid var(--queue-divider); }
.queue-confirmation-summary dt { color: var(--queue-muted); font-size: .9rem; }
.queue-confirmation-summary dd { margin: .3rem 0 0; white-space: pre-wrap; }
.queue-confirmation-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
.queue-confirmation-back { background: var(--queue-secondary); color: var(--queue-text); }
.queue-confirmation button:focus-visible { outline: 3px solid var(--queue-text); outline-offset: 3px; }

.queue-form select[multiple] { height: 7rem; border-radius: calc(var(--queue-radius-md) * .8); padding: .5rem .85rem; }
.queue-field-label { margin: .35rem .3rem 0; font-size: .85rem; }
/* Phone-check (PhoneCountryInput): country chooser left of the national-number input. */
.queue-form .phone-country-field { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.queue-form .phone-country-field input { flex: 1 1 auto; min-width: 0; }
.queue-form .phone-country-button { flex: none; display: inline-flex; align-items: center; height: 2.75rem; padding: 0 .85rem; border: 1px solid var(--queue-border); border-radius: var(--queue-radius-pill); background: var(--queue-input); color: var(--queue-text); font: inherit; font-size: 1rem; white-space: nowrap; cursor: pointer; }
.queue-form .phone-country-code { font-weight: 600; }
.queue-form .phone-country-button:focus-visible { outline: 3px solid var(--queue-focus); outline-offset: 2px; }
.queue-form .phone-country-button:disabled { background: var(--queue-disabled-background); color: var(--queue-disabled-text); cursor: default; }
.queue-form .phone-country-picker { width: min(92vw, 26rem); max-height: 82vh; padding: 1rem; border: 1px solid var(--queue-dialog-border); border-radius: var(--queue-radius-md); background: var(--queue-surface); color: var(--queue-text); color-scheme: var(--queue-color-scheme); box-shadow: var(--queue-shadow); }
.queue-form .phone-country-picker::backdrop { background: var(--queue-backdrop, rgb(0 0 0 / 70%)); }
.queue-form .phone-country-picker h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.queue-form input.phone-country-search { width: 100%; }
.queue-form .phone-country-list { max-height: 46vh; margin: .75rem 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.queue-form .phone-country-option { display: block; width: 100%; padding: .65rem .75rem; border: 0; border-radius: calc(var(--queue-radius-md) * .6); background: transparent; color: var(--queue-text); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.queue-form .phone-country-option:hover, .queue-form .phone-country-option:focus-visible { background: var(--queue-secondary); outline: none; }
.queue-form .phone-country-option[aria-selected="true"] { font-weight: 700; }
.queue-form .phone-country-status { margin: .5rem .25rem; color: var(--queue-muted); font-size: .9rem; }
.queue-form .phone-country-error { color: var(--queue-error); }
.queue-form .phone-country-picker .queue-action { width: 100%; margin-top: .25rem; }
.queue-field-hint { margin: -.15rem .3rem .25rem; color: var(--queue-muted); font-size: .85rem; overflow-wrap: anywhere; }
.queue-integration-note { margin: .5rem 0; color: var(--queue-muted); font-size: .85rem; }
.queue-ticket-status { margin: 1rem 0; color: var(--queue-current); text-align: center; font-weight: 600; }

/* =========================================================
   TERIMA ANTREAN: CLOSED VIEW (the merchant stopped new intake)
   Tokens only, so it follows every skin, light/dark, corners and font scale.
   ========================================================= */
.queue-closed { display: grid; justify-items: center; gap: .55rem; margin: 1.25rem 0 .5rem; padding: 1.4rem 1.1rem; border: 1px solid var(--queue-divider); border-radius: var(--queue-radius-md); background: var(--queue-surface); box-shadow: var(--queue-shadow); color: var(--queue-text); text-align: center; overflow-wrap: anywhere; }
/* A status chip (outlined), not a filled pill like the cancel buttons: it must not read as tappable. */
.queue-closed-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .8rem; border: 1px solid var(--queue-error); border-radius: var(--queue-radius-pill); background: transparent; color: var(--queue-error); font-size: .9rem; font-weight: 700; }
.queue-closed-badge svg { width: 1rem; height: 1rem; flex: none; }
.queue-closed-title { margin: .2rem 0 0; font-size: 1.3rem; line-height: 1.3; font-weight: 700; }
.queue-closed-message { margin: 0; font-size: 1rem; line-height: 1.5; }
.queue-closed-race { margin: 0; color: var(--queue-error); font-size: .95rem; line-height: 1.45; }
.queue-closed-hint { margin: .25rem 0 0; color: var(--queue-muted); font-size: .9rem; line-height: 1.45; }
.queue-intake-note { margin: .5rem 0 1rem; color: var(--queue-muted); font-size: .95rem; line-height: 1.45; text-align: center; }
.queue-your-turn .queue-intake-note { display: none; }
/* Own colour, not .queue-ticket-status: --queue-current on background is below 4.5:1 in classic dark. */
.queue-intake-reopened { margin: 1rem 0; color: var(--queue-text); text-align: center; font-weight: 600; }
/* The always-present live region announcing Open/Closed changes (visually hidden). */
.queue-intake-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Programmatic focus targets after an Open/Closed change (tabindex=-1, not interactive): no ring. */
.queue-closed-title:focus, .queue-intake-reopened:focus { outline: none; }

/* =========================================================
   ACTIVE TICKET: the submitted answers as text (label left, value right) in every
   state after the take. SERVING VIEW (.queue-serving only): the status and number
   lead the page. Tokens only, so it follows every skin, light/dark, corners and font scale.
   ========================================================= */
.queue-serving .queue-numbers { gap: .75rem; }
.queue-serving .queue-personal-number-row { margin-top: .75rem; padding: 1rem 1rem 1.25rem; gap: .25rem; border: 1px solid var(--queue-divider); border-radius: var(--queue-radius-lg); background: var(--queue-surface); box-shadow: var(--queue-shadow); }
.queue-serving .queue-turn-message { height: auto; font-size: 1.4rem; }
.queue-serving .queue-personal-number-row .queue-personal-number { font-size: clamp(5rem, 28vw, 7.5rem); line-height: 1; }
.queue-serving .queue-waiting-position { margin-top: 1rem; font-size: 1.15rem; font-weight: 700; }
.queue-serving .queue-ticket-status { margin: .35rem 0 0; }
.queue-ticket-details { margin: 1.25rem 0 .5rem; padding: 1rem 1.1rem; border: 1px solid var(--queue-divider); border-radius: var(--queue-radius-md); background: var(--queue-surface); box-shadow: var(--queue-shadow); color: var(--queue-text); }
.queue-ticket-details-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.queue-ticket-details-list { margin: 0; }
.queue-ticket-details-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--queue-divider); }
.queue-ticket-details-list > div:first-child { padding-top: .1rem; border-top: 0; }
.queue-ticket-details-list dt { color: var(--queue-muted); font-size: .95rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.queue-ticket-details-list dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: right; overflow-wrap: anywhere; }
/* Narrow phones and the largest text size: label above value instead of side by side. */
@media (max-width: 359px) {
    .queue-ticket-details-list > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .queue-ticket-details-list dd { text-align: left; }
}
:root[data-wl-font="xl"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) .queue-ticket-details-list > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
:root[data-wl-font="xl"]:has(.queue-page, .home-page, .customer-page, .customer-login-page) .queue-ticket-details-list dd { text-align: left; }

/* =========================================================
   CUSTOMER QUEUE POLISH (visual only; /{slug} page and its dialogs)
   Calmer hierarchy: stat cards, softer inputs, consistent cards and
   actions. Tokens only, so every skin, light/dark, corners and font
   scale follow. No element is shown or hidden here: every state rule
   above (near turn, your turn, offline, closed) keeps deciding that.
   ========================================================= */
.queue-page {
    /* A card fill a shade off the surface (not a --queue-* token: derived per skin and mode). */
    --qp-card: color-mix(in srgb, var(--queue-text) 4%, var(--queue-surface));
    --qp-card-border: color-mix(in srgb, var(--queue-divider) 75%, transparent);
}

/* Header (shared .customer-top): live status as an outlined pill (keeps its own colour per state).
   Compact spacing (all Customer Queue pages): the header, the footer and the content's own padding
   give their room to the scrollable content between them; text sizes, the 44 px controls and the
   main action keep their size. The safe-area insets (viewport-fit=cover: notch, home indicator,
   installed app) are respected instead of a fixed gap, so nothing sits under the system bars. */
.queue-page .queue-content { padding-top: .35rem; padding-bottom: .75rem; }
.queue-page .queue-footer { padding-top: .6rem; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
:is(.queue-page, .home-page) .queue-status { justify-self: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: .28rem .8rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--queue-radius-pill); font-size: .85rem; font-weight: 600; line-height: 1.25; }
:is(.queue-page, .home-page) .status-dot { width: .55rem; height: .55rem; flex: none; }
/* The live status sits in the centre of the header's second line; equal side columns keep it centred. */
.queue-page .queue-status-row .queue-status { grid-column: 2; grid-row: 1; }
/* Narrow screens: tighter spacing keeps the status on one line next to both buttons; the content
   and the footer follow the header's narrower gutter. */
@media (max-width: 379px) {
    .queue-page :is(.queue-content, .queue-footer) { padding-left: var(--customer-gutter); padding-right: var(--customer-gutter); }
    .queue-page .queue-status-row .queue-status { padding-left: .55rem; padding-right: .55rem; }
    .queue-page .queue-status-row .customer-login-link { padding: 0 .7rem; }
}
/* Too narrow for Home + switch, the status and the account entry on one line: the status
   moves under them (centred) instead of overlapping. */
@container (max-width: 17.5rem) {
    .queue-page .queue-status-row .queue-status { grid-column: 1 / -1; grid-row: 2; margin-top: .45rem; }
}

/* Numbers: Total and Current as two stat cards; the personal number as a full-width card. */
.queue-page .queue-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .25rem; }
.queue-page .queue-number-row { padding: .85rem 1rem; border: 1px solid var(--qp-card-border); border-radius: var(--queue-radius-md); background: var(--qp-card); }
.queue-page .queue-number-row:not(.queue-personal-number-row) { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .4rem; font-size: .9rem; }
.queue-page .queue-number-row:not(.queue-personal-number-row) > span { color: var(--queue-muted); font-weight: 600; }
.queue-page .queue-number-row:not(.queue-personal-number-row) strong { font-size: 2.1rem; font-weight: 600; }
.queue-page .queue-personal-number-row { grid-column: 1 / -1; align-items: center; padding: 1rem 1.1rem; border-color: color-mix(in srgb, var(--queue-personal) 45%, var(--qp-card-border)); border-radius: var(--queue-radius-lg); }
.queue-page .queue-personal-number-row strong { font-size: 2.4rem; }
/* Your turn / serving: Total is hidden, so Current spans the row as a slim card. */
.queue-your-turn .queue-number-row:not(.queue-total-number-row):not(.queue-personal-number-row) { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: .7rem 1rem; }
.queue-your-turn .queue-number-row:not(.queue-total-number-row):not(.queue-personal-number-row) strong { font-size: 1.75rem; }
.queue-near-turn .queue-personal-number-row { margin-top: 0; padding: 1.1rem 1rem 1.25rem; }
.queue-your-turn .queue-personal-number-row { margin-top: .25rem; }
.queue-your-turn .queue-turn-message { height: 3rem; }
.queue-serving .queue-turn-message { height: auto; }
.queue-page .queue-waiting-position { margin-top: .75rem; color: var(--queue-muted); text-align: center; font-weight: 600; }
.queue-near-turn .queue-waiting-position { margin-top: 1.25rem; color: var(--queue-text); }
.queue-your-turn .queue-waiting-position { margin-top: 1.1rem; color: var(--queue-text); font-weight: 700; }
.queue-page .queue-ticket-status { margin: .6rem 0 0; line-height: 1.45; }

/* Intake form: rounded fields (radius scale), quiet labels, clear focus ring. */
.queue-page .queue-form { gap: .6rem; margin-top: 1.25rem; }
.queue-page .queue-form input, .queue-page .queue-form select, .queue-page .queue-form .phone-country-button { height: 3rem; border-radius: var(--queue-radius-md); }
.queue-page .queue-form input, .queue-page .queue-form select { padding: 0 1rem; transition: border-color .15s ease, box-shadow .15s ease; }
.queue-page .queue-form select[multiple] { height: 7rem; padding: .5rem 1rem; }
.queue-page .queue-form input::placeholder { font-style: normal; }
.queue-page .queue-form input:focus, .queue-page .queue-form select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--queue-focus) 30%, transparent); }
.queue-page .queue-field-label { margin: .45rem .25rem -.1rem; font-size: .85rem; font-weight: 600; }
.queue-page .queue-form .validation-message { margin: -.15rem .25rem .1rem; }
.queue-page .queue-integration-note { margin: .25rem .25rem; }

/* Cards on the page share one look. */
.queue-page .queue-ticket-details, .queue-page .queue-closed { border-color: var(--qp-card-border); background: var(--qp-card); }
.queue-page .queue-ticket-details { margin-top: 1rem; }
.queue-page .queue-ticket-details-title { margin-bottom: .35rem; font-size: .95rem; }
.queue-page .queue-closed { margin-top: 1rem; }
.queue-page .queue-advertisement { overflow: hidden; border-radius: var(--queue-radius-md); }
.queue-advertisement > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.queue-page .queue-error { margin: 1rem 0 0; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--queue-error) 40%, transparent); border-radius: var(--queue-radius-md); line-height: 1.4; }
.queue-page .queue-merchant-conflict { padding: .85rem 1rem; border: 1px solid var(--qp-card-border); border-radius: var(--queue-radius-md); background: var(--qp-card); }
/* Loyalty promo for guests (MerchantQueue ShowLoyaltyPromo): a compact card above the form. */
.queue-page .queue-loyalty-promo { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0 0; padding: .75rem .95rem; border: 1px solid color-mix(in srgb, var(--queue-personal) 40%, var(--qp-card-border)); border-radius: var(--queue-radius-md); background: var(--qp-card); color: var(--queue-text); }
.queue-page .queue-loyalty-promo-icon { flex: none; font-size: 1.45rem; line-height: 1.2; }
.queue-page .queue-loyalty-promo-title { margin: 0 0 .2rem; font-size: .98rem; font-weight: 700; line-height: 1.3; }
.queue-page .queue-loyalty-promo-text { margin: 0; color: var(--queue-muted); font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.queue-page .queue-loyalty-promo-text a { color: var(--queue-link, var(--queue-text)); font-weight: 700; text-decoration: underline; }
.queue-page .queue-loyalty-promo-text a:focus-visible { outline: 2px solid var(--queue-focus); outline-offset: 2px; border-radius: 2px; }
.queue-page .queue-merchant-return { margin-top: .6rem; border-radius: var(--queue-radius-md); }

/* Footer actions: a hairline above, weighted labels, a soft lift on the coloured actions. */
.queue-page .queue-footer { border-top: 1px solid var(--qp-card-border); }
.queue-page .queue-action { min-height: 3.5rem; font-weight: 650; letter-spacing: .01em; transition: background-color .25s ease, box-shadow .2s ease; }
.queue-page .queue-action-primary:not(:disabled) { box-shadow: 0 .55rem 1.2rem -.7rem color-mix(in srgb, var(--queue-primary) 85%, transparent); }
.queue-page .queue-action-cancel:not(:disabled) { box-shadow: 0 .55rem 1.2rem -.7rem color-mix(in srgb, var(--queue-cancel) 85%, transparent); }
.queue-page .queue-hold { margin-bottom: .65rem; }
/* The shared "Daftar usaha" link (RegisterPromoLink), close under the buttons (its own padding keeps the tap area). */
.queue-page .queue-footer .register-promo { margin-top: .3rem; }
.queue-page .queue-disclaimer { margin-top: .6rem; color: var(--queue-muted); font-size: .72rem; line-height: 1.35; }

/* Phone-check country picker. */
.queue-page .queue-form .phone-country-picker { padding: 1.1rem; border-radius: var(--queue-radius-lg); }
.queue-page .queue-form .phone-country-picker h2 { font-size: 1.05rem; font-weight: 700; }
.queue-page .queue-form .phone-country-option { padding: .7rem .8rem; }

/* Take / cancel confirmation dialog. */
#queue-confirmation { padding: 1.4rem 1.35rem 1.35rem; border-radius: var(--queue-radius-lg); }
#queue-confirmation > p { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
#queue-confirmation .queue-confirmation-summary { margin: 1rem 0 0; padding: .1rem .95rem; border: 1px solid var(--queue-divider); border-radius: var(--queue-radius-md); }
#queue-confirmation .queue-confirmation-summary div { padding: .6rem 0; }
#queue-confirmation .queue-confirmation-summary div:last-child { border-bottom: 0; }
#queue-confirmation .queue-confirmation-summary dt { font-size: .82rem; font-weight: 600; }
#queue-confirmation .queue-confirmation-summary dd { margin-top: .15rem; font-weight: 600; }
#queue-confirmation .queue-confirmation-actions { gap: .65rem; margin-top: 1.25rem; }
#queue-confirmation .queue-action { min-height: 3.25rem; font-weight: 650; }

@media (max-height: 650px) {
    .queue-page .queue-numbers { gap: .6rem; }
    .queue-page .queue-number-row { padding: .65rem .9rem; }
}

/* Profile guidance stays within Customer Queue and follows the current theme. */
.queue-profile-hint { margin: 0 0 .75rem; color: var(--queue-muted); font-size: .875rem; line-height: 1.4; }
.queue-profile-hint a { color: inherit; text-decoration: underline; }

/* Shared field states. Page-local aliases use each design system's existing palette;
   Page palettes, action colours and layout remain unchanged. State rules override scoped component
   colours/opacity deliberately, so nested PhoneCountryInput and CMS controls agree. */
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page) {
    --wl-field-fill: var(--queue-input);
    --wl-field-canvas: var(--queue-background);
    --wl-field-ink: var(--queue-text);
    --wl-field-focus: var(--queue-focus);
}
:is(.merchant-page, .cms-page, .cms-auth) {
    --wl-field-fill: var(--m-input-bg, var(--m-surface-2));
    --wl-field-canvas: var(--m-bg);
    --wl-field-ink: var(--m-text);
    --wl-field-focus: var(--m-input-focus, var(--m-blue));
}
.merchant-staff-page {
    --wl-field-fill: var(--s-surface);
    --wl-field-canvas: var(--s-bg);
    --wl-field-ink: var(--s-text);
    --wl-field-focus: var(--s-blue);
}
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth) {
    --wl-field-muted-fill: color-mix(in srgb, var(--wl-field-fill) 84%, var(--wl-field-ink));
    --wl-field-muted-ink: color-mix(in srgb, var(--wl-field-ink) 90%, var(--wl-field-fill));
    --wl-field-muted-border: color-mix(in srgb, var(--wl-field-ink) 60%, var(--wl-field-fill));
}
:root[data-queue-theme="dark"] :is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page, .cms-page, .cms-auth),
:is(.merchant-page, .merchant-staff-page, .cms-page, .cms-auth)[data-theme="dark"] {
    --wl-field-muted-fill: color-mix(in srgb, color-mix(in srgb, var(--wl-field-fill) 45%, var(--wl-field-canvas)) 88%, var(--wl-field-ink));
    --wl-field-muted-ink: color-mix(in srgb, var(--wl-field-ink) 70%, var(--wl-field-muted-fill));
}
/* Attribute selectors preserve the native difference: readonly stays focusable,
   selectable and submitted; disabled stays non-interactive and is not submitted. */
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"]), select, textarea):is(:disabled, [readonly]),
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(.birth-field, .phone-country-button, .time-button, .map-preview-button):disabled {
    background-color: var(--wl-field-muted-fill) !important;
    border-color: var(--wl-field-muted-border) !important;
    border-style: dashed !important;
    color: var(--wl-field-muted-ink) !important;
    -webkit-text-fill-color: var(--wl-field-muted-ink) !important;
    opacity: 1 !important;
}
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(input:not([type="hidden"]), select, textarea, .birth-field, .phone-country-button, .time-button, .map-preview-button):disabled {
    cursor: not-allowed !important;
}
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(input, textarea)[readonly]:not(:disabled) { cursor: text; }
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(input:not([type="hidden"], [type="button"], [type="submit"], [type="reset"]), select, textarea, .birth-field, .phone-country-button, .time-button):not(:disabled):focus-visible {
    outline: 2px solid var(--wl-field-focus) !important;
    outline-offset: 2px !important;
}
/* Native checkboxes/radios/ranges keep their native indicators and dimensions. */
:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"]):disabled {
    outline: 1px dashed var(--wl-field-muted-border);
    outline-offset: 2px;
    opacity: .65;
}
/* The profile's file input is an invisible hit target: tint its visible label,
   without making the native overlay visible or changing upload behaviour. */
.customer-page .customer-file:has(input:disabled) {
    background-color: var(--wl-field-muted-fill);
    border-color: var(--wl-field-muted-border);
    border-style: dashed;
    color: var(--wl-field-muted-ink);
    cursor: not-allowed;
}

:is(.queue-page, .customer-page) .birth-day:disabled {
    background-color: var(--wl-field-muted-fill);
    color: var(--wl-field-muted-ink);
    opacity: 1;
    cursor: not-allowed;
}

/* History's native date input is another invisible hit target. */
.merchant-page .chip-date input:disabled { opacity: 0 !important; }
.merchant-page .chip-date:has(input:disabled) {
    background-color: var(--wl-field-muted-fill);
    border-color: var(--wl-field-muted-border);
    border-style: dashed;
    color: var(--wl-field-muted-ink);
    cursor: not-allowed;
}

/* Visible shells around composite inputs share the disabled treatment. */
:is(.home-page .home-search-field, .merchant-page .money-field):has(input:disabled) {
    background-color: var(--wl-field-muted-fill);
    border-color: var(--wl-field-muted-border);
    border-style: dashed;
    color: var(--wl-field-muted-ink);
    cursor: not-allowed;
}
:is(.customer-page .customer-file, .merchant-page .chip-date):has(input:focus-visible) {
    outline: 2px solid var(--wl-field-focus);
    outline-offset: 2px;
}

:is(.queue-page, .home-page, .customer-page, .customer-login-page, .merchant-login-page,
    .merchant-page, .merchant-staff-page, .cms-page, .cms-auth)
    :is(input, textarea):is(:disabled, [readonly])::placeholder {
    color: var(--wl-field-muted-ink);
    opacity: 1;
}