/* ===========================================================================
 * IPWTF v4 — Terminal / CLI aesthetic
 * Design tokens + custom component styling on top of Bootstrap 5.
 * Palette inspired by VSCode's "Night Owl" + classic green-phosphor terminals.
 * =========================================================================== */

:root {
    /* ---- Color tokens ------------------------------------------------- */
    --bg-0:           #0b0e14;   /* body base         */
    --bg-1:           #11151c;   /* panels            */
    --bg-2:           #181d25;   /* raised panels     */
    --bg-3:           #232b36;   /* hover / borders   */
    --bg-glass:       rgba(15, 20, 28, 0.65);

    --fg-0:           #c9d1d9;   /* body text         */
    --fg-1:           #e6edf3;   /* headings          */
    --fg-muted:       #8b949e;   /* subtle            */
    --fg-dim:         #6e7681;   /* very subtle       */

    --accent-green:   #26d07c;   /* success / $ prompt */
    --accent-cyan:    #22d3ee;   /* primary accent    */
    --accent-purple:  #a78bfa;   /* secondary accent  */
    --accent-yellow:  #f5c542;   /* warn              */
    --accent-red:     #ff5c7a;   /* danger            */
    --accent-orange:  #ff9f43;   /* attention         */

    --border:         #232b36;
    --border-strong:  #2f3844;

    /* ---- Typography --------------------------------------------------- */
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    --font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Radii / shadows --------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    --glow-cyan:  0 0 0 1px rgba(34,211,238,0.35), 0 0 24px rgba(34,211,238,0.15);
    --glow-green: 0 0 0 1px rgba(38,208,124,0.35), 0 0 24px rgba(38,208,124,0.15);
}

/* ---- Global -------------------------------------------------------------- */
html, body {
    background: var(--bg-0);
    color: var(--fg-0);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Monospace everything that is data. Values, IPs, codes read as code. */
code, kbd, samp, pre,
.myipv4, .myipv6,
.info-box p:not(:first-child),
.dns, .edns, .hostname, .browser, .os, .blacklist, .proxy, .anonymizer,
.city, .country, .mobi, .isp, .webrtc_status {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    letter-spacing: 0.01em;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { color: var(--accent-green); text-decoration: underline; text-decoration-thickness: 1px; }

hr, .border-white { border-color: var(--border) !important; }

::selection { background: rgba(34,211,238,0.35); color: var(--fg-1); }

/* Subtle terminal-style background grid on body */
body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(circle at 20% -10%, rgba(34,211,238,0.08), transparent 50%),
        radial-gradient(circle at 80% 110%, rgba(167,139,250,0.06), transparent 50%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
}
body > * { position: relative; z-index: 1; }

/* ---- Navigation ---------------------------------------------------------- */
.navbar {
    background: var(--bg-1) !important;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
.navbar-brand {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent-green) !important;
    display: flex; align-items: center; gap: 0.5rem;
}
.navbar-brand::before {
    content: "$";
    color: var(--accent-cyan);
    font-weight: 700;
    margin-right: 0.15rem;
}
.navbar-brand svg { color: var(--accent-cyan); }
.navbar-dark .navbar-nav .nav-link {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--accent-cyan);
    background: var(--bg-2);
}
.navbar-dark .navbar-nav .nav-link i { color: var(--accent-purple); }
.navbar-dark .navbar-nav .nav-link:hover i { color: var(--accent-cyan); }
.navbar-nav .dropdown-menu {
    background: var(--bg-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.navbar-nav .dropdown-item { color: var(--fg-0); font-family: var(--font-mono); font-size: 0.9rem; }
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus,
.navbar-nav .dropdown-item.active {
    background: var(--bg-2);
    color: var(--accent-cyan);
}

/* ---- Hero section -------------------------------------------------------- */
.hero-section {
    background:
        radial-gradient(1200px 400px at 50% -20%, rgba(34,211,238,0.18), transparent 70%),
        linear-gradient(180deg, #10151f 0%, var(--bg-0) 100%);
    color: var(--fg-1);
    padding: 2.5rem 0 3rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.hero-section::before {
    /* A thin cyan top line, like a terminal window-border. */
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.6;
}
.hero-section h2.display-5 {
    font-family: var(--font-mono);
    font-size: clamp(1.3rem, 3.6vw, 2.25rem);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}
.hero-section h2.display-5::before {
    content: "$ ";
    color: var(--accent-green);
    font-weight: 700;
}
.hero-section .lead {
    color: var(--fg-muted);
    font-size: 0.95rem;
    font-family: var(--font-mono);
}
.hero-section .fw-bold { color: var(--accent-cyan); }
.hero-section .country { color: var(--accent-green); }

/* Hero copy button */
.copyButton,
.btn.btn-primary.btn-sm.copyButton {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    color: var(--fg-0);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.15s ease;
}
.copyButton:hover {
    background: var(--bg-3);
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

/* ---- Info boxes (data rows) --------------------------------------------- */
.info-box {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    text-align: left;
    color: var(--fg-0);
    margin-bottom: 0.9rem;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
.info-box:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
}
.info-box > p:first-child {
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    display: flex; align-items: center; gap: 0.4rem;
}
.info-box > p:first-child strong { color: var(--fg-0); font-weight: 600; }
.info-box > p:first-child i { color: var(--accent-purple); font-size: 0.9rem; }
.info-box > p:not(:first-child) {
    margin-bottom: 0;
    color: var(--fg-1);
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
}

/* $-prompt marker on every info-box value. Small, subtle, terminal-y. */
.info-box > p:not(:first-child)::before {
    content: "› ";
    color: var(--accent-green);
    font-weight: 700;
    margin-right: 0.15rem;
    opacity: 0.8;
}

.ipinfo {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
}

/* Status dot — keep Bootstrap semantics but brighten. */
.status-dot {
    display: inline-block;
    height: 8px; width: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--bg-1), 0 0 8px currentColor;
}
.status-dot.green { background: var(--accent-green); color: var(--accent-green); }
.status-dot.red   { background: var(--accent-red); color: var(--accent-red); }
.status-enabled   { background: var(--accent-green); }
.status-disabled  { background: var(--accent-red); }
.status-circle    { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }

/* ---- Anonymity score widget --------------------------------------------- */
.anonymity-score-section {
    background: linear-gradient(180deg, rgba(167,139,250,0.06), transparent);
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    margin-top: 1rem;
}
.anonymity-score-section h2 {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--fg-1);
}
.anonymity-score-section h2::before {
    content: "// ";
    color: var(--fg-dim);
    font-weight: 400;
}
.score-circle {
    width: 180px; height: 180px;
    background: var(--bg-1);
    border: 1px solid var(--border-strong);
    box-shadow: inset 0 0 0 1px var(--bg-0), 0 8px 32px rgba(0,0,0,0.45);
    color: var(--fg-1);
    background: conic-gradient(var(--accent-cyan) 0deg, var(--accent-cyan) 0deg, var(--border) 0deg, var(--border) 360deg);
}
.score-circle::before {
    background: var(--bg-1);
    inset: 10px;
    box-shadow: inset 0 0 24px rgba(34,211,238,0.05);
}
#score-text { font-family: var(--font-mono); color: var(--fg-1); font-size: 2.1rem; }
.score-circle.is-loading {
    background: conic-gradient(rgba(34,211,238,0.35) 0deg, rgba(34,211,238,0.08) 360deg);
}
.score-circle.is-loading::before { background: var(--bg-2); }
.score-loading-dot { color: var(--accent-cyan); }

.progress { background-color: var(--bg-2) !important; border: 1px solid var(--border) !important; }
.progress-bar {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-orange), var(--accent-yellow), var(--accent-green), var(--accent-cyan)) !important;
    font-family: var(--font-mono); font-size: 0.8rem;
}

/* Score breakdown cards */
#score-breakdown .info-box {
    background: var(--bg-2) !important;
    border: 1px solid var(--border);
}
#score-breakdown .info-box:hover { border-color: var(--accent-cyan); }
#score-breakdown .badge.bg-success { background: rgba(38,208,124,0.2) !important; color: var(--accent-green) !important; border: 1px solid var(--accent-green); }
#score-breakdown .badge.bg-warning { background: rgba(245,197,66,0.15) !important; color: var(--accent-yellow) !important; border: 1px solid var(--accent-yellow); }
#score-breakdown .badge.bg-danger  { background: rgba(255,92,122,0.15) !important; color: var(--accent-red) !important; border: 1px solid var(--accent-red); }
#score-breakdown .text-white-50 { color: var(--fg-muted) !important; }
.text-white-50 { color: var(--fg-muted) !important; }

/* ---- Language pills (from ipwtf.v9.js) ---------------------------------- */
.lang-pill {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--fg-0);
    display: inline-flex !important; align-items: center; gap: 0.2rem;
}
.lang-pill strong { color: var(--accent-cyan); font-weight: 600; }
.lang-pill .badge.bg-info { background: rgba(34,211,238,0.15) !important; color: var(--accent-cyan) !important; border: 1px solid var(--accent-cyan); font-family: var(--font-mono); font-size: 0.7rem; }
.lang-pill .badge.bg-warning { background: rgba(245,197,66,0.12) !important; color: var(--accent-yellow) !important; border: 1px solid var(--accent-yellow); font-family: var(--font-mono); font-size: 0.7rem; }
.lang-pill .opacity-75 { color: var(--fg-muted); font-size: 0.7rem; }

/* ---- Language legend (navigator.languages explainer) -------------------- */
.lang-legend {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--fg-muted);
    display: grid;
    gap: 0.4rem;
}
.lang-legend__row {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 0.6rem;
    align-items: start;
}
.lang-legend__key {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.3rem;
    color: var(--fg-dim);
}
.lang-legend__key .bi { color: var(--accent-cyan); font-size: 0.95rem; }
.lang-legend__key .badge {
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
}
.lang-legend__key .badge.bg-info {
    background: rgba(34,211,238,0.15) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid var(--accent-cyan);
}
.lang-legend__key .badge.bg-warning {
    background: rgba(245,197,66,0.12) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--accent-yellow);
}
.lang-legend__val { color: var(--fg-muted); }
.lang-legend__val code {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05em 0.35em;
    color: var(--accent-cyan);
    font-size: 0.85em;
}
.lang-legend__val strong { color: var(--fg-1); font-weight: 600; }

@media (max-width: 576px) {
    .lang-legend__row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .lang-legend__key { margin-bottom: 0.1rem; }
}

/* ---- Feature cards ------------------------------------------------------ */
.feature-card,
.card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--fg-0);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover,
.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}
.feature-card .card-body,
.card .card-body { color: var(--fg-0); }
.feature-card h4 { color: var(--fg-1); font-family: var(--font-mono); font-size: 1.05rem; }
.feature-card i { color: var(--accent-cyan) !important; }

.card-header {
    background: var(--bg-2);
    color: var(--fg-1);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.card-header i { color: var(--accent-purple); }

/* ---- Section headers (h2 on each page) ---------------------------------- */
section h2,
#features h2 {
    font-family: var(--font-mono);
    color: var(--fg-1);
    font-weight: 600;
}
#features h2::before {
    content: "// ";
    color: var(--fg-dim);
    font-weight: 400;
}

/* ---- Detail rows (used in partials) ------------------------------------- */
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.detail-label {
    width: 35%;
    font-weight: 600;
    color: var(--fg-muted);
    text-align: left;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-content {
    width: 65%;
    color: var(--fg-1);
    text-align: left;
    word-break: break-all;
}

/* ---- Ad banner (proxyaz.com, partials/ads.twig) ------------------------- */
/* The banner sits inside an .ad-banner-wrap that inherits the page bg so it
   blends with the terminal theme instead of dropping into Bootstrap bg-light. */
.ad-banner-wrap { padding: 1.5rem 0; position: relative; z-index: 1; }
.ad-banner {
    background:
        radial-gradient(circle at 0% 0%, rgba(167,139,250,0.22), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(34,211,238,0.18), transparent 55%),
        var(--bg-1);
    border: 1px solid var(--border-strong);
    color: var(--fg-1);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
}
.ad-banner::before {
    /* Scanline shimmer — keeps the terminal aesthetic consistent with the hero. */
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
}
.ad-banner__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    position: relative;
}
.ad-banner__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.ad-banner__prompt,
.ad-banner__cta-prompt { color: var(--accent-green); margin-right: 0.35em; }
.ad-banner__title {
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: var(--fg-1);
    margin: 0 0 0.4rem;
    line-height: 1.25;
}
.ad-banner__subtitle {
    color: var(--fg-muted);
    font-size: 0.92rem;
    margin: 0 0 0.8rem;
    max-width: 48ch;
}
.ad-banner__features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ad-banner__features li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--fg-0);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.ad-banner__features li .bi { color: var(--accent-cyan); font-size: 0.8rem; }
.ad-banner__pricing {
    display: flex; flex-direction: column; gap: 0.5rem;
    align-items: stretch; min-width: 180px;
}
.ad-banner__price-chip {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    display: flex; align-items: baseline; gap: 0.4rem;
    font-family: var(--font-mono);
}
.ad-banner__price-value {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 1.05rem;
}
.ad-banner__price-unit {
    color: var(--fg-muted);
    font-size: 0.78rem;
}
.ad-banner__cta {
    margin-top: 0.25rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
    background: var(--accent-green);
    color: var(--bg-0) !important;
    border: 1px solid var(--accent-green);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ad-banner__cta:hover {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-0) !important;
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
}
.ad-banner__cta .bi { font-size: 1rem; }
/* Backward-compat: legacy selectors still work if ads.twig ever reverts. */
.ad-banner h2 { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--fg-1); }
.ad-banner p  { color: var(--fg-muted); font-size: 0.92rem; margin-bottom: 0.8rem; }

@media (max-width: 768px) {
    .ad-banner { padding: 1.1rem 1rem; }
    .ad-banner__body { grid-template-columns: 1fr; gap: 1rem; }
    .ad-banner__pricing { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .ad-banner__pricing .ad-banner__cta { flex-basis: 100%; }
}

/* ---- Footer ------------------------------------------------------------- */
.footer {
    background: var(--bg-1) !important;
    color: var(--fg-muted);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    font-family: var(--font-mono);
}
.footer h5 {
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-left: 2px solid var(--accent-cyan);
    padding-left: 0.5rem;
    margin-bottom: 0.75rem !important;
}
.footer a, .footer .text-white { color: var(--fg-0) !important; text-decoration: none; }
.footer a:hover { color: var(--accent-cyan) !important; text-decoration: none; }
.footer ul li { margin-bottom: 0.25rem; }
.footer ul li a i { color: var(--accent-purple); transition: color 0.15s ease; }
.footer ul li a:hover i { color: var(--accent-cyan); }
.footer p { color: var(--fg-muted); }
.footer p i { color: var(--accent-green); }
.footer .social-icons a { font-size: 1rem; transition: color 0.2s ease; }
.footer .dropdown-toggle {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    color: var(--fg-0) !important;
}
.footer .dropdown-toggle:hover {
    background: var(--bg-3);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan) !important;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn-primary {
    background: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    color: var(--bg-0);
    font-family: var(--font-mono);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--bg-0);
}
.btn-custom { border-radius: 999px; }

/* ---- Bootstrap overrides for dark theme --------------------------------- */
.text-nomal { color: var(--fg-1); }
.text-muted { color: var(--fg-muted) !important; }

.form-control, .form-select {
    background: var(--bg-1);
    border: 1px solid var(--border-strong);
    color: var(--fg-0);
    font-family: var(--font-mono);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-1);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
    color: var(--fg-1);
}

.nav-tabs {
    border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    padding: 0.5rem 1rem;
    white-space: normal;
    text-align: left;
}
.nav-tabs .nav-link:hover {
    border-color: var(--border);
    color: var(--accent-cyan);
}
.nav-tabs .nav-link.active {
    background: var(--bg-1);
    border-color: var(--border) var(--border) var(--bg-1);
    color: var(--accent-cyan);
}

/* ---- SDP / code blocks -------------------------------------------------- */
pre, .sdp-log {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--bg-1);
    color: var(--fg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    overflow: auto;
}

/* ---- Icon color helpers (backward compat) ------------------------------- */
.icon-orange { color: var(--accent-orange); }
.icon-purple { color: var(--accent-purple); }
.icon-green  { color: var(--accent-green); }
.icon-blue   { color: var(--accent-cyan); }
.icon-red    { color: var(--accent-red); }
.icon-cyan   { color: var(--accent-cyan); }
.icon-size {
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}
.icon-size:hover { transform: rotate(360deg); color: var(--accent-cyan); }

/* ---- Spinner ------------------------------------------------------------ */
.rotate { display: inline-block; animation: spin 1s linear infinite; color: var(--accent-cyan); }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---- Score descriptions ------------------------------------------------- */
.score-good { color: var(--accent-green); }
.score-medium { color: var(--accent-yellow); }
.score-bad { color: var(--accent-red); }
.score-best { color: var(--accent-green); }
.score-not-bad { color: var(--accent-yellow); }
.score-very-bad { color: var(--accent-orange); }
.score-nightmare, .score-godless { color: var(--accent-red); }

/* ---- Responsive tuning -------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-section h2.display-5 { font-size: 1.3rem; }
    .hero-section { padding: 1.5rem 0 2rem; }
}

@media (max-width: 767.98px) {
    .info-box {
        padding: 0.6rem 0.8rem;
        margin-bottom: 0.6rem;
    }
    .info-box > p:first-child { font-size: 0.65rem; }
    .info-box > p:not(:first-child) { font-size: 0.85rem; }

    .hero-section h2.display-5 { font-size: 1.1rem; line-height: 1.4; }
    .hero-section .myipv4, .hero-section .myipv6 { font-size: 1rem; }
    .hero-section .lead { font-size: 0.85rem; }

    .copyButton { font-size: 0.7rem; padding: 0.1rem 0.4rem; }

    .nav-tabs { flex-direction: column; }
    .nav-tabs .nav-item { width: 100%; margin-bottom: 0.3rem; }
    .nav-tabs .nav-link { width: 100%; text-align: center; }

    .anonymity-score-section { padding: 1.25rem 0 !important; }
    .score-circle { width: 140px; height: 140px; }
    .score-circle::before { inset: 8px; }
    #score-text { font-size: 1.5rem; }

    .footer h5 { font-size: 0.75rem; }
}

@media (max-width: 575.98px) {
    body { font-size: 14px; }
    .container { padding-left: 1rem; padding-right: 1rem; }
    .info-box { padding: 0.5rem 0.7rem; }
    .info-box > p:first-child i { display: inline-block; }
}

/* ===========================================================================
 * Free Proxy List — redesigned proxyscrape-inspired with terminal aesthetic
 * =========================================================================== */

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.fp-stats {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--fg-muted);
}
.fp-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.fp-stat strong { color: var(--accent-cyan); font-weight: 700; }
.fp-stat i { color: var(--accent-cyan); }
.fp-stat--accent {
    border-color: var(--accent-cyan);
    background: rgba(34, 211, 238, 0.08);
}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.fp-filters {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}
.fp-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.fp-select, .fp-input {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--fg-0);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    padding: 0.45rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
    min-width: 140px;
}
.fp-select:focus, .fp-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}
.fp-select option { background: var(--bg-1); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    color: var(--fg-0);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fp-btn:hover {
    background: var(--bg-3);
    border-color: var(--accent-cyan);
    color: var(--fg-1);
}
.fp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fg-muted);
}
.fp-btn--ghost:hover { color: var(--accent-red); border-color: var(--accent-red); }
.fp-btn--primary {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #000;
    font-weight: 600;
}
.fp-btn--primary:hover {
    background: #1ab8cc;
    border-color: #1ab8cc;
}
.fp-btn--primary.copied {
    background: var(--accent-green);
    border-color: var(--accent-green);
}
.fp-btn--export { font-size: 0.78rem; }
.fp-btn--active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #000;
}

/* ── Export bar ─────────────────────────────────────────────────────────── */
.fp-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.fp-export__left, .fp-export__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fp-export__label {
    font-size: 0.78rem;
    color: var(--fg-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* Toggle group (ip:port vs protocol://ip:port) */
.fp-toggle-group {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.fp-toggle {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    background: var(--bg-2);
    color: var(--fg-muted);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.fp-toggle + .fp-toggle { border-left: 1px solid var(--border-strong); }
.fp-toggle:hover { color: var(--fg-0); background: var(--bg-3); }
.fp-toggle.active {
    background: var(--accent-cyan);
    color: #000;
    font-weight: 600;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.fp-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.fp-table {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    border-collapse: collapse;
    margin: 0;
}
.fp-table thead th {
    background: var(--bg-2);
    color: var(--fg-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-strong);
    user-select: none;
    cursor: pointer;
}
.fp-table thead th:hover { color: var(--fg-0); }
.fp-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--fg-0);
}
.fp-table tbody tr { transition: background 0.1s; }
.fp-table tbody tr:hover { background: rgba(34, 211, 238, 0.04); }
.fp-table tbody tr:last-child td { border-bottom: none; }

/* Sort indicators */
.sortable .sort-icon { opacity: 0.25; font-size: 0.6rem; margin-left: 3px; }
.sortable:hover .sort-icon { opacity: 0.5; }
.sortable.sort-asc .sort-icon,
.sortable.sort-desc .sort-icon { opacity: 1; color: var(--accent-cyan); }

/* ── Protocol badges ───────────────────────────────────────────────────── */
.fp-proto {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fp-proto--http   { background: #22d3ee22; color: var(--accent-cyan); border: 1px solid #22d3ee44; }
.fp-proto--https  { background: #26d07c22; color: var(--accent-green); border: 1px solid #26d07c44; }
.fp-proto--socks4 { background: #a78bfa22; color: var(--accent-purple); border: 1px solid #a78bfa44; }
.fp-proto--socks5 { background: #ff9f4322; color: var(--accent-orange); border: 1px solid #ff9f4344; }

/* ── Port badge ────────────────────────────────────────────────────────── */
.fp-port {
    display: inline-block;
    background: var(--accent-cyan);
    color: #000;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.78rem;
}

/* ── Anonymity badges ──────────────────────────────────────────────────── */
.fp-anon {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}
.fp-anon--elite       { background: #26d07c22; color: var(--accent-green); border: 1px solid #26d07c44; }
.fp-anon--anonymous   { background: #f5c54222; color: var(--accent-yellow); border: 1px solid #f5c54244; }
.fp-anon--transparent { background: #ff5c7a22; color: var(--accent-red); border: 1px solid #ff5c7a44; }
.fp-anon--unknown     { background: var(--bg-3); color: var(--fg-dim); border: 1px solid var(--border); }

/* ── Country cell ──────────────────────────────────────────────────────── */
.fp-country { white-space: nowrap; }
.fp-country__flag { margin-right: 0.35rem; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.fp-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}
.fp-pagination__info {
    font-size: 0.78rem;
    color: var(--fg-muted);
    font-family: var(--font-mono);
}
.fp-pagination .page-link {
    font-size: 0.78rem;
    padding: 0.25rem 0.55rem;
    background: var(--bg-2);
    border-color: var(--border);
    color: var(--fg-muted);
}
.fp-pagination .page-link:hover {
    background: var(--bg-3);
    color: var(--fg-0);
    border-color: var(--border-strong);
}
.fp-pagination .page-item.active .page-link {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #000;
    font-weight: 600;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.fp-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--fg-dim);
}
.fp-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    color: var(--fg-muted);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .fp-filters__row { flex-direction: column; }
    .fp-select, .fp-input { width: 100%; min-width: unset; }
    .fp-export { flex-direction: column; align-items: flex-start; }
    .fp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fp-pagination { flex-direction: column; gap: 0.5rem; text-align: center; }
}