@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

        :root {
            --bg-body: #F7F5F1;
            --bg-surface: #FFFFFF;
            --text-main: #1C1B1E;
            --text-muted: #74726C;
            --primary: #16233F;
            --primary-light: #2B3B5E;
            --hover-bg: #F0EEE8;
            --border-radius: 10px;
            --shadow-soft: 0px 2px 10px rgba(20, 19, 15, 0.05);
            --shadow-card: 0px 1px 2px rgba(20, 19, 15, 0.04), 0px 10px 22px rgba(20, 19, 15, 0.05);
            --shadow-elevated: 0px 16px 32px rgba(20, 19, 15, 0.12);
            --shadow-up: 0px -2px 14px rgba(20, 19, 15, 0.06);
            --success-bg: #EAF3EA;
            --success-text: #276B3E;
            --warn-bg: #FBF2E1;
            --warn-text: #8A5A12;
            --danger: #B23A3A;
            --accent: #A9762F;
            --accent-dark: #86601F;
            --brand-gradient: linear-gradient(135deg, #16233F 0%, #263A63 100%);
            --card-border: 1px solid rgba(28, 27, 30, 0.08);
            --font-display: 'Fraunces', serif;
        }

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

        :focus { outline: none; }
        :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            min-height: 100vh;
        }

        img { max-width: 100%; display: block; }

        /* ============================================================
           TOP BAR (replaces the old dashboard sidebar with a shop header)
           ============================================================ */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 500;
            background: var(--bg-surface);
            box-shadow: var(--shadow-soft);
        }

        .topbar-inner {
            max-width: 1240px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 24px;
        }

        .brand {
            font-family: var(--font-display);
            font-size: 21px;
            font-weight: 600;
            letter-spacing: -0.2px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-main);
            flex-shrink: 0;
            white-space: nowrap;
        }
        .brand i { font-size: 26px; color: var(--primary); }
        .brand img { height: 30px; width: auto; display: block; }

        .topbar-nav { display: flex; gap: 4px; flex-shrink: 0; }
        .nav-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 10px;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 14.5px;
            cursor: pointer;
            white-space: nowrap;
            transition: 0.2s ease;
        }
        .nav-link i { font-size: 19px; }
        .nav-link:hover { background: var(--hover-bg); color: var(--primary); }
        .nav-link.active { background: var(--hover-bg); color: var(--primary); }

        .topbar-search {
            flex: 1;
            min-width: 110px;
            max-width: 380px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-body);
            border: 1.5px solid transparent;
            border-radius: 12px;
            padding: 10px 14px;
            transition: 0.2s ease;
        }
        .topbar-search:focus-within { border-color: var(--primary); background: var(--bg-surface); }
        .topbar-search i { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
        .topbar-search input {
            border: none; outline: none; background: transparent; width: 100%;
            font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-main);
        }
        .topbar-search input::placeholder { color: var(--text-muted); }

        .topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

        .icon-pill {
            width: 40px; height: 40px; border-radius: 50%; border: none;
            background: var(--hover-bg); color: var(--text-muted); font-size: 19px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: 0.2s ease; position: relative;
        }
        .icon-pill:hover { background: var(--primary); color: #fff; }
        .notif-badge {
            position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
            background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-surface);
        }

        /* --- NOTIFICATIONS --- */
        .notif-item { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--bg-body); }
        .notif-item:last-child { border-bottom: none; }
        .notif-item.unread { background: var(--hover-bg); border-radius: 10px; padding: 14px 10px; }
        .notif-item i.notif-icon {
            width: 38px; height: 38px; border-radius: 50%; background: var(--hover-bg); color: var(--primary);
            display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
        }
        .notif-item .notif-text { font-size: 13.5px; color: var(--text-main); line-height: 1.5; }
        .notif-item .notif-time { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

        /* --- HELP & SUPPORT / ABOUT --- */
        .support-row {
            display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--bg-body);
            color: var(--text-main); text-decoration: none;
        }
        .support-row:last-child { border-bottom: none; }
        .support-row i { font-size: 20px; color: var(--primary); width: 24px; flex-shrink: 0; }
        .support-row .support-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
        .support-row .support-sub { font-size: 12.5px; color: var(--text-muted); }
        .faq-item { padding: 12px 0; border-bottom: 1px dashed #E4DFD1; }
        .faq-item:last-child { border-bottom: none; }
        .faq-q { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
        .faq-a { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

        .about-logo { text-align: center; margin-bottom: 18px; }
        .about-logo i { font-size: 52px; color: var(--primary); }
        .about-logo img { height: 60px; width: auto; display: block; margin: 0 auto; }
        .about-row { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--bg-body); font-size: 13.5px; }
        .about-row:last-child { border-bottom: none; }
        .about-row span:first-child { color: var(--text-muted); }
        .about-row span:last-child { font-weight: 700; color: var(--text-main); }

        .nav-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: #fff; font-weight: 700; font-size: 14px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0;
            border: 2px solid transparent; transition: 0.2s ease;
        }
        .nav-avatar:hover, .nav-avatar.active { border-color: var(--accent); }

        /* ============================================================
           PAGE LAYOUT
           ============================================================ */
        .shop-wrap { max-width: 1240px; margin: 0 auto; padding: 26px 24px 60px; }

        .page-section { display: none; }
        .page-section.active { display: block; }

        .page-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 20px; }

        /* --- HERO BANNER --- */
        .hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            background: var(--brand-gradient);
            border-radius: 14px;
            padding: 36px 40px;
            color: #fff;
            margin-bottom: 24px;
            box-shadow: 0px 14px 28px rgba(22, 35, 63, 0.22);
            overflow: hidden;
            isolation: isolate;
            border-left: 3px solid var(--accent);
        }
        .hero-text { position: relative; z-index: 1; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 6px; color: #D8BE8C;
            font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
            margin-bottom: 14px;
        }
        .hero-badge i { font-size: 13px; }
        .hero-text h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; max-width: 440px; letter-spacing: -0.2px; }
        .hero-text p { font-size: 14px; opacity: 0.78; max-width: 400px; line-height: 1.6; }
        .hero-icon { position: relative; z-index: 1; font-size: 72px; opacity: 0.5; color: var(--accent); flex-shrink: 0; }

        /* --- TOOLBAR --- */
        .shop-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
        }
        .result-count { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }

        /* --- PRODUCT GRID --- */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 20px;
        }

        .card {
            background: var(--bg-surface);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            border: var(--card-border);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: #E4DFD1; }
        .card:active { transform: translateY(-1px) scale(0.99); }

        .card-img-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            background: var(--hover-bg);
            overflow: hidden;
        }
        .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
        .card-icon-fallback {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            font-size: 44px; color: var(--primary);
            background: linear-gradient(150deg, #F1EEE6 0%, #F7F5F1 100%);
        }
        .card-badge {
            position: absolute; top: 10px; left: 10px;
            background: rgba(255,255,255,0.96); color: #8A6A1E;
            font-size: 12px; font-weight: 700;
            padding: 4px 9px; border-radius: 6px;
            display: flex; align-items: center; gap: 4px;
            box-shadow: 0px 2px 6px rgba(20, 19, 15, 0.1);
        }
        .card-badge i { color: #B8860B; }

        .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
        .card-title {
            font-size: 15px; font-weight: 700; line-height: 1.35; min-height: 2.7em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .card-desc {
            font-size: 12.5px; color: var(--text-muted); line-height: 1.5; flex: 1; min-height: 3em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #E4DFD1; }
        .card-price { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-main); }
        .card-cta {
            color: var(--accent-dark); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 2px;
            background: #F3EAD6; padding: 6px 10px; border-radius: 7px; transition: 0.2s ease;
        }
        .card-cta i { font-size: 16px; transition: transform 0.2s ease; }
        .card:hover .card-cta { background: var(--accent); color: #fff; }
        .card:hover .card-cta i { transform: translateX(2px); }

        /* Orders Page Styles */
        .empty-state {
            text-align: center; padding: 60px 20px; color: var(--text-muted);
            background: var(--bg-surface); border-radius: var(--border-radius); box-shadow: var(--shadow-card); border: var(--card-border);
        }
        .empty-state i {
            font-size: 42px; margin-bottom: 16px; color: var(--primary);
            width: 84px; height: 84px; border-radius: 50%; background: var(--hover-bg);
            display: inline-flex; align-items: center; justify-content: center;
        }
        .empty-state h3 { color: var(--text-main); margin-bottom: 6px; font-size: 16px; }
        .empty-state p { font-size: 13.5px; max-width: 320px; margin: 0 auto; }

        .order-card {
            background: var(--bg-surface);
            border-radius: var(--border-radius);
            padding: 22px;
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-card);
            border: var(--card-border);
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .order-card:hover { box-shadow: var(--shadow-elevated); }

        .order-card-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
        .order-info { display: flex; align-items: center; gap: 15px; min-width: 0; flex: 1; }
        .order-icon {
            width: 52px; height: 52px; background: var(--hover-bg); background-image: linear-gradient(135deg, #F1EEE6, #F7F5F1);
            border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 23px; color: var(--primary);
        }
        .order-details { min-width: 0; }
        .order-details h3 {
            font-size: 16px; color: var(--text-main); margin-bottom: 4px; font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .order-details p { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .order-meta { text-align: right; flex-shrink: 0; }
        .order-meta .price { font-size: 17px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }

        .order-status {
            background: var(--success-bg); color: var(--success-text); padding: 5px 11px; border-radius: 6px;
            font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px;
        }
        .order-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
        .order-status.stage-0 { background: #E7EAF0; color: var(--primary); }
        .order-status.stage-1 { background: var(--warn-bg); color: var(--warn-text); }
        .order-status.stage-2 { background: #EFE7D8; color: var(--accent-dark); }
        .order-status.stage-3 { background: var(--success-bg); color: var(--success-text); }
        .order-status.cancelled { background: #F7E7E7; color: var(--danger); }

        .order-cancelled-note {
            margin-top: 16px; padding-top: 16px; border-top: 1px dashed #E4DFD1;
            display: flex; align-items: center; gap: 10px; color: var(--danger); font-size: 13px; font-weight: 600;
        }
        .order-cancelled-note i { font-size: 20px; }

        /* --- MODALS --- */
        .modal-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(32, 35, 58, 0.45); backdrop-filter: blur(4px);
            z-index: 2000; align-items: center; justify-content: center; padding: 20px;
        }
        .modal {
            background: var(--bg-surface); width: 100%; max-width: 460px;
            border-radius: 16px; padding: 24px;
            box-shadow: 0 20px 40px rgba(20, 19, 15, 0.14);
            position: relative;
            transform: translateY(20px);
            animation: slideUp 0.3s forwards;
            max-height: 88vh;
            overflow-y: auto;
        }
        @keyframes slideUp { to { transform: translateY(0); opacity: 1; } }

        .close-btn {
            position: absolute; top: 16px; right: 16px; background: var(--bg-body); border: none;
            color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-size: 18px; transition: 0.2s;
        }
        .close-btn:hover { background: var(--hover-bg); color: var(--text-main); }

        /* --- PRODUCT IMAGE GALLERY --- */
        .modal-gallery {
            position: relative;
            aspect-ratio: 4 / 3;
            max-height: 320px;
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            background: var(--hover-bg);
        }
        .gallery-track {
            display: flex; height: 100%; overflow-x: auto;
            scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
        }
        .gallery-track::-webkit-scrollbar { display: none; }
        .gallery-slide {
            flex: 0 0 100%; scroll-snap-align: start;
            display: flex; align-items: center; justify-content: center; font-size: 60px; color: var(--primary);
        }
        .gallery-slide img { width: 100%; height: 100%; object-fit: cover; }

        .gallery-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 34px; height: 34px; border-radius: 50%; border: none;
            background: rgba(255,255,255,0.85); color: var(--text-main);
            display: flex; align-items: center; justify-content: center; font-size: 18px;
            cursor: pointer; box-shadow: 0px 4px 12px rgba(0,0,0,0.12); transition: 0.15s;
        }
        .gallery-arrow:hover { background: var(--primary); color: #fff; }
        .gallery-arrow.prev { left: 10px; }
        .gallery-arrow.next { right: 10px; }
        .gallery-arrow.hidden { display: none; }

        .gallery-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
        .gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.7); border: 1px solid rgba(43,54,116,0.15); transition: 0.2s; }
        .gallery-dot.active { background: var(--primary); width: 16px; border-radius: 4px; }

        .modal-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
        .modal-rating { color: #B8860B; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
        .modal-desc { color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; font-size: 14px; }

        .modal-action { display: flex; justify-content: space-between; align-items: center; background: var(--bg-body); padding: 16px; border-radius: 12px; }

        .btn-primary {
            background: var(--primary); color: #FFFFFF; border: none; padding: 12px 24px; border-radius: 10px;
            font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.18s ease;
        }
        .btn-primary:hover { background: var(--primary-light); }
        .btn-primary:active { transform: scale(0.98); }
        .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

        .btn-accent {
            background: var(--accent); color: #fff; border: none; padding: 12px 24px; border-radius: 10px;
            font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.18s ease;
        }
        .btn-accent:hover { background: var(--accent-dark); }
        .btn-accent:active { transform: scale(0.98); }

        .order-summary { background: var(--bg-body); padding: 16px; border-radius: 12px; margin-bottom: 20px; }
        .summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--text-muted); }
        .summary-row.total { border-top: 1px solid #E4DFD1; padding-top: 12px; margin-bottom: 0; color: var(--text-main); font-size: 16px; font-weight: 700; }

        /* --- ADDRESS / CHECKOUT FORM --- */
        .form-row-2 { display: flex; gap: 10px; }
        .form-row-2 .input-group { flex: 1; min-width: 0; }
        .section-subtitle { font-size: 13px; font-weight: 700; color: var(--text-main); margin: 18px 0 10px; }

        .addr-type-row { display: flex; gap: 10px; margin-bottom: 4px; }
        .addr-type-btn {
            flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-size: 13px; font-weight: 700;
            color: var(--text-muted); border: 1.5px solid #E4DFD1; cursor: pointer; transition: 0.2s;
        }
        .addr-type-btn.active { background: var(--hover-bg); color: var(--primary); border-color: var(--primary); }

        .payment-option {
            display: flex; align-items: center; gap: 12px; border: 1.5px solid #E4DFD1; border-radius: 12px;
            padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; background: var(--bg-body);
        }
        .payment-option:hover { border-color: var(--primary-light); }
        .payment-option.active { border-color: var(--primary); background: var(--hover-bg); }
        .payment-option > i:first-child { font-size: 22px; color: var(--primary); flex-shrink: 0; }
        .payment-option .pm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .payment-option .pm-text strong { font-size: 14px; color: var(--text-main); }
        .payment-option .pm-text span { font-size: 12px; color: var(--text-muted); }
        .payment-option .check-icon { font-size: 20px; color: #CFC9BC; flex-shrink: 0; }
        .payment-option.active .check-icon { color: var(--primary); }

        .order-deliver-box {
            background: var(--bg-body); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
            display: flex; gap: 12px; align-items: flex-start;
        }
        .order-deliver-box i { font-size: 18px; color: var(--primary); margin-top: 2px; flex-shrink: 0; }
        .order-deliver-box .deliver-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
        .order-deliver-box .deliver-text { font-size: 13.5px; color: var(--text-main); line-height: 1.5; }
        .order-deliver-box .deliver-pm { font-size: 12.5px; color: var(--primary); font-weight: 700; margin-top: 4px; }

        .order-address-line { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
        .order-address-line i { font-size: 14px; }

        /* --- PREMIUM ACCOUNT (post-delivery unlock) --- */
        .order-premium-box { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #E4DFD1; }
        .btn-premium {
            width: 100%; background: var(--brand-gradient); color: #fff; border: none; padding: 12px 16px; border-radius: 10px;
            font-weight: 700; font-size: 13.5px; cursor: pointer; transition: 0.18s ease;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-premium i { font-size: 17px; }
        .btn-premium:hover { filter: brightness(1.08); }
        .btn-premium:active { transform: scale(0.98); }
        .btn-premium.view { background: var(--hover-bg); color: var(--primary); }
        .btn-premium.view:hover { background: #E7E2D4; filter: none; }

        .premium-cred-row {
            display: flex; align-items: center; gap: 10px; border: 1.5px solid #E4DFD1; border-radius: 12px;
            padding: 13px 14px; margin-bottom: 14px; background: var(--bg-body);
        }
        .premium-cred-row .pcr-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; }
        .premium-cred-row .pcr-value { font-size: 14px; color: var(--text-main); font-weight: 600; word-break: break-all; }
        .premium-cred-row .pcr-toggle {
            background: var(--hover-bg); border: none; width: 32px; height: 32px; border-radius: 8px;
            color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px;
        }
        .premium-cred-row .pcr-toggle:hover { background: #E7E2D4; }

        /* --- PREMIUM ACCOUNT DASHBOARD (full view with validity/renewal) --- */
        .modal-wide { max-width: 500px; }

        .premium-dash-hero {
            position: relative; overflow: hidden; background: var(--brand-gradient); color: #fff;
            border-radius: 14px; padding: 22px; margin-bottom: 20px;
        }
        .premium-dash-hero .icon-circle {
            width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18);
            border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
            font-size: 24px; margin-bottom: 14px;
        }
        .premium-dash-hero h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
        .premium-dash-hero p { font-size: 13px; opacity: 0.85; }
        .premium-dash-status {
            display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px;
            font-size: 12px; font-weight: 700; margin-top: 14px; background: rgba(255,255,255,0.2);
        }
        .premium-dash-status.expiring { background: #F5A524; color: #3A2400; }
        .premium-dash-status.expired { background: #E5484D; color: #fff; }

        .premium-days-row { display: flex; gap: 12px; margin-bottom: 18px; }
        .premium-days-box { flex: 1; background: var(--bg-body); border-radius: 12px; padding: 14px; text-align: center; }
        .premium-days-box .num { font-size: 22px; font-weight: 800; color: var(--text-main); }
        .premium-days-box .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

        .premium-progress-track { height: 8px; border-radius: 6px; background: #E4DFD1; overflow: hidden; margin-bottom: 6px; }
        .premium-progress-fill { height: 100%; background: var(--brand-gradient); border-radius: 6px; transition: width 0.5s ease; }
        .premium-progress-fill.expiring { background: #F5A524; }
        .premium-progress-fill.expired { background: var(--danger); }
        .premium-progress-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 18px; }

        .btn-renew {
            width: 100%; background: var(--accent); color: #fff; border: none; padding: 13px 16px; border-radius: 10px;
            font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 6px; transition: 0.18s ease;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-renew:hover { background: var(--accent-dark); }
        .btn-renew:active { transform: scale(0.98); }

        .login-gate-close {
            position: absolute; top: 16px; right: 16px; background: var(--bg-body); border: none;
            color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
            display: none; align-items: center; justify-content: center; font-size: 18px; transition: 0.2s;
        }
        .login-gate-close:hover { background: var(--hover-bg); color: var(--text-main); }
        .login-gate-note {
            display: none; align-items: center; gap: 8px; background: var(--hover-bg); color: var(--primary);
            font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px; margin-bottom: 20px;
        }
        .login-gate-note i { font-size: 16px; flex-shrink: 0; }

        /* --- MOBILE BOTTOM NAV --- */
        .mobile-bottom-nav {
            display: none; position: fixed; bottom: 0; left: 0; width: 100%;
            background-color: var(--bg-surface); box-shadow: var(--shadow-up);
            padding: 12px 20px; justify-content: space-between; align-items: center;
            z-index: 1000; border-top-left-radius: 14px; border-top-right-radius: 14px;
            border-top: var(--card-border);
        }
        .mobile-nav-item {
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            color: var(--text-muted); font-size: 12px; font-weight: 600; flex: 1; cursor: pointer;
        }
        .mobile-nav-item i { font-size: 24px; padding: 8px; border-radius: 12px; transition: all 0.2s ease; }
        .mobile-nav-item.active { color: var(--primary); }
        .mobile-nav-item.active i { background-color: var(--primary); color: white; }
        .mobile-nav-item:active i { transform: scale(0.92); }

        /* --- LOGIN SCREEN --- */
        .login-screen {
            position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
            padding: 20px; background: radial-gradient(circle at 15% 15%, #2B3B5E 0%, #16233F 45%, #0B1322 100%);
        }
        .login-card {
            width: 100%; max-width: 380px; background: var(--bg-surface); border-radius: 16px; padding: 36px 30px;
            box-shadow: 0 30px 60px rgba(11, 19, 34, 0.35); animation: slideUp 0.35s ease forwards;
        }
        .login-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 28px; }
        .login-brand i { font-size: 26px; color: var(--primary); }
        .login-brand img { height: 32px; width: auto; display: block; }
        .login-card h2 { font-family: var(--font-display); font-size: 25px; font-weight: 600; margin-bottom: 6px; }
        .login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 26px; }

        .input-group {
            display: flex; align-items: center; gap: 10px; border: 1.5px solid #E4DFD1; border-radius: 12px;
            padding: 13px 14px; margin-bottom: 14px; transition: border-color 0.2s; background: var(--bg-body);
        }
        .input-group:focus-within { border-color: var(--primary); }
        .input-group i { font-size: 18px; color: var(--text-muted); }
        .input-group input { border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-main); width: 100%; }

        .login-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
        .login-row a { color: var(--primary); text-decoration: none; font-weight: 600; }

        .login-footer { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 20px; }
        .login-footer a { color: var(--primary); font-weight: 600; text-decoration: none; }
        .login-error { color: var(--danger); font-size: 12.5px; font-weight: 600; margin: -6px 0 14px 2px; display: none; }
        .login-error.show { display: block; }
        .login-info { color: var(--success-text); background: var(--success-bg); font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px; margin: -6px 0 14px 0; display: none; }
        .login-info.show { display: block; }

        .auth-tabs { display: flex; background: var(--bg-body); border-radius: 12px; padding: 4px; margin-bottom: 22px; }
        .auth-tab { flex: 1; text-align: center; padding: 10px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
        .auth-tab.active { background: var(--bg-surface); color: var(--primary); box-shadow: var(--shadow-soft); }

        /* --- PROFILE PAGE --- */
        .profile-header-card {
            position: relative; overflow: hidden; isolation: isolate;
            background: var(--brand-gradient);
            border-radius: 14px; padding: 26px; display: flex; align-items: center; gap: 18px;
            color: #fff; margin-bottom: 20px; box-shadow: 0px 10px 22px rgba(22, 35, 63, 0.25);
            border-left: 3px solid var(--accent);
        }
        .avatar-circle {
            position: relative; z-index: 1;
            width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,0.18);
            border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
            font-size: 22px; font-weight: 700; flex-shrink: 0;
        }
        .profile-header-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
        .profile-header-info h2 { font-size: 19px; margin-bottom: 4px; }
        .profile-header-info p { font-size: 13px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .edit-profile-btn {
            position: relative; z-index: 1;
            background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); color: #fff;
            width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 17px; cursor: pointer; flex-shrink: 0; transition: 0.2s;
        }
        .edit-profile-btn:hover { background: rgba(255,255,255,0.3); }

        .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
        .profile-stat-card {
            background: var(--bg-surface); border-radius: 14px; padding: 18px 12px; text-align: center;
            box-shadow: var(--shadow-card); border: var(--card-border); transition: transform 0.2s, box-shadow 0.2s;
        }
        .profile-stat-card:hover { box-shadow: var(--shadow-elevated); }
        .profile-stat-card .stat-value { font-size: 19px; font-weight: 800; color: var(--text-main); margin-bottom: 3px; }
        .profile-stat-card .stat-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

        .profile-menu { background: var(--bg-surface); border-radius: var(--border-radius); box-shadow: var(--shadow-card); border: var(--card-border); overflow: hidden; }
        .profile-menu-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; border-bottom: 1px solid var(--bg-body); transition: background 0.15s; }
        .profile-menu-item:last-child { border-bottom: none; }
        .profile-menu-item:hover, .profile-menu-item:active { background: var(--hover-bg); }
        .profile-menu-item i.pmi-icon { font-size: 20px; color: var(--primary); width: 22px; }
        .profile-menu-item span.pmi-label { flex: 1; font-weight: 600; font-size: 14.5px; }
        .profile-menu-item i.pmi-chev { color: var(--text-muted); font-size: 18px; }
        .profile-menu-item.danger i.pmi-icon, .profile-menu-item.danger span.pmi-label { color: var(--danger); }

        /* --- ORDER TRACKING --- */
        .order-tracking { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #E4DFD1; width: 100%; }
        .tracking-badge-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
        .tracking-eta { font-size: 12px; color: var(--text-muted); font-weight: 600; }
        .tracking-track { position: relative; display: flex; justify-content: space-between; }
        .tracking-track::before { content: ''; position: absolute; top: 16px; left: 17px; right: 17px; height: 4px; background: #E4DFD1; border-radius: 4px; z-index: 0; }
        .tracking-fill { position: absolute; top: 16px; left: 17px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 4px; z-index: 1; transition: width 0.7s ease; box-shadow: 0 2px 8px rgba(67, 24, 255, 0.35); }
        .tracking-step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; }
        .tracking-dot {
            width: 34px; height: 34px; border-radius: 50%; background: var(--bg-surface); border: 3px solid #E4DFD1;
            display: flex; align-items: center; justify-content: center; font-size: 15px; color: #B7AF9E;
            transition: all 0.4s ease; box-shadow: 0 2px 6px rgba(19, 22, 45, 0.05);
        }
        .tracking-step.done .tracking-dot { border-color: var(--primary); background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 10px rgba(67, 24, 255, 0.3); }
        .tracking-step.current .tracking-dot { border-color: var(--primary); background: var(--bg-surface); color: var(--primary); animation: trackPulse 1.6s infinite; }
        @keyframes trackPulse { 0% { box-shadow: 0 0 0 0 rgba(67, 24, 255, 0.35); } 70% { box-shadow: 0 0 0 8px rgba(67, 24, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 24, 255, 0); } }
        .tracking-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.3; max-width: 72px; }
        .tracking-step.done .tracking-label, .tracking-step.current .tracking-label { color: var(--text-main); font-weight: 700; }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1000px) {
            .grid { grid-template-columns: repeat(3, 1fr); }
        }

        @media (max-width: 768px) {
            .topbar-nav { display: none; }
            .topbar-inner { padding: 12px 16px; gap: 10px; }
            .shop-wrap { padding: 18px 16px 100px; }
            .mobile-bottom-nav { display: flex; }
            .hero { padding: 26px 22px; border-radius: 16px; }
            .hero-text h1 { font-size: 20px; }
            .hero-text p { font-size: 13px; }
            .hero-icon { display: none; }
            .order-card-top { flex-direction: column; align-items: stretch; gap: 15px; }
            .order-info { width: 100%; min-width: 0; overflow: hidden; }
            .order-details { min-width: 0; overflow: hidden; }
            .order-meta { text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; }
            .order-tracking { width: 100%; }
            .login-card { padding: 28px 22px; }
            .profile-stats { gap: 10px; }
            .profile-stat-card { padding: 12px 8px; }
            .tracking-label { font-size: 9.5px; max-width: 58px; }
            .tracking-dot { width: 28px; height: 28px; }
            .tracking-track::before, .tracking-fill { top: 13px; left: 14px; }
            .tracking-track::before { right: 14px; }
        }

        @media (max-width: 680px) {
            .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .card-body { padding: 10px 12px 12px; gap: 4px; }
            .card-title { font-size: 13.5px; }
            .card-desc { font-size: 11.5px; }
            .card-price { font-size: 15px; }
            .card-cta span { display: none; }
        }

        @media (max-width: 420px) {
            .brand span { display: none; }
            .icon-pill.bell { display: none; }
        }

        /* --- APPS TAB --- */
        .app-list-item {
            display: flex; align-items: center; gap: 14px;
            background: var(--bg-surface); border: var(--card-border); border-radius: var(--border-radius);
            box-shadow: var(--shadow-card); padding: 16px 18px; cursor: pointer; transition: 0.15s ease;
        }
        .app-list-item:hover { background: var(--hover-bg); }
        .app-list-icon {
            width: 46px; height: 46px; border-radius: 12px; background: var(--brand-gradient);
            color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
        }
        .app-list-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
        .app-list-desc { font-size: 12.5px; color: var(--text-muted); }
        .app-list-chev { color: var(--text-muted); font-size: 20px; flex-shrink: 0; }

        .app-detail-icon {
            width: 64px; height: 64px; border-radius: 16px; background: var(--brand-gradient); color: #fff;
            display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 14px;
        }
        .app-detail-desc { color: var(--text-muted); line-height: 1.6; font-size: 13.5px; text-align: center; margin-bottom: 22px; }

        .app-platforms { display: flex; gap: 10px; }
        .app-platform-card {
            flex: 1; background: var(--bg-body); border-radius: 12px; padding: 16px 8px;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        .app-platform-card i { font-size: 26px; color: var(--primary); }
        .app-platform-card.disabled i { color: var(--text-muted); }
        .app-platform-name { font-size: 12.5px; font-weight: 700; }
        .app-platform-btn { width: 100%; padding: 8px 6px; font-size: 12px; border-radius: 8px; }