/*
 * Developed by Mohammad Rameez Imdad (Rameez Scripts)
 * WhatsApp: https://whatsapp.rameezscripts.com/ (For Custom Projects)
 * YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!)
 * TikTok: https://www.tiktok.com/@aiwithrameez (Follow for more!)
 *
 * account pages — forced password (user_change_password.php), youtube verify, refer & earn, apps script setup guide, help center.
 * built on the portal kit (up-*) in styles.css; squared, every colour from the palette tokens.
 */

/* forced password */
body.page-change-password .cp-card { max-width: 460px; }
body.page-change-password .cp-msg { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid; border-radius: 4px; font-size: 14px; line-height: 1.45; }
body.page-change-password .cp-msg i { margin-top: 2px; }
body.page-change-password .cp-msg.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
body.page-change-password .cp-msg.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
body.page-change-password .cp-field { margin-bottom: 14px; }
body.page-change-password .cp-field label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: #374151; }
body.page-change-password .cp-pw { position: relative; }
body.page-change-password .cp-pw input { width: 100%; min-height: 44px; padding: 10px 48px 10px 12px; border: 1px solid #d5dce6; border-radius: 4px; background: #fff; color: inherit; font: inherit; font-size: 16px; }
body.page-change-password .cp-pw input:focus { outline: none; border-color: var(--c-accent, #0074D9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent, #0074D9) 15%, transparent); }
body.page-change-password .cp-eye { position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: 0; background: none; color: #94a3b8; cursor: pointer; touch-action: manipulation; }
body.page-change-password .cp-eye:hover { color: var(--c-primary, #001f3f); }
body.page-change-password .cp-rules { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #94a3b8; }
body.page-change-password .cp-rules li::before { content: '\25CB'; margin-right: 5px; }
body.page-change-password .cp-rules li.ok { color: #047857; }
body.page-change-password .cp-rules li.ok::before { content: '\2713'; }
body.page-change-password .cp-save, body.page-change-password .cp-go { width: 100%; min-height: 44px; margin-top: 4px; }

/* youtube verify */
body.page-youtube-verify .yv-retry { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; color: #92400e; font-size: 14px; }
body.page-youtube-verify :is(.yv-done, .yv-step) { display: flex; align-items: center; gap: 14px; }
body.page-youtube-verify .yv-done > i { font-size: 28px; color: #059669; }
body.page-youtube-verify :is(.yv-done, .yv-step) > div { flex: 1 1 200px; min-width: 0; }
body.page-youtube-verify :is(.yv-done, .yv-step) b { display: block; font-size: 15px; color: var(--c-primary, #001f3f); }
body.page-youtube-verify :is(.yv-done, .yv-step) p { margin: 2px 0 0; font-size: 13.5px; color: #64748b; }
body.page-youtube-verify .yv-step { padding: 16px 20px; }
body.page-youtube-verify .yv-step + .yv-step { border-top: 1px solid #eef1f5; }
body.page-youtube-verify .yv-num { flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: color-mix(in srgb, var(--c-accent, #0074D9) 12%, #fff); color: var(--c-accent, #0074D9); font-weight: 700; }
body.page-youtube-verify .yv-step .up-btn { flex: 0 0 auto; min-width: 130px; }

/* refer & earn */
body.page-referrals .rf-verify { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body.page-referrals .rf-verify > i { font-size: 26px; color: var(--c-accent, #0074D9); }
body.page-referrals .rf-verify > div { flex: 1 1 200px; min-width: 0; }
body.page-referrals .rf-verify b { display: block; font-size: 15px; color: var(--c-primary, #001f3f); }
body.page-referrals .rf-verify p { margin: 2px 0 0; font-size: 13.5px; color: #64748b; }
body.page-referrals .rf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
body.page-referrals .rf-stats .up-card { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 16px; }
body.page-referrals .rf-stats span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #64748b; }
body.page-referrals .rf-stats span i { color: var(--c-accent, #0074D9); }
body.page-referrals .rf-stats b { font-size: 24px; line-height: 1.25; color: var(--c-primary, #001f3f); }
body.page-referrals .rf-stats small { font-size: 12.5px; color: #94a3b8; }
body.page-referrals .rf-copy { display: flex; gap: 8px; }
body.page-referrals :is(.rf-copy, .rf-filter) input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #d5dce6; border-radius: 4px; background: #fff; color: var(--c-primary, #001f3f); font: inherit; font-size: 16px; }
body.page-referrals .rf-copy input { background: #f8fafc; }
body.page-referrals :is(.rf-copy, .rf-filter) input:focus { outline: none; border-color: var(--c-accent, #0074D9); }
body.page-referrals .rf-copy .up-btn { min-height: 44px; }
body.page-referrals .rf-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.page-referrals .rf-share .up-btn { flex: 1 1 0; min-height: 44px; }
body.page-referrals .rf-link.up-card > h2 { margin-top: -6px; }
body.page-referrals .rf-how { margin-left: auto; }
body.page-referrals .rf-how i { color: inherit; }
body.page-referrals .rf-vip { margin: 12px 0 0; font-size: 13.5px; color: #64748b; }
body.page-referrals .rf-vip i { margin-right: 4px; color: var(--c-accent, #0074D9); }
body.page-referrals .rf-hist.up-card > h2 { margin: 0; padding: 16px 20px 0; }
body.page-referrals .rf-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 14px; border-bottom: 1px solid #eef1f5; }
body.page-referrals .rf-filter .up-sd { flex: 0 0 180px; width: 180px; }
body.page-referrals .rf-filter .up-btn { min-height: 44px; }
body.page-referrals .rf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.page-referrals .rf-table th { padding: 10px 20px; background: #f8fafc; border-bottom: 1px solid #eef1f5; color: #64748b; font-size: 12.5px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .03em; }
body.page-referrals .rf-table td { padding: 12px 20px; border-bottom: 1px solid #eef1f5; color: #334155; }
body.page-referrals .rf-table tr:last-child td { border-bottom: 0; }
body.page-referrals .rf-table strong { color: var(--c-primary, #001f3f); }
body.page-referrals .rf-st { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
body.page-referrals .rf-st.st-pending { background: #fffbeb; color: #b45309; }
body.page-referrals .rf-st.st-verified { background: color-mix(in srgb, var(--c-accent, #0074D9) 12%, #fff); color: var(--c-accent, #0074D9); }
body.page-referrals .rf-st.st-rewarded { background: #ecfdf5; color: #047857; }

/* setup guide — guests get no styles.css, so the shell + kit fall back here at zero specificity (styles.css wins when loaded) */
:where(body.page-setup-guide), :where(body.page-setup-guide) * { box-sizing: border-box; }
:where(body.page-setup-guide) { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.6; background-color: var(--c-bg, #f1f5f9); color: var(--c-text, #0f172a); touch-action: manipulation; }
:where(body.page-setup-guide .dashboard) { display: flex; min-height: 100vh; }
:where(body.page-setup-guide .dashboard.no-sidebar) { display: block; }
:where(body.page-setup-guide .main-content) { flex: 1; min-width: 0; padding: 24px; }
:where(body.page-setup-guide .dashboard.no-sidebar .main-content) { max-width: 1100px; margin: 0 auto; padding: 16px 16px 32px; }
:where(body.page-setup-guide) .up-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 18px 20px; background: #fff; border: 1px solid #e5e9f0; border-radius: 4px; }
:where(body.page-setup-guide) .up-head > div:first-child { flex: 1 1 260px; min-width: 0; }
:where(body.page-setup-guide) .up-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; line-height: 1.25; color: var(--c-primary, #001f3f); }
:where(body.page-setup-guide) .up-head h1 i, :where(body.page-setup-guide) .up-card > h2 i { color: var(--c-accent, #0074D9); }
:where(body.page-setup-guide) .up-head p { margin: 4px 0 0; font-size: 14px; color: #64748b; }
:where(body.page-setup-guide) .up-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(body.page-setup-guide) .up-card { min-width: 0; margin-bottom: 16px; padding: 18px 20px; background: #fff; border: 1px solid #e5e9f0; border-radius: 4px; }
:where(body.page-setup-guide) .up-card.flush { padding: 0; overflow: hidden; }
:where(body.page-setup-guide) .up-card > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; color: var(--c-primary, #001f3f); }
:where(body.page-setup-guide) .up-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #d5dce6; border-radius: 4px; background: #fff; color: var(--c-primary, #001f3f); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
:where(body.page-setup-guide) .up-btn.primary { background: var(--c-primary, #001f3f); border-color: var(--c-primary, #001f3f); color: #fff; }
:where(body.page-setup-guide) .up-btn.icon { width: 44px; padding: 0; }
:where(body.page-setup-guide) .up-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: #fff; border: 1px solid #e5e9f0; border-radius: 4px; }
:where(body.page-setup-guide) .up-tabs a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 4px; color: #475569; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
:where(body.page-setup-guide) .up-tabs a.on { background: var(--c-primary, #001f3f); color: #fff; }
:where(body.page-setup-guide) .up-tabs em { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--c-accent, #0074D9) 14%, #fff); color: var(--c-accent, #0074D9); font-size: 11px; font-style: normal; font-weight: 700; }
:where(body.page-setup-guide) .up-tabs a.on em { background: rgba(255,255,255,.18); color: #fff; }

body.page-setup-guide .guide-pane { display: none; }
body.page-setup-guide .guide-pane.active { display: block; }
body.page-setup-guide .sg-video { max-width: 760px; }
body.page-setup-guide .sg-frame { position: relative; padding-top: 56.25%; background: #000; }
body.page-setup-guide .sg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.page-setup-guide .sg-steps { margin: 0; padding: 0; list-style: none; counter-reset: sg; }
body.page-setup-guide .sg-steps > li { position: relative; padding: 6px 0 6px 36px; font-size: 14.5px; line-height: 1.65; color: #334155; counter-increment: sg; }
body.page-setup-guide .sg-steps > li::before { content: counter(sg); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: color-mix(in srgb, var(--c-accent, #0074D9) 12%, #fff); color: var(--c-accent, #0074D9); font-size: 12.5px; font-weight: 700; }
body.page-setup-guide .sg-steps > li.warn { color: #92400e; counter-increment: none; }
body.page-setup-guide .sg-steps > li.warn::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; background: #fffbeb; color: #d97706; }
body.page-setup-guide .sg-steps a { color: var(--c-accent, #0074D9); }
body.page-setup-guide .hl { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--c-accent, #0074D9) 10%, #fff); color: var(--c-primary, #001f3f); font-size: .92em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.page-setup-guide :is(.sg-steps, .sg-faq) code { padding: 1px 5px; border-radius: 4px; background: #f1f5f9; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .88em; overflow-wrap: anywhere; }
body.page-setup-guide kbd { padding: 0 5px; border: 1px solid #d5dce6; border-bottom-width: 2px; border-radius: 4px; background: #fff; font-family: inherit; font-size: .85em; }
body.page-setup-guide .sg-code { position: relative; margin: 10px 0 4px; padding: 14px 16px; overflow-x: auto; border-radius: 4px; background: var(--c-primary-dark, #0b1220); color: #e2e8f0; }
body.page-setup-guide .sg-code pre { margin: 0; padding-right: 90px; font: 13px/1.7 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; white-space: pre; }
body.page-setup-guide .sg-code .k { color: #7dd3fc; }
body.page-setup-guide .sg-code .s { color: #86efac; }
body.page-setup-guide .sg-code .c { color: #94a3b8; font-style: italic; }
body.page-setup-guide .sg-code .sg-copy { position: absolute; top: 8px; right: 8px; min-height: 34px; padding: 0 12px; font-size: 12.5px; }
body.page-setup-guide .sg-faq { margin: 0; padding: 0; list-style: none; }
body.page-setup-guide .sg-faq li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; font-size: 14.5px; line-height: 1.55; }
body.page-setup-guide .sg-faq li + li { border-top: 1px solid #eef1f5; }
body.page-setup-guide .sg-faq b { color: var(--c-primary, #001f3f); }
body.page-setup-guide .sg-faq span { color: #475569; }
body.page-setup-guide .sg-help p { margin: 0 0 12px; font-size: 14px; color: #64748b; }
body.page-setup-guide .sg-help-btns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
    body.page-referrals .rf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    :where(body.page-setup-guide .main-content) { padding: 12px; }
    :where(body.page-setup-guide) .up-head { padding: 14px 16px; margin-bottom: 12px; }
    :where(body.page-setup-guide) .up-head h1 { font-size: 20px; }
    :where(body.page-setup-guide) .up-head-actions { width: 100%; }
    :where(body.page-setup-guide) .up-head-actions .up-btn:not(.icon) { flex: 1 1 auto; }
    :where(body.page-setup-guide) .up-card { padding: 14px 16px; margin-bottom: 12px; }
}
@media (max-width: 600px) {
    body.page-youtube-verify .yv-step { flex-wrap: wrap; padding: 14px 16px; }
    body.page-youtube-verify :is(.yv-step, .yv-done) .up-btn { flex: 1 1 100%; }
    body.page-referrals .rf-verify .up-btn { flex: 1 1 100%; }
    body.page-referrals .rf-stats { gap: 8px; margin-bottom: 12px; }
    body.page-referrals .rf-stats .up-card { padding: 12px 14px; }
    body.page-referrals .rf-stats b { font-size: 20px; }
    body.page-referrals .rf-share .up-btn { padding: 0 10px; }
    body.page-referrals .rf-hist.up-card > h2 { padding: 14px 16px 0; }
    body.page-referrals .rf-filter { padding: 10px 16px 12px; }
    body.page-referrals .rf-filter .up-sd { flex: 1 1 0; width: auto; min-width: 0; }
    body.page-referrals .rf-filter input { flex-basis: 100%; }
    /* history rows -> label | value cards */
    body.page-referrals .rf-table thead { display: none; }
    body.page-referrals .rf-table, body.page-referrals .rf-table tbody, body.page-referrals .rf-table tr, body.page-referrals .rf-table td { display: block; width: 100%; }
    body.page-referrals .rf-table tr { padding: 8px 16px; border-bottom: 1px solid #eef1f5; }
    body.page-referrals .rf-table tr:last-child { border-bottom: 0; }
    body.page-referrals .rf-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
    body.page-referrals .rf-table td::before { content: attr(data-label); color: #64748b; font-size: 12.5px; font-weight: 600; text-align: left; }
    /* 4 tabs as a 2x2 grid — nothing hidden off-screen */
    body.page-setup-guide.rs-portal-theme .up-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    body.page-setup-guide.rs-portal-theme .up-tabs a { padding: 0 8px; font-size: 13.5px; }
    body.page-setup-guide .sg-steps > li { font-size: 14px; padding-left: 34px; }
    body.page-setup-guide .sg-steps a { display: inline-block; padding: 14px 0; margin: -14px 0; } /* 44px tap, layout unchanged */
    body.page-setup-guide .sg-code pre { padding-right: 0; }
    body.page-setup-guide .sg-code .sg-copy { position: static; min-height: 44px; margin-bottom: 8px; }
    body.page-setup-guide .sg-faq li { grid-template-columns: minmax(0, 1fr); font-size: 14px; }
    body.page-setup-guide .sg-help-btns .up-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
}