:root {
    --primary-color: #3b82f6;
    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --secondary-color: #1e293b;
    --accent-color: #06b6d4;
    --text-light: #ffffff;
    --text-muted: #94a3b8;
    --text-dark: #0f172a;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --background-dark: #0f172a;
    --background-card: #1e293b;
    --background-card-header: #334155;
    --background-hero: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --border-color: rgba(148, 163, 184, 0.1);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--background-dark);
    color: var(--text-light);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header Styles */
.navbar {
    background-color: var(--background-card-header) !important;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light) !important;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 40px;
    margin-right: 10px;
}

.nav-link {
    color: var(--text-light) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
}

.nav-link:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Main Content Styles */
.main-ip-section {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #2a4b5c 100%);
    padding: 3rem 0;
    text-align: center;
    margin-bottom: 2rem;
}

.ip-display {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 1rem 0;
    animation: fadeInUp 0.8s ease;
}

.location-display {
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease;
}

.card {
    background: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: var(--background-card-header) !important;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-light);
    font-weight: 600;
    padding: 1.25rem;
}

.card-body {
    background: var(--background-card) !important;
    color: var(--text-light);
}

/* Ensure all text elements in cards are white */
.card * {
    color: var(--text-light) !important;
}

.card p,
.card ul,
.card li,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card span,
.card div {
    color: var(--text-light) !important;
}

/* Style links differently */
.card a {
    color: var(--primary-color) !important;
    text-decoration: none;
}

.card a:hover {
    color: #ff9933 !important;
    text-decoration: underline;
}

/* Override any Bootstrap text colors */
.text-dark,
.text-body,
.text-black,
.text-secondary {
    color: var(--text-light) !important;
}

.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure list items are white */
.card ul li,
.card ol li {
    color: var(--text-light) !important;
}

/* Make sure headings are white */
.card .h1,
.card .h2,
.card .h3,
.card .h4,
.card .h5,
.card .h6 {
    color: var(--text-light) !important;
}

/* Override any inline styles */
[style*="color"] {
    color: var(--text-light) !important;
}

/* Ensure form elements have white text */
.card input,
.card textarea,
.card select {
    color: var(--text-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Style blockquotes */
.card blockquote {
    color: var(--text-light) !important;
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
}

.accordion-button {
    background-color: var(--background-card-header) !important;
    color: var(--text-light) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--background-card) !important;
    color: var(--text-light) !important;
}

.accordion-body {
    background-color: var(--background-card) !important;
    color: var(--text-light) !important;
}

.accordion-item {
    background-color: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
}

.list-group-item {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-light) !important;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
}

.status-indicator::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-success::before {
    background-color: var(--success-color);
    box-shadow: 0 0 10px var(--success-color);
}

.status-danger::before {
    background-color: var(--danger-color);
    box-shadow: 0 0 10px var(--danger-color);
}

/* Map Container */
#map {
    border: 1px solid var(--border-color);
    background-color: var(--background-card) !important;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    height: 400px !important;
    margin: 1rem 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Footer Styles */
.footer {
    background: var(--background-card-header);
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .ip-display {
        font-size: 1.8rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .location-display {
        font-size: 1.1rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .list-group-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .list-group-item span:last-child {
        align-self: flex-end;
    }

    .anonymity-bar {
        padding: 1rem;
    }

    .anonymity-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .score-text {
        display: none;
    }

    .navbar-brand {
        font-size: 1.4rem;
    }

    .nav-link {
        padding: 0.75rem 0 !important;
        text-align: center;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #map {
        height: 300px !important;
    }

    .security-status {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .ip-display {
        font-size: 1.5rem;
    }

    .location-display {
        font-size: 1rem;
    }

    .card-header {
        padding: 1rem;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }

    h1, .h1 {
        font-size: 1.8rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    h3, .h3 {
        font-size: 1.3rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Ensure proper spacing for mobile navigation */
.navbar-collapse {
    padding: 1rem 0;
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 1.5em;
    height: 1.5em;
}

/* Improve touch targets on mobile */
.nav-link, .btn, .footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure proper spacing in cards on mobile */
.card-body > :last-child {
    margin-bottom: 0;
}

/* Add smooth scrolling for better mobile experience */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal scrolling on mobile */
body {
    overflow-x: hidden;
}

/* Improve form elements on mobile */
input, select, textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
}

/* Add active state for navigation */
.nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Custom Button Styles */
.btn-primary {
    background-color: var(--primary-color);
    border: none;
    padding: 0.8rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #e67300;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 127, 0, 0.3);
}

/* Security Status Bar */
.security-status {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 1rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: pulse 2s infinite;
}

.security-status.secure {
    border: 1px solid var(--success-color);
}

.security-status.warning {
    border: 1px solid var(--danger-color);
    background: rgba(220, 53, 69, 0.1);
}

/* Tool Tips */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

[data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
}

.text-primary {
    color: #007bff !important;
}

h3.card-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.info-label {
    font-weight: 600;
    color: #666;
}

.info-value {
    color: #333;
}

/* Global text color override */
body {
    background-color: var(--background-dark);
    color: var(--text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Content text color overrides */
    .container {
    color: var(--text-light);
    }
    
/* Card styles with text color */
    .card {
    background: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.card * {
    color: var(--text-light) !important;
}

/* Specific text color overrides */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p,
span,
div,
li,
ul,
ol {
    color: var(--text-light) !important;
}

/* Link styles */
a:not(.btn):not(.nav-link) {
    color: var(--primary-color) !important;
    text-decoration: none;
}

a:not(.btn):not(.nav-link):hover {
    color: #ff9933 !important;
    text-decoration: underline;
}

/* List styles */
.list-group-item {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-light) !important;
}

/* Form control styles */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-light) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 127, 0, 0.25) !important;
}

/* Accordion styles */
.accordion-button,
.accordion-body {
    background-color: var(--background-card-header) !important;
    color: var(--text-light) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--background-card) !important;
}

.accordion-item {
    background-color: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Table styles */
table {
    background-color: var(--background-card) !important;
    color: var(--text-light) !important;
}

th, td {
    border-color: var(--border-color) !important;
}

/* Alert styles - preserve original colors */
.alert {
    background-color: var(--background-card-header) !important;
    border-color: var(--border-color) !important;
}

.alert * {
    color: inherit !important;
}

/* Badge styles - preserve original colors */
.badge {
    color: inherit !important;
}

/* Text utility classes */
.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-dark,
.text-body,
.text-black,
.text-secondary {
    color: var(--text-light) !important;
}

/* Small text */
small {
    color: var(--text-light) !important;
    opacity: 0.8;
}

/* Code blocks */
pre, code {
    color: var(--text-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Page Content Styles */
.container .card {
    color: var(--text-light);
}

.container .card-body {
    color: var(--text-light);
}

/* Page Content Text Colors */
.container .card-body h1,
.container .card-body h2,
.container .card-body h3,
.container .card-body h4,
.container .card-body h5,
.container .card-body h6,
.container .card-body p,
.container .card-body ul,
.container .card-body ol,
.container .card-body li,
.container .card-body span,
.container .card-body div {
    color: var(--text-light) !important;
}

/* Page Headers */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header .h1,
.card-header .h2,
.card-header .h3,
.card-header .h4,
.card-header .h5,
.card-header .h6 {
    color: var(--text-light) !important;
}

/* List Items in Content */
.container .card-body ul li,
.container .card-body ol li {
    color: var(--text-light) !important;
}

/* List Group Items */
.container .list-group-item {
    background-color: var(--background-card) !important;
    color: var(--text-light) !important;
    border-color: var(--border-color) !important;
}

/* Accordion Content */
.container .accordion-button {
    background-color: var(--background-card-header) !important;
    color: var(--text-light) !important;
}

.container .accordion-body {
    background-color: var(--background-card) !important;
    color: var(--text-light) !important;
}

.container .accordion-item {
    background-color: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Form Elements in Content */
.container .form-control,
.container .form-select,
.container .form-check-label {
    color: var(--text-light) !important;
}

/* Tables in Content */
.container table,
.container th,
.container td {
    color: var(--text-light) !important;
}

/* Links in Content */
.container .card-body a:not(.btn) {
    color: var(--primary-color) !important;
    text-decoration: none;
}

.container .card-body a:not(.btn):hover {
    color: #ff9933 !important;
    text-decoration: underline;
}

/* Text Utilities in Content */
.container .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.container .text-dark,
.container .text-body,
.container .text-black {
    color: var(--text-light) !important;
}

/* Small Text in Content */
.container small {
    color: var(--text-light) !important;
    opacity: 0.8;
}

/* Code Blocks in Content */
.container pre,
.container code {
    color: var(--text-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Success Icons */
.container .text-success {
    color: var(--success-color) !important;
}

/* Preserve Alert Colors */
.container .alert {
    color: inherit !important;
}

.container .alert * {
    color: inherit !important;
}

/* Override all text colors in main content */
.container .card,
.container .card *,
.container .card-body,
.container .card-body * {
    color: var(--text-light) !important;
}

/* Override Bootstrap text colors */
.container .text-body,
.container .text-dark,
.container .text-black,
.container .text-secondary,
.container [class*="text-"] {
    color: var(--text-light) !important;
}

/* Specific overrides for headings and text */
.container h1, .container .h1,
.container h2, .container .h2,
.container h3, .container .h3,
.container h4, .container .h4,
.container h5, .container .h5,
.container h6, .container .h6,
.container p,
.container li,
.container span,
.container div {
    color: var(--text-light) !important;
}

/* Override for card header and body */
.card-header,
.card-body {
    color: var(--text-light) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Override for list items */
.list-group-item,
.list-group-item * {
    color: var(--text-light) !important;
    background-color: transparent !important;
}

/* Exceptions for specific elements */
.container a:not(.btn):not(.nav-link) {
    color: var(--primary-color) !important;
}

.container .text-success,
.container .text-success * {
    color: var(--success-color) !important;
}

.container .text-danger,
.container .text-danger * {
    color: var(--danger-color) !important;
}

.container .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Make sure all text inputs and form controls have white text */
.container input,
.container textarea,
.container select,
.container .form-control {
    color: var(--text-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Override any inline styles */
[style*="color"] {
    color: var(--text-light) !important;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--background-dark);
}

::-webkit-scrollbar-thumb {
    background-color: var(--background-card-header);
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background-color: var(--background-dark);
}