/* ==========================================================================
   PakPay demo UI
   Palette: #FFFFFF · #FAF7F0 · #000000 · #FF6B35 · #E94B35 · #FCE4D6 · #DDF5EB
            #008F72 · #7B2FF7 · #4169E1 · #FFC857 · #808080 · #40C4B4 · #A47551
   ========================================================================== */
 
:root {
    --white: #FFFFFF;
    --off: #FAF7F0;
    --black: #000000;
    --orange: #FF6B35;
    --red: #E94B35;
    --pink: #FCE4D6;
    --mint: #DDF5EB;
    --green: #008F72;
    --purple: #7B2FF7;
    --blue: #4169E1;
    --yellow: #FFC857;
    --gray: #808080;
    --teal: #40C4B4;
    --brown: #A47551;

    --ink: #0E1733;
    --ink-2: #2B3350;
    --muted: #808080;
    --line: rgba(14, 23, 51, .08);

    --head: "Montserrat", "Poppins", system-ui, sans-serif;
    --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --script: "Caveat", "Segoe Script", cursive;

    --shadow: 0 18px 38px -26px rgba(65, 105, 225, .45), 0 4px 14px -8px rgba(14, 23, 51, .1);
    --shell: min(480px, 100%);
}

/* tones: --c main, --c2 light end of the gradient */
.t-o { --c: #FF6B35; --c2: #FFB27F; --cd: #E94B35; }
.t-r { --c: #E94B35; --c2: #FF9A8A; --cd: #C9352A; }
.t-b { --c: #4169E1; --c2: #8FB0FF; --cd: #2F52C4; }
.t-p { --c: #7B2FF7; --c2: #BC97FF; --cd: #6020D6; }
.t-g { --c: #008F72; --c2: #5FE0BD; --cd: #007560; }
.t-y { --c: #F2A23A; --c2: #FFC857; --cd: #D98A1F; }
.t-t { --c: #40C4B4; --c2: #9CEFE4; --cd: #2EA597; }

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

html { -webkit-text-size-adjust: 100%; background: var(--off); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-2);
    background: var(--off);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* soft orange / blue waves behind the page */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 90vmax;
    height: 60vmax;
    border-radius: 50%;
    pointer-events: none;
}

body::before {
    top: -38vmax;
    right: -42vmax;
    background: radial-gradient(closest-side, rgba(255, 107, 53, .28), rgba(252, 228, 214, .5) 55%, transparent);
}

body::after {
    bottom: -36vmax;
    left: -44vmax;
    background: radial-gradient(closest-side, rgba(255, 107, 53, .2), rgba(252, 228, 214, .45) 55%, transparent);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

.ic { width: 100%; height: 100%; }

.shell {
    width: var(--shell);
    margin: 0 auto;
    padding: 0 16px calc(100px + env(safe-area-inset-bottom));
}

.content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

/* ---------- shared bits ---------- */
.card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 26px;
    box-shadow: var(--shadow);
}

/* curved colour bands in the corners */
.wv::before,
.wv::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.wv::before {
    top: var(--wt, -55%);
    right: var(--wr, -22%);
    width: var(--ww, 62%);
    height: var(--wh, 120%);
    background: linear-gradient(200deg, var(--wa, #FF6B35) 0%, rgba(255, 178, 127, .55) 38%, rgba(252, 228, 214, .35) 62%, transparent 78%);
}

.wv::after {
    bottom: var(--wb, -60%);
    left: var(--wl, -18%);
    width: var(--ww2, 46%);
    height: var(--wh2, 110%);
    background: linear-gradient(20deg, var(--wc, #4169E1) 0%, rgba(143, 176, 255, .45) 36%, transparent 70%);
}

.go {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 14px;
    color: var(--c, var(--ink));
    background: color-mix(in srgb, var(--c, #FF6B35) 13%, #fff);
    box-shadow: 0 6px 14px -8px var(--c, rgba(0, 0, 0, .3));
    transition: transform .2s ease;
}

a:active .go, .go:active { transform: scale(.92); }

.go-sm { width: 30px; height: 30px; font-size: 11px; }

.copy-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    color: var(--ink);
    background: color-mix(in srgb, var(--blue) 10%, #fff);
}

.copy-btn.is-copied { color: #fff; background: var(--green); }

.cap {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5D6478;
}

/* section heading: icon · two-tone title · tagline · optional pill */
.sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 2px 2px;
}

.sec-head > .sec-ic {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.sec-head h2 {
    font-family: var(--head);
    font-size: clamp(21px, 6vw, 27px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}

.sec-head h2 b { color: var(--orange); }

.sec-head small {
    display: block;
    margin-top: 5px;
    font-size: clamp(8.5px, 2.4vw, 10.5px);
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #6B7186;
}

.sec-head .sec-side {
    margin-left: auto;
    flex-shrink: 0;
}

.pill-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5D6478;
    background: rgba(255, 255, 255, .85);
    border: 1px solid #F6D9C8;
    box-shadow: 0 8px 18px -14px var(--orange);
}

.pill-soft i { width: 1px; height: 12px; background: #C9CCD6; }

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
    background: var(--mint);
    border: 1px solid #BFEBD9;
}

.live-pill .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
    animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink { 50% { opacity: .35; } }

/* ---------- top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -16px 16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(255, 107, 53, .14);
    box-shadow: 0 10px 24px -22px rgba(14, 23, 51, .5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.icon-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
}

.icon-btn.menu {
    color: #fff;
    border: 0;
    background: linear-gradient(140deg, #FFB27F, var(--orange) 55%, var(--red));
    box-shadow: 0 8px 16px -8px var(--orange);
}

.bell { position: relative; }

.bell::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #fff;
}

.brand {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.brand svg { width: 34px; height: 34px; }

.brand b {
    font-family: var(--head);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
}

.brand b span { color: var(--orange); }

/* ---------- bottom navigation ---------- */
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 45;
    width: var(--shell);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    border-radius: 24px 24px 0 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -12px 30px -20px rgba(14, 23, 51, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bottom-nav a {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 2px;
    border-radius: 16px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.bottom-nav a i { font-size: 17px; }

.bottom-nav a.active {
    color: #fff;
    background: linear-gradient(140deg, #FFB27F, var(--orange) 50%, var(--red));
    box-shadow: 0 10px 18px -10px var(--orange);
}

/* ==========================================================================
   1. Profile
   ========================================================================== */
.profile {
    --wt: -60%; --wr: -18%; --ww: 58%; --wh: 115%;
    --wb: -40%; --wl: -24%; --ww2: 40%; --wh2: 80%;
    padding: 18px 16px 16px;
}

.profile-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-right: 34px;
}

.avatar {
    position: relative;
    width: clamp(92px, 26vw, 112px);
    aspect-ratio: 1;
    margin: 10px;
    cursor: pointer;
}

/* broken blue / orange arcs around the photo */
.avatar::before,
.avatar::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.avatar::before {
    inset: -10px;
    border-top-color: #4169E1;
    border-left-color: #8FB0FF;
    transform: rotate(-20deg);
}

.avatar::after {
    inset: -10px;
    border-right-color: #FFC857;
    border-bottom-color: var(--orange);
    transform: rotate(-30deg);
    clip-path: polygon(50% 50%, 100% 0, 100% 100%, 30% 100%);
}

.avatar-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 5px solid #fff;
    font-family: var(--head);
    font-size: clamp(44px, 13vw, 58px);
    font-weight: 800;
    color: #fff;
    background: radial-gradient(circle at 30% 25%, #FFB27F, var(--orange) 45%, var(--red));
    box-shadow: 0 14px 26px -12px var(--red), 0 0 0 1px rgba(233, 75, 53, .1);
    overflow: hidden;
}

.avatar-face img { width: 100%; height: 100%; object-fit: cover; }

.avatar-cam {
    position: absolute;
    right: -6px;
    bottom: -2px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid #fff;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(140deg, #3FD08F, var(--green));
    box-shadow: 0 8px 16px -8px var(--green);
    z-index: 1;
}

.greet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: rgba(252, 228, 214, .75);
    font-family: var(--head);
    font-size: clamp(12.5px, 3.6vw, 15px);
    font-weight: 700;
    color: var(--ink);
}

.greet svg { width: 30px; height: 19px; }
.greet b { color: var(--orange); }

.profile-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin-top: 10px;
    font-family: var(--head);
    font-size: clamp(19px, 5.6vw, 25px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink);
}

.profile-name b { color: var(--blue); }
.profile-name svg { width: 24px; height: 24px; }

.profile-welcome {
    margin-top: 3px;
    font-family: var(--head);
    font-size: clamp(15px, 4.4vw, 19px);
    font-weight: 800;
    color: var(--orange);
}

.profile-trust {
    font-size: clamp(11.5px, 3.3vw, 13.5px);
    color: var(--muted);
}

.profile > .go {
    position: absolute;
    top: 46%;
    right: 12px;
    width: 44px;
    height: 44px;
    color: var(--ink);
    background: rgba(252, 228, 214, .85);
}

.profile-ids {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.id-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #E8ECF8;
    box-shadow: 0 10px 22px -18px var(--c);
}

/* tone wave on the right edge */
.id-box::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40%;
    right: -30%;
    width: 60%;
    height: 180%;
    border-radius: 50%;
    background: linear-gradient(200deg, var(--c), color-mix(in srgb, var(--c2) 40%, transparent) 40%, transparent 70%);
    opacity: .75;
}

.id-box.t-o { background: linear-gradient(120deg, #fff, var(--mint) 160%); border-color: #F6D9C8; }

.id-ic {
    width: clamp(40px, 11vw, 52px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: clamp(17px, 5vw, 22px);
    color: #fff;
    background: linear-gradient(140deg, var(--c2), var(--c));
    box-shadow: 0 10px 18px -10px var(--c);
}

.id-ic.soft { background: var(--pink); padding: 8px; }

.id-box .cap { font-size: 10px; }

.id-box small {
    display: block;
    font-size: 10.5px;
    line-height: 1.25;
    color: var(--muted);
}

.id-box strong {
    display: block;
    margin-top: 2px;
    font-family: var(--head);
    font-size: clamp(13px, 3.9vw, 17px);
    font-weight: 800;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.id-box .copy-btn { width: 36px; height: 36px; font-size: 14px; }
.id-box .go { width: 34px; height: 34px; color: var(--ink); background: rgba(221, 245, 235, .9); }

/* ---------- dashboard profile card (pc-*), sized to its own width ---------- */
.pcard {
    container-type: inline-size;
    padding: 4.4% 4.2%;
    border: 1px solid #F1F3F9;
    background:
        radial-gradient(48% 78% at 100% 0%, rgba(255, 107, 53, .92) 0%, rgba(255, 138, 76, .55) 24%, rgba(255, 178, 127, .3) 46%, rgba(252, 228, 214, .22) 64%, transparent 80%),
        radial-gradient(38% 60% at 0% 100%, rgba(65, 105, 225, .5) 0%, rgba(143, 176, 255, .28) 45%, transparent 72%),
        #fff;
}

/* a white swoosh laid over the orange corner, as in the art */
.pcard::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -38%;
    right: -6%;
    width: 64%;
    height: 96%;
    border-radius: 0 0 0 100%;
    background: linear-gradient(200deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .85));
    pointer-events: none;
}

.pc-dots {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
}

.pc-dots.a {
    top: 18px;
    left: 18px;
    background: #4169E1;
    box-shadow: 13px -5px 0 1px #4169E1, 13px 9px 0 1px #4169E1, 1px 20px 0 1px #FFC857;
}

.pc-dots.b {
    top: 50%;
    right: 12px;
    background: #FFB27F;
    box-shadow: 9px -9px 0 0 #FFB27F, 9px 9px 0 0 #FFB27F, 18px 0 0 0 #FFB27F;
}

.pc-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(10px * .4), 3.4cqw, 34px);
}

.pc-avatar {
    position: relative;
    width: clamp(calc(78px * .4), 22cqw, 210px);
    aspect-ratio: 1;
    margin: clamp(calc(8px * .4), 2.4cqw, 22px);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 clamp(calc(6px * .4), 2cqw, 18px) rgba(255, 255, 255, .85), 0 0 0 clamp(calc(7px * .4), 2.2cqw, 20px) rgba(65, 105, 225, .06), 0 18px 40px -18px rgba(65, 105, 225, .45);
}

/* the three broken arcs around the photo */
.pc-avatar::before,
.pc-avatar::after,
.pc-avatar .arc {
    content: "";
    position: absolute;
    inset: calc(clamp(calc(8px * .4), 2.4cqw, 22px) * -1);
    border-radius: 50%;
    border: clamp(calc(2px * .4), .6cqw, 5px) solid transparent;
    pointer-events: none;
}

.pc-avatar::before { border-left-color: #4169E1; border-top-color: #8FB0FF; transform: rotate(10deg); }
.pc-avatar::after { border-top-color: #FFC857; border-right-color: #FF8A4C; transform: rotate(30deg); clip-path: inset(0 0 50% 50%); }
.pc-avatar .arc { border-bottom-color: #E94B35; transform: rotate(30deg); clip-path: inset(50% 50% 0 0); }

.pc-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: clamp(calc(3px * .4), 1cqw, 8px) solid #fff;
    font-family: var(--head);
    font-size: clamp(calc(38px * .4), 12cqw, 110px);
    font-weight: 800;
    color: #fff;
    background: radial-gradient(circle at 32% 26%, #FFB27F, #FF6B35 46%, #E94B35 100%);
    box-shadow: inset 0 -8px 18px rgba(201, 53, 42, .35);
}

.pc-face img { width: 100%; height: 100%; object-fit: cover; }

.pc-cam {
    position: absolute;
    right: -4%;
    bottom: -2%;
    z-index: 1;
    width: 38%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: clamp(calc(2px * .4), .8cqw, 6px) solid #fff;
    font-size: clamp(calc(13px * .4), 3.6cqw, 32px);
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #3FD08F, #16A34A 60%, #008F72);
    box-shadow: 0 8px 16px -8px #008F72;
}

.pc-info { min-width: 0; }

.pcard .greet {
    gap: clamp(calc(6px * .4), 1.6cqw, 14px);
    padding: clamp(calc(5px * .4), 1.3cqw, 12px) clamp(calc(12px * .4), 3.2cqw, 28px) clamp(calc(5px * .4), 1.3cqw, 12px) clamp(calc(9px * .4), 2.2cqw, 20px);
    font-size: clamp(calc(12px * .4), 3.4cqw, 30px);
    background: rgba(252, 228, 214, .8);
}

.pcard .greet svg { width: 2.1em; height: 1.3em; }

.pc-name {
    display: flex;
    align-items: center;
    gap: .25em;
    margin-top: clamp(calc(8px * .4), 2.6cqw, 24px);
    font-family: var(--head);
    font-size: clamp(calc(15px * .4), 5cqw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.pc-name b { color: var(--blue); }
.pc-name svg { flex-shrink: 0; width: 1.05em; height: 1.05em; }

.pc-welcome {
    margin-top: .1em;
    font-family: var(--head);
    font-size: clamp(calc(14px * .4), 4.3cqw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--orange);
}

.pc-trust {
    font-size: clamp(calc(10.5px * .4), 3.05cqw, 28px);
    color: var(--muted);
    white-space: nowrap;
}

.pc-go {
    width: clamp(calc(36px * .4), 10cqw, 100px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(14px * .4), 3.2cqw, 30px);
    color: var(--ink);
    background: rgba(252, 228, 214, .75);
    box-shadow: 0 10px 22px -14px var(--orange);
}

.pc-ids {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(calc(8px * .4), 2.4cqw, 30px);
    margin-top: clamp(calc(12px * .4), 3cqw, 26px);
}

.pc-id {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(6px * .4), 1.4cqw, 24px);
    padding: clamp(calc(9px * .4), 2cqw, 26px) clamp(calc(7px * .4), 1.5cqw, 22px);
    border-radius: clamp(calc(16px * .4), 3.4cqw, 34px);
    border: 1.5px solid transparent;
    box-shadow: 0 14px 28px -22px var(--c), 0 2px 6px rgba(14, 23, 51, .04);
}

/* tone wave sweeping in from the right edge */
.pc-id::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -14%;
    bottom: -38%;
    width: 52%;
    height: 120%;
    border-radius: 100% 0 0 0;
    background: var(--wave);
    opacity: .9;
}

.pc-reg {
    --c: #4169E1;
    --wave: linear-gradient(160deg, rgba(143, 176, 255, .0) 30%, rgba(143, 176, 255, .55) 55%, #4169E1 80%, #40C4B4);
    background:
        linear-gradient(100deg, #fff 55%, #F1F5FF) padding-box,
        linear-gradient(90deg, #E3E9FA, #C9D6FA 60%, #4169E1) border-box;
}

.pc-up {
    --c: #FF6B35;
    --wave: linear-gradient(160deg, rgba(255, 178, 127, 0) 30%, rgba(255, 178, 127, .6) 55%, #FF6B35 85%, #E94B35);
    background:
        linear-gradient(100deg, #F2FBF7 0%, #fff 60%) padding-box,
        linear-gradient(90deg, #FFE1CF, #FFB27F 60%, #FF6B35) border-box;
}

.pc-ic {
    width: clamp(calc(34px * .4), 8cqw, 130px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 28%;
    font-size: clamp(calc(15px * .4), 3.6cqw, 56px);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, #7FD3FF, #2D8CF0 45%, #4169E1);
    box-shadow: 0 10px 18px -10px #4169E1, inset 0 1px 0 rgba(255, 255, 255, .5);
}

.pc-ic.soft {
    padding: 18%;
    background: linear-gradient(140deg, #FFF4EC, #FCE4D6);
    box-shadow: 0 10px 18px -12px #FF6B35, inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.pc-ic.soft svg { width: 100%; height: 100%; }

.pc-txt { min-width: 0; }

.pc-txt .cap {
    font-family: var(--head);
    font-size: clamp(calc(9px * .4), 2.4cqw, 24px);
    letter-spacing: .06em;
    color: #4A5068;
}

.pc-txt small {
    display: block;
    overflow: hidden;
    font-size: clamp(calc(8.6px * .4), 2.15cqw, 24px);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #6B7186;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pc-txt strong {
    display: block;
    margin-top: .1em;
    font-family: var(--head);
    font-size: clamp(calc(12.5px * .4), 3.6cqw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ink);
    white-space: nowrap;
}

.pc-btn {
    width: clamp(calc(28px * .4), 6.6cqw, 100px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: clamp(calc(12px * .4), 2.8cqw, 34px);
    color: var(--ink);
    background: rgba(233, 239, 252, .95);
    box-shadow: 0 6px 14px -8px var(--c);
}

.pc-up .pc-btn { background: rgba(221, 245, 235, .95); }
.pc-btn.is-copied { color: #fff; background: var(--green); }

/* the two id boxes always share one row (col-6); on very narrow cards they just tighten */
.pc-ids { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pc-txt strong { overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   2. Balance card
   ========================================================================== */
.wallet {
    --wa: #FF6B35; --wt: auto; --wr: -20%; --ww: 70%; --wh: 60%;
    --wc: #4169E1; --wb: auto; --wl: -18%; --ww2: 58%; --wh2: 70%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 20px 14px 22px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, #4169E1, #8FB0FF 30%, #FCE4D6 60%, #FF6B35) border-box;
}

.wallet::before { top: auto; bottom: -42%; }
.wallet::after { top: -46%; bottom: auto; }

.ring-art {
    position: relative;
    align-self: center;
    width: clamp(88px, 25vw, 118px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 8px 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 58%, #FFF4EC);
    box-shadow: inset 0 0 0 6px rgba(252, 228, 214, .7), 0 14px 26px -18px var(--orange);
}

.ring-art::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: var(--orange);
    border-top-color: #4169E1;
    border-bottom-color: #40C4B4;
    transform: rotate(-40deg);
}

.ring-art svg { width: 64%; height: 64%; }

.wallet-text { min-width: 0; align-self: center; }

.wallet-text .greet { font-size: clamp(11.5px, 3.3vw, 14px); }

.wallet-motto {
    margin: 8px 0 12px;
    font-size: clamp(11.5px, 3.3vw, 13.5px);
    color: var(--muted);
}

.wallet-title {
    font-family: var(--head);
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--ink);
}

.wallet-sub { font-size: clamp(11px, 3.1vw, 13px); color: var(--muted); }

.wallet-amount {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--head);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--ink);
}

.wallet-amount em {
    font-style: normal;
    font-size: clamp(20px, 6vw, 28px);
    color: var(--orange);
}

.wallet-amount span {
    font-size: clamp(30px, 9vw, 44px);
    overflow-wrap: anywhere;
}

.wallet-amount.is-masked span { letter-spacing: .1em; }

.wallet-side {
    display: grid;
    align-content: space-between;
    justify-items: center;
    gap: 14px;
}

.eye-btn {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    color: var(--ink);
    background: radial-gradient(circle at 35% 30%, #fff, #DDE6FF);
    box-shadow: 0 10px 20px -12px var(--blue), inset 0 0 0 1px rgba(65, 105, 225, .15);
}

.seal {
    display: grid;
    justify-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: #4A5068;
}

.seal svg { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(0, 143, 114, .35)); }

/* ==========================================================================
   3. Account number + holder
   ========================================================================== */
.acct {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, .7);
}

.acct-row {
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    overflow: hidden;
}

/* the white face is cut into an arrow; the tone shows through at the end */
.acct-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--edge);
}

.acct-row > .face {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #fff, #F7F8FC);
    clip-path: var(--cut);
}

.acct-num {
    --edge: linear-gradient(200deg, #4169E1, #8FB0FF 45%, #DDE6FF);
    --cut: polygon(0 0, calc(100% - 92px) 0, calc(100% - 58px) 50%, calc(100% - 92px) 100%, 0 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
}

.acct-num .id-ic {
    width: clamp(48px, 13vw, 60px);
    border-radius: 17px;
}

.acct-num strong {
    display: block;
    margin-top: 2px;
    font-family: var(--head);
    font-size: clamp(16px, 4.8vw, 22px);
    font-weight: 800;
    letter-spacing: .02em;
    word-spacing: .25em;
    color: var(--ink);
    white-space: nowrap;
}

.acct-num .copy-btn {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(4px);
}

.acct-meta {
    --edge: linear-gradient(90deg, #008F72, #5FE0BD 9%, #DDF5EB 18%, #fff 40%, #fff 70%, #FFE1CF 84%, #FFB27F 92%, #FF6B35);
    --cut: polygon(18px 0, calc(100% - 52px) 0, calc(100% - 22px) 50%, calc(100% - 52px) 100%, 18px 100%, 0 50%);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 1px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 52px 14px 22px;
}

.acct-meta .sep { height: 48px; background: #D7DAE3; }

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.meta-item .id-ic {
    width: clamp(40px, 11vw, 52px);
    font-size: clamp(18px, 5vw, 22px);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, #fff);
    box-shadow: none;
}

.meta-item b {
    display: block;
    font-family: var(--head);
    font-size: clamp(12.5px, 3.7vw, 16px);
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   4. Deposit / withdraw
   ========================================================================== */
.cash-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cash-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 14px 10px;
    border-radius: 26px;
    box-shadow: var(--shadow);
}

.cash-btn .orb {
    width: clamp(44px, 12.5vw, 62px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(18px, 5.5vw, 26px);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .35), 0 10px 18px -10px rgba(0, 0, 0, .35);
}

.cash-btn .bar { height: 46px; }

.cash-btn b {
    display: block;
    font-family: var(--head);
    font-size: clamp(13px, 3.9vw, 19px);
    font-weight: 800;
    letter-spacing: 0;
}

.cash-btn small {
    display: block;
    font-size: clamp(9.5px, 2.8vw, 12px);
    line-height: 1.3;
}

.cash-btn .go { width: clamp(30px, 8.5vw, 42px); height: clamp(30px, 8.5vw, 42px); }

.cash-btn.deposit {
    color: #fff;
    background: linear-gradient(120deg, #FF8A4C, var(--orange) 45%, var(--red));
}

.cash-btn.deposit::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -10%;
    right: -10%;
    bottom: -60%;
    height: 90%;
    border-radius: 50%;
    background: rgba(255, 200, 87, .35);
}

.cash-btn.deposit .orb { color: var(--orange); }
.cash-btn.deposit .bar { background: rgba(255, 255, 255, .55); }
.cash-btn.deposit small { color: rgba(255, 255, 255, .92); }
.cash-btn.deposit .go { color: var(--orange); background: #fff; }

.cash-btn.withdraw {
    color: var(--ink);
    background: linear-gradient(180deg, #fff, #F2F6FF);
    border: 1.5px solid #D6E0FB;
}

.cash-btn.withdraw::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -10%;
    right: -10%;
    bottom: -62%;
    height: 90%;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(64, 196, 180, .55), rgba(65, 105, 225, .55));
}

.cash-btn.withdraw .orb { color: var(--blue); }
.cash-btn.withdraw .bar { background: #C9D3EE; }
.cash-btn.withdraw b { color: #1B2A6B; }
.cash-btn.withdraw small { color: var(--muted); }
.cash-btn.withdraw .go { color: #fff; background: linear-gradient(140deg, #6C8CFF, var(--blue)); }

/* ==========================================================================
   5. Totals
   ========================================================================== */
.totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.total {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 26px;
    border: 2px solid transparent;
    background:
        linear-gradient(135deg, #fff 40%, color-mix(in srgb, var(--c) 10%, #fff)) padding-box,
        linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c2) 40%, #fff) 45%, var(--c)) border-box;
    box-shadow: 0 16px 30px -22px var(--c);
}

.total::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -10%;
    right: -10%;
    bottom: -70%;
    height: 90%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c2) 35%, transparent);
}

.total > svg { width: clamp(48px, 14vw, 66px); height: clamp(48px, 14vw, 66px); }

.total small { display: block; font-size: clamp(11px, 3.3vw, 14px); color: #5D6478; }

.total strong {
    display: block;
    font-family: var(--head);
    font-size: clamp(17px, 5.2vw, 25px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.total .go {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    font-size: 11px;
}

/* ---------- dashboard balance card (wc-*), sized to its own width ---------- */
.wcard {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: clamp(calc(16px * .4), 4cqw, 40px);
    padding: clamp(calc(5px * .4), 1.5cqw, 16px);
    background:
        radial-gradient(48% 70% at 0% 0%, #4169E1 0%, rgba(65, 105, 225, .75) 22%, rgba(143, 176, 255, .45) 45%, transparent 70%),
        radial-gradient(40% 55% at 0% 100%, #2D8CF0 0%, rgba(64, 196, 180, .45) 40%, transparent 70%),
        radial-gradient(42% 65% at 100% 0%, #FF6B35 0%, rgba(255, 138, 76, .7) 25%, rgba(255, 200, 150, .4) 50%, transparent 72%),
        radial-gradient(45% 60% at 100% 100%, #FF6B35 0%, rgba(255, 178, 127, .55) 35%, transparent 70%),
        #F7F9FF;
    box-shadow: 0 22px 44px -28px rgba(65, 105, 225, .55), 0 4px 14px -8px rgba(14, 23, 51, .12);
}

.wc-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "art head eye"
        "art bal  seal"
        "art amt  amt";
    align-items: center;
    column-gap: clamp(calc(8px * .4), 2.6cqw, 30px);
    padding: clamp(calc(14px * .4), 4cqw, 44px) clamp(calc(10px * .4), 3cqw, 34px) clamp(calc(14px * .4), 4cqw, 44px) clamp(calc(6px * .4), 2cqw, 22px);
    border-radius: clamp(calc(12px * .4), 3.2cqw, 32px);
    border: 1px solid rgba(255, 255, 255, .9);
    background:
        radial-gradient(36% 34% at 0% 100%, rgba(65, 105, 225, .32), transparent 70%),
        radial-gradient(46% 30% at 92% 100%, rgba(255, 107, 53, .45), rgba(255, 178, 127, .2) 50%, transparent 75%),
        radial-gradient(30% 40% at 82% 18%, rgba(221, 230, 255, .8), transparent 70%),
        rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 0 #fff;
}

.wc-art {
    grid-area: art;
    position: relative;
    width: clamp(calc(78px * .4), 26cqw, 300px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: clamp(calc(6px * .4), 2cqw, 20px);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 56%, #FFF1E8 72%, #fff);
    box-shadow: 0 0 0 clamp(calc(4px * .4), 1.4cqw, 14px) rgba(255, 255, 255, .85), 0 18px 36px -20px #FF6B35;
}

/* orange, blue and green arcs, plus the scattered dots */
.wc-art::before,
.wc-art::after,
.wc-art .arc {
    content: "";
    position: absolute;
    inset: calc(clamp(calc(6px * .4), 2cqw, 20px) * -1);
    border-radius: 50%;
    border: clamp(calc(2px * .4), .55cqw, 6px) solid transparent;
    pointer-events: none;
}

.wc-art::before { border-left-color: #FF6B35; border-bottom-color: rgba(255, 107, 53, .0); transform: rotate(20deg); }
.wc-art::after { border-top-color: #4169E1; border-right-color: #8FB0FF; transform: rotate(40deg); clip-path: inset(0 0 45% 45%); }
.wc-art .arc { border-bottom-color: #40C4B4; border-right-color: #3FD08F; transform: rotate(20deg); clip-path: inset(50% 0 0 40%); }

.wc-art .dots {
    position: absolute;
    top: 8%;
    left: 4%;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FF6B35;
    box-shadow: 1500% -200% 0 -10% #4169E1, 2400% 2100% 0 -20% #FF6B35, 2300% 2500% 0 -40% #4169E1;
}

.wc-art svg { width: 72%; height: 72%; filter: drop-shadow(0 10px 12px rgba(233, 75, 53, .3)); }

.wc-head { grid-area: head; align-self: end; min-width: 0; }

.wcard .greet {
    gap: clamp(calc(6px * .4), 1.4cqw, 14px);
    padding: clamp(calc(5px * .4), 1.2cqw, 12px) clamp(calc(12px * .4), 3cqw, 30px) clamp(calc(5px * .4), 1.2cqw, 12px) clamp(calc(9px * .4), 2cqw, 20px);
    font-size: clamp(calc(12px * .4), 3cqw, 32px);
    background: rgba(252, 228, 214, .75);
}

.wcard .greet svg { width: 2.1em; height: 1.3em; }

.wc-motto {
    margin-top: clamp(calc(6px * .4), 1.8cqw, 20px);
    font-size: clamp(calc(11px * .4), 2.6cqw, 28px);
    color: #5D6478;
}

.wc-bal { grid-area: bal; margin-top: clamp(calc(8px * .4), 2.6cqw, 28px); min-width: 0; }

.wc-bal h2 {
    font-family: var(--head);
    font-size: clamp(calc(12px * .4), 3cqw, 32px);
    font-weight: 800;
    letter-spacing: .02em;
    color: #13235E;
    white-space: nowrap;
}

.wc-bal p {
    font-size: clamp(calc(10.5px * .4), 2.5cqw, 27px);
    color: #6B7186;
    white-space: nowrap;
}

.wc-amt {
    grid-area: amt;
    display: flex;
    align-items: baseline;
    gap: .18em;
    margin-top: clamp(calc(4px * .4), 1.2cqw, 14px);
    font-family: var(--head);
    font-size: clamp(calc(28px * .4), 9.4cqw, 104px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--ink);
    white-space: nowrap;
}

.wc-amt em { font-style: normal; font-size: .72em; color: var(--orange); }
.wc-amt.is-masked span { letter-spacing: .08em; }

.wc-eye {
    grid-area: eye;
    align-self: start;
    justify-self: end;
    width: clamp(calc(40px * .4), 9.6cqw, 104px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: clamp(calc(16px * .4), 3.6cqw, 40px);
    color: #13235E;
    background: radial-gradient(circle at 35% 30%, #fff, #DCE6FF);
    box-shadow: 0 0 0 clamp(calc(3px * .4), .8cqw, 8px) rgba(255, 255, 255, .8), 0 12px 24px -12px #4169E1;
}

.wc-seal {
    grid-area: seal;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: clamp(calc(6px * .4), 1.6cqw, 18px);
    margin-top: clamp(calc(8px * .4), 2.6cqw, 28px);
    font-size: clamp(calc(9.5px * .4), 2.2cqw, 24px);
    line-height: 1.3;
    color: #2B3350;
}

.wc-seal svg { width: clamp(calc(28px * .4), 7cqw, 76px); height: clamp(calc(28px * .4), 7cqw, 76px); filter: drop-shadow(0 8px 10px rgba(0, 143, 114, .35)); }
.wc-seal i { align-self: stretch; width: 1px; background: #C9CCD6; }

/* ---------- account number, card holder and the two cash buttons (ag-*) ---------- */
.agroup {
    container-type: inline-size;
    display: grid;
    gap: clamp(calc(10px * .4), 2.2cqw, 24px);
    padding: clamp(calc(8px * .4), 2.2cqw, 24px);
    border-radius: clamp(calc(24px * .4), 5cqw, 50px);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 20px 40px -30px rgba(65, 105, 225, .5);
}

.ag-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    border-radius: clamp(calc(20px * .4), 4.6cqw, 50px);
    box-shadow: 0 16px 30px -24px rgba(65, 105, 225, .6);
}

/* white face cut into an arrow; the tone shows through behind the tip */
.ag-row > .face {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #fff, #F6F8FD);
    clip-path: var(--cut);
}

.ag-num {
    --cut: polygon(0 0, 80% 0, 86.5% 50%, 80% 100%, 0 100%);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(calc(10px * .4), 3.6cqw, 40px);
    padding: clamp(calc(12px * .4), 3cqw, 32px) clamp(calc(10px * .4), 3cqw, 32px) clamp(calc(12px * .4), 3cqw, 32px) clamp(calc(12px * .4), 4cqw, 44px);
    background:
        radial-gradient(60% 120% at 100% 100%, #2D8CF0, transparent 70%),
        linear-gradient(110deg, #E9EEFC 60%, #8FB0FF 82%, #4169E1);
}

.ag-ic {
    width: clamp(calc(42px * .4), 11cqw, 120px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 26%;
    font-size: clamp(calc(17px * .4), 4.4cqw, 48px);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, #7FD3FF, #2D8CF0 45%, #4169E1);
    box-shadow: 0 12px 22px -12px #4169E1, inset 0 1px 0 rgba(255, 255, 255, .5);
}

.ag-ic.soft { color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); box-shadow: 0 10px 20px -14px var(--c), inset 0 0 0 1px rgba(255, 255, 255, .9); }

.ag-cap {
    display: block;
    font-family: var(--head);
    font-size: clamp(calc(9px * .4), 2.2cqw, 24px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5D6478;
    white-space: nowrap;
}

.ag-num strong {
    display: block;
    margin-top: .25em;
    font-family: var(--head);
    font-size: clamp(calc(14px * .4), 3.7cqw, 40px);
    font-weight: 800;
    word-spacing: .55em;
    color: var(--ink);
    white-space: nowrap;
}

.ag-copy {
    width: clamp(calc(38px * .4), 9.4cqw, 100px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 28%;
    font-size: clamp(calc(15px * .4), 3.8cqw, 40px);
    color: var(--ink);
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ag-copy.is-copied { color: #fff; background: var(--green); }

.ag-meta {
    --cut: polygon(0 0, 90% 0, 96.5% 50%, 90% 100%, 0 100%);
    grid-template-columns: minmax(0, 1.25fr) 1px minmax(0, 1fr);
    gap: clamp(calc(8px * .4), 2.6cqw, 30px);
    padding: clamp(calc(10px * .4), 2.6cqw, 28px) clamp(calc(26px * .4), 8cqw, 86px) clamp(calc(10px * .4), 2.6cqw, 28px) clamp(calc(12px * .4), 4cqw, 44px);
    background:
        radial-gradient(40% 90% at 100% 100%, #FF6B35, transparent 70%),
        linear-gradient(110deg, #fff 70%, #FFD5BD 88%, #FF8A4C);
}

/* green wave across the bottom-left corner */
.ag-meta::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -6%;
    bottom: -55%;
    width: 46%;
    height: 85%;
    border-radius: 50%;
    background: linear-gradient(20deg, #008F72, #3FD08F 30%, rgba(221, 245, 235, .6) 60%, transparent 80%);
    opacity: .85;
    pointer-events: none;
}

.ag-meta > * { position: relative; z-index: 1; }
.ag-meta > .face { position: absolute; z-index: -1; }
.ag-meta .sep { align-self: stretch; margin: 6% 0; background: #C9CCD6; }

.ag-item {
    display: flex;
    align-items: center;
    gap: clamp(calc(8px * .4), 2.6cqw, 30px);
    min-width: 0;
}

.ag-item .ag-ic { width: clamp(calc(38px * .4), 10cqw, 110px); }

.ag-item b {
    display: block;
    margin-top: .2em;
    font-family: var(--head);
    font-size: clamp(calc(12px * .4), 3cqw, 34px);
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
}

/* deposit / withdraw */
.ag-cash {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(calc(8px * .4), 2.4cqw, 26px);
}

.ag-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(5px * .4), 1.4cqw, 18px);
    padding: clamp(calc(10px * .4), 2.6cqw, 30px) clamp(calc(7px * .4), 1.8cqw, 22px);
    border-radius: clamp(calc(20px * .4), 4.6cqw, 50px);
}

.ag-btn .orb {
    width: clamp(calc(36px * .4), 11.4cqw, 130px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(15px * .4), 4.6cqw, 52px);
    background: #fff;
}

.ag-btn .bar { height: 70%; min-height: 30px; }

.ag-btn b {
    display: block;
    font-family: var(--head);
    font-size: clamp(calc(11px * .4), 3.3cqw, 36px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.ag-btn small {
    display: block;
    margin-top: .3em;
    font-size: clamp(calc(8.5px * .4), 2.25cqw, 25px);
    line-height: 1.3;
}

.ag-btn .chev {
    width: clamp(calc(26px * .4), 7.4cqw, 84px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(11px * .4), 2.8cqw, 30px);
}

.ag-btn.dep {
    color: #fff;
    background:
        radial-gradient(70% 60% at 50% 120%, rgba(255, 200, 87, .55), transparent 70%),
        linear-gradient(120deg, #E94B35 0%, #FF6B35 40%, #FF8A4C 75%, #FFA05C);
    box-shadow: 0 18px 30px -18px #E94B35;
}

.ag-btn.dep .orb { color: #FF6B35; box-shadow: 0 0 0 clamp(calc(3px * .4), 1.2cqw, 14px) rgba(255, 255, 255, .3), 0 10px 18px -8px rgba(201, 53, 42, .6); }
.ag-btn.dep .bar { background: rgba(255, 255, 255, .55); }
.ag-btn.dep small { color: rgba(255, 255, 255, .92); }
.ag-btn.dep .chev { color: #FF6B35; background: #fff; box-shadow: 0 8px 14px -8px rgba(201, 53, 42, .6); }

.ag-btn.wd {
    color: #13235E;
    border: 1.5px solid transparent;
    background:
        radial-gradient(90% 40% at 50% 112%, rgba(64, 196, 180, .7), rgba(65, 105, 225, .45) 50%, transparent 75%) padding-box,
        linear-gradient(180deg, #fff, #EDF2FF) padding-box,
        linear-gradient(110deg, #40C4B4, #8FB0FF 40%, #4169E1 80%, #3FD08F) border-box;
    box-shadow: 0 18px 30px -20px #4169E1;
}

.ag-btn.wd .orb { color: #2D6BE8; box-shadow: 0 0 0 clamp(calc(3px * .4), 1.2cqw, 14px) rgba(220, 230, 255, .6), 0 10px 18px -10px #4169E1; }
.ag-btn.wd .bar { background: #C9D3EE; }
.ag-btn.wd small { color: #6B7186; }
.ag-btn.wd .chev { color: #fff; background: radial-gradient(circle at 35% 30%, #6C8CFF, #2D6BE8); box-shadow: 0 8px 14px -8px #4169E1; }

/* narrow phones: the seal keeps only its shield, the cash buttons drop the divider */
/* narrow phones: the seal drops beside the amount so the titles get the full width */


/* ---------- total deposit / withdraw (tc-*) ---------- */
.tcards {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(calc(10px * .4), 2.6cqw, 28px);
}

.tc {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(6px * .4), 1.6cqw, 18px);
    padding: clamp(calc(14px * .4), 4cqw, 44px) clamp(calc(8px * .4), 2cqw, 22px);
    border-radius: clamp(calc(20px * .4), 5cqw, 50px);
    border: 2.5px solid transparent;
    background:
        radial-gradient(circle farthest-corner at 82% 92%, transparent 79%, color-mix(in srgb, var(--c2) 45%, #fff) 79.5% 87%, var(--c) 87.5%) padding-box,
        radial-gradient(130% 60% at 55% 138%, var(--c) 0 38%, color-mix(in srgb, var(--c2) 45%, #fff) 39% 54%, transparent 55%) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 55%) padding-box,
        linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c2) 45%, #fff) 45%, var(--c)) border-box;
    box-shadow: 0 18px 30px -22px var(--c);
}

/* three dots in the top-right corner */
.tc::after {
    content: "";
    position: absolute;
    top: 14%;
    right: 12%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 7px 3px 0 0 var(--c), 13px 8px 0 0 color-mix(in srgb, var(--c) 60%, #fff);
    opacity: .7;
}

.tc > svg { width: clamp(calc(46px * .4), 14cqw, 150px); height: clamp(calc(46px * .4), 14cqw, 150px); filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--c) 35%, transparent)); }
.tc small { display: block; font-size: clamp(calc(10.5px * .4), 2.8cqw, 30px); color: #5D6478; white-space: nowrap; }

.tc strong {
    display: block;
    font-family: var(--head);
    font-size: clamp(calc(15px * .4), 4.4cqw, 50px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.tc .chev {
    align-self: center;
    width: clamp(calc(24px * .4), 6.6cqw, 72px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(10px * .4), 2.4cqw, 26px);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 13%, #fff);
}

/* ==========================================================================
   6. Featured tools
   ========================================================================== */
.tools {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(calc(10px * .4), 3cqw, 22px);
}

.tool {
    --band: color-mix(in srgb, var(--c2) 45%, #fff);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(calc(6px * .4), 2cqw, 14px);
    padding: clamp(calc(10px * .4), 3.4cqw, 26px) 6px clamp(calc(10px * .4), 3cqw, 22px);
    border-radius: clamp(calc(18px * .4), 5.4cqw, 36px);
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--c) 10%, #fff);
    /* curved two-tone bands sweeping across the top-left and bottom-right corners */
    background:
        radial-gradient(ellipse farthest-corner at 76% 76%, transparent 76%, var(--band) 76.5% 84%, color-mix(in srgb, var(--c) 85%, var(--c2)) 84.5%, var(--c)),
        radial-gradient(ellipse farthest-corner at 24% 24%, transparent 77%, var(--band) 77.5% 85%, color-mix(in srgb, var(--c) 85%, var(--c2)) 85.5%, var(--c)),
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 9%, #fff), #fff 62%);
    box-shadow: 0 16px 30px -22px var(--c), 0 2px 8px rgba(14, 23, 51, .05);
}

/* dotted sparkles: three in the top-right, three in the bottom-left */
.tool::before,
.tool::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 70%, #fff);
    opacity: .85;
}

.tool::before { top: 11%; right: 16%; box-shadow: 7px 4px 0 0 color-mix(in srgb, var(--c) 70%, #fff), 11px 11px 0 0 color-mix(in srgb, var(--c) 70%, #fff); }
.tool::after { bottom: 20%; left: 9%; box-shadow: 5px 7px 0 0 var(--c), 11px 12px 0 0 #FFC857; }

.tool svg {
    width: clamp(calc(46px * .4), 15cqw, 100px);
    height: clamp(calc(46px * .4), 15cqw, 100px);
    filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--c) 32%, transparent));
}

.tool strong {
    font-size: clamp(calc(11px * .4), 3.4cqw, 18px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.tool .go {
    width: clamp(calc(26px * .4), 7.6cqw, 44px);
    height: clamp(calc(26px * .4), 7.6cqw, 44px);
    font-size: clamp(calc(10px * .4), 2.6cqw, 15px);
    background: color-mix(in srgb, var(--c) 14%, #fff);
    box-shadow: 0 6px 12px -8px var(--c);
}

/* pink, used by 5 Day Salary and Daily Mission as in the art */
.t-pk { --c: #E94B8A; --c2: #FF8EC0; --cd: #C9356F; }

/* ==========================================================================
   7. Refer link
   ========================================================================== */
.refer { padding: 20px 16px 18px; --wa: #FF6B35; --wt: auto; --wb: -40%; }
.refer::before { top: auto; bottom: -70%; right: -30%; height: 90%; opacity: .5; }
.refer::after { opacity: 0; }

.refer-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.refer-ic {
    position: relative;
    width: clamp(62px, 18vw, 84px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 6px;
    border-radius: 50%;
    font-size: clamp(24px, 7vw, 32px);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, #FFB27F, var(--orange) 50%, var(--red));
    box-shadow: 0 0 0 8px rgba(252, 228, 214, .8), 0 16px 26px -14px var(--red);
}

.refer-ic::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-left-color: var(--orange);
    border-top-color: rgba(255, 107, 53, .4);
    transform: rotate(-20deg);
}

.refer-head .cap { color: var(--orange); letter-spacing: .2em; }

.refer-head h2 {
    margin-top: 2px;
    font-family: var(--head);
    font-size: clamp(16px, 4.5vw, 21.5px);
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.1;
}

.refer-head h2 b { color: var(--orange); }
.refer-head p { margin-top: 4px; font-size: clamp(11.5px, 3.3vw, 14px); color: #5D6478; }

.refer-art {
    position: relative;
    width: clamp(64px, 19vw, 92px);
    align-self: start;
}

.refer-art svg { width: 70%; }

.refer-art span {
    position: absolute;
    top: -4px;
    right: -6px;
    padding: 4px 6px;
    border-radius: 10px;
    font-family: var(--script);
    font-size: clamp(13px, 3.8vw, 17px);
    line-height: .95;
    color: var(--ink-2);
    background: rgba(252, 228, 214, .8);
    transform: rotate(-8deg);
}

.ref-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--orange);
    box-shadow: 0 0 0 5px rgba(252, 228, 214, .55), 0 12px 24px -18px var(--orange);
}

.ref-link > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: #F3F4F7;
}

.ref-link input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 600;
    color: var(--ink);
}

.copy-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(140deg, #FF8A4C, var(--orange) 50%, var(--red));
    box-shadow: 0 10px 18px -10px var(--red);
}

.copy-pill.is-copied { background: var(--green); }

.share-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #5D6478;
}

.share-title::before,
.share-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #D7DAE3;
}

.share-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(5px, 1.8vw, 10px);
}

.share-row a,
.share-row button {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: clamp(17px, 5.4vw, 24px);
    color: #fff;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, #fff), 0 10px 16px -10px var(--brand);
}

.share-row .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* ==========================================================================
   8. Team overview
   ========================================================================== */
.team-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(calc(10px * .4), 3cqw, 24px);
}

.stat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(calc(8px * .4), 2.6cqw, 22px);
    padding: clamp(calc(12px * .4), 3.4cqw, 26px) clamp(calc(10px * .4), 2.6cqw, 22px) clamp(calc(14px * .4), 4cqw, 30px);
    border-radius: clamp(calc(18px * .4), 4.6cqw, 34px);
    background: linear-gradient(160deg, #fff 45%, color-mix(in srgb, var(--c) 6%, #fff));
    border: 1px solid color-mix(in srgb, var(--c) 12%, #fff);
    box-shadow: 0 16px 30px -24px var(--c), 0 2px 8px rgba(14, 23, 51, .04);
}

/* soft hills along the bottom: a low one on the left, a tall one rising to the right */
.stat::before,
.stat::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.stat::before {
    height: 34%;
    background: color-mix(in srgb, var(--c2) 22%, transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V30C30 40 55 80 95 92 120 99 150 100 200 100Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V30C30 40 55 80 95 92 120 99 150 100 200 100Z'/%3E%3C/svg%3E");
}

.stat::after {
    height: 58%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 12%, transparent), color-mix(in srgb, var(--c2) 40%, transparent));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V88C40 84 70 92 105 78 145 62 160 18 200 8V100Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V88C40 84 70 92 105 78 145 62 160 18 200 8V100Z'/%3E%3C/svg%3E");
}

.stat-ic {
    width: clamp(calc(42px * .4), 13cqw, 100px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 26%;
    font-size: clamp(calc(19px * .4), 5.6cqw, 44px);
    color: var(--c);
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--c) 13%, #fff));
    box-shadow: 0 12px 20px -14px var(--c), inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.stat-ic svg { width: 72%; height: 72%; }

.stat small {
    display: block;
    padding-right: clamp(calc(24px * .4), 7cqw, 50px);
    font-size: clamp(calc(10.5px * .4), 3.1cqw, 22px);
    line-height: 1.25;
    color: #4A5068;
}

.stat strong {
    display: block;
    margin-top: .2em;
    font-family: var(--head);
    font-size: clamp(calc(16px * .4), 4.9cqw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--ink);
    white-space: nowrap;
}

.stat .bars {
    position: absolute;
    top: clamp(calc(8px * .4), 2.4cqw, 18px);
    right: clamp(calc(8px * .4), 2.4cqw, 18px);
    width: clamp(calc(24px * .4), 6.4cqw, 46px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(10px * .4), 2.6cqw, 18px);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, #fff);
}

/* trend pill under the value */
.trend {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: clamp(calc(6px * .4), 1.8cqw, 14px);
    padding: .35em .9em;
    border-radius: 999px;
    font-size: clamp(calc(10px * .4), 2.7cqw, 18px);
    font-weight: 600;
    color: #2B3350;
    background: color-mix(in srgb, #22C55E 12%, #fff);
}

.trend i { color: #16A34A; font-size: .9em; transform: rotate(45deg); }
.trend.red { background: color-mix(in srgb, #E94B35 11%, #fff); }
.trend.red i { color: #E94B35; }

/* ==========================================================================
   9. Account services
   ========================================================================== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.svc {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 128px;
    padding: 16px 12px;
    border-radius: 26px;
    background: linear-gradient(140deg, #fff 30%, color-mix(in srgb, var(--c) 8%, #fff));
    border: 1.5px solid color-mix(in srgb, var(--c) 22%, #fff);
    box-shadow: 0 16px 30px -24px var(--c);
}

.svc::before,
.svc::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.svc::before {
    top: -60%;
    left: -24%;
    width: 60%;
    height: 90%;
    background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c2) 40%, transparent) 50%, transparent 75%);
    opacity: .55;
}

.svc::after {
    bottom: -62%;
    right: -20%;
    width: 80%;
    height: 90%;
    background: linear-gradient(330deg, var(--c), color-mix(in srgb, var(--c2) 45%, transparent) 45%, transparent 75%);
    opacity: .7;
}

.blob {
    width: clamp(56px, 17vw, 84px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c2) 45%, #fff), color-mix(in srgb, var(--c) 30%, #fff));
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), 0 12px 22px -14px var(--c);
}

.blob > i { color: var(--c); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12)); }
.blob svg { width: 70%; height: 70%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .15)); }

.svc h3 {
    font-family: var(--head);
    font-size: clamp(14px, 4.2vw, 19px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--ink);
}

.svc p {
    margin-top: 6px;
    padding-right: 30px;
    font-size: clamp(10.5px, 3.1vw, 13px);
    line-height: 1.3;
    color: #5D6478;
}

.svc .go {
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    font-size: 12px;
    background: rgba(255, 255, 255, .85);
}

.svc.wide {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) 1px auto;
    gap: 12px;
    padding: 20px 14px;
}

.svc.wide .cap { font-size: clamp(8.5px, 2.5vw, 11px); letter-spacing: .3em; color: #4A5068; font-weight: 600; }

.svc.wide h3 {
    margin-top: 6px;
    font-size: clamp(17px, 5.2vw, 25px);
    letter-spacing: -.02em;
}

.svc.wide h3 b { color: var(--c); }
.svc.wide p { padding-right: 0; }
.svc.wide .sep { align-self: stretch; background: #C9D8CF; margin: 6px 0; }

.timer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 16px;
    font-size: clamp(11px, 3.2vw, 13.5px);
    line-height: 1.25;
    color: #2B3350;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 8px 18px -14px var(--c);
}

.timer-box > i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(140deg, var(--c2), var(--c));
}

.timer-box b {
    display: block;
    font-family: var(--head);
    font-weight: 800;
    color: var(--ink);
}

/* ---------- dashboard service tiles, sized to the grid they sit in ---------- */
.svc-grid,
.help { container-type: inline-size; }

.svc-grid { gap: clamp(calc(10px * .4), 2.8cqw, 24px); }
.help, .help-row { gap: clamp(calc(10px * .4), 2.8cqw, 24px); }

.svc-grid > .svc:not(.wide),
.help-row:not(.three) > .svc {
    --band: color-mix(in srgb, var(--c2) 40%, #fff);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(6px * .4), 1.8cqw, 16px);
    min-height: 0;
    padding: clamp(calc(14px * .4), 4.4cqw, 34px) clamp(calc(8px * .4), 2.2cqw, 20px) clamp(calc(14px * .4), 4.4cqw, 34px) clamp(calc(8px * .4), 2.4cqw, 22px);
    border-radius: clamp(calc(20px * .4), 5.4cqw, 40px);
    border: 1.5px solid color-mix(in srgb, var(--c) 20%, #fff);
    background:
        radial-gradient(ellipse farthest-corner at 78% 80%, transparent 80%, var(--band) 80.5% 87.5%, color-mix(in srgb, var(--c) 80%, var(--c2)) 88%),
        radial-gradient(ellipse farthest-corner at 22% 20%, transparent 75%, var(--band) 75.5% 83.5%, color-mix(in srgb, var(--c) 85%, var(--c2)) 84%),
        linear-gradient(140deg, #fff 35%, color-mix(in srgb, var(--c) 9%, #fff));
}

/* corner dots instead of the old blobs */
.svc-grid > .svc:not(.wide)::before,
.svc-grid > .svc:not(.wide)::after,
.help-row:not(.three) > .svc::before,
.help-row:not(.three) > .svc::after {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: .85;
    background: var(--c);
}

.svc-grid > .svc:not(.wide)::before,
.help-row:not(.three) > .svc::before { top: 12%; right: 12%; box-shadow: 7px 3px 0 0 var(--c), 3px 10px 0 0 color-mix(in srgb, var(--c) 55%, #fff); }

.svc-grid > .svc:not(.wide)::after,
.help-row:not(.three) > .svc::after { bottom: 14%; left: 8%; box-shadow: 7px 2px 0 0 var(--c), 2px 9px 0 0 color-mix(in srgb, var(--c) 55%, #fff); }

.svc-grid > .svc:not(.wide) .blob,
.help-row:not(.three) > .svc .blob {
    width: clamp(calc(48px * .4), 13.6cqw, 120px);
    border-radius: 32% 30% 34% 30% / 30% 34% 30% 34%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c2) 40%, #fff), color-mix(in srgb, var(--c) 32%, #fff));
}

.help-row:not(.three) > .svc .blob > i { font-size: clamp(calc(20px * .4), 6cqw, 50px) !important; }

.svc-grid > .svc:not(.wide) h3,
.help-row:not(.three) > .svc h3 {
    font-size: clamp(calc(11.5px * .4), 3.25cqw, 28px);
    letter-spacing: -.02em;
}

.svc-grid > .svc:not(.wide) p,
.help-row:not(.three) > .svc p {
    margin-top: .45em;
    padding-right: 0;
    font-size: clamp(calc(9.5px * .4), 2.55cqw, 20px);
}

.svc-grid > .svc:not(.wide) .go,
.help-row:not(.three) > .svc .go {
    position: static;
    align-self: end;
    width: clamp(calc(26px * .4), 7cqw, 56px);
    height: clamp(calc(26px * .4), 7cqw, 56px);
    font-size: clamp(calc(10px * .4), 2.6cqw, 20px);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 14px -8px var(--c);
}

/* the wide timer tile */
.svc-grid > .svc.wide {
    gap: clamp(calc(8px * .4), 2.6cqw, 24px);
    padding: clamp(calc(16px * .4), 4.6cqw, 40px) clamp(calc(10px * .4), 3cqw, 28px);
    border-radius: clamp(calc(20px * .4), 5.4cqw, 40px);
}

.svc-grid > .svc.wide .blob { width: clamp(calc(54px * .4), 16cqw, 140px); }

.svc-grid > .svc.wide .cap {
    font-size: clamp(calc(8px * .4), 2.2cqw, 16px);
    letter-spacing: .24em;
    white-space: nowrap;
}

.svc-grid > .svc.wide h3 {
    font-size: clamp(calc(15px * .4), 4.4cqw, 36px);
    white-space: nowrap;
}

.svc-grid > .svc.wide p { font-size: clamp(calc(9.5px * .4), 2.6cqw, 20px); }
.svc-grid > .svc.wide .timer-box { font-size: clamp(calc(10px * .4), 2.8cqw, 20px); padding: clamp(calc(8px * .4), 2.4cqw, 18px); }
.svc-grid > .svc.wide .timer-box > i { width: clamp(calc(28px * .4), 7.4cqw, 54px); height: clamp(calc(28px * .4), 7.4cqw, 54px); }


/* help center tiles share the grid above; icon fonts scale with it */
.svc-grid > .svc .blob > i { font-size: clamp(calc(20px * .4), 6cqw, 50px); }
.svc-grid > .svc .wa-badge { width: clamp(calc(22px * .4), 6.4cqw, 44px); height: clamp(calc(22px * .4), 6.4cqw, 44px); font-size: clamp(calc(11px * .4), 3.2cqw, 22px); }
.help .timer-box > i { font-size: 18px; background: radial-gradient(circle at 35% 30%, #5BE38D, #25D366 60%, #128C4A); }

/* ==========================================================================
   10. Help center
   ========================================================================== */
.help {
    display: grid;
    gap: 12px;
}

.help-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.help-row.three {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
}

.wa-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2.5px solid #fff;
    font-size: 15px;
    color: #fff;
    background: #25D366;
    box-shadow: 0 6px 12px -6px #25D366;
}

.help .blob { position: relative; }

.help-row.three .svc {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    padding: 16px 10px 18px;
}

.help-row.three .svc .blob { margin-bottom: 4px; }
.help-row.three .svc p { padding-right: 30px; }

.hex {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 24px 8px;
    text-align: center;
}

.hex > svg.shape {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 16px 22px rgba(255, 107, 53, .25));
}

.hex .face-ic { position: relative; width: clamp(52px, 15vw, 74px); }
.hex .face-ic svg { width: 100%; height: auto; }
.hex .wa-badge { right: -10px; top: -6px; bottom: auto; }

.hex h3 {
    font-family: var(--head);
    font-size: clamp(14px, 4.4vw, 21px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ink);
}

.hex h3 b { display: block; color: var(--orange); }
.hex p { font-size: clamp(10px, 3vw, 12.5px); line-height: 1.3; color: #5D6478; }
.hex .dash { width: 28px; height: 3px; border-radius: 2px; background: var(--orange); }

.prio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #F6D9C8;
    box-shadow: 0 10px 18px -14px var(--orange);
}

.prio-pill svg { width: 26px; height: 26px; }

.prio-pill span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.prio-pill span b { display: block; color: var(--orange); }
.prio-pill .go { width: 30px; height: 30px; font-size: 11px; --c: #FF6B35; }

/* ==========================================================================
   11. Service center
   ========================================================================== */
.status-side {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.status-side small {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5D6478;
}

.live-pill.big { padding: 9px 18px; font-size: 14px; letter-spacing: 0; text-transform: none; }

.svc-rows { display: grid; gap: 12px; }

.svc-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 24px;
    background: linear-gradient(100deg, #fff 45%, color-mix(in srgb, var(--c) 8%, #fff));
    border: 1px solid color-mix(in srgb, var(--c) 16%, #fff);
    box-shadow: 0 16px 30px -24px var(--c);
}

/* diagonal ribbons on the right */
.svc-row::before,
.svc-row::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
}

.svc-row::before {
    width: 38%;
    background: linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--c2) 45%, transparent) 40%, color-mix(in srgb, var(--c2) 45%, transparent) 62%, transparent 62%);
}

.svc-row::after {
    width: 24%;
    background: linear-gradient(135deg, transparent 50%, var(--c) 50%, var(--c2) 100%);
    opacity: .75;
}

.hex-ic {
    position: relative;
    width: clamp(64px, 19vw, 90px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
    background: linear-gradient(140deg, color-mix(in srgb, var(--c2) 60%, #fff), color-mix(in srgb, var(--c) 35%, #fff));
}

.hex-ic::before {
    content: "";
    position: absolute;
    inset: 9%;
    clip-path: inherit;
    background: linear-gradient(140deg, var(--c2), var(--c));
}

.hex-ic i {
    position: relative;
    width: 56%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(18px, 5.6vw, 26px);
    color: var(--c);
    background: #fff;
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35);
}

.hex-ic.plain i { background: none; color: #fff; box-shadow: none; font-size: clamp(22px, 7vw, 32px); }

.svc-row .cap {
    font-size: clamp(9px, 2.6vw, 11.5px);
    letter-spacing: .14em;
    color: #5D6478;
}

.svc-row strong {
    display: block;
    margin: 3px 0 7px;
    font-family: var(--head);
    font-size: clamp(18px, 5.6vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.svc-row strong b { color: var(--c); }

.ok-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    font-size: clamp(11px, 3.2vw, 13.5px);
    color: #2B3350;
    background: color-mix(in srgb, var(--c) 7%, #fff);
}

.ok-pill i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: #22C55E;
}

.svc-row .go {
    width: clamp(40px, 12vw, 54px);
    height: clamp(40px, 12vw, 54px);
    font-size: 16px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 10px 18px -12px var(--c);
}

/* ==========================================================================
   12. Register / login
   ========================================================================== */
body.auth::before {
    top: -30vmax;
    right: -40vmax;
    background: radial-gradient(closest-side, rgba(255, 107, 53, .26), rgba(252, 228, 214, .5) 55%, transparent);
}

body.auth::after {
    bottom: -34vmax;
    left: -40vmax;
    background: radial-gradient(closest-side, rgba(65, 105, 225, .22), rgba(143, 176, 255, .25) 55%, transparent);
}

.auth-wrap {
    width: var(--shell);
    margin: 0 auto;
    padding: 18px 16px 30px;
}

.auth-top {
    position: relative;
    display: grid;
    justify-items: center;
    padding-top: 18px;
}

.back-btn {
    position: absolute;
    top: 14px;
    left: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: #1B2A6B;
    background: #fff;
    box-shadow: var(--shadow);
}

.logo { display: grid; justify-items: center; }
.logo svg { width: clamp(110px, 32vw, 150px); height: auto; }

.logo b {
    margin-top: -2px;
    font-family: var(--head);
    font-size: clamp(26px, 8vw, 38px);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #13235E;
}

.logo b span { color: var(--orange); }

.logo small {
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 600;
    letter-spacing: .32em;
    color: #5D6478;
}

.tagline {
    position: absolute;
    top: 6px;
    right: -4px;
    font-family: var(--script);
    font-size: clamp(17px, 5vw, 24px);
    line-height: .95;
    color: #13235E;
    transform: rotate(-12deg);
}

.tagline span { display: block; color: var(--blue); padding-left: 10px; }
.tagline span + span { color: #13235E; padding-left: 20px; }

.tagline::after {
    content: "";
    display: block;
    width: 80%;
    height: 3px;
    margin: 2px 0 0 26px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
}

.auth-card {
    position: relative;
    isolation: isolate;
    margin-top: 26px;
    padding: 24px 16px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #fff;
    box-shadow: 0 24px 50px -32px rgba(65, 105, 225, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.auth-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    left: -6px;
    width: 46%;
    height: 60px;
    border-radius: 30px 60% 0 0;
    border-top: 6px solid #8FB0FF;
    opacity: .7;
}

.auth-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.auth-ic {
    position: relative;
    width: clamp(72px, 21vw, 96px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(30px, 9vw, 40px);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, #7FD3FF, #2D8CF0 45%, var(--blue));
    box-shadow: 0 0 0 9px rgba(255, 255, 255, .9), 0 0 0 10px #E6EBF8, 0 18px 28px -14px var(--blue);
}

.auth-ic .plus {
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: 32%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    color: var(--blue);
    background: #fff;
    border: 2px solid var(--blue);
}

.auth-head h1 {
    font-family: var(--head);
    font-size: clamp(25px, 7.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #13235E;
}

.auth-head h1 b { color: var(--blue); }

.auth-head p {
    margin-top: 6px;
    font-size: clamp(12.5px, 3.6vw, 15px);
    color: #5D6478;
}

.auth-head p::after {
    content: "";
    display: block;
    width: 38%;
    height: 5px;
    margin-top: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
}

.auth-form { display: grid; gap: 14px; margin-top: 22px; }

.field {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff 50%, color-mix(in srgb, var(--c) 6%, #fff));
    border: 1px solid #EEF0F6;
    box-shadow: 0 14px 26px -22px var(--c);
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* tone swoosh on the right end */
.field::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60%;
    right: -6%;
    width: 30%;
    height: 120%;
    border-radius: 0 0 0 100%;
    border-bottom: 5px solid var(--c);
    border-left: 2px solid transparent;
    opacity: .6;
}

.field:focus-within {
    border-color: color-mix(in srgb, var(--c) 45%, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 14px 26px -22px var(--c);
}

.field .f-ic {
    width: clamp(46px, 13vw, 60px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(18px, 5.4vw, 24px);
    color: #fff;
    background: radial-gradient(circle at 30% 25%, var(--c2), var(--c) 65%);
    box-shadow: 0 10px 18px -10px var(--c);
}

.field .bar { height: 32px; background: color-mix(in srgb, var(--c) 45%, #fff); }

.field label {
    display: block;
    font-size: clamp(13.5px, 4vw, 16.5px);
    font-weight: 600;
    color: #13235E;
}

.field input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: clamp(13px, 3.8vw, 15.5px);
    color: var(--ink);
}

.field input::placeholder { color: #8A90A2; }

.field .go {
    width: 44px;
    height: 44px;
    font-size: 15px;
    background: rgba(255, 255, 255, .9);
}

.t-pk { --c: #E94B8A; --c2: #FF8EC0; }

.submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 20px 70px;
    border: 0;
    border-radius: 999px;
    font-family: var(--head);
    font-size: clamp(17px, 5vw, 22px);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #40C4B4, #2D8CF0 30%, var(--blue) 55%, var(--purple) 85%, #C04CF0);
    box-shadow: 0 18px 30px -16px var(--purple);
}

.submit .arrow {
    position: absolute;
    right: 10px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    color: var(--purple);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .25);
}

.auth-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: clamp(13px, 3.8vw, 15px);
    color: #5D6478;
    white-space: nowrap;
}

.auth-foot::before,
.auth-foot::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #C9CCD6;
}

.auth-foot a { font-weight: 700; color: var(--blue); }

/* ==========================================================================
   13. Inner page kit (used by every page other than the dashboard)
   ========================================================================== */

/* page heading: back · two-tone title · subtitle */
.page-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 2px 0 4px;
}

.page-head .back-btn { position: static; width: 44px; height: 44px; font-size: 16px; }

.page-head h1 {
    font-family: var(--head);
    font-size: clamp(21px, 6.2vw, 28px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ink);
}

.page-head h1 b { color: var(--orange); }
.page-head p { margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* hero band at the top of an inner page */
.hero {
    --wt: -70%; --wr: -20%; --ww: 60%; --wh: 140%;
    --wb: -80%; --wl: -20%; --ww2: 45%; --wh2: 120%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
}

.hero .ring-art { width: clamp(76px, 22vw, 100px); }
.hero small { display: block; }

.hero strong {
    display: block;
    margin-top: 2px;
    font-family: var(--head);
    font-size: clamp(24px, 7.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
}

.hero strong em { font-style: normal; color: var(--orange); font-size: .7em; margin-right: 4px; }

.panel { padding: 18px 16px; }

.panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--head);
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.panel-title b { color: var(--orange); }
/* a bare <b> is its own flex item; pull it back to a normal word space */
.panel-title > b { margin-left: calc(.28em - 10px); }

.panel-title .tile {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(140deg, var(--c2, #FFB27F), var(--c, #FF6B35));
}

/* small stat chips in a row */
.mini-stats {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 10px;
}

.mini {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(160deg, #fff 40%, color-mix(in srgb, var(--c) 9%, #fff));
    border: 1px solid color-mix(in srgb, var(--c) 14%, #fff);
}

.mini i { font-size: 15px; color: var(--c); }
.mini small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.25; color: var(--muted); }

.mini b {
    display: block;
    margin-top: 2px;
    font-family: var(--head);
    font-size: clamp(14px, 4.2vw, 18px);
    font-weight: 800;
    color: var(--ink);
    overflow-wrap: break-word;
}

/* chips / tabs */
.tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}

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

.tabs a, .tabs button {
    flex-shrink: 0;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4A5068;
    background: #fff;
}

.tabs .active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(140deg, #FF8A4C, var(--orange) 50%, var(--red));
    box-shadow: 0 8px 16px -10px var(--red);
}

/* list of records (history, transactions, tickets) */
.list { display: grid; gap: 10px; }

.row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 20px;
    background: linear-gradient(100deg, #fff 55%, color-mix(in srgb, var(--c, #4169E1) 6%, #fff));
    border: 1px solid color-mix(in srgb, var(--c, #4169E1) 12%, #fff);
    box-shadow: 0 12px 24px -22px var(--c, #4169E1);
}

.row-ic {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: 18px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, #fff);
}

.row h3 { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.row small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.row .amt { display: grid; justify-items: end; gap: 4px; text-align: right; }

.row .amt b {
    font-family: var(--head);
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

.row .amt b.plus { color: var(--green); }
.row .amt b.minus { color: var(--red); }

/* status badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--green); background: var(--mint); }
.badge.wait { color: #B7791F; background: #FFF3D6; }
.badge.no { color: var(--red); background: var(--pink); }
.badge.info { color: var(--blue); background: #E3EAFC; }
.badge.run { color: var(--purple); background: #EEE5FF; }

/* key / value lines */
.kv > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed #E3E5EC;
    font-size: 13px;
}

.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }

/* plain form controls (the auth .field pill also works anywhere) */
.form { display: grid; gap: 14px; }
.control { display: grid; gap: 7px; }

.control > label {
    font-size: 12.5px;
    font-weight: 600;
    color: #13235E;
}

.control input,
.control select,
.control textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #E6E8F0;
    border-radius: 16px;
    outline: 0;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.control textarea { min-height: 110px; resize: vertical; }

.control input:focus,
.control select:focus,
.control textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, .12);
}

.control .hint { font-size: 11.5px; color: var(--muted); }

.input-addon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    border: 1.5px solid #E6E8F0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.input-addon:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 107, 53, .12); }
.control .input-addon input { border: 0; box-shadow: none; }
.input-addon > span { padding: 0 14px; font-weight: 700; color: var(--orange); }

/* quick amount chips */
.amount-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.amount-chips button {
    padding: 10px 4px;
    border: 1.5px solid #F6D9C8;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    background: #FFF8F3;
}

.amount-chips button.active { color: #fff; border-color: transparent; background: linear-gradient(140deg, #FF8A4C, var(--orange), var(--red)); }

/* selectable method cards (payment gateways, withdraw methods) */
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.method {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1.5px solid #E6E8F0;
    border-radius: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
}

.method input { position: absolute; opacity: 0; pointer-events: none; }

.method .logo-ic {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(140deg, var(--c2), var(--c));
}

.method small { font-size: 11px; font-weight: 500; color: var(--muted); }

.method:has(input:checked) {
    border-color: var(--orange);
    background: #FFF8F3;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, .12);
}

.method:has(input:checked)::after {
    content: "\f00c";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 900 10px "Font Awesome 6 Free";
    color: #fff;
    background: var(--orange);
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 22px;
    border: 0;
    border-radius: 999px;
    font-family: var(--head);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }
.btn-primary { color: #fff; background: linear-gradient(140deg, #FF8A4C, var(--orange) 50%, var(--red)); box-shadow: 0 14px 24px -14px var(--red); }
.btn-blue { color: #fff; background: linear-gradient(90deg, #40C4B4, #2D8CF0 30%, var(--blue) 60%, var(--purple)); box-shadow: 0 14px 24px -14px var(--purple); }
.btn-green { color: #fff; background: linear-gradient(140deg, #3FD08F, var(--green)); box-shadow: 0 14px 24px -14px var(--green); }
.btn-ghost { color: var(--ink); background: #fff; border: 1.5px solid #E6E8F0; }
.btn-soft { color: var(--orange); background: var(--pink); }

/* notice strip */
.note {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4A5068;
    background: color-mix(in srgb, var(--c, #4169E1) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--c, #4169E1) 18%, #fff);
}

.note > i { margin-top: 2px; color: var(--c, #4169E1); }

/* progress bar */
.progress { height: 9px; border-radius: 9px; background: #EEF0F6; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c2, #FFB27F), var(--c, #FF6B35)); }

/* empty state */
.empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 16px;
    text-align: center;
    color: var(--muted);
}

.empty .ring-art { width: 90px; }
.empty b { font-family: var(--head); font-size: 16px; color: var(--ink); }

/* pagination */
.pager { display: flex; justify-content: center; gap: 6px; }

.pager a {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border-radius: 12px;
    font-weight: 700;
    color: #4A5068;
    background: #fff;
    border: 1px solid var(--line);
}

.pager a.active { color: #fff; border-color: transparent; background: var(--orange); }

/* ---------- side menu (drawer) ---------- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(14, 23, 51, .35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.drawer-backdrop.open { opacity: 1; visibility: visible; }

.drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    background: var(--off);
    border-radius: 0 28px 28px 0;
    box-shadow: 20px 0 50px -30px rgba(14, 23, 51, .6);
    transform: translateX(-104%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    overflow-y: auto;
}

.drawer-backdrop.open .drawer { transform: none; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; }

.drawer-user {
    --wt: -80%; --wr: -30%; --ww: 70%; --wh: 160%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.drawer-user .avatar-face {
    position: static;
    width: 56px;
    height: 56px;
    border-width: 3px;
    font-size: 24px;
}

.drawer-user b { display: block; font-family: var(--head); font-size: 15px; font-weight: 800; color: var(--ink); }
.drawer-user small { font-size: 11.5px; color: var(--muted); }

.drawer-nav { display: grid; gap: 6px; }

.drawer-nav a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
}

.drawer-nav a > i:first-child {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--c, var(--orange));
    background: color-mix(in srgb, var(--c, #FF6B35) 12%, #fff);
}

.drawer-nav a > i:last-child { font-size: 11px; color: #A0A5B5; }
.drawer-nav a.active { color: #fff; border-color: transparent; background: linear-gradient(140deg, #FF8A4C, var(--orange) 50%, var(--red)); }
.drawer-nav a.active > i { color: #fff; background: rgba(255, 255, 255, .2); }
.drawer-nav .logout { color: var(--red); }

/* ---------- notifications panel ---------- */
.notice-panel {
    position: absolute;
    top: 70px;
    left: 50%;
    width: min(448px, calc(100% - 24px));
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 16px 14px;
    transform: translate(-50%, -12px);
    transition: transform .3s ease;
}

.notice-backdrop.open .notice-panel { transform: translate(-50%, 0); }

.notice-panel header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.notice-panel header b { flex: 1; font-family: var(--head); font-size: 17px; font-weight: 800; color: var(--ink); }
.notice-panel header a { font-size: 12px; font-weight: 700; color: var(--orange); }
.notice-panel .icon-btn { width: 36px; height: 36px; }

/* words and amounts wrap whole, never mid-word */
.id-box strong, .meta-item b, .total strong, .wallet-amount span { overflow-wrap: break-word; }
.greet { white-space: nowrap; }

/* ---------- phones ---------- */
@media (max-width: 440px) {
    .profile-main { padding-right: 0; }
    .profile > .go { display: none; }
    .profile-ids { grid-template-columns: 1fr; }

    .acct-num { gap: 10px; padding-right: 10px; --cut: polygon(0 0, calc(100% - 70px) 0, calc(100% - 46px) 50%, calc(100% - 70px) 100%, 0 100%); }
    .acct-num strong { font-size: clamp(14px, 4.3vw, 20px); word-spacing: .05em; letter-spacing: 0; }
    .acct-num .copy-btn { width: 42px; height: 42px; border-radius: 13px; }
    .acct-meta { padding: 12px 40px 12px 18px; gap: 8px; }

    .cash-btn { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
    .cash-btn .bar, .cash-btn .go { display: none; }

    .total { grid-template-columns: 1fr; gap: 6px; padding: 14px 12px 16px; }
    .total > svg { width: 46px; height: 46px; }
    .total .go { top: 14px; bottom: auto; }
    .total strong { font-size: clamp(17px, 5.4vw, 24px); }


    .svc:not(.wide) { grid-template-columns: 1fr; align-content: start; gap: 8px; padding-bottom: 52px; }
    .svc:not(.wide) .blob { width: 58px; }
    .svc p, .help-row.three .svc p { padding-right: 0; }
    .help-row.three .svc { padding-bottom: 52px; }
}

/* ---------- very narrow phones ---------- */
@media (max-width: 380px) {
    .acct-meta { grid-template-columns: 1fr; }
    .acct-meta .sep { display: none; }
    .svc.wide { grid-template-columns: auto minmax(0, 1fr); }
    .svc.wide .sep { display: none; }
    .svc.wide .timer-box { grid-column: 1 / -1; }
    .refer-art { display: none; }
    .refer-head h2 { white-space: normal; }
    .refer-head { grid-template-columns: auto minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .refer-art { width: 56px; }
    .refer-art span { font-size: 12px; }
    .refer-ic { width: 60px; }
}
.help .timer-box > span { white-space: nowrap; }

/* ---------- dashboard service center rows (sr-*), sized to their own width ---------- */
.sc-head small { white-space: nowrap; letter-spacing: .14em; font-size: clamp(7.5px, 2.1vw, 10.5px); }
.sc-head .status-side small { letter-spacing: .06em; font-size: clamp(7px, 1.9vw, 9.5px); }
.sc-head .live-pill.big { padding: 8px 18px; font-size: 15px; }

.srows {
    container-type: inline-size;
    display: grid;
    gap: clamp(calc(10px * .4), 2.6cqw, 22px);
}

.srow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(calc(8px * .4), 3cqw, 28px);
    padding: clamp(calc(14px * .4), 3.6cqw, 30px) clamp(calc(12px * .4), 4.4cqw, 40px) clamp(calc(14px * .4), 3.6cqw, 30px) clamp(calc(8px * .4), 2.6cqw, 24px);
    border-radius: clamp(calc(18px * .4), 4.4cqw, 34px);
    border: 1px solid color-mix(in srgb, var(--c) 14%, #fff);
    background: linear-gradient(100deg, #fff 30%, color-mix(in srgb, var(--c) 7%, #fff));
    box-shadow: 0 18px 32px -26px var(--c), 0 2px 8px rgba(14, 23, 51, .04);
}

/* tone band across the top-left corner */
.srow::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 22%;
    height: 70%;
    background: linear-gradient(135deg, var(--c) 0 16%, color-mix(in srgb, var(--c2) 45%, #fff) 16.5% 30%, transparent 30.5%);
    opacity: .9;
}

.sr-deco {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    pointer-events: none;
}

.sr-hex {
    position: relative;
    width: clamp(calc(62px * .4), 20cqw, 170px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.sr-hex svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--c) 40%, transparent));
}

.sr-hex i {
    position: relative;
    font-size: clamp(calc(22px * .4), 7.2cqw, 62px);
    color: #fff;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
}

.sr-txt { min-width: 0; }

.sr-cap {
    display: block;
    font-size: clamp(calc(8.5px * .4), 2.5cqw, 20px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5D6478;
    white-space: nowrap;
}

.sr-txt strong {
    display: block;
    margin: .18em 0 .32em;
    font-family: var(--head);
    font-size: clamp(calc(17px * .4), 5.8cqw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.sr-txt strong b { color: var(--c); }

.sr-ok {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .38em 1.1em .38em .38em;
    border-radius: 999px;
    font-size: clamp(calc(10px * .4), 2.9cqw, 22px);
    color: #2B3350;
    background: color-mix(in srgb, var(--c) 7%, #fff);
    white-space: nowrap;
}

.sr-ok i {
    width: 1.7em;
    height: 1.7em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .8em;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #4ADE80, #16A34A);
}

.sr-go {
    width: clamp(calc(36px * .4), 9.6cqw, 80px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(13px * .4), 3.4cqw, 28px);
    color: var(--c);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 clamp(calc(3px * .4), 1cqw, 8px) rgba(255, 255, 255, .45), 0 10px 18px -12px var(--c);
}


/* ---------- dashboard help center (hc-*), sized to its own width ---------- */
.hc {
    container-type: inline-size;
    display: grid;
    gap: clamp(calc(10px * .4), 3cqw, 26px);
}

.hc-row { display: grid; gap: clamp(calc(8px * .4), 3cqw, 26px); }
.hc-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-row.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); align-items: stretch; gap: clamp(calc(6px * .4), 2cqw, 18px); }

.hc-tile {
    --band: color-mix(in srgb, var(--c2) 45%, #fff);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    border-radius: clamp(calc(18px * .4), 5cqw, 40px);
    border: 1.5px solid color-mix(in srgb, var(--c) 20%, #fff);
    background:
        radial-gradient(ellipse farthest-corner at 80% 84%, transparent 82%, var(--band) 82.5% 89%, color-mix(in srgb, var(--c) 80%, var(--c2)) 89.5%),
        linear-gradient(150deg, color-mix(in srgb, var(--c) 12%, #fff), #fff 48%, color-mix(in srgb, var(--c) 7%, #fff));
    box-shadow: 0 18px 32px -24px var(--c), 0 2px 8px rgba(14, 23, 51, .04);
}

/* waves along the bottom */
.hc-tile::before,
.hc-tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hc-tile::before {
    height: 42%;
    background: color-mix(in srgb, var(--c2) 40%, transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V70C40 50 70 85 110 70 150 55 170 30 200 34V100Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V70C40 50 70 85 110 70 150 55 170 30 200 34V100Z'/%3E%3C/svg%3E");
}

.hc-tile::after {
    height: 26%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), var(--c));
    opacity: .75;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V80C50 60 90 100 130 80 160 64 180 40 200 30V100Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V80C50 60 90 100 130 80 160 64 180 40 200 30V100Z'/%3E%3C/svg%3E");
}

/* wide tiles: blob on the left, title on top, note and chevron below */
.hc-tile.row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "blob title title"
        "blob note  go";
    align-items: center;
    column-gap: clamp(calc(8px * .4), 2.4cqw, 22px);
    row-gap: clamp(calc(4px * .4), 1.2cqw, 10px);
    padding: clamp(calc(16px * .4), 4.4cqw, 40px) clamp(calc(8px * .4), 2.4cqw, 22px) clamp(calc(18px * .4), 5cqw, 44px) clamp(calc(8px * .4), 2.4cqw, 22px);
}

.hc-tile.row h3 { align-self: end; }
.hc-tile.row p { align-self: start; }
.hc-tile.row .hc-go { align-self: start; }

/* narrow tiles in the middle row: blob, then text stacked */
.hc-tile.col {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "blob blob"
        "title title"
        "note go";
    align-content: center;
    row-gap: clamp(calc(4px * .4), 1.2cqw, 10px);
    padding: clamp(calc(14px * .4), 4cqw, 34px) clamp(calc(8px * .4), 2.4cqw, 20px) clamp(calc(18px * .4), 5cqw, 44px);
}

.hc-blob {
    grid-area: blob;
    position: relative;
    width: clamp(calc(56px * .4), 18cqw, 160px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 42% 58% 52% 48% / 46% 42% 58% 54%;
    background: radial-gradient(circle at 34% 30%, var(--c2), var(--c) 75%);
    box-shadow: inset 0 0 0 clamp(calc(3px * .4), 1cqw, 8px) rgba(255, 255, 255, .35), 0 14px 24px -14px var(--c);
}

.hc-tile.col .hc-blob { width: clamp(calc(50px * .4), 15cqw, 140px); margin-bottom: clamp(calc(4px * .4), 1.4cqw, 12px); }
.hc-blob.soft { background: radial-gradient(circle at 34% 30%, #fff, color-mix(in srgb, var(--c2) 55%, #fff) 70%); }

.hc-blob > i { font-size: clamp(calc(22px * .4), 7.4cqw, 64px); color: #fff; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.hc-blob > svg { width: 78%; height: 78%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.hc-blob.soft > svg { width: 88%; height: 88%; }

.hc-wa {
    position: absolute;
    right: -8%;
    bottom: -6%;
    width: 42%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: clamp(calc(2px * .4), .7cqw, 5px) solid #fff;
    font-size: clamp(calc(12px * .4), 3.8cqw, 32px);
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #5BE38D, #25D366 55%, #128C4A);
    box-shadow: 0 6px 12px -6px #128C4A;
}

.hc-tile h3 {
    grid-area: title;
    font-family: var(--head);
    font-size: clamp(calc(13px * .4), 4cqw, 34px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
}

.hc-tile p {
    grid-area: note;
    font-size: clamp(calc(9.5px * .4), 2.65cqw, 22px);
    line-height: 1.3;
    color: #5D6478;
}

.hc-go {
    grid-area: go;
    width: clamp(calc(26px * .4), 7.4cqw, 60px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(calc(10px * .4), 2.8cqw, 22px);
    color: var(--c);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 clamp(calc(2px * .4), .8cqw, 6px) color-mix(in srgb, var(--c) 10%, transparent), 0 8px 14px -8px var(--c);
}

/* the hexagon in the middle */
.hc-hex {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(calc(3px * .4), 1cqw, 8px);
    margin: calc(clamp(calc(8px * .4), 3cqw, 26px) * -1) 0;
    padding: clamp(calc(22px * .4), 8cqw, 70px) clamp(calc(8px * .4), 3cqw, 26px);
    text-align: center;
}

.hc-shape {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 clamp(calc(6px * .4), 2cqw, 16px) rgba(255, 107, 53, .35)) drop-shadow(0 16px 20px rgba(255, 107, 53, .25));
}

.hc-hex-ic { position: relative; width: clamp(calc(48px * .4), 15cqw, 130px); }
.hc-hex-ic > svg { width: 100%; height: auto; }
.hc-hex-ic .hc-wa { right: -16%; top: -6%; bottom: auto; width: 44%; }

.hc-hex h3 {
    font-family: var(--head);
    font-size: clamp(calc(13px * .4), 4.4cqw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}

.hc-hex h3 b { display: block; color: var(--orange); }
.hc-hex p { font-size: clamp(calc(9px * .4), 2.6cqw, 22px); line-height: 1.3; color: #5D6478; }
.hc-dash { width: clamp(calc(20px * .4), 6cqw, 50px); height: clamp(calc(2px * .4), .6cqw, 5px); margin-top: .3em; border-radius: 3px; background: var(--orange); }

/* side menu: nothing in the column may shrink; the column scrolls instead */
.drawer > * { flex-shrink: 0; }
.drawer-user { min-height: 84px; }
.drawer-user b { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-user > span:last-child { min-width: 0; }

/* ---------- section headings keep one layout at every width ---------- */
.content { container-type: inline-size; }
.sec-head { gap: 2.6cqw; }
.sec-head > .sec-ic { width: 9.2cqw; height: 9.2cqw; }
.sec-head h2 { font-size: 5.6cqw; white-space: nowrap; }
.sec-head small { font-size: 2.1cqw; letter-spacing: .22em; white-space: nowrap; }
.sec-head .sec-side { font-size: 2.2cqw; }
.sec-head .live-pill { padding: 1.8cqw 3cqw; font-size: 2.4cqw; gap: 1.6cqw; }
.sec-head .live-pill .dot { width: 1.9cqw; height: 1.9cqw; }
.sec-head .pill-soft { padding: 1.9cqw 3cqw; font-size: 2.2cqw; gap: 1.6cqw; }
.sec-head .prio-pill { padding: 1.2cqw 1.2cqw 1.2cqw 2.6cqw; gap: 1.6cqw; }
.sec-head .prio-pill svg { width: 5.4cqw; height: 5.4cqw; }
.sec-head .prio-pill span { font-size: 2.3cqw; }
.sec-head .prio-pill .go { width: 6.2cqw; height: 6.2cqw; font-size: 2.3cqw; }
.sec-head .status-side { gap: 1.2cqw; }
.sc-head small { font-size: 2.1cqw; letter-spacing: .14em; }
.sc-head .status-side small { font-size: 1.9cqw; letter-spacing: .06em; }
.sc-head .live-pill.big { padding: 1.7cqw 3.8cqw; font-size: 3.1cqw; }

/* the next-profit tile keeps its divider and box beside the text */
.svc-grid > .svc.wide { grid-template-columns: auto minmax(0, 1fr) 1px auto; }
.svc-grid > .svc.wide .sep { display: block; }
.svc-grid > .svc.wide .timer-box { grid-column: auto; }
.svc-grid > .svc.wide p { white-space: normal; }

/* an odd last tile in a three-up grid sits in the middle */
.tools > :last-child:nth-child(3n + 1) { grid-column: 2; }

/* ==========================================================================
   Premium glow pass: balance card, motto line, deposit / withdraw
   ========================================================================== */
.wcard {
    padding: clamp(4px, 1.4cqw, 12px);
    background: linear-gradient(100deg, #1E6BFF 0%, #5B8CFF 22%, #DDE6FF 45%, #FFE1CF 58%, #FF8A4C 80%, #FF5A1F 100%);
    box-shadow:
        -14px 10px 34px -14px rgba(65, 105, 225, .75),
        14px 10px 34px -14px rgba(255, 107, 53, .8),
        0 24px 44px -26px rgba(14, 23, 51, .35);
}

/* soft halo around the whole frame */
.wcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 18px rgba(255, 255, 255, .55);
    pointer-events: none;
}

.wc-inner {
    border: 0;
    background:
        radial-gradient(60% 40% at 0% 105%, rgba(65, 105, 225, .32), transparent 70%),
        radial-gradient(55% 40% at 100% 105%, rgba(255, 138, 76, .42), transparent 70%),
        radial-gradient(40% 50% at 55% 0%, rgba(221, 230, 255, .9), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250, 251, 255, .93));
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 22px rgba(255, 255, 255, .7);
}

.wc-art {
    background: radial-gradient(circle, #fff 55%, #FFF4EC 75%, #fff);
    box-shadow: 0 0 0 clamp(4px, 1.4cqw, 14px) rgba(255, 255, 255, .9), 0 0 30px -6px rgba(255, 107, 53, .55), 0 18px 36px -18px #FF6B35;
}

.wc-art svg { filter: drop-shadow(0 12px 14px rgba(233, 75, 53, .45)); }

.wc-eye { box-shadow: 0 0 0 clamp(4px, 1cqw, 10px) rgba(255, 255, 255, .85), 0 0 24px -4px rgba(65, 105, 225, .55); }

.wc-amt { position: relative; padding-bottom: clamp(6px, 1.6cqw, 14px); }

.wc-amt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 88%;
    height: clamp(2px, .5cqw, 4px);
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, #FF6B35 25%, #4169E1 75%, transparent);
    box-shadow: 0 0 10px rgba(255, 107, 53, .6);
}

.wc-amt em { text-shadow: 0 6px 16px rgba(255, 107, 53, .35); }
.wc-seal svg { filter: drop-shadow(0 0 10px rgba(0, 143, 114, .45)) drop-shadow(0 8px 10px rgba(0, 143, 114, .35)); }

/* motto line between the balance card and the cash buttons */
.motto {
    position: relative;
    margin: 2px 0;
    padding-bottom: 2.4cqw;
    text-align: center;
    font-family: var(--head);
    font-size: 5.2cqw;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.motto b { color: var(--orange); }

.motto::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #4169E1 30%, #FF6B35 60%, transparent);
    box-shadow: 0 0 12px rgba(255, 107, 53, .55);
}

/* glossy deposit / withdraw */
.gcash {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3.4cqw, 30px);
}

.gbtn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(6px, 2cqw, 18px);
    padding: clamp(12px, 3.6cqw, 32px) clamp(8px, 2.2cqw, 20px);
    border-radius: clamp(18px, 5cqw, 40px);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
}

/* glass sheen across the top and a curved highlight */
.gbtn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 48% 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
}

.gbtn::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -30%;
    bottom: -70%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border-top: 2px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
}

.gbtn.dep {
    background: linear-gradient(115deg, #E9371B 0%, #FF5A1F 35%, #FF7A35 65%, #FFA24A 100%);
    box-shadow: 0 0 0 1px rgba(255, 107, 53, .25), 0 0 26px -6px rgba(255, 107, 53, .9), 0 18px 30px -14px #E94B35;
}

.gbtn.wd {
    background: linear-gradient(115deg, #0B44D6 0%, #1E5BFF 40%, #2D8CF0 75%, #41B6FF 100%);
    box-shadow: 0 0 0 1px rgba(65, 105, 225, .25), 0 0 26px -6px rgba(45, 140, 240, .9), 0 18px 30px -14px #1E5BFF;
}

.gbtn .orb {
    width: clamp(36px, 11.6cqw, 110px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(16px, 5cqw, 46px);
    background: radial-gradient(circle at 40% 35%, #fff 60%, #F2F4FA);
    box-shadow: 0 0 0 clamp(3px, 1.1cqw, 10px) rgba(255, 255, 255, .3), 0 0 0 clamp(5px, 1.8cqw, 16px) rgba(255, 255, 255, .12), 0 10px 18px -8px rgba(0, 0, 0, .35);
}

.gbtn.dep .orb { color: #FF5A1F; }
.gbtn.wd .orb { color: #1E5BFF; }

.gbtn b {
    display: block;
    font-family: var(--head);
    font-size: clamp(10.5px, 3.25cqw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.gbtn small {
    display: block;
    margin-top: .2em;
    font-size: clamp(9.5px, 3cqw, 24px);
    color: rgba(255, 255, 255, .95);
    white-space: nowrap;
}

.gbtn .chev {
    width: clamp(24px, 7cqw, 64px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(10px, 3cqw, 26px);
    background: #fff;
    box-shadow: 0 0 0 clamp(2px, .8cqw, 6px) rgba(255, 255, 255, .3), 0 6px 12px -6px rgba(0, 0, 0, .35);
}

.gbtn.dep .chev { color: #FF5A1F; }
.gbtn.wd .chev { color: #1E5BFF; }

/* ==========================================================================
   Navbar: glowing pill logo between an orange and a blue swoosh line
   ========================================================================== */
.topbar.nb {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 14px;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .92));
    border-bottom: 0;
    box-shadow: 0 14px 26px -20px rgba(14, 23, 51, .35), 0 1px 0 rgba(14, 23, 51, .04);
}

.nb-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.nb-line path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 138, 76, .55));
}

.nb-line path + path { filter: drop-shadow(0 0 3px rgba(65, 105, 225, .55)); }

.nb-menu {
    justify-self: start;
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #FF9A5C, #FF6B35 45%, #E9371B);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, .12), 0 0 18px -2px rgba(255, 107, 53, .75), 0 10px 18px -8px #E94B35, inset 0 2px 0 rgba(255, 255, 255, .35);
}

.nb-pill {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 18px 7px 10px;
    border-radius: 22px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(180deg, #fff, #F7F9FF) padding-box,
        linear-gradient(90deg, #FF8A4C, #FFC857 50%, #FF8A4C) border-box;
    box-shadow: 0 0 16px -2px rgba(255, 200, 87, .7), 0 0 30px -8px rgba(255, 138, 76, .55), 0 10px 18px -12px rgba(14, 23, 51, .3);
}

.nb-pill svg { width: 46px; height: 40px; flex-shrink: 0; }

.nb-word {
    position: relative;
    padding-bottom: 4px;
    font-family: var(--head);
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.03em;
    color: #13235E;
    white-space: nowrap;
}

.nb-word span {
    background: linear-gradient(180deg, #FFA24A, #FF6B35 60%, #E94B35);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* orange swoosh under the wordmark */
.nb-word::after {
    content: "";
    position: absolute;
    left: 4%;
    right: -4%;
    bottom: -2px;
    height: 5px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    border-bottom: 2.5px solid #FF8A4C;
}

.nb-bell {
    justify-self: end;
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(14, 23, 51, .06);
    border-radius: 50%;
    font-size: 19px;
    color: #13235E;
    background: radial-gradient(circle at 40% 30%, #fff 60%, #F3F5FB);
    box-shadow: 0 0 14px -4px rgba(65, 105, 225, .45), 0 8px 16px -10px rgba(14, 23, 51, .35);
}

.nb-bell::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E94B35;
    border: 2px solid #fff;
    box-shadow: 0 0 6px rgba(233, 75, 53, .7);
}

/* the public header and auth logos use the same wordmark style */
.brand b, .logo b { font-style: italic; letter-spacing: -.03em; }
.brand b span, .logo b span {
    background: linear-gradient(180deg, #FFA24A, #FF6B35 60%, #E94B35);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   Stronger glow, as in the approved art
   ========================================================================== */
.content { overflow: visible; }

.wcard {
    padding: clamp(5px, 2.2cqw, 18px);
    border-radius: clamp(18px, 5cqw, 44px);
    background: linear-gradient(100deg, #1E6BFF 0%, #3D86FF 18%, #CFE0FF 40%, #FFE6D6 60%, #FF8A4C 82%, #FF5A1F 100%);
    box-shadow:
        -12px 0 34px -4px rgba(45, 120, 255, .55),
        12px 0 34px -4px rgba(255, 107, 53, .6),
        0 0 0 1px rgba(255, 255, 255, .7),
        0 0 60px 6px rgba(255, 255, 255, .9),
        0 26px 44px -24px rgba(14, 23, 51, .35);
}

.wc-inner {
    border-radius: clamp(14px, 3.8cqw, 34px);
    background:
        radial-gradient(55% 32% at 8% 108%, rgba(45, 120, 255, .45), rgba(143, 176, 255, .2) 55%, transparent 75%),
        radial-gradient(50% 32% at 95% 108%, rgba(255, 107, 53, .55), rgba(255, 178, 127, .25) 55%, transparent 75%),
        radial-gradient(35% 45% at 70% 10%, rgba(200, 215, 255, .7), transparent 70%),
        linear-gradient(180deg, #fff, #F8FAFF);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 26px rgba(255, 255, 255, .9), inset 0 -10px 30px -18px rgba(65, 105, 225, .35);
}

.wc-art {
    box-shadow:
        0 0 0 clamp(5px, 1.8cqw, 16px) #fff,
        0 0 34px 2px rgba(255, 138, 76, .45),
        0 0 60px -10px rgba(65, 105, 225, .35);
}

.wc-eye {
    background: radial-gradient(circle at 40% 32%, #fff 55%, #E3EBFF);
    box-shadow: 0 0 0 clamp(5px, 1.4cqw, 12px) rgba(255, 255, 255, .95), 0 0 30px 2px rgba(65, 105, 225, .45);
}

.wcard .greet { box-shadow: 0 0 0 1px rgba(255, 178, 127, .35), 0 0 18px -4px rgba(255, 107, 53, .5); }
.wc-amt::after { height: clamp(2px, .6cqw, 5px); box-shadow: 0 0 12px 1px rgba(255, 107, 53, .7), 0 0 12px 1px rgba(65, 105, 225, .5); }
.motto::after { box-shadow: 0 0 14px 2px rgba(255, 107, 53, .55), 0 0 10px rgba(65, 105, 225, .5); }

.gcash { gap: clamp(12px, 4cqw, 34px); padding: 4px 0; }

.gbtn {
    border: 2px solid rgba(255, 255, 255, .65);
    border-radius: clamp(18px, 4.6cqw, 36px);
}

.gbtn.dep {
    background:
        radial-gradient(120% 70% at 10% 120%, rgba(233, 55, 27, .9), transparent 60%),
        linear-gradient(115deg, #F0401F 0%, #FF5A1F 30%, #FF7A35 62%, #FFB255 100%);
    box-shadow:
        0 0 0 1px rgba(255, 138, 76, .45),
        0 0 30px 4px rgba(255, 107, 53, .55),
        0 0 60px -6px rgba(255, 90, 31, .55),
        0 18px 30px -14px #E94B35,
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 0 -8px 18px -8px rgba(201, 40, 20, .45);
}

.gbtn.wd {
    background:
        radial-gradient(120% 70% at 10% 120%, rgba(11, 60, 200, .9), transparent 60%),
        linear-gradient(115deg, #0A3FD0 0%, #1E5BFF 35%, #2D8CF0 70%, #4CC2FF 100%);
    box-shadow:
        0 0 0 1px rgba(65, 140, 255, .45),
        0 0 30px 4px rgba(45, 140, 240, .55),
        0 0 60px -6px rgba(30, 91, 255, .55),
        0 18px 30px -14px #1E5BFF,
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 0 -8px 18px -8px rgba(10, 40, 160, .45);
}

.gbtn::before { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }

.gbtn .orb {
    box-shadow:
        0 0 0 clamp(4px, 1.3cqw, 11px) rgba(255, 255, 255, .35),
        0 0 0 clamp(6px, 2cqw, 17px) rgba(255, 255, 255, .15),
        0 0 22px 4px rgba(255, 255, 255, .55),
        inset 0 -4px 8px rgba(0, 0, 0, .08);
}

.gbtn .chev { box-shadow: 0 0 0 clamp(3px, 1cqw, 8px) rgba(255, 255, 255, .3), 0 0 16px 2px rgba(255, 255, 255, .55); }



/* ==========================================================================
   Deposit / withdraw, matched to the approved art: bright glossy colour,
   a white glass rim, a light lens sweeping across, and a coloured glow
   ========================================================================== */
.gbtn {
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: clamp(18px, 5cqw, 40px);
    padding: clamp(14px, 4.4cqw, 38px) clamp(10px, 2.6cqw, 22px);
}

.gbtn.dep {
    background: linear-gradient(100deg, #EE3A1C 0%, #FF5A22 35%, #FF7A30 70%, #FF9E45 100%);
    box-shadow:
        0 0 0 1px rgba(255, 120, 60, .55),
        0 0 22px 2px rgba(255, 90, 34, .45),
        0 16px 30px -8px rgba(238, 58, 28, .6),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.gbtn.wd {
    background: linear-gradient(100deg, #0A48DE 0%, #1660F0 40%, #2A86FA 75%, #3FA8FF 100%);
    box-shadow:
        0 0 0 1px rgba(80, 160, 255, .55),
        0 0 22px 2px rgba(30, 110, 255, .45),
        0 16px 30px -8px rgba(10, 72, 222, .6),
        inset 0 1px 0 rgba(200, 235, 255, .8);
}

/* soft sheen over the top */
.gbtn::before {
    inset: 0 0 50% 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
}

/* the light lens: its curved lower edge sweeps from top left to bottom right */
.gbtn::after {
    top: -95%;
    left: 22%;
    right: auto;
    bottom: auto;
    width: 125%;
    height: 175%;
    border: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: radial-gradient(60% 60% at 50% 70%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
}

.gbtn b { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.gbtn small { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 500; }

.gbtn .orb {
    background: radial-gradient(circle at 40% 32%, #fff 62%, #F1F3F8);
    box-shadow:
        0 0 0 clamp(4px, 1.5cqw, 12px) rgba(255, 255, 255, .3),
        0 0 0 clamp(5px, 1.7cqw, 14px) rgba(255, 255, 255, .55),
        0 0 18px 2px rgba(255, 255, 255, .45),
        0 6px 14px -4px rgba(0, 0, 0, .3);
}

.gbtn .chev {
    background: #fff;
    box-shadow:
        0 0 0 clamp(3px, 1cqw, 8px) rgba(255, 255, 255, .3),
        0 0 0 clamp(4px, 1.2cqw, 9px) rgba(255, 255, 255, .5),
        0 4px 10px -3px rgba(0, 0, 0, .3);
}

.gbtn.dep .orb, .gbtn.dep .chev { color: #F0461E; }
.gbtn.wd .orb, .gbtn.wd .chev { color: #1257E8; }

/* ---------- digital manager: compact frosted-glass strip ---------- */
.mgr {
    --c: #14A89A;
    --c2: #9CEFE4;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 3cqw;
    padding: 2.4cqw 3cqw 2.4cqw 2.4cqw;
    border-radius: 5cqw;
    border: 1.5px solid rgba(255, 255, 255, .85);
    background:
        radial-gradient(45% 120% at 100% 50%, rgba(64, 196, 180, .35), transparent 70%),
        radial-gradient(30% 90% at 0% 0%, rgba(64, 196, 180, .3), transparent 70%),
        linear-gradient(110deg, rgba(255, 255, 255, .95), rgba(240, 252, 250, .9));
    box-shadow:
        0 0 0 1px rgba(64, 196, 180, .35),
        0 0 22px -2px rgba(64, 196, 180, .55),
        0 14px 26px -16px rgba(20, 120, 110, .55),
        inset 0 1px 0 #fff;
}

/* glass sheen and a lens edge across the strip */
.mgr::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}

.mgr::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120%;
    left: 35%;
    width: 90%;
    height: 200%;
    border-radius: 50%;
    border-bottom: 1.5px solid rgba(64, 196, 180, .45);
    background: rgba(156, 239, 228, .12);
}

.mgr-hex {
    position: relative;
    width: 13cqw;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.mgr-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(20, 168, 154, .45)); }
.mgr-hex i { position: relative; font-size: 4.6cqw; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }

.mgr-dot {
    position: absolute;
    right: 6%;
    bottom: 10%;
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #22C55E;
    box-shadow: 0 0 6px #22C55E;
}

.mgr-txt { display: grid; min-width: 0; }

.mgr-cap {
    font-size: 2.1cqw;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5D6478;
    white-space: nowrap;
}

.mgr-txt strong {
    margin-top: .1em;
    font-family: var(--head);
    font-size: 4.6cqw;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.mgr-txt strong b { color: #14A89A; }

.mgr-on {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: .25em;
    font-size: 2.4cqw;
    color: #2B3350;
    white-space: nowrap;
}

.mgr-on i { width: .65em; height: .65em; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }

/* WhatsApp key: green glass with a bright rim, a top reflection and an inner glow */
.mgr-wa {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .75em 1.25em;
    border-radius: 999px;
    font-family: var(--head);
    font-size: 3cqw;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, .75);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, 0) 52%),
        radial-gradient(80% 90% at 50% 120%, rgba(160, 255, 200, .7), transparent 70%),
        linear-gradient(135deg, rgba(62, 224, 127, .92), rgba(37, 211, 102, .9) 50%, rgba(18, 140, 74, .95));
    box-shadow:
        0 0 0 1px rgba(37, 211, 102, .35),
        0 0 16px -2px rgba(37, 211, 102, .8),
        0 8px 16px -8px rgba(18, 140, 74, .8),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -3px 8px rgba(10, 90, 45, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.mgr-wa i { font-size: 1.35em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }

/* a moving glint across the glass */
.mgr-wa::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 40%;
    height: 180%;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: mgr-glint 3.2s ease-in-out infinite;
}

@keyframes mgr-glint {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) { .mgr-wa::after { animation: none; display: none; } }

/* ==========================================================================
   Login / register on phones: one line per label, smaller icons, no clipping
   ========================================================================== */
@media (max-width: 440px) {
    .auth-wrap { padding: 12px 12px 76px; }
    .auth-top { padding-top: 6px; }
    .back-btn { top: 6px; width: 44px; height: 44px; font-size: 17px; }
    .logo svg { width: clamp(84px, 26vw, 110px); }
    .logo b { font-size: clamp(22px, 7vw, 30px); }
    .logo small { font-size: 8.5px; letter-spacing: .26em; }
    .tagline { font-size: clamp(14px, 4.4vw, 19px); right: 0; }

    .auth-card { margin-top: 18px; padding: 18px 12px 14px; border-radius: 26px; }

    .auth-head { gap: 12px; }
    .auth-ic { width: clamp(54px, 16vw, 68px); font-size: clamp(22px, 7vw, 28px); box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 7px #E6EBF8, 0 14px 22px -12px var(--blue); }
    .auth-head h1 { font-size: clamp(20px, 6.4vw, 27px); white-space: nowrap; }
    .auth-head p { margin-top: 4px; font-size: clamp(11.5px, 3.4vw, 13.5px); }
    .auth-head p::after { margin-top: 8px; height: 4px; }

    .auth-form { gap: 11px; margin-top: 16px; }

    .field { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 8px 8px 9px; }
    .field::after { display: none; }
    .field .bar { display: none; }
    .field .f-ic { width: 42px; font-size: 17px; }
    .field label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .field input { font-size: 13px; text-overflow: ellipsis; }
    .field .go { width: 36px; height: 36px; font-size: 13px; }

    .auth-row { gap: 8px; font-size: 12.5px; }
    .auth-row .check span { white-space: nowrap; }

    .submit { padding: 14px 56px 14px 22px; font-size: clamp(16px, 4.8vw, 19px); white-space: nowrap; }
    .submit .arrow { right: 7px; width: 42px; height: 42px; font-size: 15px; }

    .auth-foot { gap: 8px; margin-top: 16px; font-size: 12.5px; }
}

@media (max-width: 350px) {
    body.auth .auth-row { flex-wrap: nowrap; gap: 6px; font-size: 11.5px; }
    .auth-row .check { gap: 6px; }
}