:root {
            --pink-bg: #fff5f9;
            --pink-soft: #ffe3f0;
            --pink-soft2: #ffd0e6;
            --pink: #ff7ab8;
            --magenta: #e6197f;
            --magenta-d: #c1156b;
            --purple: #a855c7;
            --purple-soft: #f3e6ff;
            --ink: #3a2434;
            --ink-2: #7a5a6e;
            --muted: #8c7382;
            --white: #fff;
            --line: #ffe0ee;
            --ok: #19b57a;
            --warn: #f5a524;
            --danger: #f0436b;
            --r-lg: 26px;
            --r-md: 18px;
            --r-sm: 12px;
            --sh: 0 10px 30px rgba(230, 25, 127, .08);
            --sh-2: 0 18px 44px rgba(230, 25, 127, .14);
            --grad: linear-gradient(135deg, #ff7ab8 0%, #e6197f 55%, #a855c7 130%);
            --grad-soft: linear-gradient(135deg, #fff0f7 0%, #ffe3f0 100%);
            --font-h: 'Fredoka', system-ui, sans-serif;
            --font-b: 'Poppins', system-ui, sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent
        }

        html,
        body {
            height: 100%
        }

        body {
            font-family: var(--font-b);
            background: var(--pink-bg);
            color: var(--ink);
            font-size: 15px;
            line-height: 1.6;
            overflow-x: hidden
        }

        h1,
        h2,
        h3,
        h4,
        .f-h {
            font-family: var(--font-h);
            letter-spacing: .2px
        }

        a {
            color: inherit;
            text-decoration: none
        }

        img {
            max-width: 100%
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
            font-size: inherit;
            color: inherit
        }

        .hidden {
            display: none !important
        }

        ::-webkit-scrollbar {
            width: 9px;
            height: 9px
        }

        ::-webkit-scrollbar-thumb {
            background: var(--pink-soft2);
            border-radius: 9px
        }

        /* ---------- shared bits ---------- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 0;
            cursor: pointer;
            padding: 13px 22px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14.5px;
            transition: .22s;
            background: var(--grad);
            color: #fff;
            box-shadow: 0 8px 20px rgba(230, 25, 127, .28)
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(230, 25, 127, .34)
        }

        .btn:active {
            transform: translateY(0) scale(.98)
        }

        .btn.ghost {
            background: #fff;
            color: var(--magenta);
            box-shadow: var(--sh);
            border: 1.5px solid var(--pink-soft2)
        }

        .btn.soft {
            background: var(--pink-soft);
            color: var(--magenta);
            box-shadow: none
        }

        .btn.dark {
            background: #3a2434;
            box-shadow: none
        }

        .btn.danger {
            background: linear-gradient(135deg, #ff8aa4, #f0436b);
            box-shadow: none
        }

        .btn.sm {
            padding: 8px 15px;
            font-size: 13px
        }

        .btn.lg {
            padding: 18px 30px;
            font-size: 17px;
            border-radius: 22px;
            width: 100%
        }

        .btn.block {
            width: 100%
        }

        .btn[disabled] {
            opacity: .45;
            cursor: not-allowed;
            transform: none !important
        }

        .card {
            background: #fff;
            border-radius: var(--r-lg);
            box-shadow: var(--sh);
            padding: 22px;
            border: 1px solid #fff
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 13px;
            border-radius: 999px;
            background: var(--pink-soft);
            color: var(--magenta);
            font-size: 12.5px;
            font-weight: 600
        }

        .chip.ok {
            background: #e4f8f0;
            color: #0d8f5f
        }

        .chip.off {
            background: #f1eef0;
            color: #8c7382
        }

        .chip.pur {
            background: var(--purple-soft);
            color: #8331a8
        }

        .field {
            margin-bottom: 15px
        }

        .field label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 7px;
            color: #6b4b60
        }

        .field .hint {
            font-size: 12px;
            color: var(--muted);
            margin-top: 5px
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 13px 16px;
            border: 1.5px solid var(--line);
            border-radius: 14px;
            background: #fffafd;
            outline: 0;
            transition: .2s
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--pink);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(255, 122, 184, .15)
        }

        .err {
            color: var(--danger);
            font-size: 12px;
            margin-top: 5px;
            display: none
        }

        .field.bad input,
        .field.bad select {
            border-color: var(--danger);
            background: #fff5f7
        }

        .field.bad .err {
            display: block
        }

        .grid {
            display: grid;
            gap: 16px
        }

        .row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap
        }

        .sp {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap
        }

        .muted {
            color: var(--muted);
            font-size: 13px
        }

        .sec-title {
            font-size: 19px;
            font-weight: 600;
            margin-bottom: 4px
        }

        .table-wrap {
            overflow-x: auto;
            border-radius: var(--r-md);
            border: 1px solid var(--line);
            background: #fff
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 640px
        }

        th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: #a5758f;
            text-align: left;
            padding: 14px 16px;
            background: #fff7fb;
            font-weight: 600;
            white-space: nowrap
        }

        td {
            padding: 14px 16px;
            border-top: 1px solid #fdeef6;
            font-size: 13.5px;
            white-space: nowrap
        }

        tbody tr {
            transition: .15s;
            cursor: default
        }

        tbody tr.click {
            cursor: pointer
        }

        tbody tr:hover {
            background: #fffafd
        }

        .empty {
            padding: 44px 20px;
            text-align: center;
            color: var(--muted)
        }

        .empty .e-ic {
            font-size: 40px;
            display: block;
            margin-bottom: 8px;
            opacity: .8
        }

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            cursor: pointer;
            text-decoration: none
        }

        .logo img {
            height: 72px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 3px 10px rgba(230, 25, 127, .15));
            transition: transform .2s ease
        }

        .logo:hover img {
            transform: scale(1.04)
        }

        .center-page .logo img {
            height: 92px
        }

        .side .logo img {
            height: 56px;
            max-width: 190px
        }

        .logo .mark {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: var(--grad);
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 21px;
            box-shadow: 0 8px 18px rgba(230, 25, 127, .3);
            flex: none
        }

        .logo .txt {
            font-family: var(--font-h);
            line-height: 1.05
        }

        .logo .txt b {
            display: block;
            font-size: 17px;
            font-weight: 600;
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .logo .txt span {
            font-size: 9.5px;
            letter-spacing: 3px;
            color: var(--purple);
            font-weight: 500
        }

        .sparkle {
            position: absolute;
            pointer-events: none;
            opacity: .75;
            animation: tw 3.4s ease-in-out infinite
        }

        @keyframes tw {

            0%,
            100% {
                transform: scale(1) rotate(0);
                opacity: .4
            }

            50% {
                transform: scale(1.25) rotate(18deg);
                opacity: .95
            }
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(46px);
            pointer-events: none;
            z-index: 0
        }

        .fade {
            animation: fade .35s ease
        }

        @keyframes fade {
            from {
                opacity: 0;
                transform: translateY(10px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        /* ---------- landing ---------- */
        .pub-nav {
            position: sticky;
            top: 0;
            z-index: 40;
            background: rgba(255, 245, 249, .88);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid #ffe7f2
        }

        .pub-nav .in {
            max-width: 1100px;
            margin: auto;
            padding: 8px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 52px 18px 60px;
            text-align: center
        }

        .hero .in {
            max-width: 760px;
            margin: auto;
            position: relative;
            z-index: 2
        }

        .hero h1 {
            font-size: clamp(30px, 7.4vw, 50px);
            font-weight: 600;
            line-height: 1.14;
            margin: 18px 0 12px
        }

        .hero h1 em {
            font-style: normal;
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .hero p {
            color: #7c5c70;
            font-size: 15.5px;
            max-width: 520px;
            margin: auto
        }

        .hero .cta {
            justify-content: center;
            margin-top: 26px
        }

        .crown-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            padding: 8px 18px;
            border-radius: 999px;
            box-shadow: var(--sh);
            font-size: 13px;
            font-weight: 600;
            color: var(--magenta)
        }

        .wrap {
            max-width: 1100px;
            margin: auto;
            padding: 0 18px
        }

        .section {
            padding: 46px 0
        }

        .section h2 {
            text-align: center;
            font-size: clamp(22px, 5vw, 30px);
            font-weight: 600
        }

        .section .sub {
            text-align: center;
            color: var(--muted);
            margin-bottom: 28px;
            font-size: 14px
        }

        .benefits {
            grid-template-columns: repeat(auto-fit, minmax(215px, 1fr))
        }

        .ben {
            background: #fff;
            border-radius: var(--r-lg);
            padding: 24px;
            box-shadow: var(--sh);
            transition: .25s;
            border: 1px solid #fff
        }

        .ben:hover {
            transform: translateY(-6px);
            box-shadow: var(--sh-2);
            border-color: var(--pink-soft2)
        }

        .ben .ic {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            font-size: 25px;
            background: var(--grad-soft);
            margin-bottom: 13px
        }

        .ben h3 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 5px
        }

        .ben p {
            font-size: 13.5px;
            color: var(--muted)
        }

        .logo-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 16px;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px
        }

        .step {
            background: #fff;
            border-radius: var(--r-lg);
            padding: 24px;
            box-shadow: var(--sh);
            position: relative;
            overflow: hidden
        }

        .step .no {
            font-family: var(--font-h);
            font-size: 40px;
            font-weight: 700;
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1
        }

        .step h4 {
            font-size: 15.5px;
            margin-top: 6px;
            font-weight: 600
        }

        .cta-band {
            background: var(--grad);
            border-radius: 34px;
            padding: 42px 26px;
            text-align: center;
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: var(--sh-2)
        }

        .cta-band h2 {
            color: #fff;
            font-size: clamp(22px, 5vw, 30px)
        }

        .cta-band p {
            opacity: .92;
            margin: 8px 0 22px;
            font-size: 14.5px
        }

        .cta-band .btn {
            background: #fff;
            color: var(--magenta);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .14)
        }

        .pub-foot {
            text-align: center;
            padding: 34px 18px;
            color: var(--muted);
            font-size: 13px
        }

        /* ---------- member card ---------- */
        .mcard {
            position: relative;
            border-radius: 26px;
            padding: 24px;
            color: #fff;
            background: var(--grad);
            box-shadow: var(--sh-2);
            overflow: hidden
        }

        .mcard:before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 85% 0, rgba(255, 255, 255, .4), transparent 45%), radial-gradient(circle at 10% 100%, rgba(255, 255, 255, .22), transparent 40%)
        }

        .mcard>* {
            position: relative;
            z-index: 2
        }

        .mcard .brand {
            font-family: var(--font-h);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .6px
        }

        .mcard .lbl {
            font-size: 10.5px;
            letter-spacing: 2.4px;
            opacity: .85;
            margin-top: 2px
        }

        .mcard .nm {
            font-family: var(--font-h);
            font-size: 24px;
            font-weight: 600;
            margin-top: 16px
        }

        .mcard .id {
            font-size: 13.5px;
            letter-spacing: 1.6px;
            opacity: .95
        }

        .mcard .qbox {
            background: #fff;
            border-radius: 16px;
            padding: 9px;
            display: inline-block;
            line-height: 0;
            margin-top: 14px
        }

        .mstat {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 13px
        }

        .mstat .s {
            background: #fff;
            border-radius: 20px;
            padding: 16px;
            box-shadow: var(--sh)
        }

        .mstat .s .k {
            font-size: 11.5px;
            color: var(--muted);
            font-weight: 600
        }

        .mstat .s .v {
            font-family: var(--font-h);
            font-size: 21px;
            font-weight: 600;
            color: var(--magenta);
            line-height: 1.3
        }

        .tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0 10px
        }

        .tabs button {
            flex: none;
            padding: 9px 16px;
            border-radius: 999px;
            border: 1.5px solid var(--line);
            background: #fff;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            cursor: pointer;
            transition: .2s
        }

        .tabs button.on {
            background: var(--grad);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 6px 16px rgba(230, 25, 127, .26)
        }

        .trx {
            display: flex;
            gap: 13px;
            align-items: center;
            background: #fff;
            border-radius: 18px;
            padding: 14px 16px;
            box-shadow: var(--sh);
            margin-bottom: 11px;
            cursor: pointer;
            transition: .2s;
            border: 1px solid #fff
        }

        .trx:hover {
            transform: translateX(3px);
            border-color: var(--pink-soft2)
        }

        .trx .ic {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: var(--grad-soft);
            display: grid;
            place-items: center;
            font-size: 19px;
            flex: none
        }

        .trx .g {
            flex: 1;
            min-width: 0
        }

        .trx .d {
            font-size: 11.5px;
            color: var(--muted)
        }

        .trx .t {
            font-weight: 600;
            font-size: 14.5px
        }

        .trx .r {
            text-align: right;
            font-size: 12px;
            color: var(--ok);
            font-weight: 600;
            white-space: nowrap
        }

        /* ---------- app shell ---------- */
        .shell {
            display: flex;
            min-height: 100vh
        }

        .side {
            width: 246px;
            flex: none;
            background: #fff;
            border-right: 1px solid var(--line);
            padding: 20px 14px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto
        }

        .side .nav-i {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px 14px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #7a5a6e;
            transition: .18s
        }

        .side .nav-i i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
        }

        .side .nav-i svg {
            width: 20px;
            height: 20px;
            stroke-width: 2.2;
            transition: transform .2s;
        }

        .side .nav-i:hover {
            background: #fff5fa;
            color: var(--magenta)
        }

        .side .nav-i.on {
            background: linear-gradient(135deg, #ffe9f4, #ffd9ec);
            color: var(--magenta);
            font-weight: 600;
            box-shadow: inset 0 0 0 1px #ffc9e4
        }

        .side .grp {
            font-size: 10.5px;
            letter-spacing: 1.6px;
            color: #c39ab3;
            font-weight: 600;
            margin: 16px 0 6px 14px
        }

        .main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column
        }

        .top {
            position: sticky;
            top: 0;
            z-index: 30;
            background: rgba(255, 245, 249, .9);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid #ffe7f2;
            padding: 14px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px
        }

        .top h1 {
            font-size: 20px;
            font-weight: 600
        }

        .top .sub {
            font-size: 12.5px;
            color: var(--muted)
        }

        .content {
            padding: 22px;
            flex: 1
        }

        .hamb {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            border: 1.5px solid var(--line);
            background: #fff;
            font-size: 18px;
            cursor: pointer
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 15px
        }

        .stat {
            background: #fff;
            border-radius: 22px;
            padding: 19px;
            box-shadow: var(--sh);
            display: flex;
            gap: 14px;
            align-items: center;
            transition: .22s;
            border: 1px solid #fff
        }

        .stat:hover {
            transform: translateY(-4px);
            border-color: var(--pink-soft2)
        }

        .stat .ic {
            width: 50px;
            height: 50px;
            border-radius: 17px;
            display: grid;
            place-items: center;
            font-size: 22px;
            background: var(--grad-soft);
            flex: none
        }

        .stat .k {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500
        }

        .stat .v {
            font-family: var(--font-h);
            font-size: 22px;
            font-weight: 600;
            line-height: 1.25
        }

        .pill-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #e4f8f0;
            color: #0d8f5f;
            padding: 7px 14px;
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 600
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #19b57a;
            box-shadow: 0 0 0 0 rgba(25, 181, 122, .6);
            animation: pulse 1.8s infinite
        }

        @keyframes pulse {
            70% {
                box-shadow: 0 0 0 9px rgba(25, 181, 122, 0)
            }

            100% {
                box-shadow: 0 0 0 0 rgba(25, 181, 122, 0)
            }
        }

        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 50;
            background: #fff;
            border-top: 1px solid var(--line);
            padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
            justify-content: space-around
        }

        .bottom-nav .bn {
            flex: 1;
            text-align: center;
            padding: 6px 2px;
            border-radius: 12px;
            font-size: 10.5px;
            color: var(--muted);
            cursor: pointer;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .bottom-nav .bn i {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3px;
        }

        .bottom-nav .bn svg {
            width: 21px;
            height: 21px;
            stroke-width: 2.2;
        }

        .bottom-nav .bn.on {
            color: var(--magenta);
            background: #fff3f9
        }

        /* ---------- cashier ---------- */
        .pos {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 18px;
            align-items: start
        }

        .pos .panel {
            background: #fff;
            border-radius: var(--r-lg);
            box-shadow: var(--sh);
            padding: 20px
        }

        .scanbox {
            border: 2.5px dashed var(--pink);
            border-radius: 22px;
            padding: 26px;
            text-align: center;
            background: var(--grad-soft)
        }

        .member-live {
            background: var(--grad);
            color: #fff;
            border-radius: 22px;
            padding: 18px;
            display: flex;
            gap: 14px;
            align-items: center;
            box-shadow: var(--sh-2)
        }

        .member-live .av {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .25);
            display: grid;
            place-items: center;
            font-size: 22px;
            font-family: var(--font-h);
            flex: none
        }

        .amount-in {
            font-family: var(--font-h);
            font-size: 32px !important;
            font-weight: 600;
            text-align: right;
            padding: 16px 18px !important;
            border-radius: 20px !important;
            color: var(--magenta)
        }

        .reward-box {
            background: var(--grad-soft);
            border-radius: 20px;
            padding: 17px;
            border: 1.5px solid #ffd9ec
        }

        .rline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            font-size: 14px
        }

        .rline b {
            font-family: var(--font-h);
            font-size: 17px;
            color: var(--magenta)
        }

        .rline.tot {
            border-top: 1.5px dashed #ffc9e4;
            margin-top: 6px;
            padding-top: 12px
        }

        .qbtns {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 10px
        }

        .qbtns button {
            padding: 10px 4px;
            border-radius: 13px;
            border: 1.5px solid var(--line);
            background: #fff;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--magenta);
            cursor: pointer
        }

        .qbtns button:hover {
            background: var(--pink-soft)
        }

        .cart-i {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dashed #ffe7f2;
            font-size: 13.5px
        }

        .cart-i .g {
            flex: 1;
            min-width: 0
        }

        .qty {
            display: flex;
            align-items: center;
            gap: 7px
        }

        .qty button {
            width: 27px;
            height: 27px;
            border-radius: 9px;
            border: 1.5px solid var(--line);
            background: #fff;
            cursor: pointer;
            font-weight: 700;
            color: var(--magenta)
        }

        .vch {
            border: 1.5px solid var(--line);
            border-radius: 18px;
            padding: 14px;
            cursor: pointer;
            transition: .2s;
            background: #fff;
            margin-bottom: 10px
        }

        .vch:hover {
            border-color: var(--pink)
        }

        .vch.on {
            border-color: var(--magenta);
            background: #fff3f9;
            box-shadow: 0 0 0 3px rgba(230, 25, 127, .09)
        }

        .vch .n {
            font-weight: 600;
            font-size: 14.5px
        }

        /* ---------- modal / toast ---------- */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(58, 36, 52, .45);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            animation: fade .2s
        }

        .modal {
            background: #fff;
            border-radius: 28px;
            width: 100%;
            max-width: 470px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 26px;
            box-shadow: var(--sh-2);
            animation: pop .3s cubic-bezier(.2, 1.2, .4, 1)
        }

        .modal.wide {
            max-width: 740px
        }

        @keyframes pop {
            from {
                transform: scale(.9) translateY(18px);
                opacity: 0
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        .modal .x {
            position: absolute;
            top: 0;
            right: 0
        }

        .modal-h {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            gap: 10px
        }

        .modal-h h3 {
            font-size: 20px;
            font-weight: 600
        }

        .xbtn {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            border: 0;
            background: #fff0f7;
            color: var(--magenta);
            font-size: 17px;
            cursor: pointer;
            flex: none
        }

        #toasts {
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 200;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: calc(100vw - 32px)
        }

        .toast {
            background: #fff;
            border-radius: 17px;
            padding: 13px 17px;
            box-shadow: var(--sh-2);
            display: flex;
            gap: 11px;
            align-items: center;
            font-size: 13.5px;
            font-weight: 500;
            border-left: 5px solid var(--magenta);
            animation: slide .3s;
            min-width: 230px
        }

        .toast.ok {
            border-color: var(--ok)
        }

        .toast.bad {
            border-color: var(--danger)
        }

        @keyframes slide {
            from {
                transform: translateX(110%);
                opacity: 0
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        .skel {
            background: linear-gradient(90deg, #ffeef6 25%, #fff7fb 50%, #ffeef6 75%);
            background-size: 200% 100%;
            animation: sk 1.2s infinite;
            border-radius: 12px;
            height: 14px
        }

        @keyframes sk {
            from {
                background-position: 200% 0
            }

            to {
                background-position: -200% 0
            }
        }

        .spin {
            width: 34px;
            height: 34px;
            border: 3.5px solid var(--pink-soft2);
            border-top-color: var(--magenta);
            border-radius: 50%;
            animation: sp .8s linear infinite;
            margin: auto
        }

        @keyframes sp {
            to {
                transform: rotate(360deg)
            }
        }

        .center-page {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 20px;
            position: relative;
            overflow: hidden
        }

        @media(max-width:1024px) {
            .pos {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:860px) {
            .side {
                position: fixed;
                left: 0;
                top: 0;
                z-index: 70;
                transform: translateX(-102%);
                transition: .28s;
                box-shadow: var(--sh-2)
            }

            .side.open {
                transform: none
            }

            .hamb {
                display: block
            }

            .content {
                padding: 16px 14px 90px
            }

            .top {
                padding: 12px 14px
            }

            .bottom-nav {
                display: flex
            }

            .mstat {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:768px) {
            .pub-nav-btns {
                display: none !important
            }

            .pub-nav .in {
                padding: 10px 18px;
            }

            .logo img {
                height: 70px;
            }
        }

        @media(max-width:480px) {
            .modal {
                padding: 20px;
                border-radius: 24px
            }

            .stat .v {
                font-size: 19px
            }
        }