/* ==========================================================================
   QUANTLOCKER - Master Stylesheet
   Theme: "The Market Edge" (Dark Mode)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Core Palette */
    --bg-charcoal: #1E1E24;
    --surface-dark: #2A2A32;
    --surface-hover: #35353F;
    --primary-emerald: #00A86B;
    --accent-lime: #D4FF14;
    --danger-red: #EF4444;

    /* Typography Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #9CA3AF;

    /* Borders & Structural */
    --border-color: #374151;
    --radius-sm: 4px;
    --radius-md: 8px;
}

* {
    box-sizing: border-box;
    /* Fixes input field alignment */
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-charcoal);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================= */
.card {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   FORMS & CONTROLS
   ========================================================================== */
.form-group {
    margin-bottom: 25px;
    /* Increased spacing so fields don't touch */
    text-align: left;
    width: 100%;
}

label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Updated to include number, time, email, textarea for unified size/padding */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="email"],
textarea,
select {
    width: 100%;
    display: block;
    padding: 12px 14px;
    background-color: var(--bg-charcoal);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-emerald);
    box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.2);
}

/* ==========================================================================
   BUTTONS & ANIMATIONS
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 10px 16px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    /* Smooth transition for animations */
    font-size: 0.875rem;
}

.btn-execute {
    background-color: var(--accent-lime);
    color: var(--bg-charcoal);
}

/* Mouseover / Hover Animation */
.btn-execute:hover {
    background-color: #e0ff4d;
    transform: translateY(-2px);
    /* Lifts the button up */
    box-shadow: 0 4px 12px rgba(212, 255, 20, 0.3);
    /* Casts a glow */
}

/* OnClick / Active Animation */
.btn-execute:active {
    transform: translateY(1px);
    /* Pushes the button down into the screen */
    box-shadow: none;
    /* Removes glow on click */
}