@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --hoi4-red: #c8102e;
}

body {
    background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.header-font {
    font-family: 'Press Start 2P', system-ui;
}

.hoi4-panel {
    background: #1f1f1f;
    border: 4px solid #c8102e;
    box-shadow: 0 0 0 8px #111111;
}

.preview-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #0a0a0a;
    border: 2px dashed #c8102e;
    color: #00ff9d;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}

.tab-active {
    border-bottom: 4px solid #c8102e;
    color: #c8102e;
}

.input-label {
    color: #c8102e;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Better focus states */
input:focus, select:focus, textarea:focus {
    border-color: #00ff9d;
    box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.2);
    outline: none;
}

/* Scrollbar styling for preview */
.preview-box::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.preview-box::-webkit-scrollbar-thumb {
    background: #c8102e;
    border-radius: 4px;
}