/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Lato:wght@400;700&display=swap');

:root {
    /* Color Palette */
    --bg-color: #F2F6FA;
    --card-bg: #FFFFFF;
    --text-main: #110E10;
    --text-body: #4B535D;
    --text-light: #F4F4F4;
    /* For dark mode or contrast */

    --brand-primary: #0052CC;
    /* Deep tech blue */
    --brand-accent: #00C2FF;
    /* Bright cyan accent */
    --brand-gradient: linear-gradient(135deg, #0052CC 0%, #00C2FF 100%);

    --success: #28a745;
    --danger: #dc3545;

    /* Spacing & UI */
    --radius-pill: 50px;
    --radius-card: 16px;
    --shadow-soft: 0 10px 30px rgba(0, 82, 204, 0.05);
    --shadow-hover: 0 15px 40px rgba(0, 82, 204, 0.15);
}

/* Reset & Base */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    /* Removing top padding since header handles spacing */
}

/* Header */
.site-header {
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    margin-bottom: 2rem;
}

#mainLogo {
    max-width: 220px;
    /* Reduced from 300px */
    height: auto;
    margin: 0;
}

/* Links */
a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--brand-accent);
}

a.privacy,
a[href*="github"] {
    font-size: 0.85rem;
    color: var(--text-body);
    opacity: 0.8;
}

/* Loading Screen */
#loading {
    background-color: var(--bg-color);
    color: var(--text-body);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Main Container */
#testWrapper {
    width: 90%;
    max-width: 900px;
    background: var(--bg-color);
    /* Kept transparent/blend to page */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Start Button */
#startStopBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 200px;
    height: 60px;
    margin: 2rem auto;

    background: var(--brand-gradient);
    color: #FFFFFF;

    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 20px rgba(0, 82, 204, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
}

#startStopBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 82, 204, 0.4);
}

#startStopBtn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(0, 82, 204, 0.3);
}

#startStopBtn.running {
    background: var(--danger);
    /* Different state */
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}


/* Text Content via CSS (matched from original) */
#startStopBtn:before {
    content: "Start Test";
}

#startStopBtn.running:before {
    content: "Abort";
}

/* Server Selection */
#serverArea {
    font-family: 'Lato', sans-serif;
    color: var(--text-body);
}

#server {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #CFD8DC;
    background: #FFF;
    font-family: inherit;
    color: var(--text-main);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Test Grid */
#test {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
    margin-bottom: 2rem;
}

.testGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Individual Cards/Gauges */
.testArea,
.testArea2 {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

/* Override fixed sizes from inline/original CSS if possible, strict dimensions needed for canvas? 
   Original JS sets canvas size based on clientHeight. Let's fix dimensions for layout stability.
*/
.testArea {
    width: 100%;
    max-width: 300px;
    height: 250px;
    /* Ensure enough height for gauges */
}

.testArea2 {
    width: 100%;
    max-width: 300px;
    min-height: 120px;
}

/* Gauge Overlays */
div.testName {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: auto;
    /* Push to top */
    position: static;
    /* Reset absolute positioning */
    width: auto;
    padding-bottom: 10px;
}

/* Reset absolute positioning for cleaner flow if we can. 
   However, the canvas relies on being 'behind' the text usually. 
   Let's keep the canvas absolute inside the relative container, but better positioned. 
*/
div.testArea canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    /* nudged up slightly */
    width: 90% !important;
    height: 80% !important;
    z-index: 1;
}

div.meterText {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    color: var(--text-main);
    z-index: 2;
    position: relative;
    margin-top: auto;
}

div.unit {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: var(--text-body);
    z-index: 2;
    position: relative;
}

/* Results / Share Area */
#shareArea {
    grid-column: 1 / -1;
    background: #FFF;
    border-radius: var(--radius-card);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

#resultsURL {
    width: 100%;
    padding: 10px;
    border: 1px solid #EEE;
    border-radius: 6px;
    margin: 10px 0;
    font-family: monospace;
}

/* Privacy Modal */
#privacyPolicy {
    background: var(--card-bg);
    color: var(--text-body);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: none;
}

h4 {
    color: var(--text-main);
    margin-top: 1.5rem;
}

/* Animation Classes */
.visible {
    opacity: 1;
    animation: fadeIn 0.5s ease-out;
}

.hidden {
    opacity: 0;
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    #test {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2rem;
    }

    .testArea,
    .testArea2 {
        max-width: 100%;
        width: 100%;
    }
}