:root {
        --color-1: #ffd900;
        --color-2: #ffc300;
        --color-3: #ffb700;
        --color-4: #ffa600;
        --color-5: #ff8c00;
        --orange: #ff770a;
        --orange-dark: #b45205;
        --soft: #f5f5f5;
        --line: #eeeeee;
        --text: #111111;
        --muted: #777777;
    }

    * { box-sizing: border-box; }
    body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #e9e9e9; color: var(--text); font-size: 14px; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    .icon { width: 20px; height: 20px; flex: 0 0 auto; }
    .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .phone-frame { width: min(100%, 390px); min-height: 100vh; margin: 0 auto; position: relative; overflow-x: hidden; }
    .auth-frame { background: #000; color: #fff; }
    .app-frame { background: #f7f7f7; padding-bottom: 76px; }
    .auth-hero { height: 245px; background: linear-gradient(180deg, rgba(0,0,0,.05), #000 93%), linear-gradient(135deg, #f7c168, #d54820 52%, #234e2e); position: relative; padding: 22px; }
    .brand-word { color: #fff; font-size: 35px; font-weight: 900; text-shadow: 2px 3px 0 #9c2d0a; letter-spacing: 0; }
    .language { position: absolute; right: 10px; top: 9px; border: 0; background: #fff; color: var(--orange); border-radius: 8px; padding: 12px 20px; }
    .brand-badge { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: #fff; left: 50%; bottom: 7px; transform: translateX(-50%); display: grid; place-items: center; box-shadow: 0 0 12px rgba(255,255,255,.8); overflow: hidden; }
    .brand-badge img { width: 65px; height: 65px; object-fit: cover; border-radius: 50%; }
    .auth-card { padding: 24px; }
    .auth-title { font-size: 20px; margin: 0 0 24px; }
    .stack-form { display: grid; gap: 18px; }
    .pill-input, .money-input { min-height: 50px; border-radius: 26px; background: #ffffff; display: flex; align-items: center; gap: 12px; padding: 0 22px; color: var(--orange); border: 1px solid #f0f0f0; box-shadow: inset 0 0 0 1px rgba(255, 119, 10, .08); }
    .pill-input input, .money-input input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--orange); }
    .pill-input span:first-child { border-right: 1px solid var(--orange); padding-right: 14px; }
    .password-toggle { border: 0; background: transparent; color: #9aa3ad; padding: 4px; display: grid; place-items: center; cursor: pointer; }
    .password-toggle .icon { width: 19px; height: 19px; }
    .password-toggle.is-visible { color: var(--orange); }
    .password-field { position: relative; display: block; }
    .password-field .text-input { padding-right: 44px; }
    .password-field .password-toggle { position: absolute; right: 9px; top: 50%; transform: translateY(-40%); }
    .orange-btn, .buy-btn { border: 0; border-radius: 18px; min-height: 42px; background: linear-gradient(90deg, var(--orange), #ffa05c); color: #fff; font-weight: 700; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 8px rgba(255,119,10,.35); }
    .auth-link { display: block; text-align: center; margin-top: 14px; color: #fff; font-weight: 700; }
    .flash { margin: 10px 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
    .flash.success { background: #e9f9ef; color: #087133; }
    .flash.error { background: #fff0ef; color: #bd2418; }
    .popup-stack { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); width: min(284px, calc(100% - 76px)); z-index: 20; pointer-events: none; }
    .live-popup { min-height: 82px; background: #e8f5e9; color: #1b5e20; border-radius: 5px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; text-align: left; padding: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.2); opacity: 0; transform: translateY(-18px) scale(.96); animation: popup-in .28s ease forwards; }
    .live-popup.withdraw { background: #ffebee; color: #c62828; }
    .live-popup-icon { width: 34px; height: 34px; border: 3px solid #bee49c; color: #9fd26d; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
    .live-popup.withdraw .live-popup-icon { border-color: #ef9a9a; color: #d84343; }
    .live-popup strong { display: block; font-size: 14px; margin-bottom: 4px; }
    .live-popup p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.35; }
    .live-popup.is-leaving { animation: popup-out 1.2s ease forwards; }
    @keyframes popup-in { to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes popup-out { to { opacity: 0; transform: translateY(-18px) scale(.96); } }
    .topbar { height: 34px; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 3; }
    .topbar h1 { font-size: 13px; margin: 0; }
    .back-link { position: absolute; left: 12px; line-height: 1; display: grid; place-items: center; }
    .back-link .icon { width: 24px; height: 24px; }
    .food-banner { height: 142px; margin: 0 14px 10px; border-radius: 9px; background: linear-gradient(135deg, #fff 0 35%, #ffb45b 36%, #ff7900 100%); overflow: hidden; display: flex; align-items: center; padding: 22px; color: #8f4000; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
    .food-banner strong { display: block; font-size: 28px; font-weight: 900; }
    .food-banner span { font-weight: 700; color: #222; }
    .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 14px 10px; }
    .quick-grid a { background: var(--orange); color: #fff; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; }
    .quick-grid .icon { width: 25px; height: 25px; }
    .tabs, .level-tabs { margin: 0 14px 10px; border: 1px solid var(--orange); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
    .tabs span, .tabs a, .level-tabs span { padding: 13px; text-align: center; color: var(--orange); background: #fff; }
    .tabs .active, .level-tabs span { color: #fff; background: var(--orange); }
    .plans-list { display: grid; gap: 10px; padding: 0 14px 10px; }
    .plan-card { background: #fff; border-radius: 8px; padding: 12px; display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; align-items: center; }
    .plan-card form { grid-column: 1 / -1; width: 48%; margin: 0 auto; }
    .plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .plan-stats div { background: #fff8f5; border-radius: 4px; min-height: 56px; display: grid; place-items: center; }
    .plan-stats small { font-size: 10px; color: #222; }
    .plan-stats strong { color: var(--orange); font-size: 12px; }
    .plan-art { height: 106px; border-radius: 7px; display: flex; align-items: flex-end; justify-content: center; color: #fff; font-weight: 800; background: radial-gradient(circle at 50% 30%, #f6c06c, #983b05 65%, #222 66%); }
    .plan-b { background: radial-gradient(circle at 40% 30%, #fff0c8, #ff8b00 55%, #333 56%); }
    .plan-c { background: radial-gradient(circle at 45% 30%, #efc46d, #a74c07 60%, #222 61%); }
    .plan-d { background: radial-gradient(circle at 45% 30%, #ffd980, #ff9a1c 60%, #333 61%); }
    .disabled-btn { border: 0; min-height: 36px; border-radius: 18px; background: #878787; color: #fff; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .page-card { background: #fff; margin: 14px; padding: 16px; border-radius: 8px; }
    .light .text-input, .text-input { width: 100%; min-height: 40px; border: 1px solid #ffc28f; border-radius: 8px; padding: 0 12px; outline: 0; margin-top: 8px; }
    .text-input::placeholder { color: #9aa2a9; }
    .amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 34px; }
    .amount-grid input { display: none; }
    .amount-grid span { display: grid; place-items: center; height: 38px; border-radius: 20px; background: #f6f6f6; }
    .amount-grid input:checked + span { background: var(--orange); color: #fff; }
    .available { margin: 0 0 14px; font-size: 16px; }
    .pay-list { display: grid; gap: 0; margin: 28px 0; }
    .pay-list label { border-bottom: 1px solid var(--line); padding: 13px 0; }
    .pay-list label:last-child { background: #ffdbc0; border-radius: 8px; padding-left: 12px; }
    .notice { color: var(--orange); border-left: 2px solid var(--orange); background: #fff9f6; padding: 12px 14px; margin-top: 14px; }
    .bank-card { height: 124px; border-radius: 14px; background: linear-gradient(135deg, #111, #666); color: #fff; display: flex; align-items: center; gap: 14px; padding: 24px; font-size: 16px; }
    .bank-card .icon { color: #ffd200; width: 34px; height: 34px; margin-left: auto; order: 2; }
    .bank-summary p { border-bottom: 1px solid var(--line); padding-bottom: 10px; display: flex; justify-content: space-between; }
    .outline-btn { border: 1px solid var(--line); border-radius: 8px; min-height: 48px; display: grid; place-items: center; color: var(--orange); font-size: 18px; }
    .team-hero { height: 138px; background: linear-gradient(135deg, #ddd, #fff 45%, #ff9b35); }
    .team-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -22px 14px 14px; position: relative; }
    .team-stats div { height: 74px; border-radius: 9px; background: var(--orange); color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; }
    .team-stats .icon { width: 22px; height: 22px; }
    .level-tabs { grid-template-columns: repeat(3, 1fr); }
    .empty { margin-top: 150px; text-align: center; color: #cfcfcf; font-size: 24px; letter-spacing: 4px; font-weight: 900; }
    .share-page { min-height: calc(100vh - 110px); background: var(--orange); padding: 0 14px 20px; }
    .share-food { height: 178px; background: linear-gradient(#fff, #ffd9bc 62%, var(--orange)); }
    .share-card { background: #fff; border-radius: 8px; padding: 14px; text-align: center; }
    .copy-row { height: 42px; border-radius: 7px; background: #f4f4f4; display: flex; align-items: center; justify-content: space-between; padding-left: 10px; margin-bottom: 12px; color: var(--orange); font-size: 12px; overflow: hidden; }
    .copy-row button { border: 0; background: var(--orange); color: #fff; padding: 8px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; }
    .copy-row .icon { width: 15px; height: 15px; }
    table { width: 100%; border-collapse: collapse; margin-top: 14px; }
    td { border: 1px solid #ddd; padding: 12px; text-align: left; }
    tr:nth-child(even) { background: #ffdbc0; }
    .profile-head { height: 160px; background: linear-gradient(135deg, #ffb86d, #7664d4); display: flex; gap: 14px; align-items: center; padding: 22px; color: #fff; }
    .profile-head img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #fff; }
    .progress { width: 190px; height: 9px; background: #fff; border-radius: 10px; overflow: hidden; }
    .progress span { display: block; width: 40%; height: 100%; background: var(--orange); }
    .wallet-strip { margin: -34px 14px 14px; background: linear-gradient(90deg, var(--orange), #ffa056); color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 8px; min-height: 84px; position: relative; }
    .wallet-strip div { display: grid; place-items: center; align-content: center; border-right: 1px solid rgba(255,255,255,.7); }
    .wallet-strip div:last-child { border: 0; }
    .menu-card { background: #fff; margin: 14px; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
    .menu-card a, .menu-card button { width: 100%; border: 0; background: #fff; min-height: 56px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); text-align: left; }
    .menu-label, .row-with-icon, .message-card h2, .vip-card h2 { display: inline-flex; align-items: center; gap: 12px; }
    .menu-card .icon { width: 22px; height: 22px; color: #222; }
    .menu-card > a > .icon, .menu-card button > .icon { color: #aaa; width: 18px; height: 18px; }
    .message-card h2 { font-size: 17px; font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 14px; width: 100%; }
    .list-row { margin: 10px 14px; background: #fff; border-radius: 8px; padding: 14px; display: flex; justify-content: space-between; gap: 10px; }
    .list-row small { display: block; color: var(--muted); margin-top: 4px; }
    .vip-card { margin: 14px; background: #fff; border-radius: 9px; overflow: hidden; min-height: 124px; }
    .vip-card h2 { margin: 0; background: #ff9915; color: #fff; padding: 9px 14px; }
    .vip-card p { color: var(--orange); padding: 0 14px; }
    .orange-illustration { height: 220px; background: var(--orange); position: relative; }
    .orange-illustration:after { content: ""; position: absolute; width: 150px; height: 110px; border: 5px solid #111; border-radius: 16px; background: #fff; left: 50%; top: 52px; transform: translateX(-50%) rotate(-28deg); box-shadow: 22px 28px 0 #e9e9e9; }
    .welcome-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10; display: grid; place-items: center; padding: 24px; }
    .welcome-modal article { width: min(100%, 300px); background: #fff; border-radius: 20px; padding: 20px 14px 12px; text-align: center; position: relative; color: #111; font-weight: 700; }
    .welcome-modal button[data-close] { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; background: #e60000; color: #fff; font-size: 28px; }
    .mini-photo { height: 112px; background: linear-gradient(135deg, #f8d194, #ff5200); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 900; }
    .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 390px); height: 64px; background: #fff; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #ddd; z-index: 4; }
    .bottom-nav a { display: grid; place-items: center; align-content: center; gap: 4px; color: #666; font-size: 12px; }
    .bottom-nav form { margin: 0; }
    .bottom-nav button { width: 100%; height: 100%; border: 0; background: #fff; display: grid; place-items: center; align-content: center; gap: 4px; color: #666; font-size: 12px; }
    .bottom-nav .icon { width: 22px; height: 22px; padding: 3px; border-radius: 14px; }
    .bottom-nav a.active { color: var(--orange); border-bottom: 2px solid var(--orange); }
    .bottom-nav a.active .icon { background: #ffdac4; }
    @media (min-width: 800px) {
        .phone-frame { box-shadow: 0 0 0 1px #ddd; }
    }

    .admin-page { background: #f3f4f6; min-height: 100vh; display: grid; grid-template-columns: 260px minmax(1020px, 1fr); font-size: 14px; min-width: 1280px; }
    .admin-sidebar { background: #111827; color: #d1d5db; min-height: 100vh; padding: 22px 14px; position: sticky; top: 0; }
    .admin-brand { color: #fff; font-weight: 900; font-size: 24px; line-height: 1.1; padding: 8px 10px 28px; }
    .admin-brand span { color: #ffb36f; font-size: 13px; font-weight: 700; }
    .admin-sidebar a, .admin-sidebar button { width: 100%; min-height: 44px; border: 0; background: transparent; color: inherit; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-bottom: 6px; text-align: left; }
    .admin-sidebar a.active, .admin-sidebar a:hover, .admin-sidebar button:hover { background: var(--orange); color: #fff; }
    .admin-sidebar .icon { width: 20px; height: 20px; }
    .admin-main { padding: 24px; min-width: 0; overflow-x: auto; }
    .admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
    .admin-top h1 { margin: 0; font-size: 26px; }
    .admin-top span { background: #fff; border-radius: 999px; padding: 10px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
    .admin-stats.single { grid-template-columns: minmax(240px, 360px); }
    .admin-stats a { background: #fff; border-radius: 8px; padding: 18px; display: grid; gap: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.06); border-left: 4px solid var(--orange); }
    .admin-stats small { color: var(--muted); font-weight: 700; }
    .admin-stats strong { font-size: 24px; color: #111827; }
    .admin-stats span { color: var(--orange-dark); font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.admin-card { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 5px rgba(0,0,0,.06); margin-bottom: 16px; overflow-x: auto; }
.admin-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-card h2 { margin: 0 0 14px; font-size: 18px; }
    .admin-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .admin-card-head h2 { margin: 0; }
    .admin-card-head a { color: var(--orange); font-weight: 700; }
    .admin-table { width: 100%; border-collapse: collapse; min-width: 980px; }
    .admin-table th, .admin-table td { border-bottom: 1px solid #eef0f3; padding: 12px 10px; text-align: left; vertical-align: middle; }
    .admin-table th { color: #6b7280; font-size: 12px; text-transform: uppercase; background: #fafafa; }
    .admin-table tr:nth-child(even) { background: #fffaf6; }
    .transaction-table { min-width: 1400px; }
    .admin-table th, .admin-table td { white-space: nowrap; }
    .admin-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
    .admin-form label { display: grid; gap: 7px; color: #374151; font-weight: 700; }
    .admin-form input, .admin-form select { min-height: 42px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px; outline-color: var(--orange); background: #fff; }
    .admin-check { display: flex !important; align-items: center; gap: 8px !important; min-height: 42px; }
    .admin-check input { min-height: auto; }
    .admin-button, .mini-admin-button { border: 0; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 800; min-height: 42px; padding: 0 16px; }
    .mini-admin-button { min-height: 32px; font-size: 12px; }
    .mini-admin-button.danger { background: #dc2626; }
    .mini-admin-link { min-height: 32px; border-radius: 8px; background: #111827; color: #fff; font-weight: 800; padding: 8px 12px; display: inline-flex; align-items: center; }
    .admin-button.secondary { background: #6b7280; display: inline-flex; align-items: center; justify-content: center; }
    .message-admin-form { grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) 220px 160px; }
    .admin-form textarea { min-height: 88px; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; outline-color: var(--orange); resize: vertical; font: inherit; }
    .wide-field { align-self: stretch; }
    .table-actions { display: flex; align-items: center; gap: 8px; }
    .pagination { display: flex; gap: 6px; list-style: none; padding: 0; }

.inline-admin-form, .admin-inline-form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.inline-admin-form select, .inline-admin-form input, .admin-inline-form input { min-height: 34px; border: 1px solid #ddd; border-radius: 6px; padding: 0 8px; }
.admin-chat-thread { max-height: 540px; overflow-y: auto; display: grid; gap: 10px; padding: 10px; background: #fffaf6; border-radius: 8px; margin-bottom: 14px; }
.admin-chat-bubble { max-width: 760px; border-radius: 10px; padding: 10px 12px; background: #fff; border: 1px solid #f0e4dc; }
.admin-chat-bubble.admin { justify-self: end; background: #fff1e7; border-color: #ffd2b4; }
.admin-chat-bubble p { margin: 0 0 6px; line-height: 1.45; }
.admin-chat-bubble small { color: #6b7280; font-size: 12px; }
.admin-chat-compose { display: grid; gap: 10px; }
.admin-chat-compose textarea { min-height: 96px; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; outline-color: var(--orange); resize: vertical; font: inherit; }
.admin-user-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.admin-user-summary div { border: 1px solid #eef0f3; border-radius: 8px; background: #fffaf6; padding: 12px; display: grid; gap: 6px; }
.admin-user-summary small { color: #6b7280; font-weight: 800; text-transform: uppercase; font-size: 11px; }
.admin-user-summary strong { color: #111827; font-size: 16px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 4px 10px; background: #fff3cd; color: #9a6400; font-weight: 900; font-size: 12px; }
.status-pill.completed, .status-pill.success, .status-pill.active { background: #e8f5e9; color: #176d2e; }
.status-pill.rejected, .status-pill.failed, .status-pill.expired { background: #ffebee; color: #c62828; }
.status-pill.pending { background: #fff3cd; color: #9a6400; }

/* Suncore mobile refresh */
    :root {
        --sun-tan: var(--color-4);
        --sun-tan-dark: var(--color-5);
        --sun-cream: #fff8df;
        --sun-gold-soft: #fff2a8;
        --sun-card: #ffffff;
        --sun-ink: #2d1a18;
        --sun-muted: #9d7a45;
    }
    .color-1 { color: var(--color-1); }
    .color-2 { color: var(--color-2); }
    .color-3 { color: var(--color-3); }
    .color-4 { color: var(--color-4); }
    .color-5 { color: var(--color-5); }

    body.app-page { background: #f1f1f1; color: var(--sun-ink); }
    .app-frame { background: #f7f7f7; padding-bottom: 64px; }
    .phone-frame { width: min(100%, 390px); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
    .topbar { height: 50px; background: var(--sun-tan); font-weight: 800; }
    .bottom-nav { width: min(100%, 390px); height: 58px; grid-template-columns: repeat(4, 1fr); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 14px rgba(0,0,0,.06); border-top: 1px solid #edf0f2; background: rgba(255,255,255,.96); }
    .bottom-nav a { font-size: 11px; color: #9aa2a9; gap: 2px; }
    .bottom-nav a.active { color: var(--sun-tan); border-bottom: 0; }
    .bottom-nav a.active .icon { background: transparent; }
    .bottom-nav .icon { width: 19px; height: 19px; padding: 1px; }

    .sun-home-hero { height: 224px; padding: 0 22px; color: #fff; background: linear-gradient(180deg, var(--color-2), var(--color-5)); border-radius: 0 0 25px 25px; position: relative; text-align: center; overflow: visible; }
    .home-brand { position: absolute; left: 26px; top: 27px; color: #fff; font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: 0; max-width: 82px; white-space: nowrap; overflow: hidden; }
    .bell { position: absolute; right: 22px; top: 27px; color: #fff; display: grid; place-items: center; }
    .bell .icon { width: 22px; height: 22px; }
    .recharge-toast { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: min(284px, calc(100% - 76px)); min-height: 82px; background: #f0fff1; color: #176d2e; border-radius: 5px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; text-align: left; padding: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
    .recharge-toast span { width: 34px; height: 34px; border: 3px solid #bee49c; color: #9fd26d; border-radius: 50%; display: grid; place-items: center; }
    .recharge-toast strong { font-size: 14px; line-height: 1.35; }
    .sun-home-hero h1 { margin: 0 0 24px; padding-top: 96px; font-size: 32px; line-height: 1; letter-spacing: 0; }
    .wallet-summary { min-height: 72px; background: rgba(255,255,255,.22); border-radius: 12px 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .wallet-summary div:first-child { border-right: 1px solid rgba(255,255,255,.35); }
    .wallet-summary strong { display: block; font-size: 16px; }
    .wallet-summary small { font-size: 11px; color: rgba(255,255,255,.88); }
    .home-actions { margin: -21px 12px 16px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
    .home-actions a { height: 68px; min-width: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.08); display: grid; place-items: center; align-content: center; gap: 7px; color: #704c39; font-weight: 800; font-size: 10px; }
    .home-actions .icon { color: var(--color-5); }
    .notice-strip { height: 31px; background: #fff2a8; color: #946100; font-size: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; padding-left: 12px; }
    .notice-strip .icon { width: 14px; height: 14px; color: var(--color-5); }
    .notice-strip p { margin: 0; min-width: max-content; animation: notice-scroll 18s linear infinite; }
    @keyframes notice-scroll { from { transform: translateX(90px); } to { transform: translateX(-390px); } }
    .quick-access { padding: 27px 22px 18px; }
    .quick-access h2 { margin: 0 0 18px; font-size: 18px; }
    .quick-access a, .quick-access .qa-action button { width: 100%; min-height: 64px; background: #fff; border: 0; border-radius: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.05); display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; grid-template-rows: 1fr 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; text-align: left; }
    .quick-access .qa-action { margin: 0; }
    .quick-access b { align-self: end; font-size: 14px; }
    .quick-access small { grid-column: 2; align-self: start; color: var(--sun-muted); font-size: 11px; }
    .quick-access > a > .icon, .quick-access .qa-action button > .icon { grid-column: 3; grid-row: 1 / 3; color: #c7c7c7; }
    .qa-icon { width: 34px; height: 34px; grid-row: 1 / 3; border-radius: 10px; display: grid; place-items: center; }
    .qa-icon .icon { width: 18px; height: 18px; stroke-width: 2.2; }
    .qa-icon.gold { background: #fff7bc; color: var(--color-2); } .qa-icon.tan { background: #fff0cf; color: var(--color-5); } .qa-icon.green { background: #fff6d4; color: var(--color-4); } .qa-icon.blue { background: #fff2be; color: var(--color-5); } .qa-icon.pink { background: #fff0cf; color: var(--color-4); }

    .simple-screen, .support-screen { min-height: calc(100vh - 78px); background: var(--sun-cream); padding: 0 15px 26px; }
    .script-head { height: 96px; display: flex; align-items: center; justify-content: space-between; color: #6a3326; }
    .script-head h1, .support-screen h1, .agent-screen h1, .plan-hero h1 { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--sun-tan); font-size: 25px; margin: 0; }
    .script-head a { color: #5f2d23; }
    .fund-form label { display: block; color: var(--sun-tan); font-weight: 800; margin: 16px 0 8px; font-size: 16px; }
    .balance-box, .amount-entry { width: 100%; height: 56px; border: 1px solid #ddd; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.06); display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 20px; color: #2f2528; }
    .amount-entry { outline-color: var(--sun-tan); }
    .amount-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 34px; }
    .amount-buttons button { height: 38px; border: 1px solid var(--color-5); color: #000; border-radius: 8px; background: #fff9d5; font-weight: 900; }
    .pay-button { width: 100%; height: 58px; border: 0; border-radius: 28px; color: #fff; background: linear-gradient(90deg, var(--color-4), var(--color-5)); box-shadow: 0 10px 18px rgba(255,140,0,.28); font-weight: 900; font-size: 16px; display: flex; justify-content: center; align-items: center; gap: 7px; }

    .plan-hero { height: 128px; background: linear-gradient(180deg, var(--color-2), var(--color-5)); color: #fff; border-radius: 0 0 20px 20px; text-align: center; display: grid; place-items: center; align-content: center; gap: 4px; }
    .plan-hero h1 { color: #fff; font-size: 22px; }
    .plan-hero p { margin: 0; font-size: 11px; font-weight: 800; }
    .steam { font-size: 26px; }
    .plan-tabs { display: flex; justify-content: center; gap: 14px; margin: 16px 0; }
    .plan-tabs a { min-width: 118px; text-align: center; border: 1px solid #5d2d22; border-radius: 22px; padding: 9px 12px; font-size: 12px; font-weight: 900; background: #fff; color: #5d2d22; }
    .plan-tabs a.active { background: #5d2d22; color: #fff; }
    .solar-plan-list { padding: 0 16px 18px; display: grid; gap: 12px; }
    .solar-plan-card { background: #fff; border-radius: 12px; padding: 9px; display: grid; grid-template-columns: 88px 1fr; gap: 9px; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
    .plan-thumb { position: relative; height: 88px; border-radius: 8px; overflow: hidden; }
    .plan-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .plan-thumb span { position: absolute; left: 0; top: 0; background: #ffd400; color: #3b1d12; border-radius: 0 0 6px 0; padding: 3px 5px; font-size: 10px; font-weight: 900; z-index: 1; }
    .solar-plan-info h2 { margin: 2px 0 8px; font-size: 15px; color: #4b2825; }
    .solar-plan-info p { margin: -4px 0 8px; color: var(--color-5); font-size: 10px; font-weight: 900; line-height: 1.25; }
    .solar-plan-info dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 5px; color: #6b5d55; font-size: 11px; }
    .solar-plan-info dd { margin: 0; color: var(--sun-tan); font-weight: 900; }
    .plan-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .plan-metrics div { height: 50px; border-radius: 7px; background: #fff6df; display: grid; place-items: center; align-content: center; }
    .plan-metrics strong { font-size: 12px; }
    .plan-metrics small { font-size: 8px; color: #8b7d76; }
    .solar-plan-card form { grid-column: 1 / -1; }
    .solar-plan-card button { width: 100%; height: 34px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(90deg, var(--color-4), var(--color-5)); font-weight: 900; font-size: 11px; }
    .plan-invest-trigger { grid-column: 1 / -1; cursor: pointer; }
    .plan-invest-trigger.coming-soon { cursor: not-allowed; background: #8f969c; box-shadow: none; }
    .empty-plan-state { min-height: 120px; background: #fff; border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.06); display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; color: #5d2d22; }
    .empty-plan-state span { color: var(--sun-muted); font-size: 12px; }

    .plan-popup { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; }
    .plan-popup.is-open { display: flex; }
    .plan-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.56); }
    .plan-detail-dialog, .plan-confirm-dialog, .plan-message-dialog { position: relative; width: min(100%, 400px); background: #fff; border-radius: 22px; box-shadow: 0 18px 48px rgba(0,0,0,.24); overflow: hidden; color: #3f302d; }
    .plan-detail-dialog { max-height: calc(100vh - 46px); overflow-y: auto; }
    .plan-detail-dialog > img { width: 100%; height: 188px; object-fit: cover; display: block; }
    .plan-popup-close { position: absolute; right: 15px; top: 12px; width: 35px; height: 35px; border: 0; border-radius: 50%; background: rgba(0,0,0,.34); color: #fff; font-size: 30px; line-height: 1; display: grid; place-items: center; z-index: 1; }
    .plan-detail-body { padding: 26px 26px 24px; }
    .plan-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .plan-detail-head h2 { margin: 0; font-size: 25px; color: #5d3a34; line-height: 1.15; }
    .plan-detail-head span { flex: 0 0 auto; border-radius: 7px; background: #e8f6ea; color: #2e8138; padding: 7px 10px; font-size: 14px; font-weight: 900; }
    .plan-detail-price { display: block; margin-bottom: 24px; color: #c99b68; font-size: 34px; line-height: 1; }
    .plan-detail-body dl { margin: 0 0 28px; display: grid; grid-template-columns: 1fr auto; row-gap: 14px; column-gap: 16px; font-size: 18px; }
    .plan-detail-body dt { color: #6f6562; }
    .plan-detail-body dd { margin: 0; color: #363133; font-weight: 900; }
    .plan-buy-now, .plan-message-dialog button, .plan-message-action, .plan-confirm-actions button { width: 100%; min-height: 54px; border: 0; border-radius: 28px; background: #c99b68; color: #fff; font-weight: 900; font-size: 20px; }
    .plan-message-action { display: flex; align-items: center; justify-content: center; }
    .plan-confirm-dialog, .plan-message-dialog { padding: 26px 24px 24px; text-align: center; }
    .plan-confirm-icon, .plan-message-icon { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; background: #fff1c4; color: #c99b00; font-size: 38px; font-weight: 900; }
    .plan-message-icon { background: #ffe8ee; color: #c93232; font-size: 52px; line-height: 1; }
    .plan-message-icon.success { background: #e8f6ea; color: #2e8138; font-size: 36px; }
    .plan-confirm-dialog h2, .plan-message-dialog h2 { margin: 0 0 12px; color: #5d3a34; font-size: 27px; line-height: 1.1; }
    .plan-message-dialog h2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
    .plan-confirm-dialog p, .plan-message-dialog p { margin: 0 0 28px; color: #5d5960; font-size: 18px; line-height: 1.4; }
    .plan-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .plan-confirm-actions form { margin: 0; }
    .plan-confirm-actions button { min-height: 48px; font-size: 16px; }
    .plan-confirm-actions > button { background: #eee7df; color: #5d3a34; }

    .agent-screen { min-height: calc(100vh - 78px); background: #fff; padding: 0 11px 26px; }
    .agent-screen header { height: 150px; background: linear-gradient(180deg, var(--color-2), var(--color-5)); color: #fff; margin: 0 -11px; border-radius: 0 0 18px 18px; text-align: center; padding-top: 28px; }
    .agent-screen h1 { color: #fff; font-size: 23px; }
    .agent-screen header p { font-size: 11px; font-weight: 800; }
    .invite-card { margin: -60px 0 18px; background: #fff; border-radius: 12px; padding: 17px; box-shadow: 0 10px 26px rgba(0,0,0,.12); text-align: center; position: relative; }
    .featured-tree-panel + .invite-card { margin-top: 0; }
    .invite-card > small { display: block; margin-bottom: 8px; color: #8a817c; font-size: 10px; font-weight: 900; text-transform: uppercase; }
    .invite-card strong { display: block; border: 1px dashed #d8d0cd; border-radius: 6px; padding: 14px; font-size: 18px; letter-spacing: 2px; }
    .invite-card div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
    .invite-card button { height: 34px; border: 1px solid var(--sun-tan); border-radius: 18px; color: var(--sun-tan); background: #fff; font-weight: 900; font-size: 10px; }
    .invite-card button:first-child { background: var(--sun-tan); color: #fff; }
    .agent-screen > h2 { font-size: 13px; margin: 14px 0 9px; }
    .commission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .commission-grid div { height: 58px; border: 1px solid #eddcca; background: #fff8f1; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.06); display: grid; place-items: center; align-content: center; }
    .commission-grid small { color: #998f89; font-size: 9px; }
    .commission-grid strong { color: var(--sun-tan); font-size: 15px; }
    .team-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .team-tabs span, .team-tabs a { height: 26px; border-radius: 5px; background: #ededed; display: grid; place-items: center; font-size: 9px; font-weight: 900; }
    .team-tabs span.active, .team-tabs a.active { background: var(--sun-tan); color: #fff; }
    .empty-team { height: 80px; border-radius: 10px; background: #fff; color: #9a8f8a; box-shadow: 0 7px 17px rgba(0,0,0,.05); display: grid; place-items: center; font-size: 10px; margin: 8px 0 14px; }
    .team-member-list { background: #fff; border-radius: 10px; box-shadow: 0 7px 17px rgba(0,0,0,.05); margin: 8px 0 14px; overflow: hidden; }
    .team-member-list div { padding: 10px 12px; border-bottom: 1px solid #f0ebe6; display: grid; gap: 4px; }
    .team-member-list div:last-child { border-bottom: 0; }
    .team-member-list strong { font-size: 12px; }
    .team-member-list small { color: #8a817c; font-size: 10px; }
    .salary-card { overflow: hidden; border-radius: 10px; background: #3b1f19; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
    .salary-card h2 { margin: 0; background: var(--sun-tan); padding: 12px; text-align: center; font-size: 14px; }
    .salary-card p { margin: 0; padding: 9px; text-align: center; font-size: 10px; font-weight: 900; }
    .salary-tier { margin: 10px; background: #744d43; border: 1px solid #9d7368; border-radius: 7px; padding: 10px; display: grid; gap: 6px; }
    .salary-tier strong { color: #3b1f19; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .salary-tier strong b { flex: 0 0 auto; background: #3b1f19; color: #fff; padding: 2px 5px; border-radius: 3px; }
    .salary-tier small { color: #000000; }
    .salary-tier em { height: 22px; background: #5b342e; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 10px; }
    .salary-tier.unlocked em { background: #1f6f3a; }
    .salary-card a { display: block; text-align: center; color: #ffd000; font-weight: 900; font-size: 10px; padding: 14px; }

    .support-screen { text-align: center; padding-top: 20px; }
    .support-screen > p { color: #9a8f8a; font-size: 12px; margin-top: 4px; }
    .support-card { min-height: 518px; margin: 26px -15px 0; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 12px 28px rgba(0,0,0,.04); }
    .support-avatar { width: 48px; height: 48px; margin: 0 auto 14px; background: linear-gradient(180deg, var(--color-3), var(--color-5)); border-radius: 50%; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(255,140,0,.25); }
    .support-card h2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; margin: 0; }
    .support-card p { color: #7e6256; font-size: 11px; }
    .support-card a { height: 52px; background: #fff; border-radius: 10px; box-shadow: 0 8px 18px rgba(0,0,0,.06); display: grid; grid-template-columns: 38px 1fr 16px; grid-template-rows: 1fr 1fr; gap: 0 10px; text-align: left; align-items: center; padding: 8px 10px; margin: 12px 0; }
    .support-card a b { align-self: end; font-size: 12px; }
    .support-card a small { grid-column: 2; color: #9a8f8a; font-size: 9px; }
    .support-card a > .icon { grid-row: 1 / 3; grid-column: 3; color: var(--sun-tan); width: 14px; }
    .channel { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 900; }
    .telegram { background: #29aeea; } .whatsapp { background: #23cf5f; } .chat { background: #37b8ed; }
    .support-chat-screen { min-height: calc(100vh - 64px); background: var(--theme-page); padding: 0 14px 92px; }
    .chat-thread { display: grid; gap: 10px; margin-bottom: 14px; }
    .chat-bubble { max-width: 82%; border-radius: 14px; padding: 10px 12px; box-shadow: 0 7px 16px rgba(0,0,0,.06); }
    .chat-bubble p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
    .chat-bubble small { color: #8b7d76; font-size: 10px; }
    .chat-bubble.user { justify-self: end; background: var(--theme-primary); color: #fff; border-bottom-right-radius: 4px; }
    .chat-bubble.user small { color: rgba(255,255,255,.78); }
    .chat-bubble.admin { justify-self: start; background: #fff; color: #3f302d; border-bottom-left-radius: 4px; }
    .empty-chat { min-height: 118px; border-radius: 12px; background: #fff; display: grid; place-items: center; align-content: center; gap: 6px; color: #5d2d22; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
    .empty-chat span { color: var(--sun-muted); font-size: 12px; }
    .chat-compose { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(100%, 390px); padding: 10px 14px; background: rgba(255,255,255,.96); display: grid; grid-template-columns: 1fr 82px; gap: 8px; border-top: 1px solid #eee; }
    .chat-compose textarea { resize: none; border: 1px solid var(--theme-primary); border-radius: 10px; padding: 10px; font: inherit; outline-color: var(--theme-primary); }
    .chat-compose button { border: 0; border-radius: 10px; background: var(--theme-primary); color: #fff; font-weight: 900; }

    .mine-head { height: 146px; background: linear-gradient(180deg, var(--color-2), var(--color-5)); color: #fff; border-radius: 0 0 18px 18px; text-align: center; padding-top: 18px; }
    .mine-head .avatar { width: 50px; height: 50px; margin: 0 auto 10px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; display: grid; place-items: center; }
    .mine-head h1 { margin: 0 0 8px; font-size: 14px; }
    .mine-head span { background: rgba(77,35,25,.28); padding: 7px 14px; border-radius: 16px; font-weight: 900; font-size: 11px; }
    .mine-menu { margin: -22px 14px 20px; background: #fff; border-radius: 13px; box-shadow: 0 10px 26px rgba(0,0,0,.08); overflow: hidden; position: relative; }
    .mine-menu a, .mine-menu button { width: 100%; height: 49px; border: 0; background: #fff; display: grid; grid-template-columns: 34px 1fr 18px; gap: 10px; align-items: center; padding: 0 13px; border-bottom: 1px solid #eee; text-align: left; }
    .mine-menu span { width: 24px; height: 24px; border-radius: 6px; background: #fff4e8; color: var(--sun-tan); display: grid; place-items: center; }
    .mine-menu b { font-size: 12px; font-weight: 800; }
    .mine-menu > *:last-child button { border-bottom: 0; color: #e53b3b; }
    .mine-menu .icon:last-child { color: #c5c5c5; width: 16px; }

    .orders-screen { min-height: calc(100vh - 64px); background: #f7f7f7; padding: 0 14px 22px; }
    .about-screen { min-height: calc(100vh - 64px); background: #f7f7f7; padding: 14px; }
    .about-card { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
    .about-card h1 { margin: 0 0 12px; font-size: 24px; color: #3a190e; }
    .about-card h2 { margin: 18px 0 8px; font-size: 16px; color: var(--sun-tan); }
    .about-card p, .about-card li { font-size: 13px; line-height: 1.65; color: #4c4540; }
    .about-content { font-size: 13px; line-height: 1.65; color: #4c4540; }
    .about-content::first-line { font-size: 24px; font-weight: 800; color: #3a190e; line-height: 1.35; }
    .about-card ul { margin: 0; padding-left: 18px; }
    .orders-head { height: 78px; padding: 0 2px; }
    .orders-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.orders-tabs span, .orders-tabs a { height: 34px; border-radius: 18px; background: #fff; color: #8f969c; display: grid; place-items: center; font-size: 12px; font-weight: 900; box-shadow: 0 5px 12px rgba(0,0,0,.04); }
    .orders-tabs .active { background: #5d2d22; color: #fff; }
    .orders-list { display: grid; gap: 12px; }
    .order-card { background: #fff; border-radius: 14px; padding: 10px; display: grid; grid-template-columns: 86px 1fr; gap: 10px; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
    .order-thumb { height: 86px; border-radius: 10px; overflow: hidden; }
    .order-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .order-info h2 { margin: 2px 0 3px; font-size: 15px; color: #3b1d19; }
    .order-info p { margin: 0 0 8px; color: var(--color-5); font-size: 11px; font-weight: 900; }
    .order-info dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px; font-size: 11px; color: #6b5d55; }
    .order-info dd { margin: 0; color: #2d1a18; font-weight: 900; }
    .order-foot { grid-column: 1 / -1; min-height: 34px; border-radius: 8px; background: #fff6dc; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
    .order-foot .status { color: #176d2e; font-weight: 900; font-size: 12px; }
    .order-foot .status.expired { color: #c62828; }
    .order-foot small { color: #8b7d76; }
    .orders-empty a { margin-top: 4px; background: linear-gradient(90deg, var(--color-4), var(--color-5)); color: #fff; border-radius: 18px; padding: 9px 16px; font-weight: 900; font-size: 12px; }
    .history-list { display: grid; gap: 10px; }
    .history-card { min-height: 78px; background: #fff; border-radius: 13px; box-shadow: 0 8px 18px rgba(0,0,0,.06); display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 12px; }
    .history-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff2be; color: var(--color-5); display: grid; place-items: center; }
    .history-icon .icon { width: 19px; height: 19px; }
    .history-card h2 { margin: 0; font-size: 17px; color: #2d1a18; }
    .history-card p { margin: 3px 0 0; color: #8b7d76; font-size: 11px; }
    .history-card small { display: block; margin-top: 4px; color: #9d7a45; font-size: 10px; }
    .history-status { border-radius: 16px; padding: 7px 10px; background: #fff6dc; color: #9b6800; font-size: 11px; text-transform: uppercase; }
    .history-status.completed { background: #e8f5e9; color: #176d2e; }
    .history-status.rejected, .history-status.failed { background: #ffebee; color: #c62828; }

    .withdraw-screen {
        min-height: calc(100vh - 64px);
        background: linear-gradient(180deg, #fff0df 0%, #ffe5ca 100%);
        padding-bottom: 24px;
    }

    .withdraw-hero {
        height: 138px;
        border-radius: 0 0 24px 24px;
        background: linear-gradient(180deg, #ff7b00 0%, #ff942e 62%, #ffb365 100%);
        color: #fff;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
        text-align: center;
    }

    .withdraw-hero strong {
        font-size: 34px;
        line-height: 1;
        font-weight: 900;
    }

    .withdraw-hero span,
    .withdraw-field > span:first-child,
    .withdraw-submit {
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: 900;
    }

.withdraw-hero span {
    font-size: 15px;
}

.withdraw-history-link {
    margin-top: 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 900;
}

    .withdraw-card {
        position: relative;
        z-index: 1;
        margin: -20px 18px 20px;
        padding: 18px 16px 18px;
        border-radius: 20px;
        background: #fffaf5;
        border: 1px solid rgba(255, 123, 0, .14);
        box-shadow: 0 10px 26px rgba(255, 123, 0, .16);
        display: grid;
        gap: 11px;
    }

    .withdraw-field {
        display: grid;
        gap: 7px;
        margin: 0;
    }

    .withdraw-field > span:first-child {
        color: var(--theme-primary);
        font-size: 17px;
    }

    .withdraw-input,
    .withdraw-bank-link {
        min-height: 46px;
        border: 1px solid #ffc994;
        border-radius: 13px;
        background: #fff3e6;
        color: var(--theme-muted);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 13px;
        box-shadow: inset 0 0 0 1px rgba(255, 123, 0, .05);
    }

    .withdraw-input b {
        color: var(--theme-primary);
        font-size: 18px;
    }

    .withdraw-input input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--theme-text);
        font-size: 15px;
    }

    .withdraw-input input::placeholder {
        color: var(--theme-muted);
    }

    .withdraw-bank-link {
        color: var(--theme-primary);
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: 900;
        font-size: 14px;
    }

    .withdraw-max {
        justify-self: start;
        min-width: 52px;
        height: 28px;
        border: 1px solid var(--theme-primary-soft);
        border-radius: 17px;
        background: var(--theme-primary-pale);
        color: var(--theme-primary-dark);
        font-weight: 900;
    }

    .withdraw-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .withdraw-summary div {
        min-height: 56px;
        border: 1px solid #ffc994;
        border-radius: 13px;
        background: #fff7ef;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 5px;
        color: var(--theme-muted);
        text-align: center;
    }

    .withdraw-summary span {
        font-style: italic;
        font-weight: 700;
        font-size: 12px;
    }

    .withdraw-summary strong {
        color: var(--theme-primary);
        font-size: 17px;
    }

    .withdraw-submit {
        min-height: 50px;
        border: 0;
        border-radius: 30px;
        background: linear-gradient(90deg, #ff7b00 0%, #ff942e 55%, #ffb365 100%);
        box-shadow: 0 12px 22px rgba(255, 123, 0, .28);
        color: #fff;
        font-size: 17px;
    }

    .withdraw-rules {
        margin: 0;
        padding: 0 28px 10px 40px;
        color: var(--theme-text);
        font-size: 13px;
        line-height: 1.55;
    }

    .withdraw-rules li {
        margin: 0 0 6px;
        padding-left: 1px;
    }

    .withdraw-rules strong {
        color: #ff7b00;
        font-weight: 900;
    }

    .proof-screen {
        min-height: calc(100vh - 64px);
        background: linear-gradient(180deg, #fff0df 0%, #ffe5ca 100%);
        padding-bottom: 24px;
    }

    .proof-hero {
        min-height: 130px;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(180deg, #ff7b00 0%, #ff942e 62%, #ffb365 100%);
        color: #fff;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 6px;
        text-align: center;
    }

    .proof-hero h1 {
        margin: 0;
        font-size: 24px;
    }

    .proof-hero p {
        margin: 0;
        font-weight: 700;
    }

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

    .proof-card {
        overflow: hidden;
        border-radius: 14px;
        background: #fffaf5;
        border: 1px solid rgba(255, 123, 0, .14);
        box-shadow: 0 8px 18px rgba(255, 123, 0, .12);
    }

    .proof-card img {
        width: 100%;
        aspect-ratio: 1 / 1.08;
        object-fit: cover;
        display: block;
        background: #fff3e6;
    }

    .proof-card div {
        min-height: 56px;
        padding: 10px;
        display: grid;
        gap: 4px;
    }

    .proof-card strong {
        color: var(--theme-primary-dark);
        font-size: 13px;
    }

    .proof-card span {
        color: #ff7b00;
        font-weight: 900;
        font-size: 12px;
    }

    .proof-empty {
        grid-column: 1 / -1;
        min-height: 180px;
        border-radius: 16px;
        background: #fffaf5;
        color: var(--theme-muted);
        display: grid;
        place-items: center;
        align-content: center;
        gap: 8px;
        text-align: center;
    }

    .proof-empty .icon {
        color: #ff7b00;
        width: 34px;
        height: 34px;
    }

    .proof-empty strong {
        color: var(--theme-primary-dark);
    }

.admin-proof-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
        display: block;
    background: #fff7ef;
}

.recharge-pay-screen {
    padding: 0 14px 24px;
}

.recharge-pay-card {
    margin-top: 18px;
    border-radius: 18px;
    background: #fffaf5;
    border: 1px solid rgba(255, 123, 0, .14);
    box-shadow: 0 10px 26px rgba(255, 123, 0, .14);
    padding: 18px;
    display: grid;
    gap: 14px;
}

.recharge-pay-card > small {
    color: var(--theme-muted);
    font-weight: 800;
}

.recharge-pay-card > strong {
    color: var(--theme-primary-dark);
    word-break: break-all;
}

.recharge-pay-card > span {
    color: #ff7b00;
    font-size: 28px;
    font-weight: 900;
}

.recharge-pay-card .outline-btn {
    width: 100%;
    border-radius: 24px;
    background: #fff7ef;
    font-weight: 900;
}

.recharge-sync-form {
    margin-top: 14px;
}

.recharge-sync-form .outline-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 24px;
    background: #fff7ef;
    font-weight: 900;
}

.mini-admin-button.secondary {
    background: #374151;
}

.downline-tree-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 17px rgba(0,0,0,.05);
    margin: 8px 0 14px;
    padding: 12px;
}

.featured-tree-panel {
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

.downline-tree-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.downline-tree-summary div {
    min-height: 54px;
    border-radius: 8px;
    background: #fff7ef;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
}

.downline-tree-summary small {
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 800;
}

.downline-tree-summary strong {
    color: var(--theme-primary-dark);
    font-size: 18px;
}

.downline-tree-scroll {
    overflow-x: auto;
    padding: 4px 4px 12px;
}

.downline-tree,
.downline-tree ul {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.downline-tree ul {
    padding-top: 18px;
    position: relative;
}

.downline-tree li {
    display: grid;
    justify-items: center;
    min-width: 108px;
    position: relative;
}

.downline-tree li::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    width: 1px;
    height: 18px;
    background: #ffc994;
}

.downline-tree > li::before {
    display: none;
}

.downline-tree-card {
    width: 108px;
    min-height: 78px;
    border: 1px solid #ffc994;
    border-radius: 8px;
    background: #fffaf5;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(0,0,0,.05);
}

.downline-tree-card.root {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.downline-tree-card strong,
.downline-tree-card span,
.downline-tree-card small {
    overflow-wrap: anywhere;
}

.downline-tree-card strong {
    font-size: 12px;
}

.downline-tree-card span {
    font-size: 11px;
    font-weight: 800;
}

.downline-tree-card small {
    color: #8a817c;
    font-size: 9px;
    line-height: 1.35;
}

.downline-tree-card.root small {
    color: rgba(255,255,255,.78);
}

.level-wise-downline {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.level-wise-downline article {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 17px rgba(0,0,0,.05);
    overflow: hidden;
}

.level-wise-downline h3,
.admin-level-card h3 {
    margin: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff7ef;
    color: var(--theme-primary-dark);
    padding: 0 12px;
    font-size: 13px;
}

.level-wise-downline h3 span,
.admin-level-card h3 span {
    min-width: 26px;
    height: 24px;
    border-radius: 14px;
    background: var(--theme-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
}

.level-wise-downline article > div {
    padding: 10px 12px;
    border-top: 1px solid #f0ebe6;
    display: grid;
    gap: 4px;
}

.level-wise-downline strong {
    font-size: 12px;
}

.level-wise-downline small,
.level-wise-downline p {
    color: #8a817c;
    font-size: 10px;
}

.level-wise-downline p {
    margin: 0;
    padding: 12px;
}

.admin-muted {
    color: #6b7280;
    font-weight: 800;
    font-size: 12px;
}

.admin-tree-scroll {
    background: #fffaf6;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    min-height: 160px;
}

.admin-downline-tree {
    min-width: max-content;
    padding: 12px;
}

.admin-level-grid {
    display: grid;
    gap: 14px;
}

.admin-level-card {
    border: 1px solid #eef0f3;
    border-radius: 8px;
    overflow: hidden;
}

.compact-admin-table {
    min-width: 840px;
    margin-top: 0;
}

.compact-admin-table th,
.compact-admin-table td {
    padding: 9px 8px;
    font-size: 12px;
}

.team-tabs {
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
}

.leadership-screen {
    min-height: calc(100vh - 64px);
    background: var(--theme-page);
    padding-bottom: 24px;
}

.leadership-hero {
    min-height: 124px;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, var(--theme-primary), var(--theme-primary-mid));
    color: #fff;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    text-align: center;
}

.leadership-hero h1 {
    margin: 0;
    font-size: 25px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.leadership-hero p {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
}

.leader-gallery {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.leader-card {
    overflow: hidden;
    border-radius: 14px;
    background: #fffaf5;
    border: 1px solid rgba(255, 123, 0, .14);
    box-shadow: 0 10px 24px rgba(255, 123, 0, .13);
}

.leader-card img {
    width: 100%;
    aspect-ratio: 1.4 / 1;
    object-fit: cover;
    display: block;
    background: #fff3e6;
}

.leader-card strong {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--theme-primary-dark);
    font-size: 14px;
}

.leader-empty {
    min-height: 190px;
    border-radius: 16px;
    background: #fffaf5;
    color: var(--theme-muted);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
}

.leader-empty .icon {
    width: 34px;
    height: 34px;
    color: var(--theme-primary);
}

.leader-empty strong {
    color: var(--theme-primary-dark);
}

.leader-empty span {
    font-size: 12px;
}

/* Unified app theme */
:root {
        --theme-primary: #ff7b00;
        --theme-primary-mid: #ff942e;
        --theme-primary-light: #ffb365;
        --theme-primary-soft: #ffc994;
        --theme-primary-pale: #ffe5ca;
        --theme-primary-dark: #3a1d0b;
        --theme-page: #ffe5ca;
        --theme-card: #ffffff;
        --theme-text: #2d1a10;
        --theme-muted: #8a5f3d;
    }

    body.app-page,
    .app-frame,
    .agent-screen,
    .simple-screen,
    .support-screen,
    .orders-screen,
    .about-screen {
        background: var(--theme-page);
        color: var(--theme-text);
    }

    .topbar,
    .sun-home-hero,
    .plan-hero,
    .agent-screen header,
    .mine-head {
        background: linear-gradient(180deg, var(--theme-primary), var(--theme-primary-mid));
        color: #fff;
    }

    .orange-btn,
    .buy-btn,
    .pay-button,
    .admin-button,
    .mini-admin-button,
    .copy-row button,
    .solar-plan-card button,
    .plan-buy-now,
    .plan-message-dialog button,
    .plan-message-action,
    .plan-confirm-actions button,
    .orders-empty a,
    .amount-grid input:checked + span,
    .tabs .active,
    .level-tabs span,
    .team-tabs span.active,
    .team-tabs a.active,
    .orders-tabs .active,
    .bottom-nav a.active .icon,
    .salary-card h2,
    .invite-card button:first-child {
        background: var(--theme-primary);
        color: #fff;
    }

    .plan-tabs a.active,
    .plan-confirm-actions > button,
    .salary-card,
    .salary-tier strong b {
        background: var(--theme-primary-dark);
        color: #fff;
    }

    .plan-tabs a,
    .tabs,
    .level-tabs,
    .amount-buttons button,
    .invite-card button,
    .text-input,
    .amount-entry,
    .light .text-input,
    .admin-form input,
    .admin-form select,
    .admin-form textarea {
        border-color: var(--theme-primary);
    }

    .script-head h1,
    .support-screen h1,
    .agent-screen h1,
    .plan-hero h1,
    .fund-form label,
    .bottom-nav a.active,
    .home-actions .icon,
    .quick-access .qa-icon,
    .solar-plan-info dd,
    .commission-grid strong,
    .support-card a > .icon,
    .mine-menu span,
    .about-card h2,
    .history-icon,
    .order-info p,
    .admin-card-head a {
        color: var(--theme-primary);
    }

    .page-card,
    .solar-plan-card,
    .invite-card,
    .commission-grid div,
    .empty-team,
    .team-member-list,
    .support-card,
    .mine-menu,
    .about-card,
    .order-card,
    .history-card,
    .empty-plan-state,
    .plan-detail-dialog,
    .plan-confirm-dialog,
    .plan-message-dialog {
        background: var(--theme-card);
    }

    .plan-metrics div,
    .order-foot,
    .history-status,
    .notice,
    .amount-buttons button,
    .commission-grid div {
        background: var(--theme-primary-pale);
    }

    .salary-tier,
    .plan-tabs a,
    .orders-tabs span,
    .team-tabs span,
    .team-tabs a,
    .amount-grid span,
    .home-actions a,
    .quick-access a,
    .quick-access .qa-action button {
        background: #fff7ef;
    }

    .salary-tier {
        border-color: var(--theme-primary-soft);
    }

    .salary-tier em {
        background: #a85112;
    }

    .plan-detail-price,
    .salary-card a,
    .solar-plan-info p,
    .history-card small,
    .notice,
    .outline-btn {
        color: var(--theme-primary);
    }

    .orange-btn,
    .buy-btn,
    .pay-button,
    .solar-plan-card button,
    .plan-buy-now,
    .plan-message-dialog button,
    .plan-message-action,
    .orders-empty a {
        box-shadow: 0 8px 18px rgba(255, 123, 0, .28);
    }

    @media (max-width: 900px) {
        .admin-page { grid-template-columns: 1fr; }
        .admin-sidebar { position: static; min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
        .admin-brand { grid-column: 1 / -1; padding-bottom: 12px; }
        .admin-main { padding: 14px; }
        .admin-stats, .admin-grid, .admin-form { grid-template-columns: 1fr; }
    }

    body.admin-page {
        min-width: 1280px;
        grid-template-columns: 260px minmax(1020px, 1fr);
    }

    body.admin-page .admin-sidebar {
        position: sticky;
        top: 0;
        min-height: 100vh;
        display: block;
        padding: 22px 14px;
    }

    body.admin-page .admin-brand {
        padding: 8px 10px 28px;
    }

    body.admin-page .admin-main {
        padding: 24px;
    }

    body.admin-page .admin-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.admin-page .admin-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.admin-page .admin-form {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }