/* ================================================================
   infocyn — Responsive CSS
   Specialized breakpoints for Desktop, iPad, and Mobile
   ================================================================ */

/* ─── Viewport & Safe Areas ──────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
    .dashboard-mobile-bar {
        padding-top: env(safe-area-inset-top);
    }

    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ================================================================
   DESKTOP TWEAKS (1200px - 1399px)
   Slightly smaller desktop — adjust grids
   ================================================================ */
@media (max-width: 1399px) {
    .dashboard-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .dash-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* ================================================================
   iPAD PRO LANDSCAPE & SMALL DESKTOP (1024px - 1199px)
   Sidebar visible but narrower, content adapts
   ================================================================ */
@media (max-width: 1199px) {
    .dashboard-cards {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .dashboard-card {
        aspect-ratio: auto !important;
        padding: 18px 20px;
    }

    .card-value {
        font-size: 1.7rem;
    }

    /* Admin overview grid: keep 2 cols but tighter */
    .admin-grid {
        gap: 18px;
    }

    /* Settings grid: 2 cols stays fine */
    .settings-form-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Admin quick nav buttons wrap better */
    .admin-quick-nav {
        gap: 10px;
    }

    .admin-quick-nav .btn {
        font-size: 0.85rem;
        padding: 10px 18px;
    }

    /* Tools grid */
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Marketplace filter */
    .marketplace-filter-form {
        grid-template-columns: 2fr 1fr 1fr auto;
    }
}

/* ================================================================
   iPAD PORTRAIT & TABLETS (768px - 1023px)
   Sidebar hidden — mobile bar visible — 2-column grids
   ================================================================ */
@media (max-width: 1023px) {

    /* ── Root scaling ── */
    html {
        font-size: 14.5px !important;
    }

    /* ── Public Nav: hamburger mode ── */
    .desktop-nav {
        display: none !important;
    }

    .mobile-hamburger-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ── Hero section ── */
    .hero h2 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.92rem;
    }

    /* ── Dashboard Sidebar: slide from left ── */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 270px !important;
        max-width: 82vw !important;
        z-index: 1200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none;
    }

    .sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 10px 0 50px rgba(0, 0, 0, 0.8) !important;
    }

    .sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(4, 8, 16, 0.8) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1150 !important;
    }

    /* ── Main content: full width ── */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        padding: 68px 20px 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* ── Dashboard mobile top bar ── */
    .dashboard-mobile-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 54px !important;
        background: rgba(10, 11, 16, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(0, 255, 251, 0.25) !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;
    }

    .dashboard-brand-title {
        font-size: 0.88rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 60vw !important;
    }

    /* ── Dashboard stat cards: 2 cols on iPad ── */
    .dash-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .dash-stat-card {
        padding: 16px 18px !important;
    }

    .dash-stat-number {
        font-size: 1.45rem !important;
    }

    .dash-stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    /* ── Admin overview cards ── */
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .dashboard-card {
        aspect-ratio: auto !important;
        padding: 16px 18px !important;
    }

    .card-value {
        font-size: 1.35rem !important;
    }

    /* ── Sticky Footer ── */
    footer {
        margin-top: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   MOBILE (577px - 767px)
   Compact scaling for phone displays
   ================================================================ */
@media (max-width: 767px) {

    /* ── Root scaling for mobile ── */
    html {
        font-size: 13.5px !important;
    }

    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .main-content {
        padding: 60px 12px 0 !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ── Global Icon Size Scaling ── */
    .page-header h2 i,

    /* ── Mobile Edit Tool Section Styling ── */
    .edit-tool-container {
        padding: 0 8px 40px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .edit-tool-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .edit-tool-header-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }

    .edit-tool-header-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .edit-tool-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .edit-tool-stat-card {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .edit-tool-main-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .edit-tool-card {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .edit-tool-subgrid-2,
    .edit-tool-subgrid-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .edit-tool-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .edit-tool-input {
        font-size: 0.85rem !important;
        padding: 9px 11px !important;
    }
    .section-header h3 i,
    .card-title i,
    .dash-filter-bar span i,
    .btn i,
    .modal-title i,
    .sidebar-brand i {
        font-size: 1rem !important;
        max-width: 18px;
    }

    /* ── Sidebar: compact fonts & icons ── */
    .sidebar {
        width: 250px !important;
        max-width: 80vw !important;
    }

    .sidebar-brand {
        padding: 12px 14px !important;
        font-size: 0.88rem !important;
        gap: 8px !important;
    }

    .sidebar-header {
        padding: 10px 14px !important;
    }

    .user-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .user-name {
        font-size: 0.8rem !important;
    }

    .user-email {
        font-size: 0.62rem !important;
    }

    .menu-category {
        padding: 8px 14px 3px !important;
        font-size: 0.58rem !important;
        letter-spacing: 1.2px !important;
    }

    .menu-item {
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
        gap: 8px !important;
    }

    .menu-item i {
        font-size: 0.82rem !important;
        width: 15px !important;
    }

    /* ── Dashboard Mobile Bar ── */
    .dashboard-mobile-bar {
        height: 48px !important;
        padding: 0 12px !important;
    }

    .dashboard-brand-title {
        font-size: 0.8rem !important;
    }

    .sidebar-toggle-btn i {
        font-size: 1.25rem !important;
        color: var(--primary-color) !important;
        display: inline-block !important;
        visibility: visible !important;
        max-width: none !important;
    }

    .sidebar-toggle-btn.admin-toggle-btn i {
        color: #ffa500 !important;
    }

    /* ── Stat cards: 2 per row, compact ── */
    .dash-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dash-stat-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .dash-stat-header {
        margin-bottom: 8px !important;
    }

    .dash-stat-number {
        font-size: 1.15rem !important;
        margin-bottom: 4px !important;
    }

    .dash-stat-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.8px !important;
    }

    .dash-stat-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
        border-radius: 7px !important;
    }

    .dash-stat-subtext {
        font-size: 0.6rem !important;
    }

    /* ── Dashboard cards (admin overview) ── */
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-card {
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }

    .card-value {
        font-size: 1.1rem !important;
        margin-bottom: 3px !important;
    }

    .card-title {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }

    /* ── Glass cards ── */
    .dash-card-glass {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    /* ── Quick Action Bar ── */
    .dash-filter-bar {
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 8px !important;
        margin-bottom: 14px !important;
    }

    .dash-filter-bar span {
        font-size: 0.72rem !important;
    }

    /* ── Public Header ── */
    header,
    .public-header {
        padding: 0 12px !important;
        height: 50px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .public-header .logo h1 {
        font-size: 0.98rem !important;
    }

    .public-header .logo i {
        font-size: 1.1rem !important;
    }

    .mobile-hamburger-btn {
        padding: 5px 9px !important;
        font-size: 0.95rem !important;
    }

    /* ── Buttons ── */
    .btn {
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }

    .btn-sm {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
    }

    /* ── Homepage Alignment (Mobile) ── */
    .hero {
        text-align: center !important;
        padding: 24px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 28px !important;
    }

    .hero h2 {
        font-size: 1.35rem !important;
        text-align: center !important;
        margin: 0 auto 12px !important;
        display: block !important;
    }

    .hero h2::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60px !important;
    }

    .hero p {
        font-size: 0.82rem !important;
        text-align: center !important;
        margin: 0 auto 18px !important;
        max-width: 95% !important;
    }

    .services {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 24px !important;
    }

    .service-card {
        padding: 18px 14px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .service-card i {
        font-size: 26px !important;
        margin-bottom: 10px !important;
        color: var(--primary-color) !important;
    }

    .service-card h3 {
        font-size: 0.98rem !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .service-card p {
        font-size: 0.78rem !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }

    /* ── Contact Page (Mobile) ── */
    .contact-page-wrapper {
        padding: 0 10px !important;
        margin: 10px auto 20px !important;
    }

    .contact-page-card {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .contact-form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    .contact-submit-btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        gap: 6px !important;
    }

    /* ── Marketplace Complete Mobile Redesign (< 767px) ── */
    .marketplace-container {
        padding: 0 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .marketplace-hero {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .marketplace-hero-title {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
        text-align: center !important;
    }

    .marketplace-hero-desc {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
        margin: 0 auto 12px !important;
    }

    .marketplace-stats-bar {
        display: flex !important;
        justify-content: space-around !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .marketplace-stat-item {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .marketplace-stat-val {
        font-size: 1.1rem !important;
    }

    .marketplace-stat-lbl {
        font-size: 0.58rem !important;
        letter-spacing: 0.5px !important;
    }

    /* ── Filter Toolbar (Mobile Stacked & Compact) ── */
    .marketplace-filter-toolbar {
        position: relative !important;
        top: 0 !important;
        padding: 12px 12px !important;
        border-radius: 14px !important;
        margin-bottom: 22px !important;
        z-index: 10 !important;
    }

    .marketplace-filter-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .marketplace-filter-form .form-group {
        width: 100% !important;
    }

    .marketplace-filter-form input,
    .marketplace-filter-form select,
    .marketplace-filter-form .btn {
        height: 42px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .marketplace-filter-form > div:last-child {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .marketplace-filter-form > div:last-child .btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
    }

    /* ── Hall of Fame Top 3 Vendors Podium (Mobile 3 Side-by-Side) ── */
    .marketplace-podium-banner {
        padding: 16px 8px !important;
        border-radius: 16px !important;
        margin-bottom: 24px !important;
        box-sizing: border-box !important;
    }

    .marketplace-podium-title {
        font-size: 0.9rem !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .marketplace-podium-sub {
        font-size: 0.65rem !important;
        text-align: center !important;
        margin-top: 4px !important;
    }

    .podium-row {
        display: grid !important;
        grid-template-columns: 1fr 1.15fr 1fr !important;
        align-items: flex-end !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .podium-slot {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        width: 100% !important;
    }

    .podium-item-link {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .podium-vendor-card {
        padding: 4px 2px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .podium-crown-wrap {
        margin-bottom: 2px !important;
    }

    .podium-crown-wrap i {
        font-size: 22px !important;
    }

    .podium-item-gold .podium-crown-wrap i {
        font-size: 28px !important;
    }

    .podium-avatar-wrap {
        width: 54px !important;
        height: 54px !important;
        margin: 0 auto 10px !important;
    }

    .podium-item-gold .podium-avatar-wrap {
        width: 68px !important;
        height: 68px !important;
    }

    .podium-shield-badge {
        font-size: 0.62rem !important;
        padding: 1px 6px !important;
        min-width: 20px !important;
        height: 16px !important;
        bottom: -7px !important;
    }

    .podium-username {
        font-size: 0.75rem !important;
        margin-bottom: 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .podium-item-gold .podium-username {
        font-size: 0.85rem !important;
    }

    .podium-badge-pill {
        font-size: 0.58rem !important;
        padding: 2px 4px !important;
        border-radius: 8px !important;
        margin-bottom: 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    .podium-sales-count {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
    }

    .podium-sales-count strong {
        font-size: 0.75rem !important;
    }

    /* ── Tools Grid (1 Spacious Card per Row on Mobile) ── */
    .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-bottom: 24px !important;
    }

    /* ── High-End Cyberpunk Tool Product Cards ── */
    .tool-card {
        width: 100% !important;
        border-radius: 16px !important;
        border: 1px solid rgba(0, 255, 251, 0.25) !important;
        background: rgba(14, 18, 28, 0.92) !important;
        overflow: hidden !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6) !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .tool-card-cover {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .tool-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .tool-badge-category {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 5 !important;
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        border-radius: 10px !important;
        background: rgba(10, 14, 22, 0.88) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(0, 255, 251, 0.35) !important;
        color: var(--primary-color) !important;
        font-weight: bold !important;
    }

    /* [local fix] Trending cards only: category pill to the right so it
       never overlaps the #N TRENDING rank badge at the top-left */
    .tool-card > div[style*="z-index: 10"] ~ .tool-card-cover .tool-badge-category {
        left: auto !important;
        right: 10px !important;
        width: auto !important;
        max-width: 45% !important;
    }

    .tool-badge-price {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 5 !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        padding: 4px 12px !important;
        border-radius: 10px !important;
        background: rgba(0, 255, 251, 0.18) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1.5px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
        text-shadow: 0 0 8px rgba(0, 255, 251, 0.6) !important;
    }

    .tool-overlay {
        padding: 14px 14px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        box-sizing: border-box !important;
    }

    .tool-title {
        font-size: 1.08rem !important;
        font-family: var(--font-display) !important;
        color: #ffffff !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .tool-description-clamped {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        color: rgba(224, 224, 224, 0.75) !important;
        margin-bottom: 12px !important;
        /* [local fix] block clamp instead of -webkit-box: avoids the bidi
           (Arabic) line-overlap bug in clamped boxes on mobile browsers */
        display: block !important;
        -webkit-line-clamp: none !important;
        line-clamp: none !important;
        -webkit-box-orient: initial !important;
        max-height: 3.2em !important;
        overflow: hidden !important;
        unicode-bidi: plaintext;
    }

    .publisher-profile-link {
        gap: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .publisher-avatar-img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .publisher-profile-link span {
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    .tool-stats-row {
        gap: 10px !important;
    }

    .tool-stat-badge {
        font-size: 0.75rem !important;
        gap: 4px !important;
    }

    .tool-card-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(0, 255, 251, 0.15) !important;
        margin-top: 4px !important;
    }

    .tool-footer-price {
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        color: var(--accent-color) !important;
        text-shadow: 0 0 10px rgba(0, 255, 65, 0.4) !important;
    }

    .tool-footer-updated {
        font-size: 0.72rem !important;
        color: #8899a6 !important;
        white-space: nowrap !important;
    }

    /* ── Pagination Component (Mobile Clean) ── */
    .pagination-container {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .pagination-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    /* ── Tool Detail Page Mobile Advanced Redesign (< 767px) ── */
    .tool-detail-banner {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .tool-detail-banner > div {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .tool-detail-banner > div > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    .tool-detail-title {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    .tool-detail-meta {
        gap: 10px 14px !important;
        font-size: 0.78rem !important;
    }

    .tool-detail-meta span,
    .tool-detail-meta button,
    .tool-detail-meta a {
        font-size: 0.76rem !important;
    }

    .tool-detail-price-card {
        width: 100% !important;
        padding: 12px 16px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin-top: 4px !important;
    }

    .tool-detail-price-val {
        font-size: 1.6rem !important;
    }

    .tool-showcase-frame {
        height: 220px !important;
        border-radius: 12px !important;
    }

    .gallery-thumbs-strip {
        gap: 8px !important;
    }

    .gallery-thumb-item {
        width: 64px !important;
        height: 44px !important;
        border-radius: 6px !important;
    }

    .tool-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .tool-detail-grid > div > div {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }

    .tool-detail-grid h3 {
        font-size: 1.05rem !important;
        margin-bottom: 14px !important;
    }

    .tool-detail-grid h3 i {
        font-size: 1rem !important;
    }

    /* ── Profile Page (Mobile) ── */
    .tiktok-header {
        padding: 28px 12px 14px !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .tiktok-avatar-wrapper {
        width: 78px !important;
        height: 78px !important;
        margin: 32px auto 16px !important;
        position: relative !important;
    }

    .tiktok-golden-crown {
        top: -30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 38px !important;
        color: #ffd700 !important;
        z-index: 10 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.95)) !important;
    }

    .tiktok-golden-crown i {
        font-size: 38px !important;
        color: #ffd700 !important;
        display: block !important;
        visibility: visible !important;
    }

    .admin-falcon-wing {
        width: 105px !important;
        height: 68px !important;
        top: 30% !important;
        z-index: 1 !important;
        filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 24px rgba(255, 140, 0, 0.8)) !important;
    }

    .admin-falcon-wing.wing-left {
        left: -66px !important;
        animation: falconWingFlapLeftMobile 3.6s ease-in-out infinite !important;
    }

    .admin-falcon-wing.wing-right {
        right: -66px !important;
        animation: falconWingFlapRightMobile 3.6s ease-in-out infinite !important;
    }

    .tiktok-display-name {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }

    .tiktok-verified-icon {
        font-size: 0.9rem !important;
    }

    .tiktok-username {
        font-size: 0.75rem !important;
    }

    .tiktok-copy-btn i {
        font-size: 0.72rem !important;
    }

    .tiktok-bio {
        font-size: 0.75rem !important;
        max-width: 90% !important;
        line-height: 1.4 !important;
    }

    .top-seller-badge-pill {
        font-size: 0.72rem !important;
        padding: 3px 12px !important;
    }

    .tiktok-stats-row {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .tiktok-stat-val {
        font-size: 0.92rem !important;
        gap: 4px !important;
        margin-bottom: 2px !important;
    }

    .tiktok-stat-val i {
        font-size: 0.75rem !important;
    }

    .tiktok-stat-lbl {
        font-size: 0.58rem !important;
        letter-spacing: 0.5px !important;
    }

    .tiktok-stat-divider {
        height: 16px !important;
    }

    .tiktok-actions-row {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .tiktok-action-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    .tiktok-action-btn i {
        font-size: 0.75rem !important;
    }

    .tiktok-tabs-nav {
        gap: 4px !important;
        margin-bottom: 18px !important;
    }

    .tiktok-tab-btn {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        gap: 6px !important;
    }

    .tiktok-tab-btn i {
        font-size: 0.75rem !important;
    }

    /* ── Modals & Tool Detail Window (Mobile Centered) ── */
    .modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .modal[style*="display: none"],
    .modal[style*="display:none"] {
        display: none !important;
    }
    .modal.active,
    .modal[style*="display: block"]:not([style*="display: none"]):not([style*="display:none"]),
    .modal[style*="display:flex"]:not([style*="display: none"]):not([style*="display:none"]),
    .modal[style*="display: flex"]:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
    }
    .modal-content {
        margin: auto !important;
        max-width: 94vw !important;
        width: 94% !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
        max-height: 88vh !important;
        box-sizing: border-box !important;
        box-shadow: 0 0 35px rgba(0, 255, 251, 0.4) !important;
    }
    #modalToolTitle {
        font-size: 0.98rem !important;
    }
    #modalToolImage {
        max-height: 180px !important;
        object-fit: contain !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }
    #modalToolDescription {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    #modalToolPrice {
        font-size: 1.05rem !important;
    }
    #modalToolLink {
        padding: 9px 12px !important;
        font-size: 0.78rem !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    @keyframes falconWingFlapLeftMobile {

        0%,
        100% {
            transform: translateY(-48%) rotate(-14deg) scale(1);
        }

        50% {
            transform: translateY(-56%) rotate(-22deg) scale(1.05);
        }
    }

    @keyframes falconWingFlapRightMobile {

        0%,
        100% {
            transform: translateY(-48%) rotate(14deg) scale(1);
        }

        50% {
            transform: translateY(-56%) rotate(22deg) scale(1.05);
        }
    }

    /* ── Admin quick nav ── */
    .admin-quick-nav {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .admin-quick-nav .btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }

    /* ── Tables ── */
    .tools-table th,
    .tools-table td,
    .sessions-table th,
    .sessions-table td {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    /* ── Section ── */
    .section {
        padding: 12px 10px !important;
        margin-bottom: 14px !important;
        border-radius: 8px !important;
    }

    .section-header h3 {
        font-size: 0.85rem !important;
    }

    /* ── Page Header ── */
    .page-header {
        margin-bottom: 14px !important;
        padding-bottom: 8px !important;
    }

    .page-header h2 {
        font-size: 0.9rem !important;
    }

    .page-header p {
        font-size: 0.72rem !important;
    }

    /* ── Form Controls ── */
    .form-control {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    .form-label,
    .form-group label {
        font-size: 0.78rem !important;
        margin-bottom: 4px !important;
    }

    /* ── Footer ── */
    footer {
        padding: 10px;
        font-size: 10px !important;
        margin-top: auto !important;
    }
}

/* ================================================================
   SMALL MOBILE (≤ 576px)
   Maximum compression — single column everywhere, ultra-compact
   ================================================================ */
@media (max-width: 576px) {
    html {
        font-size: 12.5px !important;
    }

    header {
        padding: 0 12px;
    }

    .logo h1 {
        font-size: 15px;
    }

    .logo i {
        font-size: 16px;
    }

    /* Global Icon Scaling for 576px */
    .page-header h2 i,
    .section-header h3 i,
    .card-title i,
    .dash-filter-bar span i,
    .btn i,
    .modal-title i,
    .sidebar-brand i {
        font-size: 0.9rem !important;
    }

    .nav-links {
        width: 100%;
        height: calc(100vh - var(--header-height));
        padding: 16px;
    }

    /* ── Hero: compact ── */
    .hero {
        padding: 16px 12px;
        text-align: left;
    }

    .hero h2 {
        font-size: 1.35rem;
    }

    .hero p {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .services {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .service-card {
        padding: 16px 14px;
    }

    .service-card i {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }

    .service-card h3 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    .service-card p {
        font-size: 0.78rem !important;
    }

    /* ── Main content: ultra-compact ── */
    .main-content {
        padding: 58px 10px 16px !important;
    }

    /* ── Mobile bar: ultra-compact ── */
    .dashboard-mobile-bar {
        height: 48px !important;
        padding: 0 10px !important;
    }

    .dashboard-brand-title {
        font-size: 0.78rem !important;
    }

    .dashboard-mobile-bar i {
        font-size: 1.05rem !important;
    }

    .dashboard-mobile-bar img {
        width: 26px !important;
        height: 26px !important;
    }

    /* ── Sidebar: ultra-compact ── */
    .sidebar {
        width: 82vw;
        max-width: 270px;
    }

    .sidebar-brand {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        gap: 7px !important;
    }

    .sidebar-brand i {
        font-size: 1.05rem !important;
    }

    .sidebar-header {
        padding: 10px 14px !important;
    }

    .user-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .online-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .user-name {
        font-size: 0.78rem !important;
    }

    .user-email {
        font-size: 0.62rem !important;
    }

    .user-profile {
        gap: 8px !important;
    }

    .menu-category {
        padding: 8px 14px 3px !important;
        font-size: 0.58rem !important;
        letter-spacing: 1.2px !important;
    }

    .menu-item {
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
        gap: 9px !important;
    }

    .menu-item i {
        font-size: 0.82rem !important;
        width: 15px !important;
    }

    .sidebar-menu {
        padding: 4px 0 16px !important;
    }

    /* ── Stat cards: single column, ultra-compact ── */
    .dash-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dash-stat-card {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .dash-stat-header {
        margin-bottom: 8px !important;
    }

    .dash-stat-number {
        font-size: 1.15rem !important;
        margin-bottom: 4px !important;
    }

    .dash-stat-label {
        font-size: 0.6rem !important;
        letter-spacing: 0.8px !important;
    }

    .dash-stat-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
        border-radius: 7px !important;
    }

    .dash-stat-subtext {
        font-size: 0.6rem !important;
        gap: 3px !important;
    }

    .dash-stat-subtext i {
        font-size: 0.55rem !important;
    }

    /* ── Dashboard cards: single column, ultra-compact ── */
    .dashboard-cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-card {
        aspect-ratio: auto !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        min-height: auto !important;
    }

    .card-value {
        font-size: 1.1rem !important;
        margin-bottom: 3px !important;
    }

    .card-title {
        font-size: 0.6rem !important;
        margin-bottom: 5px !important;
        letter-spacing: 0.8px !important;
        gap: 4px !important;
    }

    .card-title i {
        font-size: 0.7rem !important;
    }

    .card-change {
        font-size: 0.58rem !important;
    }

    /* ── Filter bar: ultra-compact ── */
    .dash-filter-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    .dash-filter-bar>div {
        width: 100%;
        justify-content: space-between;
    }

    .dash-filter-bar span {
        font-size: 0.72rem !important;
    }

    .dash-filter-bar .btn {
        flex: 1;
        text-align: center;
        justify-content: center;
        font-size: 0.72rem !important;
        padding: 7px 10px !important;
    }

    .dash-filter-bar .btn i {
        font-size: 0.65rem !important;
    }

    /* ── Glass cards: ultra-compact ── */
    .dash-card-glass {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    /* ── Buttons: ultra-compact ── */
    .btn {
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }

    .btn i {
        font-size: 0.72rem !important;
    }

    .btn-sm {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
    }

    .btn-sm i {
        font-size: 0.65rem !important;
    }

    /* ── Tables: scrollable with min-width, compact ── */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 8px;
        border: 1px solid rgba(0, 255, 251, 0.12);
        border-radius: 8px;
    }

    .tools-table,
    .sessions-table {
        min-width: 540px;
    }

    .tools-table th,
    .tools-table td,
    .sessions-table th,
    .sessions-table td {
        padding: 8px 10px !important;
        white-space: nowrap;
        font-size: 0.75rem !important;
    }

    .tools-table th,
    .sessions-table th {
        font-size: 0.62rem !important;
        letter-spacing: 0.6px !important;
    }

    /* ── Page header: ultra-compact ── */
    .page-header {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }

    .page-header h2 {
        font-size: 0.88rem !important;
        gap: 6px !important;
    }

    .page-header h2 i {
        font-size: 0.78rem !important;
    }

    .page-header p {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }

    /* ── Section header: compact ── */
    .section-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }

    .section-header h3 {
        font-size: 0.85rem !important;
    }

    .section-header h3 i {
        font-size: 0.75rem !important;
    }

    .section-header .btn {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
    }

    /* ── Section: ultra-compact ── */
    .section {
        padding: 12px 10px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    /* ── Forms ── */
    .form-grid-2,
    .form-grid-auto {
        grid-template-columns: 1fr !important;
    }

    .form-control {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    .form-label,
    .form-group label {
        font-size: 0.78rem !important;
        margin-bottom: 4px !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    /* ── Admin search: stacked ── */
    .admin-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 8px !important;
    }

    .admin-search-form input[type="text"] {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 0.8rem !important;
    }

    .admin-search-form select {
        width: 100% !important;
        font-size: 0.8rem !important;
    }

    /* ── Admin quick nav: ultra-compact ── */
    .admin-quick-nav {
        flex-direction: column;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }

    .admin-quick-nav .btn {
        width: 100%;
        text-align: center;
        font-size: 0.72rem !important;
        padding: 8px 12px !important;
    }

    .admin-quick-nav .btn i {
        font-size: 0.68rem !important;
    }

    /* ── Modals: near fullscreen, compact ── */
    .modal-content {
        margin: 2% auto;
        max-width: 98vw;
        width: 98% !important;
        padding: 16px 12px;
        border-radius: 10px;
    }

    .modal-title {
        font-size: 1rem !important;
    }

    .modal-header {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }

    .modal-footer {
        flex-direction: column;
        gap: 8px !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* ── Inline modals (edit tool, edit user): compact ── */
    .inline-modal-content {
        max-width: 98vw !important;
        width: 96% !important;
        padding: 16px 12px !important;
        margin: auto !important;
        border-radius: 10px !important;
    }

    .inline-modal-content h3 {
        font-size: 0.95rem !important;
    }

    .inline-modal-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── Contact cards: compact ── */
    .contact-msg-card {
        padding: 12px 10px !important;
    }

    .contact-msg-actions {
        flex-direction: column;
        gap: 6px;
    }

    .contact-msg-actions .btn {
        width: 100%;
        text-align: center;
        font-size: 0.72rem !important;
    }

    /* ── Keys / Generator forms: compact ── */
    .key-gen-form,
    .key-redeem-form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .key-gen-form .form-group,
    .key-redeem-form .form-group {
        min-width: 0 !important;
        width: 100% !important;
    }

    .key-gen-form .btn,
    .key-redeem-form .btn {
        width: 100%;
    }

    /* ── Upload dropzone image slots: compact ── */
    .upload-image-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ── Auth: compact ── */
    .auth-container {
        padding: 18px 14px;
        border-radius: 10px;
    }

    .auth-header h2 {
        font-size: 1.3rem !important;
    }

    .auth-header p {
        font-size: 0.8rem !important;
    }

    .auth-footer {
        font-size: 0.78rem !important;
    }

    /* ── Profile: compact ── */
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 16px 12px;
        gap: 12px;
    }

    .profile-avatar-container {
        width: 70px;
        height: 70px;
        margin: 0 auto;
    }

    .profile-info {
        min-width: 0;
        text-align: center;
    }

    .profile-name-row {
        justify-content: center;
    }

    .profile-name {
        font-size: 1.15rem;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .profile-tabs {
        gap: 3px;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .profile-actions {
        justify-content: center;
    }

    /* ── Tool detail: compact ── */
    .tool-showcase-frame {
        height: 220px;
    }

    .gallery-thumb-item {
        width: 58px;
        height: 40px;
    }

    /* ── Mobile Nav Drawer: ultra-compact ── */
    .mobile-nav-drawer {
        width: 250px !important;
    }

    .mobile-nav-header {
        padding: 12px 14px !important;
    }

    .mobile-nav-body {
        padding: 12px 12px !important;
    }

    .mobile-user-profile-badge {
        padding: 8px !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .mobile-user-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mobile-user-name {
        font-size: 0.8rem !important;
    }

    .mobile-user-role {
        font-size: 0.62rem !important;
    }

    .mobile-nav-menu li a {
        height: 40px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }

    .mobile-nav-menu li a i {
        font-size: 13px !important;
        width: 16px !important;
    }

    .mobile-menu-divider {
        font-size: 0.6rem !important;
        margin: 8px 0 3px 4px !important;
    }

    /* ── Empty State: ultra-compact ── */
    .empty-state {
        padding: 22px 12px !important;
    }

    .empty-state i {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .empty-state p {
        font-size: 0.78rem !important;
    }

    /* ── Footer: ultra-compact ── */
    footer {
        padding: 10px;
        font-size: 10px;
    }

    footer p {
        font-size: 10px !important;
    }

    /* ── Flash container: compact ── */
    .flash-container {
        top: 56px;
        right: 8px;
        left: 8px;
        max-width: none;
    }

    .flash-toast {
        padding: 10px 12px;
        font-size: 0.78rem;
        border-radius: 6px;
    }
}

/* ================================================================
   EXTRA SMALL (≤ 400px) — Very small phones, maximum density
   ================================================================ */
@media (max-width: 400px) {
    html {
        font-size: 11.5px !important;
    }

    .main-content {
        padding: 50px 6px 0 !important;
    }

    /* ── Sidebar: maximum compact ── */
    .sidebar {
        width: 88vw;
        max-width: 260px;
    }

    .sidebar-brand {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }

    .sidebar-brand i {
        font-size: 0.95rem !important;
    }

    .sidebar-header {
        padding: 8px 12px !important;
    }

    .user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .online-dot {
        width: 7px !important;
        height: 7px !important;
    }

    .user-name {
        font-size: 0.72rem !important;
    }

    .user-email {
        font-size: 0.58rem !important;
    }

    .menu-category {
        padding: 6px 12px 2px !important;
        font-size: 0.55rem !important;
    }

    .menu-item {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        gap: 8px !important;
    }

    .menu-item i {
        font-size: 0.78rem !important;
        width: 14px !important;
    }

    /* ── Mobile bar: maximum compact ── */
    .dashboard-mobile-bar {
        height: 44px !important;
        padding: 0 8px !important;
    }

    .dashboard-brand-title {
        font-size: 0.72rem !important;
    }

    .dashboard-mobile-bar i {
        font-size: 0.95rem !important;
    }

    .dashboard-mobile-bar img {
        width: 24px !important;
        height: 24px !important;
    }

    /* ── Stats: maximum compact ── */
    .dash-stat-number {
        font-size: 1.05rem !important;
    }

    .dash-stat-label {
        font-size: 0.55rem !important;
        letter-spacing: 0.6px !important;
    }

    .dash-stat-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.68rem !important;
        border-radius: 6px !important;
    }

    .dash-stat-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .dash-stat-subtext {
        font-size: 0.55rem !important;
    }

    /* ── Dashboard cards: maximum compact ── */
    .card-value {
        font-size: 1rem !important;
    }

    .card-title {
        font-size: 0.55rem !important;
        gap: 3px !important;
    }

    .card-title i {
        font-size: 0.62rem !important;
    }

    .card-change {
        font-size: 0.52rem !important;
    }

    .dashboard-card {
        padding: 8px 10px !important;
        border-radius: 7px !important;
    }

    /* ── Page header: maximum compact ── */
    .page-header {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    .page-header h2 {
        font-size: 0.82rem !important;
        gap: 5px !important;
    }

    .page-header h2 i {
        font-size: 0.72rem !important;
    }

    .page-header p {
        font-size: 0.65rem !important;
    }

    /* ── Buttons: maximum compact ── */
    .btn {
        padding: 7px 12px !important;
        font-size: 0.72rem !important;
    }

    .btn i {
        font-size: 0.65rem !important;
    }

    .btn-sm {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
    }

    .btn-sm i {
        font-size: 0.6rem !important;
    }

    /* ── Section: maximum compact ── */
    .section {
        padding: 10px 8px !important;
        margin-bottom: 10px !important;
    }

    .section-header h3 {
        font-size: 0.78rem !important;
    }

    .section-header h3 i {
        font-size: 0.68rem !important;
    }

    .section-header .btn {
        font-size: 0.62rem !important;
        padding: 3px 7px !important;
    }

    /* ── Glass cards: maximum compact ── */
    .dash-card-glass {
        padding: 10px 8px !important;
        border-radius: 8px !important;
    }

    /* ── Filter bar: maximum compact ── */
    .dash-filter-bar {
        padding: 8px 10px !important;
        gap: 6px !important;
        border-radius: 7px !important;
        margin-bottom: 10px !important;
    }

    .dash-filter-bar span {
        font-size: 0.65rem !important;
    }

    .dash-filter-bar .btn {
        font-size: 0.65rem !important;
        padding: 6px 8px !important;
    }

    /* ── Tables: maximum compact ── */
    .tools-table th,
    .tools-table td,
    .sessions-table th,
    .sessions-table td {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }

    .tools-table th,
    .sessions-table th {
        font-size: 0.58rem !important;
    }

    /* ── Forms: maximum compact ── */
    .form-control {
        padding: 7px 8px !important;
        font-size: 0.75rem !important;
    }

    .form-label,
    .form-group label {
        font-size: 0.72rem !important;
    }

    .form-group {
        margin-bottom: 10px !important;
    }

    /* ── Admin quick nav: maximum compact ── */
    .admin-quick-nav .btn {
        font-size: 0.65rem !important;
        padding: 6px 10px !important;
    }

    /* ── Modal: maximum compact ── */
    .modal-content {
        padding: 14px 10px !important;
    }

    .modal-title {
        font-size: 0.9rem !important;
    }

    /* ── Auth: maximum compact ── */
    .auth-container {
        padding: 14px 12px !important;
    }

    .auth-header h2 {
        font-size: 1.15rem !important;
    }

    .auth-header p {
        font-size: 0.75rem !important;
    }

    /* ── Profile: maximum compact ── */
    .profile-avatar-container {
        width: 60px !important;
        height: 60px !important;
    }

    .profile-name {
        font-size: 1.05rem !important;
    }

    .profile-header {
        padding: 14px 10px !important;
        gap: 10px !important;
    }

    .tab-btn {
        padding: 7px 10px !important;
        font-size: 0.72rem !important;
    }

    /* ── Mobile Nav Drawer: maximum compact ── */
    .mobile-nav-drawer {
        width: 230px !important;
    }

    .mobile-nav-header {
        padding: 10px 12px !important;
    }

    .mobile-user-profile-badge {
        padding: 6px !important;
    }

    .mobile-user-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .mobile-user-name {
        font-size: 0.75rem !important;
    }

    .mobile-nav-menu li a {
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 0.75rem !important;
        gap: 8px !important;
    }

    .mobile-nav-menu li a i {
        font-size: 12px !important;
        width: 14px !important;
    }

    /* ── Empty State: maximum compact ── */
    .empty-state {
        padding: 18px 10px !important;
    }

    .empty-state i {
        font-size: 1.5rem !important;
    }

    .empty-state p {
        font-size: 0.72rem !important;
    }

    /* ── Flash: compact ── */
    .flash-container {
        top: 48px !important;
    }

    .flash-toast {
        padding: 8px 10px !important;
        font-size: 0.72rem !important;
    }
}

/* ================================================================
   ADMIN TABLE RESPONSIVE
   ================================================================ */
@media (max-width: 850px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

/* ================================================================
   LANDSCAPE MODE TWEAKS — Mobile phones in landscape
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .dashboard-mobile-bar {
        height: 42px;
    }

    .dashboard-brand-title {
        font-size: 0.75rem;
    }

    .main-content {
        padding-top: 50px !important;
    }

    .sidebar {
        width: 240px;
    }

    .sidebar-brand {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
    }

    .menu-item {
        padding: 6px 14px !important;
        font-size: 0.78rem !important;
    }

    .modal-content {
        margin: 1% auto;
        max-height: 95vh;
        overflow-y: auto;
        padding: 14px 12px;
    }
}

/* ================================================================
   TOUCH DEVICE ENHANCEMENTS
   ================================================================ */
@media (hover: none) and (pointer: coarse) {

    /* Touch targets: compact but still tappable (min 40px) */
    .menu-item {
        min-height: 40px;
        padding: 8px 16px;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-menu li a {
        min-height: 42px;
    }

    /* Disable hover effects on touch */
    .dashboard-card:hover,
    .dash-stat-card:hover,
    .dash-card-glass:hover,
    .tool-card:hover,
    .service-card:hover {
        transform: none;
    }

    /* Remove pointer animations on touch */
    .tool-card:hover .tool-image {
        transform: none;
    }

    .tool-showcase-frame:hover img {
        transform: none;
    }

    /* Smooth scroll on tables */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    /* Mobile overrides for Logout Modal & Pagination */
    .logout-modal {
        padding: 18px 14px;
        border-radius: 10px;
    }

    .logout-modal-title {
        font-size: 0.92rem;
    }

    .logout-modal-text {
        font-size: 0.78rem;
    }

    .pagination-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 10px 12px;
    }

    .pagination-controls {
        width: 100%;
        justify-content: center;
    }

    .pagination-btn {
        padding: 5px 8px;
        font-size: 0.72rem;
    }

    /* Mobile settings page styling */
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    .settings-form-grid,
    .settings-form-grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* Mobile overrides for TikTok Profile Layout */
    .tiktok-header {
        padding: 20px 12px 16px;
        border-radius: 12px;
    }

    .tiktok-avatar-wrapper {
        width: 78px;
        height: 78px;
        margin-bottom: 10px;
    }

    .tiktok-display-name {
        font-size: 1.2rem;
    }

    .tiktok-username {
        font-size: 0.78rem;
    }

    .tiktok-stats-row {
        gap: 10px;
        margin-bottom: 14px;
    }

    .tiktok-stat-val {
        font-size: 0.95rem;
    }

    .tiktok-stat-lbl {
        font-size: 0.62rem;
    }

    .tiktok-stat-divider {
        height: 16px;
    }

    .tiktok-actions-row {
        flex-direction: row;
        gap: 6px;
    }

    .tiktok-action-btn {
        padding: 7px 12px;
        font-size: 0.75rem;
        min-width: 0;
    }

    .tiktok-tabs-nav {
        gap: 2px;
    }

    .tiktok-tab-btn {
        padding: 8px 10px;
        font-size: 0.72rem;
    }
}

/* ================================================================
   HIGH DPI / RETINA ADJUSTMENTS
   ================================================================ */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .sidebar {
        border-right-width: 0.5px;
    }

    .dashboard-mobile-bar {
        border-bottom-width: 0.5px;
    }
}

/* ================================================================
   PRINT STYLES
   ================================================================ */
@media print {

    .sidebar,
    .dashboard-mobile-bar,
    .mobile-hamburger-btn,
    .sidebar-overlay,
    .mobile-nav-backdrop,
    .mobile-nav-drawer,
    footer {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white;
        color: black;
    }
}