/* responsive.css - all mobile media queries - split from index.html */

        /* ── RESPONSIVE ── */
        @media(max-width: 640px) {
            .hero h1 { font-size: 40px; }
            .section-head h2 { font-size: 32px; }
            .stat-item { padding: 16px 20px; }
            .stat-num { font-size: 22px; }
        }
        @media(max-width: 900px) {
            .hero { grid-template-columns: 1fr; padding: 60px 0 50px; }
            .hero-visual { display: none; }
        }
        /* ══════════════════════════════════════════
           COMPREHENSIVE MOBILE FIXES
           ══════════════════════════════════════════ */
        @media (max-width: 600px) {

            /* ── General ── */
            .wrap, .container { padding: 0 12px; }

            /* ── Section head ── */
            .section-head { padding: 44px 0 24px; }
            .section-head h2 { font-size: 28px; letter-spacing: -0.5px; }
            .section-head p { font-size: 14px; }
            .section-title h3 { font-size: 28px; }

            /* ── Hero ── */
            .hero { padding: 40px 0 30px; gap: 24px; }
            .hero-bot-name { font-size: 36px; letter-spacing: 2px; }
            .hero-tagline { font-size: 13px; }
            .btn-hero { padding: 12px 22px; font-size: 14px; }

            /* ── Stats bar ── */
            .stats-bar { gap: 0; }
            .stat-item { padding: 12px 14px; flex: 1 1 50%; border-right: 1px solid var(--red-border); }
            .stat-item:nth-child(even) { border-right: none; }
            .stat-num { font-size: 22px; }
            .stat-label { font-size: 10px; }

            /* ── Navbar mobile ── */
            .navbar-inner { padding: 10px 0; }
            .nav-link { padding: 7px 8px; font-size: 12px; }
            #dynamicLoginBtn { padding: 8px 10px !important; font-size: 12px !important; }

            /* ── Manage page ── */
            .manage-page { padding-bottom: 40px; }
            .manage-header { padding: 28px 0 16px; }
            .manage-header h2 { font-size: 24px; }
            .manage-grid { grid-template-columns: 1fr !important; gap: 12px; }

            .manage-card { padding: 16px; }
            .manage-card-header { gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
            .manage-card-header h4 { font-size: 15px; }
            .manage-status-badge { font-size: 10px; padding: 3px 8px; }

            /* ── Manage input rows ── */
            .manage-input-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
                padding: 10px 0;
            }
            .manage-input-row label {
                min-width: unset;
                width: 100%;
                font-size: 12px;
            }
            .manage-input-row input,
            .manage-input-row select {
                width: 100% !important;
                max-width: 100% !important;
                flex: unset !important;
                box-sizing: border-box;
            }

            /* ── Fix selects with max-width ── */
            select[style*="max-width:300px"],
            select[style*="max-width: 300px"] {
                max-width: 100% !important;
                width: 100% !important;
            }

            /* ── Ticket section specific ── */
            #manage-section-tickets > div {
                flex-direction: column !important;
            }
            #manage-section-tickets .manage-card {
                width: 100% !important;
                min-width: 0 !important;
                flex: unset !important;
            }

            /* Ticket alias inputs */
            [id^="tka-alias-"] {
                width: 100% !important;
                max-width: 100% !important;
                flex: unset !important;
                box-sizing: border-box;
            }

            /* New panel form fields */
            #new-panel-name,
            #new-panel-thumbnail,
            #new-panel-image,
            #new-panel-title,
            #new-panel-desc,
            [id^="new-panel-"] {
                width: 100% !important;
                max-width: 100% !important;
                flex: unset !important;
                box-sizing: border-box;
            }

            /* Create new panel section */
            #manage-section-tickets [style*="flex:1"] {
                width: 100%;
            }

            /* Ticket max-user/global inputs stay small */
            #tk-max-user, #tk-max-global {
                width: 80px !important;
                max-width: 80px !important;
            }

            /* Panel action buttons */
            .tpanel-actions { flex-wrap: wrap; gap: 6px; }
            .tpanel-act-btn { padding: 5px 10px; font-size: 11px; }

            /* Style selector buttons in ticket panel */
            #manage-section-tickets [style*="display:flex;gap:8px"] {
                flex-direction: column;
                gap: 8px;
            }
            #np-style-embed, #np-style-components_v2 {
                width: 100%;
            }

            /* ── Embed builder ── */
            .embed-builder-container { padding-bottom: 40px; }
            .embed-controls { padding: 16px; }
            .embed-preview-wrapper { padding: 16px; }

            /* ── DC manage layout ── */
            .dc-manage-layout { flex-direction: column !important; }
            .dc-sidebar {
                width: 100% !important;
                min-width: 0 !important;
                max-height: 70px !important;
                border-radius: 16px 16px 0 0 !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(122,0,0,0.1) !important;
                flex-direction: row !important;
                align-items: center !important;
            }
            .dc-sidebar-header { display: none !important; }
            .dc-server-list { display: flex !important; flex-direction: row !important; padding: 6px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 6px !important; }
            .dc-server-item { border-left: none !important; border-bottom: 3px solid transparent !important; padding: 4px 2px !important; min-width: 48px !important; }
            .dc-server-item.active { border-left: none !important; border-bottom-color: var(--red) !important; }
            .dc-server-icon { width: 38px !important; height: 38px !important; font-size: 13px !important; }
            .dc-nav-sidebar { display: none !important; }
            .dc-mobile-tabs {
                display: flex !important; gap: 6px; flex-wrap: wrap;
                margin-bottom: 16px; padding-bottom: 12px;
                border-bottom: 1px solid rgba(255,255,255,0.05);
                overflow-x: auto;
            }
            .dc-mobile-tabs .manage-subtab-btn {
                font-size: 11px; padding: 6px 10px;
            }
            .dc-panel { border-radius: 0 0 16px 16px !important; }
            .dc-panel-body {
                overflow: visible !important;
                max-height: none !important;
                height: auto !important;
                padding: 12px !important;
            }
            .dc-panel-header { padding: 12px 14px; gap: 10px; }
            .dc-panel-server-name { font-size: 13px; }

            /* ── Manage subtab nav ── */
            .manage-subtab-nav { gap: 5px; }
            .manage-subtab-btn {
                padding: 7px 10px;
                font-size: 11px;
                gap: 4px;
            }
            .manage-subtab-btn span { display: none; }

            /* ── Add row ── */
            .manage-add-row { flex-direction: column; }
            .manage-add-row input { width: 100%; }
            .manage-add-row button { width: 100%; }

            /* ── Ticket panel cards ── */
            .ticket-panel-card { padding: 12px; }
            .tpanel-header { flex-wrap: wrap; }
            .tpanel-btns { gap: 5px; }
            .tpanel-btn-tag { font-size: 11px; padding: 3px 8px; }

            /* ── Command rows ── */
            .cmd-row { flex-wrap: wrap; padding: 10px 10px; gap: 8px; }
            .cmd-name { min-width: unset; font-size: 12px; }
            .cmd-desc { min-width: unset; font-size: 11px; width: 100%; }
            .cmd-alias-input { width: 100% !important; }

            /* ── Premium cards ── */
            .plans-grid { grid-template-columns: 1fr; }
            .plan-card { padding: 24px 20px; }
            .plan-price { font-size: 40px; }

            /* ── Feature cards ── */
            .feature-card { padding: 22px 18px; }
            .feat-title-big { font-size: 30px; }
            .feat-title-reflect { font-size: 26px; }

            /* ── Support blocks ── */
            .support-block { padding: 36px 18px; margin-bottom: 40px; }
            .support-block h3 { font-size: 22px; }
            .support-server { padding: 40px 20px; }
            .support-server h3 { font-size: 24px; }

            /* ── Fix overflow for inline style flex rows in tickets ── */
            .manage-section-label { font-size: 10px; }

            /* ── Profile page ── */
            .profile-page { padding-bottom: 40px; }
            .profile-card-box { padding: 20px; }
            .flex-user { gap: 12px; padding: 12px; }
        }

        @media (max-width: 400px) {
            .hero-bot-name { font-size: 28px; }
            .section-head h2 { font-size: 24px; }
            .nav-link { padding: 6px 6px; }
            .nav-link span { font-size: 11px; }
        }
        /* desktop hero overrides */
        @media(max-width: 980px){
            .hero-desktop{ grid-template-columns:1fr; }
        }