:root {
    --primary-blue: #4285f4;
    --secondary-blue: #45b7d1;
    --success-green: #34a853;
    --warning-red: #ea4335;
    --bg-dark: #000;
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #0f1419 40%, #1e2024 100%);
    --border-blue: rgba(66, 133, 244, 0.2);
    --border-white-light: rgba(255, 255, 255, 0.1);
    --border-white-subtle: rgba(255, 255, 255, 0.05);
    --bg-white-subtle: rgba(255, 255, 255, 0.02);
    --text-primary: #f0f0f0;
    --text-secondary: #f5f5f5;
    --text-muted: #c9d6ff;
    --text-placeholder: #888;
    --transition-fast: all 0.2s ease;
    --transition-medium: all 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --shadow-subtle: 0 2px 4px rgba(255, 255, 255, 0.15);
    
    /* Operator Brand Colors */
    --jio-color: #0f3cc9;
    --airtel-color: #ff0000;
    --vi-color:  #f9b616;
    --bsnl-color: #199227;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, svg, video { max-width: 100%; height: auto; }

::placeholder { color: var(--text-placeholder); }

::selection { background: var(--primary-blue); color: #fff; }

input:focus, select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


.input-label { display:block; font-size:0.85em; font-weight:500; color:#c9d6ff; margin-bottom:0.5rem; }
    .input-label { display:block; font-size:0.85em; font-weight:500; color:#c9d6ff; margin-bottom:0.5rem; }

.main-wrapper { display:flex; flex:1; min-height:calc(100vh - 60px); }
@media (min-width: 1024px) { .main-wrapper { margin-left: 320px; } }

header {
    background: #1a1a1a;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(255,255,255,0.15);
    position: sticky; top:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
}
.header-left, .header-right { display:flex; align-items:center; }
.header-right { margin-left:auto; gap: 8px; }
.header-title { display:flex; flex-direction:row; align-items:center; gap:10px; }
    .header-title h1 { font-size:1.25em; display:flex; align-items:center; gap:6px; margin:0; }
    .header-title h1 { font-size:1.25em; display:flex; align-items:center; gap:6px; margin:0; }
    .logo-sparkle { font-size:0.8em; animation:sparkle 20s linear infinite; display:inline-block; filter:drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
    .last-updated { font-size:0.85em; color:#bdbdbd; white-space:nowrap; text-align:right; }
    .logo-sparkle { font-size:0.8em; animation:sparkle 20s linear infinite; display:inline-block; filter:drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
.last-updated { font-size:0.85em; color:#bdbdbd; white-space:nowrap; text-align:right; }
    .last-updated { font-size:0.85em; color:#bdbdbd; white-space:nowrap; text-align:right; }

.logo-text {
    background: linear-gradient(to right ,
        var(--airtel-color) ,
        var(--vi-color)  ,
        var(--bsnl-color),
        var(--jio-color) 
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    filter:  saturate(0.8) brightness(.89);
}


main { overflow:visible; flex:1; background:#000; }

.sidebar-filters {
    position: fixed; top:58px; left:0; width:320px; height:calc(100vh - 58px);
    background: var(--bg-gradient);
    border-right: 1px solid var(--border-blue);
    overflow-y:auto; z-index:50; transform:translateX(0); transition:var(--transition-transform);
}
.sidebar-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--border-white-light); background:var(--bg-white-subtle); }
.sidebar-header h2 { margin:0; font-size:1.1em; font-weight:600; color:var(--text-secondary); }
    .sidebar-header h2 { margin:0; font-size:1.1em; font-weight:600; color:var(--text-secondary); }
.sidebar-close { display:none; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:4px; transition:var(--transition-fast); }
.sidebar-content { padding:0; }
.sidebar-search { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border-white-subtle); background: transparent; }
.sidebar-search input[type="search"] { width:100%; padding:0.6rem 0.75rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color:var(--text-primary); font-size:0.95em; }
.sidebar-search input[type="search"]:focus { outline:none; box-shadow:0 0 0 3px rgba(66,133,244,0.08); border-color:rgba(66,133,244,0.4); }
.filter-section { border-bottom:1px solid var(--border-white-subtle); padding:0 .25rem 0 .25rem; }
.filter-section:last-child { border-bottom:none; }
.section-title { font-size:0.95em; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; padding:4px; border-radius:4px; transition:var(--transition-fast); padding: .8rem;}
.section-title:hover { background: rgba(201,214,255,0.05); }
.section-title i { color:var(--text-muted); transition:var(--transition-fast); }
.section-title:hover i { color:#fff; }

.section-content {
    overflow:hidden; transition:height 220ms cubic-bezier(.2,.9,.3,1), opacity 160ms ease; height:auto; opacity:1;
    padding:0.5rem 0 1.25rem 0; margin:0 -1.25rem; padding-left:1.25rem; padding-right:1.25rem; will-change:height,opacity;
}
.section-content.collapsed { height:0 !important; opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
.section-content.animating { pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .section-content, .section-content-inner { transition:none !important; will-change:auto; transform:none !important; } }
.section-content-inner { transform-origin: top left; transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 200ms ease; will-change:transform,opacity; padding: 0 1rem 0 1rem;}
.filter-section.expanded .section-content-inner { transform: translateY(0); opacity:1; }
.filter-section .section-content-inner { transform: translateY(-6px); opacity:0; }
.subsection-title { margin:1rem 0 0.75rem 0; font-size:0.85em; font-weight:500; color:#c9d6ff; text-transform:uppercase; letter-spacing:0.3px; }
    .subsection-title { margin:1rem 0 0.75rem 0; font-size:0.85em; font-weight:500; color:#c9d6ff; text-transform:uppercase; letter-spacing:0.3px; }
    .mobile-bottom-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg-gradient); border-top:1px solid rgba(66,133,244,0.2); padding:8px 0; z-index:60; backdrop-filter:blur(10px); }
    .bottom-bar-btn { display:flex; flex-direction:column; align-items:center; gap:4px; background:transparent; border:none; color:#f0f0f0; padding:8px 12px; cursor:pointer; transition:all 0.2s ease; font-size:0.75em; opacity:0.8; }
    .mobile-bottom-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg-gradient); border-top:1px solid rgba(66,133,244,0.2); padding:8px 0; z-index:60; backdrop-filter:blur(10px); }
    .bottom-bar-btn { display:flex; flex-direction:column; align-items:center; gap:4px; background:transparent; border:none; color:#f0f0f0; padding:8px 12px; cursor:pointer; transition:all 0.2s ease; font-size:0.75em; opacity:0.8; }
#mobileFilterBtn { flex:3; }
#mobileInfoBtn { flex:1; }
.bottom-bar-btn:active { transform:translateY(0); }
.mobile-bottom-bar .bottom-bar-btn + .bottom-bar-btn { position:relative; }
.mobile-bottom-bar .bottom-bar-btn + .bottom-bar-btn::before { content:""; position:absolute; left:0; top:20%; bottom:20%; width:2px; background:rgba(66,133,244,0.6); box-shadow:0 0 8px rgba(66,133,244,0.3); pointer-events:none; border-radius:1px; }
.mobile-filter-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:49; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.mobile-filter-overlay.active { opacity:1; pointer-events:auto; }

@media (max-width:1023px) {
    .mobile-bottom-bar { display:flex !important; align-items:stretch; }
    .main-wrapper { padding-bottom:70px; margin-left:0; }
    .sidebar-filters { transform:translateX(-100%); top:38px; z-index:51; box-shadow:4px 0 20px rgba(0,0,0,0.3); padding-bottom:90px; box-sizing:border-box; }
    .sidebar-filters.active { transform:translateX(0); }
    .sidebar-close { display:flex; }
    .mobile-filter-overlay { display:block; }
    #mobileFilterBtn { background: linear-gradient(90deg,#4285f4 0%,#45b7d1 100%); color:#001018; padding:10px 16px; margin:0 10px 0 12px; border-radius:12px; box-shadow:0 8px 20px rgba(66,133,244,0.35),0 2px 6px rgba(0,0,0,0.4); align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:0.85em; opacity:1; transform-origin:center; }
    #mobileFilterBtn { background: linear-gradient(90deg,#4285f4 0%,#45b7d1 100%); color:#001018; padding:10px 16px; margin:0 10px 0 12px; border-radius:12px; box-shadow:0 8px 20px rgba(66,133,244,0.35),0 2px 6px rgba(0,0,0,0.4); align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:0.85em; opacity:1; transform-origin:center; }
    #mobileFilterBtn i { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); color:#001018; }
    #mobileFilterBtn:focus-visible { outline:3px solid rgba(66,133,244,0.25); outline-offset:3px; }
}

.provider-filters { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; margin:0; }
.provider-filters label {
    display:flex; align-items:center; gap:0.75rem; padding:0.75rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; transition:all 0.3s ease; opacity:0.6; position:relative; overflow:hidden; color:#f0f0f0;
}
.provider-filters label > * { position:relative; z-index:1; }
.provider-filters input[type="checkbox"] { display:none; }
.provider-filters label.active { opacity:1; background: linear-gradient(145deg, rgba(66,133,244,0.15), rgba(66,133,244,0.05)); border-color:rgba(66,133,244,0.6); box-shadow:0 0 20px rgba(66,133,244,0.3), inset 0 1px 0 rgba(255,255,255,0.1); }
.provider-filters label[data-provider="jio"].active { background:linear-gradient(145deg, #0f3cc933, #0f3cc90d); border-color:#0f3cc9cc; box-shadow:0 0 25px #0f3cc966; }
.provider-filters label[data-provider="airtel"].active { background:linear-gradient(145deg, #ff000033, #ff00000d); border-color:#ff0000cc; box-shadow:0 0 25px #ff000066; }
.provider-filters label[data-provider="vi"].active { background:linear-gradient(145deg, #f9b61633, #f9b6160d); border-color:#f9b616cc; box-shadow:0 0 25px #f9b61666; }
.provider-filters label[data-provider="bsnl"].active { background:linear-gradient(145deg, #19922733, #1992270d); border-color:#199227cc; box-shadow:0 0 25px #19922766; }
.provider-filters label::before { content:''; position:absolute; inset:0; background:linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); transform:translateX(-100%); transition:transform 0.6s ease; pointer-events:none; z-index:0; }
.provider-filters label[data-provider="jio"] { background:linear-gradient(135deg, #0f3cc926, #0f3cc90d); border-color:#0f3cc94d; }
.provider-filters label[data-provider="airtel"] { background:linear-gradient(135deg, #ff000026, #ff00000d); border-color:#ff00004d; }
.provider-filters label[data-provider="vi"] { background:linear-gradient(135deg, #f9b61626, #f9b6160d); border-color:#f9b6164d; }
.provider-filters label[data-provider="bsnl"] { background:linear-gradient(135deg, #19922726, #1992270d); border-color:#1992274d; }

.provider-filters label:has(input:checked) { transform:translateY(-5px) scale(1.02); box-shadow:0 12px 35px rgba(0,0,0,0.4), 0 0 0 3px rgba(66,133,244,0.15); border-width:2px; }
.provider-filters label[data-provider="jio"]:has(input:checked),
.provider-filters label[data-provider="airtel"]:has(input:checked),
.provider-filters label[data-provider="vi"]:has(input:checked),
.provider-filters label[data-provider="bsnl"]:has(input:checked) { animation:providerGlow 3s ease-in-out infinite; }
.provider-filters label:has(input:checked) .provider-logo { filter:none; opacity:1; }

@keyframes providerGlow { 0%,100% { box-shadow:0 12px 35px rgba(0,0,0,0.3), 0 0 15px rgba(66,133,244,0.2); } 50% { box-shadow:0 12px 35px rgba(0,0,0,0.4), 0 0 25px rgba(66,133,244,0.4); } }

@keyframes sparkle {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 0.9;
        text-shadow: none;
        filter: drop-shadow(0 0 0 rgba(255,215,0,0));
    }
    25% {
        transform: translateY(-2px) scale(1.05) rotate(90deg);
        opacity: 1;
        text-shadow: 0 0 6px rgba(255,215,0,0.6);
        filter: drop-shadow(0 0 6px rgba(255,215,0,0.6));
    }
    50% {
        transform: translateY(0) scale(1) rotate(180deg);
        opacity: 0.95;
        text-shadow: 0 0 2px rgba(255,215,0,0.3);
        filter: drop-shadow(0 0 2px rgba(255,215,0,0.3));
    }
    75% {
        transform: translateY(-1px) scale(1.03) rotate(270deg);
        opacity: 1;
        text-shadow: 0 0 8px rgba(255,215,0,0.7);
        filter: drop-shadow(0 0 8px rgba(255,215,0,0.7));
    }
    100% {
        transform: translateY(0) scale(1) rotate(360deg);
        opacity: 0.95;
        text-shadow: none;
        filter: drop-shadow(0 0 0 rgba(255,215,0,0));
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-sparkle { animation: none !important; transform: none !important; }
}

.provider-logo { width:42px; height:42px; object-fit:contain; filter:grayscale(80%) opacity(0.8); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.provider-filters label.active .provider-logo { filter:none; transform:scale(1.1); }

#regionGroup { margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); }
.region-label { display:block; font-size:0.85em; font-weight:500; color:#c9d6ff; margin-bottom:0.5rem; }
#regionSelectVi, #regionSelectBsnl {
    width:100%; padding:0.5rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; color:#f0f0f0; font-size:0.9em; margin-bottom:0.75rem; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right 0.7rem center; background-size:0.65rem auto; padding-right:2rem;
}
#regionSelectVi:focus, #regionSelectBsnl:focus { outline:none; border-color:rgba(66,133,244,0.5); }
#regionSelectVi option, #regionSelectBsnl option { background:#1a1a1a !important; color:#f0f0f0 !important; padding:0.5rem; border:none; }

.plan-type-filters { display:flex; flex-direction:column; gap:0.5rem; margin:0; }
.plan-type-filters label { display:flex; align-items:center; gap:0.5rem; padding:0.75rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; transition:all 0.3s ease; font-size:0.9em; opacity:0.6; position:relative; overflow:hidden; }
.plan-type-filters label > * { position:relative; z-index:1; }
.plan-type-filters input[type="radio"] { display:none; }
.plan-type-filters span { font-weight:500; }
.plan-type-filters input[type="radio"]:checked + span { color:#4da6ff; font-weight:600; text-shadow:0 0 10px rgba(66,133,244,0.3); }
.plan-type-filters label:has(input:checked) { opacity:1; border-color:#4285f4; background:linear-gradient(145deg, rgba(66,133,244,0.2), rgba(66,133,244,0.05)); box-shadow:0 0 25px rgba(66,133,244,0.4), inset 0 1px 0 rgba(66,133,244,0.1); transform:translateY(-2px); }
.plan-type-filters label::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(66,133,244,0.1), transparent); transition:left 0.5s ease; pointer-events:none; z-index:0; }

.data-type-filters { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; margin:0; }
.data-type-filters label { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.5rem 0.25rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:6px; cursor:pointer; transition:all 0.3s ease; font-size:0.9em; opacity:0.6; position:relative; text-align:center; color:#f0f0f0; }
.data-type-filters label > * { position:relative; z-index:1; }
.data-type-filters input[type="checkbox"] { display:none; }
.data-type-filters label.active { opacity:1; background:linear-gradient(145deg, rgba(76,175,80,0.18), rgba(76,175,80,0.08)); border-color:rgba(76,175,80,0.6); color:#81c784; }
.data-type-filters label::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(76,175,80,0.08), transparent); transition:left 0.5s ease; pointer-events:none; z-index:0; }

.data-amount-section { margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); }
.data-amount-filters { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
.data-amount-filters label { display:flex; align-items:center; justify-content:center; padding:0.5rem 0.25rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:6px; cursor:pointer; transition:all 0.3s ease; text-align:center; font-size:0.8em; opacity:0.5; position:relative; }
.data-amount-filters label.active { opacity:1; background:linear-gradient(145deg, rgba(76,175,80,0.2), rgba(76,175,80,0.1)); border-color:rgba(76,175,80,0.6); color:#81c784; }
.data-amount-filters label.active::after { content:'✓'; position:absolute; top:-6px; right:-6px; background:rgba(76,175,80,1); color:#fff; border-radius:50%; width:14px; height:14px; display:flex; align-items:center; justify-content:center; font-size:0.5em; font-weight:bold; box-shadow:0 2px 6px rgba(76,175,80,0.4); }
.data-amount-filters input[type="checkbox"] { display:none; }

.range-inputs { display:flex; gap:1rem; align-items:center; margin:0.75rem 0 1rem; }
.range-inputs input { width:100%; background:linear-gradient(145deg,#2a2a2a,#1e1e1e); border:2px solid rgba(255,255,255,0.1); color:#f0f0f0; padding:0.75rem; border-radius:12px; font-size:0.95em; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.range-inputs input:focus { border-color:#ff9800; box-shadow:0 0 0 3px rgba(255,152,0,0.2), 0 8px 25px rgba(255,152,0,0.15); outline:none; transform:translateY(-2px); background:linear-gradient(145deg,#3a3a3a,#2e2e2e); }
.range-inputs input::placeholder { color: rgba(255,255,255,0.4); }

select {
    width:100%; appearance:none; background:#252525 url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat right 0.75rem center/10px;
    padding:0.6rem; margin:0.75rem 0 0; border:1px solid #444; border-radius:8px; color:#f0f0f0; font-size:0.95em; cursor:pointer; transition:all 0.2s ease;
}
select:focus { border-color:#4285f4; box-shadow:0 0 0 2px rgba(66,133,244,0.2), 0 4px 12px rgba(66,133,244,0.2); outline:none; transform:translateY(-1px); }

#validityFilter, #sortBy {
    width:100%; padding:0.5rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; color:#f0f0f0; font-size:0.9em; cursor:pointer; transition:all 0.3s ease; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 0.7rem center; background-size:0.65rem auto; padding-right:2rem;
}
#validityFilter:focus, #sortBy:focus { outline:none; border-color:rgba(66,133,244,0.5); background:rgba(255,255,255,0.08); }
#validityFilter option, #sortBy option { background:#1a1a1a !important; color:#f0f0f0 !important; padding:0.5rem; border:none; }


.info-button { 
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.12), rgba(69, 183, 209, 0.08)); 
    border: 1px solid rgba(66, 133, 244, 0.25); 
    color: var(--primary-blue); 
    cursor: pointer; 
    padding: 10px 12px; 
    border-radius: 10px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    margin-left: 12px;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.info-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(66, 133, 244, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.info-button:hover::before {
    width: 200px;
    height: 200px;
}

.info-button:hover { 
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.22), rgba(69, 183, 209, 0.16)); 
    border-color: rgba(66, 133, 244, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.15);
    color: #fff;
}

.info-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.info-button i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

@media (max-width:1023px) { .info-button { display:none; } }

.info-panel { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:1000; backdrop-filter:blur(8px); animation:fadeIn 0.3s ease; }
.info-panel.active { display:flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.info-content { 
    background: linear-gradient(135deg, #1a1a1a 0%, #0f1419 40%, #1e2024 100%); 
    padding:2rem; 
    border-radius:16px; 
    position:relative; 
    width:90%; 
    max-width:700px; 
    border:1px solid rgba(66, 133, 244, 0.2); 
    max-height:90vh; 
    overflow-y:auto; 
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.info-content::-webkit-scrollbar { width:8px; }
.info-content::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); border-radius:4px; }
.info-content::-webkit-scrollbar-thumb { background:rgba(66,133,244,0.3); border-radius:4px; }
.info-content::-webkit-scrollbar-thumb:hover { background:rgba(66,133,244,0.5); }

.close-button { 
    position:absolute; 
    top:1rem; 
    right:1rem; 
    background:rgba(255,255,255,0.05); 
    border:1px solid rgba(255,255,255,0.1); 
    color:#fff; 
    font-size:1.5em; 
    cursor:pointer; 
    padding:4px 12px; 
    border-radius:8px; 
    transition:all 0.2s ease;
    line-height:1;
}
.close-button:hover { 
    background:rgba(234,67,53,0.2); 
    border-color:rgba(234,67,53,0.4); 
    transform:rotate(90deg);
}

.info-content h2 { 
    margin:0 0 0.75rem 0; 
    color:#fff; 
    font-size:1.8em; 
    font-weight:700;
    background: linear-gradient(135deg, #4285f4 0%, #45b7d1 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.info-content > p { 
    color:var(--text-muted); 
    line-height:1.6; 
    margin-bottom:1.5rem;
    font-size:0.95em;
}

.info-section { 
    align-content: justify;
    margin:2rem 0; 
    padding:1.5rem; 
    background:rgba(255,255,255,0.02); 
    border-radius:12px; 
    border:1px solid rgba(255,255,255,0.05);
}

.info-content h3 { 
    margin:0 0 1rem 0; 
    color:#fff; 
    font-size:1.2em; 
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.info-content h3 i { color:var(--primary-blue); }

.info-content h4 {
    margin:0 0 0.5rem 0;
    color:#fff;
    font-size:1em;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.info-content h4 i { color:var(--primary-blue); font-size:0.9em; }

.feature-list, .note-list, .usage-steps {
    list-style:none;
    padding:0;
    margin:0;
}

.feature-list, .note-list {
    display: grid;
    gap: 0.5rem 1rem;
}

.feature-list li, .note-list li {
    padding:0.6rem 0;
    color:var(--text-muted);
    line-height:1.45;
        flex-direction: column;
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
}

.feature-list li strong, .note-list li strong {
    display:inline-block;
    min-width:160px;
    max-width:220px;
    flex-shrink:0;
    color:#fff;
    font-weight:700;
}

.feature-list li i, .note-list li i {
    color:var(--success-green);
    margin-top:0.2rem;
    flex-shrink:0;
}

.note-list li i {
    color:var(--warning-red);
    width:28px;
    min-width:28px;
    text-align:center;
    margin-top:0.15rem;
}

@media (max-width:768px) {
    .feature-list, .note-list {
        grid-template-columns: 1fr;
    }
    .feature-list li strong, .note-list li strong {
        display:block;
        min-width:0;
        margin-bottom:0.35rem;
    }
    .feature-list li, .note-list li {
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0.6rem 0;
    }
    .feature-list li i, .note-list li i {
        width: auto;
        min-width: 0;
        margin-top: 0;
    }
}

.note-list li i { color:var(--warning-red); }

.usage-steps { 
    counter-reset:step; 
    list-style:none; 
}

.usage-steps li {
    counter-increment:step;
    padding:0.6rem 0 0.6rem 3.2rem;
    position:relative;
    color:var(--text-muted);
    line-height:1.5;
}

.usage-steps li::before {
    content:counter(step);
    position:absolute;
    left:0.4rem;
    top:0.55rem;
    background:linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color:#fff;
    width:1.9rem;
    height:1.9rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:0.85em;
}

.usage-steps li p, .usage-steps li span, .usage-steps li strong {
    display:inline-block;
}

.info-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:1rem;
    margin-top:1rem;
}

.info-card {
    background:rgba(66,133,244,0.05);
    padding:1rem;
    border-radius:8px;
    border:1px solid rgba(66,133,244,0.15);
    transition:all 0.3s ease;
}

.info-card:hover {
    background:rgba(66,133,244,0.1);
    border-color:rgba(66,133,244,0.3);
    transform:translateY(-2px);
}

.info-card p {
    margin:0.5rem 0 0 0;
    font-size:0.85em;
    color:var(--text-muted);
    line-height:1.4;
}

.contact-section { 
    margin:2rem 0;
    padding:1.5rem;
    background:rgba(66,133,244,0.05);
    border-radius:12px;
    border:1px solid rgba(66,133,244,0.15);
}

.contact-section h3 {
    margin:0 0 0.75rem 0;
}

.contact-section p {
    margin:0 0 1rem 0;
    color:var(--text-muted);
    line-height:1.5;
}

.contact-links {
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.telegram-link, .github-link { 
    display:flex; 
    align-items:center; 
    gap:0.75rem; 
    color:#fff; 
    text-decoration:none; 
    padding:0.75rem 1rem; 
    border-radius:8px; 
    transition:all 0.3s ease;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
}

.telegram-link:hover { 
    background:rgba(0,136,204,0.2); 
    border-color:rgba(0,136,204,0.4);
    transform:translateX(5px);
}

.github-link:hover {
    background:rgba(88,166,255,0.2);
    border-color:rgba(88,166,255,0.4);
    transform:translateX(5px);
}

.telegram-link i, .github-link i {
    font-size:1.2em;
}

.credits { 
    margin-top:2rem; 
    padding-top:1.5rem; 
    border-top:1px solid rgba(255,255,255,0.1); 
    text-align:center; 
    color:#9e9e9e;
}

.credits p { margin:0.5rem 0; font-size:0.9em; }
.credits a { color:var(--primary-blue); text-decoration:none; transition:color 0.2s ease; }
.credits a:hover { color:var(--secondary-blue); }
.version { font-size:0.8em; opacity:0.7; }

@media (max-width:768px) {
    .info-content { 
        padding:1.5rem; 
        max-width:95%; 
        border-radius:12px;
    }
    .info-content h2 { font-size:1.5em; }
    .info-content h3 { font-size:1.1em; }
    .info-section { padding:1rem; }
    .info-grid { grid-template-columns:1fr; }
    .close-button { top:0.75rem; right:0.75rem; }
}
.sidebar-footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); display:flex; justify-content:center; }
.reset-filters-btn { background:linear-gradient(180deg, rgba(230,60,60,0.18), rgba(200,40,40,0.12)); color:#fff0f0; border:1px solid rgba(230,60,60,0.28); padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:600; box-shadow:0 4px 10px rgba(230,60,60,0.10); backdrop-filter:blur(2px); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }

.loading-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; z-index:1000; backdrop-filter:blur(4px); }
.loading-spinner { width:50px; height:50px; border:3px solid #333; border-radius:50%; border-top-color:var(--primary-blue); animation:spin 1s linear infinite; }
@keyframes spin { 100% { transform:rotate(360deg); } }

.no-results { text-align:center; padding:2rem 1rem; color:#888; font-size:1em; }
.no-results svg { width:48px; height:48px; margin-bottom:0.75rem; opacity:0.4; }

@media (max-width:768px) {
    header { padding:0.4rem 0.75rem; }
    .header-title h1 { font-size:1.1em; }
    .logo-sparkle { font-size:0.6em; }
    .logo-text { gap:2px; letter-spacing:-0.2px; }
    .last-updated { font-size:0.8em; }
    .header-title { flex-direction:column; align-items:flex-start; gap:4px; }
    .header-right { gap:8px; }
    .provider-filters { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; margin:0.5rem 0 0.85rem; }
    .provider-filters label { padding:0.45rem; }
    .provider-logo { width:30px; height:30px; }
    .range-inputs { flex-direction:column; gap:0.6rem; }
    select { font-size:0.9em; }
    .back-to-top { bottom:15px; right:15px; width:40px; height:40px; }
    
    .provider-filters label, .data-amount-filters label, .data-type-filters label, .plan-type-filters label { min-height:44px; display:flex; align-items:center; justify-content:center; }
}

@media (max-width:342px) {
    .provider-filters { gap:0.45rem; }
    .provider-filters label { padding:0.4rem; }
}

html { font-size: 16px; }