/* AdsGrambd — Microjob Task System Styles */
.tasks-loading { text-align: center; padding: 40px 20px; }
.tasks-empty { text-align: center; padding: 40px 20px; color: #94a3b8; }

/* Header */
.tasks-header { margin-bottom: 16px; }
.tasks-balance { background: linear-gradient(135deg, #1e2a44, #182236); border: 1px solid #243049; border-radius: 14px; padding: 16px; text-align: center; }
.tasks-balance-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.tasks-balance-value { font-size: 26px; font-weight: 800; color: #60a5fa; }
.tasks-balance-bdt { font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* Stats */
.tasks-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tasks-stat { background: #182236; border: 1px solid #243049; border-radius: 10px; padding: 12px 8px; text-align: center; }
.tasks-stat-val { font-size: 18px; font-weight: 700; color: #e6edf7; }
.tasks-stat-lbl { font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* Filters */
.tasks-filters { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px; scrollbar-width: none; }
.tasks-filters::-webkit-scrollbar { display: none; }
.tf-btn { padding: 8px 14px; border-radius: 20px; background: #182236; border: 1px solid #243049; color: #94a3b8; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: .15s; font-family: inherit; }
.tf-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.tf-btn:hover { color: #e6edf7; }

/* Task List */
.tasks-list { display: flex; flex-direction: column; gap: 10px; }
.task-card { background: #182236; border: 1px solid #243049; border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s; position: relative; overflow: hidden; }
.task-card:hover { border-color: #3b82f6; transform: translateY(-1px); }
.task-card.pinned { border-color: #f59e0b; }
.task-card.pinned::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.task-card.status-approved { border-color: #22c55e55; }
.task-card.status-pending { border-color: #f59e0b55; }
.task-card.status-rejected { border-color: #ef444455; }

.task-pin { position: absolute; top: 8px; right: 8px; font-size: 11px; color: #fbbf24; background: #f59e0b22; padding: 3px 8px; border-radius: 10px; font-weight: 600; }

.task-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.task-card-title { font-size: 15px; font-weight: 700; color: #e6edf7; flex: 1; }
.task-reward { font-size: 14px; font-weight: 800; color: #4ade80; background: #22c55e22; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.task-card-desc { font-size: 13px; color: #94a3b8; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.task-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.task-badges { display: flex; gap: 6px; }
.task-badge { font-size: 10px; padding: 3px 8px; background: #0f172a; border: 1px solid #243049; border-radius: 6px; color: #94a3b8; text-transform: uppercase; font-weight: 600; }
.task-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.task-status-pending { background: #f59e0b22; color: #fbbf24; }
.task-status-approved { background: #22c55e22; color: #4ade80; }
.task-status-rejected { background: #ef444422; color: #f87171; }
.task-cta { font-size: 12px; color: #60a5fa; font-weight: 600; }

/* Single view */
.task-single { padding-bottom: 40px; }
.task-back-btn { background: #182236; border: 1px solid #243049; color: #94a3b8; padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; margin-bottom: 14px; font-family: inherit; }
.task-back-btn:hover { color: #e6edf7; }

.task-single-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.task-single-head h2 { margin: 0; font-size: 20px; color: #e6edf7; flex: 1; }
.task-single-reward { font-size: 16px; font-weight: 800; color: #4ade80; background: #22c55e22; padding: 6px 14px; border-radius: 20px; }
.task-pin-badge { display: inline-block; font-size: 12px; color: #fbbf24; background: #f59e0b22; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; font-weight: 600; }
.task-single-meta { display: flex; gap: 12px; margin-bottom: 14px; font-size: 12px; color: #94a3b8; flex-wrap: wrap; }

.task-single-desc { background: #182236; border: 1px solid #243049; border-radius: 12px; padding: 16px; margin-bottom: 14px; color: #e6edf7; font-size: 14px; line-height: 1.7; }
.task-single-desc img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.task-single-desc a { color: #60a5fa; }
.task-single-desc h1, .task-single-desc h2, .task-single-desc h3 { color: #f1f5f9; margin: 12px 0 6px; }
.task-single-desc p { margin: 6px 0; }
.task-single-desc ul, .task-single-desc ol { padding-left: 20px; }

.task-demo-section { margin-bottom: 14px; }
.task-demo-section h4 { font-size: 13px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.task-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.task-demo-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; border: 1px solid #243049; cursor: pointer; transition: .15s; }
.task-demo-img:hover { transform: scale(1.03); border-color: #3b82f6; }

.task-action-box { background: #182236; border: 1px solid #243049; border-radius: 14px; padding: 18px; margin-top: 16px; }

/* Secret code form */
.task-code-form { display: flex; flex-direction: column; gap: 12px; }
.task-code-form label { font-size: 13px; color: #94a3b8; font-weight: 600; }

/* Screenshot form */
.task-ss-form { display: flex; flex-direction: column; gap: 14px; }
.task-ss-form h4 { margin: 0; font-size: 14px; color: #e6edf7; }
.ss-field label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; font-weight: 600; }
.ss-input { width: 100%; padding: 10px; background: #0f172a; border: 1px solid #243049; border-radius: 8px; color: #e6edf7; font-size: 13px; font-family: inherit; }
.ss-preview { margin-top: 8px; }
.ss-preview-img { max-width: 200px; border-radius: 8px; border: 1px solid #243049; }

/* Status boxes */
.task-done-box, .task-pending-box, .task-rejected-box, .task-blocked-box { text-align: center; padding: 16px; }
.task-done-box h3, .task-pending-box h3, .task-rejected-box h3 { margin: 8px 0; font-size: 16px; color: #e6edf7; }
.task-done-box p, .task-pending-box p, .task-rejected-box p { color: #94a3b8; font-size: 13px; margin: 4px 0; }
.task-done-box .note { background: #0f172a; padding: 8px 12px; border-radius: 8px; margin-top: 10px; text-align: left; color: #94a3b8; }
.task-rejected-box .reason { background: #ef444422; padding: 10px; border-radius: 8px; margin: 10px 0; color: #fca5a5; text-align: left; }
.task-blocked-box { background: #f59e0b22; border: 1px solid #f59e0b55; border-radius: 10px; }
.task-blocked-box p { color: #fbbf24; margin: 0; font-size: 13px; }

/* Rating */
.task-rating { margin-top: 14px; padding-top: 14px; border-top: 1px solid #243049; }
.task-rating p { margin: 0 0 8px; font-size: 13px; color: #94a3b8; }
.rating-stars { display: flex; justify-content: center; gap: 6px; }
.rating-star { font-size: 28px; cursor: pointer; color: #475569; transition: .15s; }
.rating-star:hover { color: #fbbf24; transform: scale(1.15); }
.rated { color: #fbbf24; font-size: 13px; margin-top: 10px; }

/* Image modal */
.task-img-modal { position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: pointer; }
.task-img-modal img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.task-img-close { position: absolute; top: 20px; right: 24px; font-size: 32px; color: #fff; cursor: pointer; }

/* Mobile */
@media(max-width: 480px) {
    .task-single-head h2 { font-size: 17px; }
    .task-single-reward { font-size: 14px; padding: 5px 12px; }
    .tasks-balance-value { font-size: 22px; }
}
/* Telegram Join Task */
.task-tg-join { display: flex; flex-direction: column; gap: 12px; }
.tg-join-header { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #229ED922, #0088cc22); border: 1px solid #229ED955; border-radius: 12px; padding: 14px; }
.tg-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #229ED9, #0088cc); border-radius: 12px; font-size: 24px; flex-shrink: 0; }
.tg-join-header h4 { margin: 0 0 2px; font-size: 15px; color: #e6edf7; }
.tg-join-header p { margin: 0; font-size: 12px; color: #94a3b8; }
.tg-join-header p b { color: #4ade80; }
.tg-steps { display: flex; flex-direction: column; gap: 8px; }
.tg-step { display: flex; align-items: flex-start; gap: 12px; background: #0f172a; border: 1px solid #243049; border-radius: 10px; padding: 12px; }
.tg-step-num { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tg-step-title { font-size: 13px; font-weight: 600; color: #e6edf7; margin-bottom: 2px; }
.tg-step-desc { font-size: 11px; color: #94a3b8; }
.tg-join-btn { background: linear-gradient(135deg, #229ED9, #0088cc) !important; text-decoration: none; text-align: center; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 12px; color: #fff !important; display: block; box-shadow: 0 4px 14px rgba(34,158,217,.4); border: 0; margin: 0; }
.tg-join-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,158,217,.6); }
.tg-verify-btn { background: linear-gradient(135deg, #16a34a, #22c55e) !important; border: 0; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 12px; color: #fff; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(34,197,94,.4); width: 100%; }
.tg-verify-btn:disabled { opacity: .6; cursor: not-allowed; }
.tg-hint { font-size: 11px; color: #94a3b8; text-align: center; padding: 8px; background: #0f172a; border-radius: 8px; border: 1px dashed #243049; }
/* Daily task badge */
.task-badge-daily {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    color: #fff !important;
    border-color: #6366f1 !important;
    font-weight: 700;
}