/* ============================================================
   v2 ADDITIONS — New components + mobile overhaul
   ============================================================ */

/* ── Crop Modal ─────────────────────────────────────────────── */
.crop-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: all .2s;
}
.crop-modal-overlay.active { opacity: 1; visibility: visible; }
.crop-modal {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    width: 100%; max-width: 640px; overflow: hidden;
}
.crop-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.crop-modal-body { padding: 20px; }
.crop-container { max-height: 380px; overflow: hidden; background: #000; border-radius: var(--radius); }
.crop-container img { max-width: 100%; display: block; }
.crop-modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.crop-aspect-btns { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.crop-aspect-btn {
    padding: 5px 12px; border-radius: var(--radius); font-size: .78rem; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--card2); color: var(--text2); cursor: pointer;
}
.crop-aspect-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── Upload Progress Overlay ────────────────────────────────── */
.upload-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; opacity: 0; visibility: hidden; transition: all .2s;
}
.upload-overlay.active { opacity: 1; visibility: visible; }
.upload-overlay-box {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 32px 40px; text-align: center; min-width: min(320px, 90vw);
}
.upload-overlay-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 12px; }
.upload-overlay-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.upload-overlay-pct { font-size: 2rem; font-weight: 800; color: var(--accent); margin: 12px 0; }
.upload-overlay-bar { background: var(--card2); border-radius: 50px; height: 10px; overflow: hidden; margin: 8px 0; }
.upload-overlay-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 50px; transition: width .3s ease; width: 0; }
.upload-overlay-name { font-size: .8rem; color: var(--text3); }

/* ── Download Flow: captcha modal ───────────────────────────── */
.captcha-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 8500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: all .2s;
}
.captcha-modal.active { opacity: 1; visibility: visible; }
.captcha-box {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 32px; text-align: center; max-width: 400px; width: 100%;
}
.captcha-question {
    font-size: 2rem; font-weight: 800; color: var(--accent);
    background: var(--card2); border-radius: var(--radius); padding: 20px; margin: 16px 0;
    letter-spacing: 2px;
}
.captcha-input {
    width: 100%; max-width: 180px; text-align: center; font-size: 1.5rem; font-weight: 700;
    padding: 12px; border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); margin-bottom: 16px; display: block; margin-left: auto; margin-right: auto;
}
.captcha-input:focus { outline: none; border-color: var(--accent); }
.captcha-error { color: var(--danger); font-size: .85rem; margin-top: 8px; display: none; }

/* ── Task2Unlock Overlay ────────────────────────────────────── */
.t2u-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 8400;
    display: flex; align-items: flex-start; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: all .2s; overflow-y: auto;
}
.t2u-overlay.active { opacity: 1; visibility: visible; }
.t2u-box {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    width: 100%; max-width: 480px; overflow: hidden; margin: auto;
}
.t2u-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.t2u-header h3 { font-size: 1rem; font-weight: 700; }
.t2u-creator { display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid var(--border); }
.t2u-creator-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.t2u-creator-name { font-size: 1rem; font-weight: 700; }
.t2u-creator-bio { font-size: .8rem; color: var(--text3); margin-top: 4px; }
.t2u-ad { padding: 12px 20px; border-bottom: 1px solid var(--border); text-align: center; }
.t2u-tasks-header { padding: 16px 20px 8px; font-size: .8rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.t2u-tasks { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.t2u-task-btn {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--card2); border: 1.5px solid var(--border); border-radius: var(--radius);
    color: var(--text); font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition); text-decoration: none; width: 100%; text-align: left;
}
.t2u-task-btn:hover { border-color: var(--accent); }
.t2u-task-btn.done { border-color: var(--info); background: rgba(30,144,255,.1); color: var(--info); }
.t2u-task-btn .t2u-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem; transition: all .2s; }
.t2u-task-btn.done .t2u-check { background: var(--info); border-color: var(--info); color: #fff; }
.t2u-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.t2u-progress-text { font-size: .8rem; color: var(--text3); text-align: center; margin-bottom: 10px; }

/* ── Download Timer in Description ──────────────────────────── */
.download-timer-section {
    background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 24px; margin: 24px 0; text-align: center; display: none;
}
.download-timer-section.active { display: block; }
.timer-circle-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.timer-count { font-size: 2.5rem; font-weight: 800; color: var(--accent); }
.timer-bar-wrap { width: 100%; max-width: 360px; height: 8px; background: var(--card); border-radius: 50px; overflow: hidden; margin: 12px auto; }
.timer-bar-fill { height: 100%; background: var(--accent); border-radius: 50px; width: 100%; transition: width 1s linear; }
.timer-ad-wrap { margin: 16px 0; }
.download-final-btn { display: none; margin-top: 16px; }
.download-final-btn.active { display: inline-flex; }

/* ── Description preview (250-char clip) ────────────────────── */
/* Full HTML is always in DOM so Google indexes everything.
   We only clip visually via CSS max-height + fade gradient.    */
.desc-preview {
    max-height: 140px;
    overflow: hidden;
    position: relative;
}
.desc-preview::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(transparent, var(--bg));
    pointer-events: none;
}
.desc-preview.expanded,
.desc-preview.expanded::after { display: revert; } /* undo the clamp */
/* Actual expanded state — remove clip */
.content-description.expanded { max-height: none !important; overflow: visible !important; }
.content-description.expanded::after { display: none !important; }
.desc-see-more {
    display: inline-block; margin-top: 10px; color: var(--accent);
    font-weight: 600; font-size: .9rem; cursor: pointer; border: none; background: none;
    font-family: inherit;
}
.desc-see-more:hover { text-decoration: underline; }

/* Legacy clamp class kept for back-compat */
.desc-clamp { max-height: 420px; overflow: hidden; position: relative; }
.desc-clamp::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--bg)); }
.desc-clamp.expanded { max-height: none; }
.desc-clamp.expanded::after { display: none; }

/* ── Task2Unlock Upload Form ────────────────────────────────── */
.t2u-form-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; }
.t2u-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 50px; transition: .3s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
input:checked + .toggle-slider { background: var(--accent); }
input:checked + .toggle-slider::before { transform: translateX(20px); }
.t2u-task-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.t2u-task-row { display: flex; gap: 8px; align-items: center; }
.t2u-task-row input { flex: 1; }
.btn-remove-task { width: 32px; height: 32px; border-radius: 50%; background: var(--danger); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; border: none; }

/* ── Social Links ───────────────────────────────────────────── */
.social-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-input-wrap { position: relative; }
.social-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); width: 16px; text-align: center; pointer-events: none; }
.social-input-wrap .form-control { padding-left: 36px; }

/* ── Earnings tiers ─────────────────────────────────────────── */
.earnings-tiers-table { width: 100%; border-collapse: collapse; }
.earnings-tiers-table th, .earnings-tiers-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: .875rem; }
.earnings-tiers-table th { font-weight: 700; color: var(--text3); text-transform: uppercase; font-size: .78rem; }
.tier-active { color: var(--accent); font-weight: 700; }
.balance-card { background: linear-gradient(135deg, rgba(0,255,204,.12), rgba(0,230,184,.04)); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 28px; text-align: center; margin-bottom: 24px; }
.balance-amount { font-size: 3rem; font-weight: 800; color: var(--accent); }
.balance-label { color: var(--text3); font-size: .875rem; margin-top: 4px; }

/* ── Color Design Panel ──────────────────────────────────────── */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.color-item { display: flex; align-items: center; gap: 12px; background: var(--card2); border-radius: var(--radius); padding: 10px 14px; }
.color-item input[type="color"] { width: 40px; height: 40px; border-radius: var(--radius); border: 2px solid var(--border); cursor: pointer; padding: 2px; background: none; flex-shrink: 0; }
.color-item label { font-size: .85rem; font-weight: 600; color: var(--text2); }

/* ── Icon picker ─────────────────────────────────────────────── */
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px,1fr)); gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px; }
.icon-option { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1.5px solid var(--border); color: var(--text3); font-size: 1rem; cursor: pointer; transition: all var(--transition); }
.icon-option:hover, .icon-option.selected { border-color: var(--accent); color: var(--accent); background: rgba(0,255,204,.08); }

/* ── Global: hide broken-image alt text ─────────────────────── */
img { font-size: 0; color: transparent; }
img[src=""], img:not([src]) { visibility: hidden; }

/* ── Upload Layout (creator/upload.php) ─────────────────────── */
.upload-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.upload-main {}
.upload-sidebar {}
.upload-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; }
.upload-card h4 { font-weight: 700; margin-bottom: 14px; }
@media (max-width: 900px) {
    .upload-layout { grid-template-columns: 1fr; }
    .upload-sidebar { order: -1; }
}

/* ── Crop Modal (flex overlay) ───────────────────────────────── */
.crop-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.crop-modal-inner {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    width: 100%; max-width: 640px; overflow: hidden;
}
.crop-modal-footer {
    padding: 14px 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.crop-close { background: none; border: none; color: var(--text2); font-size: 1.1rem; cursor: pointer; padding: 4px; }
.crop-close:hover { color: var(--danger); }

/* ── T2U task num badge ──────────────────────────────────────── */
.t2u-task-num {
    width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
    color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}

/* ── Balance card row layout ─────────────────────────────────── */
.balance-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ── Earnings tiers table redesign ───────────────────────────── */
.earnings-tiers-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.earnings-tier-head, .earnings-tier-row { display: grid; grid-template-columns: 1fr 120px 140px; padding: 10px 16px; font-size: .875rem; }
.earnings-tier-head { background: var(--card2); font-weight: 700; color: var(--text3); font-size: .78rem; text-transform: uppercase; }
.earnings-tier-row { border-top: 1px solid var(--border); }
.earnings-tier-row.tier-alt { background: var(--card2); }
.tier-rate { font-weight: 800; color: var(--accent); }

/* ── Icon picker admin ────────────────────────────────────────── */
.icon-pick-btn {
    width: 36px; height: 36px; border-radius: var(--radius); border: 1.5px solid var(--border);
    background: var(--card2); color: var(--text2); cursor: pointer; font-size: .95rem;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.icon-pick-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(139,92,246,.12); }

/* ── Admin color design grid ─────────────────────────────────── */
.color-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.color-setting-row { display: flex; align-items: center; justify-content: space-between; background: var(--card2); border-radius: var(--radius); padding: 10px 14px; }

/* ── Upload overlay (upload.php flex overlay) ────────────────── */
.upload-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9900;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.upload-overlay-inner {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 40px; text-align: center; min-width: min(360px, 90vw);
}
.upload-overlay-icon { font-size: 2.8rem; color: var(--accent); margin-bottom: 16px; }

/* ── Upload progress new style ───────────────────────────────── */
.upload-progress-bar-wrap { width: 100%; height: 12px; background: rgba(255,255,255,.15); border-radius: 50px; overflow: hidden; margin: 16px 0 8px; }
.upload-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa); border-radius: 50px; width: 0; transition: width .3s ease; }
.upload-progress-pct { font-size: 1.8rem; font-weight: 800; color: var(--accent); }

/* ── Table responsive wrapper ────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Modal (admin) ───────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-inner { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-weight: 700; margin: 0; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { background: none; border: none; color: var(--text2); font-size: 1.1rem; cursor: pointer; }

/* ── formatMoney helper display ──────────────────────────────── */
.text-money { color: var(--accent); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   FULL MOBILE RESPONSIVE OVERHAUL v2
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .sidebar-layout { grid-template-columns: 1fr; }
    .hero-image { display: none; }
}

/* ── Stat card row: prevent mobile overflow ──────────────────── */
/* The 3-card flex row in creator/index.php */
.stat-card-row {
    display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.stat-card-row .stat-card { flex: 1 1 100px; min-width: 0; overflow: hidden; }
.stat-card-row .stat-card .stat-info strong { font-size: .95rem; }

/* Earnings page 3-col grid: make auto-fit so it wraps */
.earnings-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

/* Crop modal: ensure touch works on mobile */
.crop-container { touch-action: none; -webkit-user-select: none; user-select: none; }
.crop-aspect-bar {
    padding: 10px 16px; border-top: 1px solid var(--border);
    background: var(--card2);
}
.crop-aspect-bar-label {
    font-size: .72rem; color: var(--text3); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.crop-aspect-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
    :root { --nav-h: 56px; }
    body { padding-bottom: 64px; }

    .container { padding: 0 12px; }

    /* Navbar mobile */
    .navbar-inner { padding: 0 12px; gap: 8px; }
    .logo-text { font-size: 1.2rem; }
    .site-logo { height: 32px; }
    .navbar-search { display: none; }
    .navbar-search.mobile-search-open {
        display: flex; position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: var(--bg); padding: 10px 12px; border-bottom: 1px solid var(--border);
        z-index: 999; max-width: 100%;
    }
    .navbar-nav {
        position: fixed; top: var(--nav-h); left: 0;
        width: min(280px, 85vw); height: calc(100dvh - var(--nav-h));
        background: var(--card); border-right: 1px solid var(--border);
        flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px;
        overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease;
        z-index: 950; margin-left: 0;
    }
    .navbar-nav.open { transform: translateX(0); }
    .nav-link { width: 100%; padding: 12px 14px; }
    .nav-dropdown { width: 100%; }
    .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--card2); margin-top: 4px; display: none; }
    .nav-dropdown.open .dropdown-menu { display: block; }
    .nav-hamburger { display: flex; margin-left: auto; }
    .nav-overlay.active { display: block; }

    /* Grids */
    .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .social-links-grid { grid-template-columns: 1fr; }

    /* Dashboard */
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar { position: static; top: auto; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 12px; gap: 10px; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .stat-info strong { font-size: 1.1rem; }

    /* Content detail */
    .sidebar-layout { grid-template-columns: 1fr; }
    .content-detail-header { padding: 16px 0; }
    .content-title-area h1 { font-size: 1.25rem; }
    .content-meta-bar { gap: 8px; flex-wrap: wrap; }
    .content-actions { flex-direction: column; gap: 8px; }
    .content-actions .btn { width: 100%; justify-content: center; }

    /* Gallery */
    .gallery-item { width: 72px; height: 48px; }
    .gallery-main img { max-height: 220px; }

    /* Sections */
    .section { padding: 24px 0; }
    .section-sm { padding: 16px 0; }
    .section-title { font-size: 1.1rem; }

    /* Hero */
    .hero-section { padding: 28px 0; }
    .hero-inner { flex-direction: column; gap: 20px; }
    .hero-text h1 { font-size: 1.55rem; }
    .hero-text p { font-size: .9rem; margin-bottom: 16px; }
    .hero-stats { gap: 16px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .site-footer { padding: 28px 0 16px; }

    /* Auth */
    .auth-card { padding: 20px 16px; }
    .auth-title { font-size: 1.3rem; }

    /* Tables */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Upload form — stack sidebar below main on mobile */
    .upload-layout { grid-template-columns: 1fr !important; }
    .upload-sidebar { order: -1; }
    .upload-form-grid { grid-template-columns: 1fr !important; }
    .screenshots-grid { grid-template-columns: repeat(3, 1fr); }

    /* Rich editor — prevent height explosion */
    .rich-editor-content { max-height: 240px !important; }

    /* Counters — prevent clipping */
    [id$="-counter"] { font-size: .72rem; word-break: keep-all; white-space: nowrap; }

    /* Balance card row */
    .balance-row { flex-direction: column; gap: 16px; }

    /* Earnings tiers table */
    .earnings-tier-head, .earnings-tier-row { grid-template-columns: 1fr 80px 100px; font-size: .78rem; padding: 8px 10px; }

    /* Crop modal — full-screen friendly on mobile */
    .crop-modal-inner { max-width: calc(100vw - 24px); max-height: 92dvh; overflow-y: auto; }
    .crop-container { max-height: 220px; }

    /* Stat card row — stack vertically on very small screens, allow wrapping */
    .stat-card-row { flex-wrap: wrap; }
    .stat-card-row .stat-card { flex: 1 1 calc(33% - 8px); min-width: 90px; }

    /* Earnings stat grid */
    .earnings-stat-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }

    /* Creator dashboard inline status row */
    div[style*="display:flex;gap:12px"] > .stat-card { min-width: 0 !important; flex-shrink: 1; }
    .stat-card .stat-info strong { font-size: .85rem; }
    .stat-card .stat-info span { font-size: .72rem; }

    /* Category cards */
    .category-card { padding: 14px 8px; }
    .category-icon { width: 42px; height: 42px; font-size: 1rem; }

    /* Creator cards */
    .creator-profile-info { flex-direction: column; align-items: flex-start; }

    /* Toast */
    .toast-container { bottom: 72px; left: 8px; right: 8px; }
    .toast { min-width: auto; }

    /* Modals */
    .modal { max-width: calc(100vw - 24px); }
    .captcha-box { padding: 24px 16px; }

    /* Upload overlay */
    .upload-overlay-box { min-width: auto; width: min(320px, 90vw); padding: 24px; }

    /* Mobile bottom nav */
    .mobile-bottom-nav { display: flex; }
    .mobile-bottom-nav .mobile-nav-item { font-size: .6rem; }
}

/* ── Verified Blue Tick ──────────────────────────────────────── */
.verified-tick {
    color: #1d9bf0 !important;
    filter: drop-shadow(0 0 3px rgba(29,155,240,.35));
}
/* Verification status pill in creator sidebar */
.verify-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600; padding: 3px 9px;
    border-radius: 20px; margin-top: 4px; white-space: nowrap;
}
.verify-status-pill.verified   { background: rgba(29,155,240,.15); color: #1d9bf0; }
.verify-status-pill.pending    { background: rgba(245,158,11,.15);  color: var(--warning); }
.verify-status-pill.apply      { background: rgba(139,92,246,.15);  color: var(--accent); cursor:pointer; text-decoration:none; }
.verify-status-pill.apply:hover{ background: rgba(139,92,246,.28); }

@media (max-width: 480px) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .screenshots-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-text h1 { font-size: 1.3rem; }
    .hero-actions { flex-direction: column; }
    .search-page-form { flex-direction: column; }
    .color-grid { grid-template-columns: 1fr; }
    .content-meta-bar .content-meta-item { font-size: .75rem; }
    .section-header { flex-wrap: wrap; gap: 8px; }
}