/* Theme CSS Variables Integration */
:root {
    --main-color: var(--theme-primary, #00d4ff);
    --bg-primary: var(--theme-background, #0a0a0f);
    --bg-secondary: var(--theme-background-secondary, #12121a);
    --bg-tertiary: var(--theme-background-tertiary, #1a1a24);
    --surface: var(--theme-surface, #1e1e28);
    --surface-hover: var(--theme-surface-hover, #252530);
    --border-color: var(--theme-border, #2a2a3a);
    --border-light: var(--theme-border-light, #3a3a4a);
    --text-primary: var(--theme-text-primary, #ffffff);
    --text-secondary: var(--theme-text-secondary, #b0b0c0);
    --text-muted: var(--theme-text-muted, #707080);
    --accent-color: var(--theme-accent, #ffcc00);
    --success-color: var(--theme-success, #00ff88);
    --error-color: var(--theme-error, #ff3355);
    --warning-color: var(--theme-warning, #ffaa00);
    --secondary-color: var(--theme-secondary, #ff3366);
    --card-bg: var(--theme-card-bg, #16161e);
    --card-border: var(--theme-card-border, #242432);
    --input-bg: var(--theme-input-bg, #12121a);
    --input-border: var(--theme-input-border, #2a2a3a);
    --input-focus: var(--theme-input-focus, #00d4ff);
    --shadow-color: var(--theme-shadow, #00000080);
    --overlay-color: var(--theme-overlay, #000000cc);
    --gradient-main: var(--gradient-main, linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%));
    --gradient-card: var(--gradient-card, linear-gradient(145deg, #1e1e28 0%, #16161e 100%));
    --gradient-button: var(--gradient-button-primary, linear-gradient(135deg, #00d4ff 0%, #0099cc 100%));
    --radius-sm: var(--radius-sm, 4px);
    --radius-md: var(--radius-md, 8px);
    --radius-lg: var(--radius-lg, 12px);
    --radius-xl: var(--radius-xl, 16px);
    --shadow-sm: var(--shadow-sm, 0 2px 8px #00000040);
    --shadow-md: var(--shadow-md, 0 4px 16px #00000060);
    --shadow-lg: var(--shadow-lg, 0 8px 32px #00000080);
}

body {
    background: var(--gradient-main);
    color: var(--text-primary);
    font-family: var(--theme-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

a {
    color: var(--main-color);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--theme-primary-hover, #00e8ff);
}

.main-btn {
    background: var(--gradient-button);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.main-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-primary, 0 0 20px #00d4ff40);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}
.card:hover {
    border-color: var(--main-color);
    background: var(--surface-hover);
    box-shadow: var(--shadow-glow-primary, 0 0 20px #00d4ff40);
}
.card.selected {
    border-color: var(--main-color);
    background: var(--theme-primary-light, #00d4ff33);
}

input[type="text"],
input[type="number"],
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 8px 12px;
    transition: border-color 0.2s;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-focus);
}

footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.terrormark {
    background: #ff5722;
}
.counterterrormark {
    background: #2196f3;
}

.msg {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}