:root {
    --bg-dark: #0d1117;
    --card-bg: #161b22;
    --border-color: #30363d;
    --text-light: #e6edf3;
    --text-muted: #8b949e; 
    --accent-main: #ffc300;
    --accent-blue: #38bdf8;
}

body {	
    background-color: var(--bg-dark); 
    color: var(--text-light); 
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.tool-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
    border-radius: 0.75rem;
}

input, select {
    background: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    outline: none;
    transition: all 0.2s;
}

input:focus, select:focus {
    border-color: var(--accent-main) !important;
    box-shadow: 0 0 0 2px rgba(255, 195, 0, 0.2);
}

.accent-border {
    border-left: 4px solid var(--accent-main);
}


footer {
    margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--card-bg);
    font-size: 0.9em; color: #6a737d; text-align: center; 
     display: flex; justify-content: center; align-items: center; gap: 15px;
}