/* ═══════════════════════════════════════════════════════════
   TaskPro – Frontend Styles
═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --tp-primary:    #1d4ed8;
  --tp-primary-dk: #1e40af;
  --tp-accent:     #f59e0b;
  --tp-success:    #22c55e;
  --tp-danger:     #ef4444;
  --tp-warning:    #f59e0b;
  --tp-text:       #1e293b;
  --tp-muted:      #64748b;
  --tp-border:     #e2e8f0;
  --tp-bg:         #f8fafc;
  --tp-card:       #ffffff;
  --tp-radius:     12px;
  --tp-shadow:     0 4px 24px rgba(0,0,0,.08);
  --tp-shadow-lg:  0 8px 40px rgba(0,0,0,.12);
}

/* ── Wrap ─────────────────────────────────────────────────── */
.tp-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--tp-text); line-height: 1.6; }
.tp-wrap * { box-sizing: border-box; }

/* ── Buttons ──────────────────────────────────────────────── */
.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 24px; background: var(--tp-primary); color: #fff; border: 2px solid var(--tp-primary); border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .2s; line-height: 1; }
.tp-btn:hover { background: var(--tp-primary-dk); border-color: var(--tp-primary-dk); color: #fff; text-decoration: none; }
.tp-btn:disabled { opacity: .5; cursor: not-allowed; }
.tp-btn-outline { background: transparent; color: var(--tp-primary); }
.tp-btn-outline:hover { background: var(--tp-primary); color: #fff; }
.tp-btn-sm { padding: 7px 16px; font-size: 13px; }
.tp-btn-full { width: 100%; }
.tp-btn-done { background: var(--tp-success); border-color: var(--tp-success); }
.tp-btn-current { background: #94a3b8; border-color: #94a3b8; }
.tp-btn-whatsapp { background: #25d366; border-color: #25d366; }
.tp-btn-tg { background: #229ed9; border-color: #229ed9; }
.tp-btn-pay { background: linear-gradient(135deg, #1d4ed8, #7c3aed); border: none; padding: 14px 24px; font-size: 16px; border-radius: 10px; }
.tp-btn-pay:hover { opacity: .92; }

/* ── Alerts ───────────────────────────────────────────────── */
.tp-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; border-left: 4px solid transparent; }
.tp-alert-warning { background: #fffbeb; color: #92400e; border-left-color: var(--tp-warning); }
.tp-alert-danger  { background: #fff1f2; color: #991b1b; border-left-color: var(--tp-danger); }
.tp-alert-success { background: #f0fdf4; color: #166534; border-left-color: var(--tp-success); }
.tp-alert a { color: inherit; font-weight: 600; }

/* ── Messages ─────────────────────────────────────────────── */
.tp-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.tp-msg.tp-msg-ok  { background: #dcfce7; color: #166534; }
.tp-msg.tp-msg-err { background: #fee2e2; color: #991b1b; }

/* ── Notice ───────────────────────────────────────────────── */
.tp-notice { padding: 14px 20px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; color: #1e40af; font-size: 15px; }
.tp-notice a { color: #1d4ed8; font-weight: 600; }

/* ── Login Prompt ─────────────────────────────────────────── */
.tp-login-prompt { text-align: center; padding: 60px 20px; }
.tp-login-icon { font-size: 48px; margin-bottom: 16px; }
.tp-login-prompt h3 { font-size: 22px; color: var(--tp-text); margin: 0 0 8px; }
.tp-login-prompt p { color: var(--tp-muted); margin: 0 0 24px; }
.tp-login-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Forms ────────────────────────────────────────────────── */
.tp-form { display: flex; flex-direction: column; gap: 16px; }
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-field label { font-size: 13px; font-weight: 600; color: var(--tp-text); }
.tp-field input, .tp-field select, .tp-field textarea { padding: 10px 14px; border: 1.5px solid var(--tp-border); border-radius: 8px; font-size: 14px; color: var(--tp-text); background: #fff; transition: border-color .2s; width: 100%; }
.tp-field input:focus, .tp-field select:focus { outline: none; border-color: var(--tp-primary); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.tp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tp-opt { font-weight: 400; color: var(--tp-muted); }
@media (max-width: 500px) { .tp-field-row { grid-template-columns: 1fr; } }

/* ── Tables ───────────────────────────────────────────────── */
.tp-table-scroll { overflow-x: auto; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tp-table thead { background: #f1f5f9; }
.tp-table th { padding: 11px 14px; text-align: left; font-weight: 600; color: var(--tp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--tp-border); }
.tp-table td { padding: 12px 14px; border-bottom: 1px solid var(--tp-border); vertical-align: middle; }
.tp-table tr:last-child td { border-bottom: none; }
.tp-table tr:hover td { background: #f8fafc; }
.tp-green-val { color: #166534; font-weight: 600; }
.tp-red-val   { color: #991b1b; font-weight: 600; }
.tp-tag { display: inline-block; background: #f1f5f9; color: var(--tp-muted); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; text-transform: capitalize; }
.tp-link { font-size: 13px; color: var(--tp-primary); text-decoration: none; font-weight: 600; }
.tp-link:hover { text-decoration: underline; }

/* ── Copy Box ─────────────────────────────────────────────── */
.tp-copy-box { display: flex; gap: 8px; align-items: center; }
.tp-copy-box input { flex: 1; font-size: 13px; color: var(--tp-primary); background: #eff6ff; border-color: #bfdbfe; font-family: monospace; }

/* ── Empty State ──────────────────────────────────────────── */
.tp-empty-state { text-align: center; padding: 50px 20px; color: var(--tp-muted); }
.tp-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* ── Spinner ──────────────────────────────────────────────── */
.tp-spinner { width: 36px; height: 36px; border: 3px solid #e2e8f0; border-top-color: var(--tp-primary); border-radius: 50%; animation: tp-spin .7s linear infinite; margin: 0 auto; }
.tp-spinner-large { width: 52px; height: 52px; border-width: 4px; margin: 0 auto; border: 4px solid #e2e8f0; border-top-color: var(--tp-primary); border-radius: 50%; animation: tp-spin .7s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   REGISTRATION
══════════════════════════════════════════════════════════ */
.tp-register-box { max-width: 760px; margin: 0 auto; background: var(--tp-card); border-radius: 16px; box-shadow: var(--tp-shadow-lg); overflow: hidden; }
.tp-register-hd { background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%); padding: 36px 40px; text-align: center; color: #fff; }
.tp-register-logo { font-size: 42px; margin-bottom: 8px; }
.tp-register-hd h2 { margin: 0 0 6px; font-size: 26px; }
.tp-register-hd p { margin: 0; opacity: .85; font-size: 15px; }
.tp-step { padding: 32px 40px; }
@media(max-width:500px){ .tp-step { padding: 24px 20px; } }

/* Step indicator */
.tp-step-indicator { display: flex; align-items: center; margin-bottom: 24px; justify-content: center; gap: 0; }
.tp-step-dot { width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; color: #94a3b8; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-dot-active { background: var(--tp-primary); color: #fff; }
.tp-dot-done { background: var(--tp-success); color: #fff; }
.tp-step-line { flex: 1; height: 3px; background: #e2e8f0; max-width: 80px; }
.tp-line-done { background: var(--tp-success); }
.tp-step h3 { font-size: 18px; margin: 0 0 20px; color: var(--tp-text); }

/* Level grid */
.tp-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; margin-bottom: 24px; }
.tp-level-card { border: 2px solid var(--tp-border); border-radius: 12px; padding: 16px; cursor: pointer; text-align: center; transition: all .2s; position: relative; background: #fff; }
.tp-level-card:hover { border-color: var(--tp-primary); box-shadow: 0 2px 12px rgba(29,78,216,.12); }
.tp-level-selected { border-color: var(--tp-primary); background: #eff6ff; }
.tp-level-nm { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--tp-text); }
.tp-level-fee { font-size: 20px; font-weight: 800; color: var(--tp-primary); margin-bottom: 6px; }
.tp-free-badge { background: #dcfce7; color: #166534; padding: 2px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.tp-level-comm { font-size: 12px; color: var(--tp-muted); margin-bottom: 4px; }
.tp-level-note { font-size: 11px; color: #b45309; background: #fffbeb; padding: 4px 8px; border-radius: 6px; margin-top: 6px; }
.tp-level-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--tp-primary); color: #fff; border-radius: 50%; font-size: 11px; display: none; align-items: center; justify-content: center; font-weight: 700; }
.tp-level-selected .tp-level-tick { display: flex; }

/* Selected level banner */
.tp-selected-level-banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; color: #1e40af; font-weight: 500; }

/* Payment summary */
.tp-payment-summary { background: #f8fafc; border: 1px solid var(--tp-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.tp-payment-summary h4 { margin: 0 0 12px; font-size: 15px; }
.tp-pay-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--tp-border); font-size: 14px; }
.tp-pay-row:last-child { border-bottom: none; font-size: 16px; font-weight: 700; color: var(--tp-primary); }

/* Form actions */
.tp-form-actions { display: flex; gap: 12px; margin-top: 20px; }

/* ══════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════ */
.tp-dashboard { background: var(--tp-bg); min-height: 60vh; padding: 0; }
.tp-dash-hd { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%); color: #fff; padding: 28px 32px; border-radius: 16px; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.tp-dash-hd-left { display: flex; align-items: center; gap: 16px; }
.tp-avatar { width: 52px; height: 52px; background: rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.tp-dash-hd h2 { margin: 0 0 4px; font-size: 20px; }
.tp-level-badge { display: inline-block; background: rgba(255,255,255,.2); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* Stats row */
.tp-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tp-stat-pill { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.tp-pill-icon { font-size: 24px; }
.tp-pill-val { font-size: 18px; font-weight: 700; color: var(--tp-text); }
.tp-pill-lbl { font-size: 12px; color: var(--tp-muted); }
.tp-pill-green  { border-left: 4px solid var(--tp-success); }
.tp-pill-blue   { border-left: 4px solid #3b82f6; }
.tp-pill-purple { border-left: 4px solid #a855f7; }
.tp-pill-orange { border-left: 4px solid #f97316; }

/* Referral section */
.tp-dash-section { background: #fff; border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.tp-dash-section h3 { margin: 0 0 14px; font-size: 16px; color: var(--tp-text); }
.tp-ref-section { border-left: 4px solid var(--tp-primary); }
.tp-locked-section { text-align: center; border-left: 4px solid #f59e0b; }
.tp-lock-icon { font-size: 36px; margin-bottom: 10px; }
.tp-locked-section h3 { color: #92400e; }
.tp-locked-section p { color: var(--tp-muted); font-size: 14px; }
.tp-locked-section a { color: var(--tp-primary); font-weight: 600; }

/* Quick nav tiles */
.tp-quick-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; }
.tp-nav-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 20px 12px; text-decoration: none; color: var(--tp-text); font-size: 13px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.07); transition: all .2s; border: 2px solid transparent; }
.tp-nav-tile:hover { border-color: var(--tp-primary); color: var(--tp-primary); box-shadow: var(--tp-shadow); transform: translateY(-2px); text-decoration: none; }
.tp-tile-icon { font-size: 26px; }

/* ══════════════════════════════════════════════════════════
   TASKS
══════════════════════════════════════════════════════════ */
.tp-tasks-page { padding: 4px 0; }
.tp-tasks-hd { margin-bottom: 20px; }
.tp-tasks-hd h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.tp-tasks-hd p { color: var(--tp-muted); margin: 0; font-size: 14px; }
.tp-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.tp-task-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s; }
.tp-task-card:hover { box-shadow: var(--tp-shadow); }
.tp-task-done { opacity: .7; }
.tp-task-type-badge { padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.tp-badge-video { background: #dbeafe; color: #1e40af; }
.tp-badge-link  { background: #d1fae5; color: #065f46; }
.tp-task-body { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tp-task-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--tp-text); }
.tp-task-desc { font-size: 13px; color: var(--tp-muted); margin: 0; line-height: 1.5; }
.tp-task-reward-line { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--tp-border); }
.tp-reward-label { font-size: 12px; color: var(--tp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tp-reward-amount { font-size: 16px; font-weight: 800; color: var(--tp-primary); }
/* Link task action row */
.tp-link-task-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-link-task-actions .tp-btn { flex: 1; min-width: 120px; font-size: 13px; padding: 9px 14px; }
.tp-timer-badge { background: rgba(255,255,255,.25); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
/* Video embed */
.task-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.task-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.task-platform-link { margin: 0; padding: 12px 16px; text-align: center; }
.task-platform-link a { color: var(--tp-primary); font-weight: 600; text-decoration: none; font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   WALLET
══════════════════════════════════════════════════════════ */
.tp-wallet-page { max-width: 780px; margin: 0 auto; }
.tp-wallet-hero { background: linear-gradient(135deg, #1d4ed8, #7c3aed); color: #fff; border-radius: 16px; padding: 32px; display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.tp-wallet-icon { font-size: 48px; }
.tp-wallet-info { flex: 1; }
.tp-wallet-balance-lbl { font-size: 13px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.tp-wallet-balance-val { font-size: 36px; font-weight: 800; line-height: 1.2; }
.tp-wallet-total-earned { font-size: 13px; opacity: .85; margin-top: 4px; }
.tp-wallet-history { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.tp-wallet-history h3 { margin: 0 0 18px; font-size: 17px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   WITHDRAWAL
══════════════════════════════════════════════════════════ */
.tp-withdrawal-page { max-width: 720px; margin: 0 auto; }
.tp-wd-balance-banner { display: flex; justify-content: space-between; align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 22px; margin-bottom: 20px; font-size: 15px; color: #1e40af; }
.tp-wd-balance-banner strong { font-size: 22px; font-weight: 800; }
.tp-wd-form-card { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 1px 6px rgba(0,0,0,.08); margin-bottom: 24px; }
.tp-wd-form-card h3 { margin: 0 0 20px; font-size: 17px; font-weight: 700; }
.tp-wd-history { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.tp-wd-history h3 { margin: 0 0 18px; font-size: 17px; font-weight: 700; }
/* Status pills */
.tp-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.tp-pill-success { background: #dcfce7; color: #166534; }
.tp-pill-danger  { background: #fee2e2; color: #991b1b; }
.tp-pill-warning { background: #fef9c3; color: #854d0e; }

/* ══════════════════════════════════════════════════════════
   UPGRADE
══════════════════════════════════════════════════════════ */
.tp-upgrade-page { max-width: 900px; margin: 0 auto; }
.tp-upgrade-hd { text-align: center; margin-bottom: 28px; }
.tp-upgrade-hd h2 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.tp-upgrade-hd p { color: var(--tp-muted); margin: 0 0 14px; }
.tp-current-level-badge { display: inline-block; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 6px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.tp-upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.tp-upgrade-card { background: #fff; border-radius: 14px; padding: 24px 16px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.07); border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; overflow: hidden; }
.tp-upcard-available { border-color: var(--tp-border); transition: all .2s; }
.tp-upcard-available:hover { border-color: var(--tp-primary); box-shadow: var(--tp-shadow); }
.tp-upcard-current { border-color: var(--tp-success); background: #f0fdf4; }
.tp-upcard-lower { opacity: .5; }
.tp-upcard-name { font-size: 15px; font-weight: 700; color: var(--tp-text); }
.tp-upcard-fee { font-size: 22px; font-weight: 800; color: var(--tp-primary); }
.tp-upcard-perks { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 12px; color: var(--tp-muted); align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.tp-current-ribbon { position: absolute; top: 10px; right: -20px; background: var(--tp-success); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 28px; transform: rotate(35deg); letter-spacing: .5px; }

/* ══════════════════════════════════════════════════════════
   REFERRAL
══════════════════════════════════════════════════════════ */
.tp-referral-page { max-width: 760px; margin: 0 auto; }
.tp-referral-hd { margin-bottom: 24px; }
.tp-referral-hd h2 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.tp-referral-hd p { color: var(--tp-muted); margin: 0; font-size: 14px; }
.tp-ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.tp-ref-stat-card { background: #fff; border-radius: 14px; padding: 22px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.tp-ref-stat-val { font-size: 28px; font-weight: 800; color: var(--tp-primary); }
.tp-ref-stat-lbl { font-size: 13px; color: var(--tp-muted); margin-top: 4px; }
.tp-ref-link-section { background: #fff; border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 6px rgba(0,0,0,.07); border-left: 4px solid var(--tp-primary); }
.tp-ref-link-section h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.tp-ref-link-section p { color: var(--tp-muted); font-size: 14px; margin: 0 0 14px; }
.tp-ref-code-line { font-size: 13px; color: var(--tp-muted); margin-top: 10px; }
.tp-ref-code-line code { background: #f1f5f9; padding: 3px 8px; border-radius: 4px; font-size: 13px; color: var(--tp-primary); font-weight: 700; }
.tp-share-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tp-ref-history { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.tp-ref-history h3 { margin: 0 0 18px; font-size: 17px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .tp-register-hd { padding: 28px 24px; }
  .tp-dash-hd { padding: 22px 20px; }
  .tp-level-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-tasks-grid { grid-template-columns: 1fr; }
  .tp-wallet-hero { flex-direction: column; text-align: center; }
  .tp-ref-stats { grid-template-columns: 1fr; }
  .tp-upgrade-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ QUIZ ════════════════════════════════════════════════ */
.tp-quiz-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:20px; }
.tp-quiz-card { background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:column; }
.tp-quiz-card-header { padding:16px 20px;display:flex;align-items:center;gap:12px; }
.tp-quiz-card-header.task-type { background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-bottom:2px solid #22c55e; }
.tp-quiz-card-header.show-type { background:linear-gradient(135deg,#faf5ff,#ede9fe);border-bottom:2px solid #a855f7; }
.tp-quiz-type-icon { font-size:28px; }
.tp-quiz-type-label { font-weight:700;font-size:13px; }
.tp-quiz-card-body { padding:16px 20px 20px;flex:1;display:flex;flex-direction:column;gap:10px; }
.tp-quiz-title { font-size:16px;font-weight:700;margin:0;color:var(--tp-text); }
.tp-quiz-desc { font-size:13px;color:var(--tp-muted);margin:0;line-height:1.5; }
.tp-quiz-meta { display:flex;gap:16px;flex-wrap:wrap; }
.tp-quiz-meta-item { font-size:12px;color:var(--tp-muted);display:flex;align-items:center;gap:4px; }
.tp-quiz-meta-item strong { color:var(--tp-text); }
.tp-quiz-prize { background:#f8fafc;border:1px solid var(--tp-border);border-radius:8px;padding:10px 14px;text-align:center; }
.tp-quiz-prize .prize-label { font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tp-muted); }
.tp-quiz-prize .prize-amount { font-size:22px;font-weight:800;color:var(--tp-primary); }
.tp-quiz-questions-wrap { display:none;margin-top:16px; }
.tp-quiz-question { background:#f8fafc;border-radius:10px;padding:16px;margin-bottom:12px; }
.tp-quiz-question p { font-weight:600;margin:0 0 10px;font-size:14px; }
.tp-quiz-options { display:flex;flex-direction:column;gap:8px; }
.tp-quiz-option { display:flex;align-items:center;gap:10px;padding:8px 12px;border:1.5px solid var(--tp-border);border-radius:8px;cursor:pointer;transition:all .15s;font-size:14px; }
.tp-quiz-option:hover { border-color:var(--tp-primary);background:#eff6ff; }
.tp-quiz-option input[type=radio] { accent-color:var(--tp-primary); }
.tp-quiz-option.selected { border-color:var(--tp-primary);background:#eff6ff; }
.tp-quiz-result { text-align:center;padding:24px;border-radius:12px;margin-top:16px; }
.tp-quiz-result.passed { background:#f0fdf4;border:2px solid #22c55e; }
.tp-quiz-result.failed { background:#fff1f2;border:2px solid #ef4444; }
.tp-quiz-result .result-icon { font-size:48px;margin-bottom:12px; }
.tp-quiz-result .result-score { font-size:28px;font-weight:800; }
.tp-quiz-result .result-msg { font-size:14px;margin-top:8px;color:var(--tp-muted); }
.tp-quiz-reward-msg { background:#dcfce7;color:#166534;padding:12px 16px;border-radius:8px;font-weight:600;margin-top:12px;font-size:15px; }
.tp-quiz-completed { background:#f1f5f9;border-radius:10px;padding:20px;text-align:center;color:var(--tp-muted); }

/* ══ CONTEST ══════════════════════════════════════════════ */
.tp-contest-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-top:20px; }
.tp-contest-card { background:#fff;border-radius:16px;box-shadow:0 2px 16px rgba(0,0,0,.08);overflow:hidden; }
.tp-contest-banner { height:8px; }
.tp-contest-banner.beauty { background:linear-gradient(90deg,#f472b6,#a855f7); }
.tp-contest-banner.handsome { background:linear-gradient(90deg,#60a5fa,#6366f1); }
.tp-contest-banner.most_active_staff { background:linear-gradient(90deg,#34d399,#3b82f6); }
.tp-contest-banner.best_staff_month { background:linear-gradient(90deg,#fbbf24,#f97316); }
.tp-contest-banner.highest_promoter { background:linear-gradient(90deg,#f87171,#fb923c); }
.tp-contest-body { padding:20px; }
.tp-contest-cat { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tp-muted);margin-bottom:6px; }
.tp-contest-title { font-size:18px;font-weight:800;margin:0 0 8px;color:var(--tp-text); }
.tp-contest-desc { font-size:13px;color:var(--tp-muted);margin:0 0 14px;line-height:1.5; }
.tp-contest-fees { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px; }
.tp-fee-pill { background:#f1f5f9;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;color:var(--tp-muted); }
.tp-fee-pill span { color:var(--tp-primary); }
.tp-contest-prizes { background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:14px; }
.tp-prize-row { display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0; }
.tp-prize-medal { font-size:16px;margin-right:6px; }
.tp-contest-phase { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:14px; }
.tp-phase-upcoming  { background:#f1f5f9;color:#64748b; }
.tp-phase-applying  { background:#dbeafe;color:#1e40af; }
.tp-phase-voting    { background:#dcfce7;color:#166534; }
.tp-phase-ended,.tp-phase-completed { background:#e0e7ff;color:#3730a3; }
.tp-contestants-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px; }
.tp-contestant-card { background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden;text-align:center; }
.tp-contestant-photo { width:100%;aspect-ratio:1;object-fit:cover;background:#f1f5f9; }
.tp-contestant-photo-placeholder { width:100%;aspect-ratio:1;background:linear-gradient(135deg,#e0e7ff,#dbeafe);display:flex;align-items:center;justify-content:center;font-size:48px; }
.tp-contestant-info { padding:12px; }
.tp-contestant-name { font-weight:700;font-size:14px;margin-bottom:4px; }
.tp-contestant-votes { font-size:20px;font-weight:800;color:var(--tp-primary);margin-bottom:8px; }
.tp-contestant-votes small { font-size:11px;font-weight:400;color:var(--tp-muted); }
.tp-winner-ribbon { background:linear-gradient(135deg,#fbbf24,#f97316);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:0 0 10px 10px; }