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

        :root {
            --ink:    #1a1a2e;
            --gold:   #c9a84c;
            --gold-lt:#e8c97a;
            --cream:  #f5f7fa;
            --muted:  #7a7a8a;
            --border: #e4ddd0;
            --blue:   #1809ba;
            --white:  #ffffff;
            --radius: 14px;
        }

        body {
            background: var(--cream);
            color: var(--ink);
            min-height: 100vh;
        }

        .chr-label { color: #fff; }

      
        .content-wrap {
            max-width: 1250px;
            margin: 0 auto;
            padding: 2.5rem 1.25rem 4rem;
        }

        /* ── Package Card ───────────────────────────────────── */
        .package-card {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: 0 4px 30px rgba(26, 26, 46, .09);
            overflow: hidden;
            margin-bottom: 2rem;
            animation: fadeUp .45s ease both;
        }

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

        /* ── Card Banner ────────────────────────────────────── */
        .card-banner {
            display: flex;
            align-items: center;
            gap: .75rem;
            flex-wrap: wrap;
            background: #002460;
            padding: 0 .75rem 0 0;
        }

        .chr-user-info {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
            padding: 15px;
        }

        .chr-name {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
        }

        /* Banner right actions */
        .banner-actions {
            display: flex;
            align-items: center;
            gap: .6rem;
            margin-left: auto;
            padding: 12px 4px 12px 0;
            flex-wrap: wrap;
        }

        .badge-active {
            background: #22c55e;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: .28rem .75rem;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            white-space: nowrap;
        }

        /* Cart & Invoice buttons */
        .chr-cart-btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: rgba(255,255,255,.12);
            color: #fff;
            border: 1.5px solid rgba(255,255,255,.3);
            padding: .4rem .85rem;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 500;
            text-decoration: none;
            transition: background .2s;
            cursor: pointer;
            white-space: nowrap;
        }

        .chr-cart-btn:hover {
            background: rgba(255,255,255,.22);
            color: #fff;
        }

        .chr-cart-count {
            background: #e74c3c;
            color: #fff;
            font-size: .62rem;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ── Card Body ──────────────────────────────────────── */
        .card-body { padding: 1.5rem; }

        /* ── Info Grid ──────────────────────────────────────── */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.75rem;
        }

        .info-tile {
            background: var(--white);
            border: 1.5px solid #e8edf2;
            border-radius: 12px;
            padding: 1rem 1.1rem;
            display: flex;
            align-items: center;
            gap: .85rem;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
            transition: box-shadow .2s, border-color .2s;
        }

        .info-tile:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,.08);
            border-color: #c5d0e0;
        }

        .tile-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .tile-icon.blue   { background: #eef2ff; color: #3b5bdb; }
        .tile-icon.green  { background: #e8faf0; color: #22c55e; }
        .tile-icon.teal   { background: #e0f7f5; color: #0d9488; }
        .tile-icon.orange { background: #fff4e6; color: #e67e22; }

        .tile-text .label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: .2rem;
        }

        .tile-text .value {
            font-weight: 700;
            font-size: 14px;
            color: var(--ink);
            line-height: 1.2;
        }

        .tile-text .value.amount { color: #22c55e; }
        .tile-text .value.expire { color: #e67e22; }

        /* ── Divider ────────────────────────────────────────── */
        .divider {
            border: none;
            border-top: 1px solid var(--border);
            margin: 1.5rem 0;
        }

        /* ── Section Label ──────────────────────────────────── */
        .section-label {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: .75rem;
        }

        /* ── Category Cards Grid ────────────────────────────── */
        .cate-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
            gap: .75rem;
            margin-top: .75rem;
        }

        .cate-card {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .75rem;
            padding: .75rem 1rem;
            background: #f8faff;
            border: 1px solid #e2edf8;
            border-radius: 10px;
            transition: transform .2s ease, box-shadow .2s ease;
            cursor: default;
        }

        .cate-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(59,130,246,.12);
            border-color: #bfdbfe;
            background: #eff6ff;
        }

        .cate-icon-wrap {
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 8px;
            background: #e0eeff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cate-icon-wrap img { object-fit: contain; }

        .cate-card-name {
            font-size: 11.5px;
            font-weight: 700;
            color: #1e3a5f;
            line-height: 1.3;
        }

        /* ── Print / Invoice ────────────────────────────────── */
        .cilbaba { display: none; }

        @media print {
            body * { visibility: hidden; }
            .cilbaba, .cilbaba * { visibility: visible; }
            .cilbaba {
                display: block !important;
                position: fixed;
                inset: 0;
                background: #fff;
                padding: 2rem;
             
            }
            .inv-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                border-bottom: 2px solid #1a1a2e;
                padding-bottom: 1rem;
                margin-bottom: 1.5rem;
            }
            .inv-title {  font-size: 2rem; color: #1a1a2e; }
            .inv-meta  { font-size: .8rem; color: #555; margin-top: .5rem; }
            .inv-addresses { display: flex; gap: 3rem; margin-bottom: 1.5rem; }
            .inv-addr h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: .4rem; }
            .inv-addr p  { font-size: .9rem; line-height: 1.6; }
            .inv-table   { width: 100%; border-collapse: collapse; font-size: .88rem; }
            .inv-table th { background: #1a1a2e; color: #c9a84c; padding: .6rem .9rem; text-align: left; }
            .inv-table td { padding: .6rem .9rem; border-bottom: 1px solid #ddd; }
            .inv-table .total-row td,
            .inv-table .total-row th { background: #f5f0e8; font-weight: 700; }
            .inv-footer { margin-top: 2rem; display: flex; justify-content: space-between; font-size: .82rem; color: #555; }
            .stamp { font-size: 2rem; font-weight: 900; color: #2d6a4f; border: 3px solid #2d6a4f; padding: .2rem .8rem; border-radius: 6px; display: inline-block; }
            .stamp.unpaid { color: #c0392b; border-color: #c0392b; }
        }

       

        /* Tablet (≤ 900px) */
        @media (max-width: 900px) {
            .info-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .cate-card-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
        }

        /* Large phone (≤ 680px) */
        @media (max-width: 680px) {
            .content-wrap {
                padding: 1.25rem .75rem 3rem;
            }

            /* Banner stacks vertically */
            .card-banner {
                flex-direction: column;
                align-items: flex-start;
                padding: 0;
            }

            .chr-user-info {
                padding: 14px 14px 8px;
                width: 100%;
            }

            .banner-actions {
                margin-left: 0;
                width: 100%;
                padding: 8px 12px 12px;
                gap: .5rem;
                flex-wrap: wrap;
            }

            .chr-cart-btn {
                flex: 1 1 auto;
                justify-content: center;
                min-width: 120px;
                font-size: 12px;
                padding: .42rem .7rem;
            }

            .badge-active {
                font-size: 11px;
                padding: .25rem .65rem;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: .7rem;
            }

            .info-tile {
                padding: .85rem 1rem;
            }

            .tile-icon {
                width: 38px;
                height: 38px;
            }

           
            .cate-card-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: .6rem;
            }

            .cate-card {
                padding: .6rem .75rem;
                gap: .55rem;
            }

            .cate-icon-wrap {
                width: 38px;
                height: 38px;
                min-width: 38px;
            }

            .cate-card-name {
                font-size: 11px;
            }

            .card-body {
                padding: 1.1rem;
            }
        }

       
        @media (max-width: 420px) {
            /* Category cards: 1 per row */
            .cate-card-grid {
                grid-template-columns: 1fr;
            }

            /* Tile icons smaller */
            .tile-icon {
                width: 34px;
                height: 34px;
            }

            .tile-icon svg {
                width: 18px;
                height: 18px;
            }

          
            .chr-cart-btn {
                font-size: 11px;
                padding: .38rem .6rem;
            }

            .chr-name {
                font-size: 13px;
            }

            .section-label {
                font-size: 11px;
            }

            .card-body {
                padding: .85rem;
            }
        }

       
        @media (max-width: 360px) {
            .banner-actions {
                gap: .4rem;
            }

            .chr-cart-btn {
                font-size: 10px;
                padding: .35rem .5rem;
                gap: .3rem;
            }

            .chr-cart-btn svg {
                width: 13px;
                height: 13px;
            }
        }