*,
*::before,
*::after {
     box-sizing: border-box;
}

:root {
     --primary: #4f46e5;
     --succes: #16a34a;
     --danger: #dc2626;
     --bg: #f8fafc;
     --card: #ffffff;
     --text: #1e293b;
}

body {
     font-family: system-ui, -apple-system, sans-serif;
     background-color: var(--bg);
     color: var(--text);
     max-width: 700px;
     margin: 2rem auto;
     padding: 0 1rem;
}

.box {
     flex: 1;
     background: var(--card);
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     margin-top: 20px;
     margin-bottom: 1.5rem;
}

h2 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     border-bottom: 2px solid #e2e8f0;
     font-size: 1.25rem;
}

.flex {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1rem;
     flex-direction: row;
}

input {
     flex: 1;
     width: 100%;
     padding: 0.6rem;
     border: 1px solid #cbd5e1;
     border-radius: 4px;
     font-size: 1rem;
}

button {
     background: var(--primary);
     color: white;
     border: none;
     padding: 0.6rem 1.2rem;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
     letter-spacing: 1.5px;
     white-space: nowrap;
}

button:hover {
     opacity: 0.9;
}

.secondary-btn {
     letter-spacing: 1.5px;
     background: #64748b;
     margin-top: 0.5rem;
     width: 100%;
}

/* Styl pro knihovnu / tabulku */
.table-container {
     max-height: 250px;
     overflow-y: auto;
     margin-top: 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 6px;
     -webkit-overflow-scrolling: touch;
     /* Hladké scrollování na iPhonech */
}

table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
}

th,
td {
     padding: 0.75rem;
     border-bottom: 1px solid #e2e8f0;
}

th {
     background: #f1f5f9;
     position: sticky;
     top: 0;
}

.delete-btn {
     background: var(--danger);
     padding: 0.3rem 0.6rem;
     font-size: 0.85rem;
}

.test-word {
     font-size: 1.8rem;
     font-weight: bold;
     text-align: center;
     margin: 1.5rem 0;
     color: var(--primary);
}

.result {
     font-weight: bold;
     text-align: center;
     margin-top: 1rem;
     padding: 0.75rem;
     border-radius: 4px;
     font-size: 1.1rem;
}

.correct {
     background: #dcfce7;
     color: var(--succes);
}

.wrong {
     background: #fee2e2;
     color: var(--danger);
}

.hidden {
     display: none;
}