:root {
    --bg: #0f0f0f;
    --bg2: #1a1a1a;
    --text: #e1e1e1;
    --accent: #3bd1ff;
    --card: #181818;
    --border: #2a2a2a;
}

body {
    margin: 0;
    background: var(--bg);
    font-family: Arial, sans-serif;
    color: var(--text);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 900px;
    margin: auto;
    text-align: center;
    padding: 40px 20px;
}

header {
    text-align: center;
    padding: 40px 20px;
}

h1 {
    font-size: 2rem;
    color: var(--accent);
}

p {
    color: #bbb;
}

/* Info User ID */
.info {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #bbbbbb;
}
.info .highlight {
    color: var(--accent);
    font-weight: bold;
}

/* Fiszki */
.flashcard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    font-size: 1.5rem;
    transition: transform 0.2s ease, background 0.2s ease;
}

.flashcard:hover {
    transform: scale(1.03);
    background: var(--bg2);
}

.flashcard .front {
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.flashcard .front .small {
    font-size: 0.7rem;
    color: #aaaaaa;
    margin-top: 5px;
}

.flashcard .back {
    color: #cccccc;
}

/* Formularze */
.button-form, .select-form {
    margin: 12px 0;
}

button {
    background-color: var(--accent);
    color: var(--bg);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    background-color: #2bb0e0;
}

select, input[type=text] {
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background-color: var(--card);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 8px;
}

/* Komunikat po zapisaniu / błędzie */
.saved-msg {
    color: #4caf50;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Link */
.links a {
    margin: 6px;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    padding: 6px 14px;
    border-radius: 4px;
    transition: 0.2s;
}
.links a:hover {
    background: var(--accent);
    color: #000;
}