:root {
    --cms-color-brand: #4e4cc8;
    --cms-color-brand-hover: #3e3aa0;
    --cms-color-link: #2458c9;
    --cms-color-link-hover: #173f99;
    --cms-color-surface: #ffffff;
    --cms-color-surface-muted: #f8f9fa;
    --cms-color-page: #e3e5f3;
    --cms-color-border: #d7dbe3;
    --cms-color-border-strong: #b8bfcc;
    --cms-color-text: #252a32;
    --cms-color-text-muted: #596273;
    --cms-color-success: #238636;
    --cms-color-danger: #c92a2a;
    --cms-color-warning: #b7791f;
    --cms-color-info: #0f6cbd;
    --cms-space-1: 4px;
    --cms-space-2: 8px;
    --cms-space-3: 12px;
    --cms-space-4: 16px;
    --cms-space-5: 20px;
    --cms-space-6: 24px;
    --cms-space-8: 32px;
    --cms-radius-sm: 4px;
    --cms-radius-md: 6px;
    --cms-radius-lg: 8px;
    --cms-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
    --cms-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.10);
    --cms-control-height: 42px;
    --cms-control-border: 1px solid var(--cms-color-border);
    --cms-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--cms-color-text);
    font-family: var(--cms-font-family);
}

a {
    color: var(--cms-color-link);
}

a:hover {
    color: var(--cms-color-link-hover);
}

.container {
    border: 1px solid rgba(78, 76, 200, 0.08);
}

.cms-card {
    background: var(--cms-color-surface);
    border: 1px solid var(--cms-color-border);
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-sm);
}

.cms-auth-card {
    max-width: 420px;
    margin: 56px auto;
    padding: var(--cms-space-8);
}

.cms-auth-card h1 {
    margin: 0 0 var(--cms-space-8);
    text-align: center;
    font-size: 26px;
    line-height: 1.2;
}

.cms-auth-footer {
    margin-top: var(--cms-space-5);
    text-align: center;
}

.cms-auth-footer p {
    margin-bottom: 0;
}

.form-group {
    margin-bottom: var(--cms-space-5);
}

label {
    color: var(--cms-color-text);
    font-size: 14px;
    line-height: 1.35;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
    width: 100%;
    min-height: var(--cms-control-height);
    padding: 9px 11px;
    border: var(--cms-control-border);
    border-radius: var(--cms-radius-sm);
    background: var(--cms-color-surface);
    color: var(--cms-color-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
}

input[type="file"] {
    padding: 8px 11px;
}

textarea {
    min-height: 112px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(78, 76, 200, 0.18);
    border-color: var(--cms-color-brand);
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
textarea[readonly] {
    background-color: #eef1f6;
    color: var(--cms-color-text-muted);
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cms-color-brand);
}

.btn,
.button,
.action-button,
.modal-btn,
.quiz-status-button,
.export-btn,
.btn-filter,
.btn-reset,
button {
    min-height: 38px;
    border-radius: var(--cms-radius-sm);
    border: 1px solid transparent;
    font-family: var(--cms-font-family);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

button,
.btn,
.button,
.action-button,
.modal-btn,
.btn-primary,
.button-primary,
.btn-filter {
    background-color: var(--cms-color-brand);
    border-color: var(--cms-color-brand);
    color: #ffffff;
}

button:hover,
.btn:hover,
.button:hover,
.action-button:hover,
.modal-btn:hover,
.btn-primary:hover,
.button-primary:hover,
.btn-filter:hover {
    background-color: var(--cms-color-brand-hover);
    border-color: var(--cms-color-brand-hover);
    color: #ffffff;
    text-decoration: none;
}

.btn-secondary,
.button-secondary,
.btn-reset,
.view-button {
    background-color: #667085;
    border-color: #667085;
    color: #ffffff;
}

.btn-secondary:hover,
.button-secondary:hover,
.btn-reset:hover,
.view-button:hover {
    background-color: #4b5565;
    border-color: #4b5565;
}

.btn-success,
.button-success,
.complete-button,
.write-button {
    background-color: var(--cms-color-success);
    border-color: var(--cms-color-success);
    color: #ffffff;
}

.btn-success:hover,
.button-success:hover,
.complete-button:hover,
.write-button:hover {
    background-color: #1a7f37;
    border-color: #1a7f37;
}

.btn-danger,
.button-danger,
.export-button {
    background-color: var(--cms-color-danger);
    border-color: var(--cms-color-danger);
    color: #ffffff;
}

.btn-danger:hover,
.button-danger:hover,
.export-button:hover {
    background-color: #a61e22;
    border-color: #a61e22;
}

.btn-warning,
.button-warning,
.edit-button {
    background-color: #f2b84b;
    border-color: #f2b84b;
    color: #211a08;
}

.btn-warning:hover,
.button-warning:hover,
.edit-button:hover {
    background-color: #d99a22;
    border-color: #d99a22;
    color: #211a08;
}

.btn-info,
.button-info,
.export-btn {
    background-color: var(--cms-color-info);
    border-color: var(--cms-color-info);
    color: #ffffff;
}

.btn-info:hover,
.button-info:hover,
.export-btn:hover {
    background-color: #0b5cab;
    border-color: #0b5cab;
}

.btn-block {
    display: block;
    width: 100%;
}

.cms-inline-form {
    display: inline-block;
    margin-left: var(--cms-space-2);
}

.cms-inline-form:first-child {
    margin-left: 0;
}

.question-preview-link,
.answer-link {
    color: var(--cms-color-link);
    font-weight: 400;
    text-decoration: none;
}

.action-link {
    color: var(--cms-color-link);
    font-weight: 600;
    text-decoration: none;
}

.action-link:hover,
.question-preview-link:hover,
.answer-link:hover {
    color: var(--cms-color-link-hover);
    text-decoration: underline;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.status-unwritten,
.status-incomplete {
    background-color: #eef1f6;
    color: #475467;
}

.status-claimed,
.status-warning {
    background-color: #fff4d6;
    color: #7a4f01;
}

.status-pending {
    background-color: #dff4ff;
    color: #075985;
}

.status-rewrite,
.status-unusable {
    background-color: #ffe3e3;
    color: #9b1c1c;
}

.status-edited,
.status-complete,
.status-success {
    background-color: #dcfce7;
    color: #166534;
}

.status-production {
    background-color: #e0e7ff;
    color: #3730a3;
}

.filters-section {
    background: var(--cms-color-surface-muted);
    border: 1px solid var(--cms-color-border);
    border-radius: var(--cms-radius-lg);
    padding: var(--cms-space-5);
    margin-bottom: var(--cms-space-8);
}

.filters-form {
    display: flex;
    gap: var(--cms-space-5);
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--cms-space-2);
}

.checkbox-group {
    display: flex;
    gap: var(--cms-space-4);
    align-items: center;
    min-height: var(--cms-control-height);
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-space-2);
    font-weight: 500;
}

.filter-actions {
    display: flex;
    gap: var(--cms-space-2);
    align-items: flex-end;
}

.collapsible-section,
.daily-section {
    background: var(--cms-color-surface);
    border: 1px solid var(--cms-color-border);
    border-radius: var(--cms-radius-lg);
    margin-bottom: var(--cms-space-8);
    overflow: hidden;
    box-shadow: var(--cms-shadow-sm);
}

.section-header,
.daily-header {
    background: var(--cms-color-surface-muted);
    border-bottom: 1px solid var(--cms-color-border);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--cms-space-2);
    margin: 0;
    padding: var(--cms-space-4) var(--cms-space-5);
    color: var(--cms-color-text);
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    user-select: none;
}

.section-header:hover {
    background: #eef1f6;
}

.toggle-icon {
    color: var(--cms-color-text-muted);
    font-size: 14px;
}

.section-content {
    padding: var(--cms-space-5);
}

.table-container {
    overflow-x: auto;
}

.questions-table {
    border: 1px solid var(--cms-color-border);
    box-shadow: none;
}

.questions-table th {
    background: var(--cms-color-surface-muted);
    color: var(--cms-color-text);
    white-space: nowrap;
}

.questions-table td {
    vertical-align: top;
}

.table-column-position,
.table-column-difficulty {
    width: 64px;
}

.table-column-question {
    width: 260px;
}

.table-column-answer {
    width: 128px;
}

.table-column-user,
.table-column-actions {
    width: 112px;
}

.daily-info {
    display: flex;
    gap: var(--cms-space-5);
    align-items: center;
    flex-wrap: wrap;
}

.daily-info span {
    color: var(--cms-color-text-muted);
    font-size: 14px;
}

.view-daily-link {
    margin-left: auto;
}

.pagination,
.page-link {
    font-family: var(--cms-font-family);
}

.page-link.active,
.pagination .current {
    background-color: var(--cms-color-brand);
    border-color: var(--cms-color-brand);
}

@media (max-width: 720px) {
    .cms-auth-card {
        margin: var(--cms-space-5) auto;
        padding: var(--cms-space-6);
    }

    .filters-form,
    .filter-actions,
    .checkbox-group {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-actions .btn,
    .filter-actions button,
    .filter-actions a {
        width: 100%;
        text-align: center;
    }
}