/* =============================================
 * Coded By - DARK LMNx9 (Limon Hossain)
 * GitHub - https://github.com/LMNx9-JOHNY
 * TG Group - https://t.me/+6hZVa9jGrIY4ZDRl
 * WhatsApp - https://wa.me/19707808868
 * Telegram - https://t.me/x_LMNx9
 * Website - https://lmnx9.shop
============================================= */

        .tester-page { padding: calc(var(--header-height) + 20px) 0 var(--space-2xl); max-width: 100%; max-height: 100%; overflow-x: hidden; }
        
        .tester-hero {
            background: var(--bg-card); border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl); padding: var(--space-2xl);
            margin-bottom: var(--space-xl); text-align: center;
            position: relative; overflow: hidden; max-width: 100%; box-sizing: border-box;
        }
        .tester-hero::before {
            content: ''; position: absolute; top: -40%; right: -15%;
            width: 350px; height: 350px;
            background: radial-gradient(circle, rgba(71,207,115,0.05) 0%, transparent 70%);
            border-radius: 50%;
        }
        .tester-hero::after {
            content: ''; position: absolute; bottom: -30%; left: -10%;
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(14,190,255,0.04) 0%, transparent 70%);
            border-radius: 50%;
        }
        .tester-hero-icon { font-size: 3rem; color: var(--cp-green); margin-bottom: var(--space-md); position: relative; z-index: 1; animation: float 3s ease-in-out infinite; display: inline-block; }
        @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
        .tester-hero h1 { font-size: var(--text-4xl); color: var(--text-white); font-weight: 800; position: relative; z-index: 1; margin-bottom: var(--space-xs); }
        .tester-hero p { color: var(--text-secondary); font-size: var(--text-sm); position: relative; z-index: 1; }
        
        .tester-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
        .tester-panel { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-xl); max-width: 100%; box-sizing: border-box; }
        .tester-panel h3 { color: var(--text-white); font-size: var(--text-lg); margin-bottom: var(--space-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); }
        .tester-panel h3 i { color: var(--cp-green); }
        
        .endpoint-box { background: var(--bg-primary); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
        .method-badge { background: var(--gradient-1); color: #000; padding: 6px 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 11px; font-family: var(--font-mono); flex-shrink: 0; }
        .endpoint-url { flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--cp-green); word-break: break-all; min-width: 180px; }
        
        .param-row { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); align-items: center; }
        .param-row input { flex: 1; min-width: 80px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-mono); transition: all var(--transition-fast); }
        .param-row input:focus { outline: none; border-color: var(--cp-green); box-shadow: 0 0 0 2px rgba(71,207,115,0.1); }
        .param-del { background: rgba(240,80,110,0.1); border: none; color: var(--cp-pink); width: 34px; height: 34px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); flex-shrink: 0; transition: all var(--transition-fast); }
        .param-del:hover { background: rgba(240,80,110,0.25); transform: scale(1.05); }
        
        .response-box { background: var(--bg-primary); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-lg); min-height: 280px; max-height: 480px; overflow-y: auto; }
        .res-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
        .res-status { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
        .res-status.s200 { background: rgba(71,207,115,0.1); color: var(--cp-green); }
        .res-status.s400 { background: rgba(255,221,64,0.1); color: var(--cp-yellow); }
        .res-status.s500 { background: rgba(240,80,110,0.1); color: var(--cp-pink); }
        .res-time { color: var(--text-muted); font-size: var(--text-xs); }
        .res-body { margin: 0; color: var(--cp-green); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; white-space: pre-wrap; word-break: break-all; }
        
        .api-select { margin-bottom: var(--space-lg); }
        .api-select select { width: 100%; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--text-sm); cursor: pointer; transition: all var(--transition-fast); }
        .api-select select:focus { outline: none; border-color: var(--cp-green); }
        
        .empty-state { text-align: center; padding: var(--space-3xl); background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); }
        .empty-state i { font-size: 3rem; color: var(--cp-green); margin-bottom: var(--space-md); display: block; }
        .empty-state h3 { color: var(--text-white); margin-bottom: var(--space-xs); }
        .empty-state p { color: var(--text-muted); font-size: var(--text-sm); }
        
        .param-label { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-sm); font-weight: 600; }
        
        .custom-select { position: relative; width: 100%; margin-bottom: var(--space-lg); z-index: 10; }
        .custom-select-trigger { width: 100%; padding: 14px 48px 14px 18px; background: var(--bg-card); border: 2px solid transparent; border-radius: var(--radius-lg); color: var(--text-white); font-size: var(--text-sm); cursor: pointer; transition: all var(--transition-fast); background-image: linear-gradient(var(--bg-card), var(--bg-card)), var(--gradient-1); background-origin: border-box; background-clip: padding-box, border-box; font-family: var(--font-sans); font-weight: 500; text-align: left; position: relative; user-select: none; }
        .custom-select-trigger:hover { box-shadow: var(--shadow-glow-green); }
        .custom-select-trigger.active { border-color: var(--cp-green); box-shadow: 0 0 0 3px rgba(71,207,115,0.15), var(--shadow-glow-green); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
        .custom-select-trigger .arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--cp-green); transition: transform var(--transition-fast); font-size: var(--text-sm); }
        .custom-select-trigger.active .arrow { transform: translateY(-50%) rotate(180deg); }
        .custom-options { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 2px solid var(--cp-green); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); max-height: 350px; overflow-y: auto; display: none; z-index: 100; box-shadow: var(--shadow-lg), 0 0 20px rgba(71,207,115,0.1); }
        .custom-options.open { display: block; animation: fadeInDown 0.2s ease; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .custom-option { padding: 12px 18px; cursor: pointer; font-size: var(--text-sm); transition: all var(--transition-fast); border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); }
        .custom-option:last-child { border-bottom: none; }
        .custom-option:hover { background: rgba(71,207,115,0.08); color: var(--cp-green); padding-left: 24px; }
        .custom-option.selected { background: rgba(71,207,115,0.12); color: var(--cp-green); font-weight: 600; }
        .custom-option .badge-mini { padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; }
        .custom-option .badge-mini.free { background: rgba(71,207,115,0.1); color: var(--cp-green); }
        .custom-option .badge-mini.paid { background: rgba(240,80,110,0.1); color: var(--cp-pink); }
        .custom-option:nth-child(5n+1):hover { color: var(--cp-green); }
        .custom-option:nth-child(5n+2):hover { color: var(--cp-blue); background: rgba(14,190,255,0.08); }
        .custom-option:nth-child(5n+3):hover { color: var(--cp-purple); background: rgba(174,99,228,0.08); }
        .custom-option:nth-child(5n+4):hover { color: var(--cp-pink); background: rgba(240,80,110,0.08); }
        .custom-option:nth-child(5n+5):hover { color: var(--cp-orange); background: rgba(255,126,64,0.08); }

        @media (max-width: 768px) {
            .tester-grid { grid-template-columns: 1fr; }
            .tester-hero { padding: var(--space-xl); }
            .tester-hero h1 { font-size: var(--text-2xl); }
            .endpoint-box { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
            .endpoint-url { font-size: 11px; }
            .param-row { flex-wrap: wrap; }
            .param-row input { min-width: 100%; }
        }