:root {
    --bg-deep: #f0fdf4;
    --bg-card: rgba(255, 255, 255, 0.85);
    --primary: #059669;
    /* Darker Emerald for contrast against light bg */
    --primary-dim: rgba(5, 150, 105, 0.1);
    --accent: #0ea5e9;
    /* Sky Blue */
    --danger: #dc2626;
    /* Red 600 */
    --warning: #d97706;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-glow: rgba(5, 150, 105, 0.2);
    --glass-blur: blur(20px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    font-size: 18px;
    /* Increased from default */
    font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
    min-height: 100vh;
    background-color: var(--bg-deep);
    background-image: url('../../background.png');
    /* Will be placed in relative root or handled via absolute path if needed, but relative strictly implies structure. Let's assume root or adjust. Actually user said generate background image. Artifacts are in brain dir. I need to copy it or ref it. IMPORTANT: Generate Image saves to artifacts. I need to copy it to project assets. */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow: hidden;
    position: relative;
}

/* Background Canvas Layer */
#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Ensure it's above body bg but below app */
    pointer-events: none;
}

/* Base Styles for .app-container */
.app-container {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    z-index: 10;
    overflow: hidden;
    animation: containerInit 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* FIXED DESKTOP LAYOUT (Scale-to-Fit) */
@media (min-width: 900px) {
    .app-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        width: 1600px;
        height: 1000px;
        border-radius: 24px;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        grid-template-columns: 1fr 1fr;
    }
}


/* Typography */
h1,
h2,
h3 {
    font-weight: 200;
    /* Thin, futuristic look */
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* Reduced gap */
    margin-bottom: 2rem;
    /* Reduced bottom margin */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
    /* Reduced padding */
}

.brand-logo {
    font-size: 2.5rem;
    /* Slightly bigger logo */
    filter: drop-shadow(0 0 10px var(--primary));
}

.brand-text {
    --font-heading: 'Space Mono', 'Consolas', 'Courier New', monospace;
    --font-body: 'Inter', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary-dim);
}

.brand-title {
    font-size: 2.2rem;
    /* Increased for 1920px */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.brand-subtitle {
    font-size: 1.8rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 2px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* LEft Panel - Inputs */
.input-panel {
    padding: 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.section-label {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin: 2rem 0 1rem;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-label::after {
    content: '';
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
}

.input-group {
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    /* Lighter background for inputs */
    padding: 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Gray border instead of transparent */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.input-group::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.3s;
}

.input-group:focus-within {
    background: rgba(0, 255, 163, 0.03);
    border-color: var(--border-glow);
    box-shadow: 0 0 30px -10px var(--primary-dim);
}

.input-group:focus-within::before {
    opacity: 1;
}

.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

label {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-weight: 500;
    /* Increased weight for better readability */
}

input[type="number"],
select {
    background: transparent;
    border: none;
    color: var(--text-main);
    /* Dark text for inputs */
    font-family: 'Space Mono', monospace;
    font-size: 1.3rem;
    text-align: left;
    outline: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* Darker border for visibility */
    transition: all 0.3s;
    width: 200px;
}

.input-right {
    text-align: right !important;
    /* Force right alignment for numbers */
}

/* Fix option direction */
select option {
    direction: ltr;
    text-align: left;
}

input[type="number"]:focus,
select:focus {
    border-bottom-color: var(--primary);
    text-shadow: 0 0 1px var(--primary-dim);
    /* Reduced glow for light mode */
    background: rgba(255, 255, 255, 0.5);
}

/* ... (Checkboxes) ... */
/* ... */
/* Action Buttons */
.action-area {
    margin-top: 1rem;
    display: flex;
    gap: 10px;
}

.btn-tech {
    flex: 1;
    background: rgba(0, 255, 163, 0.05);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

/* Custom Checkboxes */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.checkbox-card {
    position: relative;
    cursor: pointer;
}

.checkbox-content {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: all 0.3s;
    font-size: 1.3rem;
    color: var(--text-muted);
}

.checkbox-card input {
    position: absolute;
    opacity: 0;
}

.checkbox-card input:checked+.checkbox-content {
    background: rgba(0, 255, 163, 0.1);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 15px var(--primary-dim);
}

/* RIGHT PANEL */
.vis-panel {
    padding: 2.5rem;
    overflow-y: auto;
    position: relative;
}

.dashboard-grid {
    display: grid;
    gap: 2rem;
}

/* Score Circle */
.score-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
    background: radial-gradient(circle at center, rgba(0, 255, 163, 0.05) 0%, transparent 70%);
}

.score-circle-container {
    position: relative;
    width: 320px;
    height: 320px;
}

.score-svg {
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 10px var(--primary-dim));
}

.score-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.05);
    stroke-width: 4;
}

.score-path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out, stroke 0.5s;
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-val {
    font-family: 'Space Mono', monospace;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--text-main);
    /* Dark text for score */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    /* White glow instead of dark */
    line-height: 1;
}

.score-label {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Impact Items */
.impact-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.impact-item {
    background: rgba(255, 255, 255, 0.5);
    padding: 1.4rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
}

.impact-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.impact-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.impact-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Space Mono', monospace;
}

.impact-desc {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Simulator */
.simulator {
    margin-top: 1.5rem;
    background: linear-gradient(90deg, var(--primary-dim) 0%, rgba(0, 0, 0, 0) 100%);
    border-left: 2px solid var(--primary);
    padding: 1.5rem;
    border-radius: 0 16px 16px 0;
}

.sim-output {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 1rem;
    font-weight: 300;
}

.highlight {
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary-dim);
    font-weight: 700;
}

/* Range Slider Styled */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    /* Darker track */
    border-radius: 2px;
    margin: 10px 0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 6px;
    border-radius: 2px;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 10px var(--primary);
    margin-top: -8px;
}

/* Badges */
.badges-area {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.badge {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--warning);
    color: #b45309;
    /* Dark Amber */
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

/* Responsive */
/* Mobile Reversion */
@media (max-width: 900px) {
    .app-container {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;
        border-radius: 0;
        grid-template-columns: 1fr;
        overflow-y: auto;
        transform: none !important;
        /* Ensure no JS interference */
    }

    /* Restore Original Mobile Font Sizes & Spacing */
    body {
        font-size: 16px;
        overflow-y: auto;
    }

    .brand-title {
        font-size: 1.6rem;
    }

    .brand-subtitle {
        font-size: 1rem;
    }

    .section-label {
        font-size: 0.85rem;
    }

    label {
        font-size: 0.9rem;
    }

    input[type="number"],
    select {
        font-size: 1.1rem;
    }

    .checkbox-content {
        font-size: 0.8rem;
    }

    .score-val {
        font-size: 3.5rem;
    }

    .score-label {
        font-size: 0.8rem;
    }

    .impact-val {
        font-size: 1.2rem;
    }

    .impact-desc {
        font-size: 0.75rem;
    }

    .sim-output {
        font-size: 1.1rem;
    }

    .btn-tech {
        font-size: 1rem;
    }

    .input-panel {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
    }

    .vis-panel {
        height: auto;
        overflow: visible;
        padding: 1.5rem;
    }

    .impact-items {
        grid-template-columns: 1fr;
    }
}

@keyframes containerInit {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Action Buttons */
.action-area {
    margin-top: 1rem;
    display: flex;
    gap: 10px;
}

.btn-tech {
    flex: 1;
    background: rgba(0, 255, 163, 0.05);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-tech:hover {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 20px var(--primary-dim);
}

.btn-tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.btn-tech:hover::before {
    left: 100%;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-content {
    background: #ffffff;
    border: 1px solid var(--primary);
    box-shadow: 0 0 50px rgba(5, 150, 105, 0.2);
    width: 90%;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.modal-overlay.modal-visible {
    display: flex;
    opacity: 1;
}

.modal-overlay.modal-visible .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.close-btn:hover {
    color: var(--primary);
}

/* Typewriter Effect Text */
.ai-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
    /* Dark text */
    white-space: pre-wrap;
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
}

.ai-typing-cursor::after {
    content: '▋';
    animation: blink 1s infinite;
    color: var(--primary);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}