/* * Admin shell + dashboard. Light theme is set on by the admin layout. */ body.admin { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } /* ── Sidebar ────────────────────────────────────────────── */ .admin-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; padding: 22px 16px 18px; position: sticky; top: 0; height: 100vh; } .admin-sidebar__brand { padding: 0 4px 22px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 16px; } .admin-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .admin-sidebar__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--color-text-muted); transition: background 0.15s ease, color 0.15s ease; } .admin-sidebar__item:hover { background: var(--color-card-alt); color: var(--color-text); } .admin-sidebar__item--active, .admin-sidebar__item--active:hover { background: var(--color-accent-dim); color: var(--color-accent); } .admin-sidebar__item--disabled { opacity: 0.5; pointer-events: none; } .admin-sidebar__icon { font-size: 14px; width: 16px; text-align: center; } .admin-sidebar__theme { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding: 9px 12px; background: transparent; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .admin-sidebar__theme:hover { background: var(--color-card-alt); color: var(--color-text); border-color: var(--color-border); } .admin-sidebar__theme-glyph { font-size: 14px; width: 16px; text-align: center; } .admin-sidebar__user { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "avatar meta" "logout logout"; align-items: center; gap: 8px 10px; padding: 12px 8px 0; border-top: 1px solid var(--color-border-subtle); margin-top: 12px; } .admin-sidebar__avatar { grid-area: avatar; width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .admin-sidebar__user-meta { grid-area: meta; min-width: 0; } .admin-sidebar__user-name { font-size: 13px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-sidebar__user-role { font-size: 11px; color: var(--color-text-muted); } .admin-sidebar__logout-form { grid-area: logout; } .admin-sidebar__logout { width: 100%; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; } .admin-sidebar__logout:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ── Main column ─────────────────────────────────────────── */ .admin__main { padding: 32px; background: var(--color-bg); min-height: 100vh; overflow-x: hidden; } .admin__flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid; } .admin__flash--notice { background: rgba(16, 185, 129, 0.08); color: #047857; border-color: rgba(16, 185, 129, 0.4); } .admin__flash--alert { background: rgba(239, 68, 68, 0.08); color: #B91C1C; border-color: rgba(239, 68, 68, 0.4); } /* ── Page header ────────────────────────────────────────── */ .admin-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .admin-page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } .admin-page-header p { font-size: 14px; margin-top: 4px; } .admin-page-header__action { margin: 0; } /* ── Quiz grid ───────────────────────────────────────────── */ .quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .quiz-card { padding: 20px; border-radius: 14px; } .quiz-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .quiz-card__updated { font-size: 12px; color: var(--color-text-muted); } .quiz-card__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--color-text); } .quiz-card__meta { font-size: 13px; color: var(--color-text-muted); margin-bottom: 16px; } .quiz-card__actions { display: flex; gap: 8px; align-items: center; } .quiz-card__icon-btn { background: transparent; border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 12px; font-size: 12px; color: var(--color-text-muted); cursor: pointer; margin-left: auto; font-weight: 500; } .quiz-card__icon-btn:hover { color: var(--color-danger); border-color: var(--color-danger); } .quiz-grid__new-form { margin: 0; height: 100%; } .quiz-grid__new { width: 100%; min-height: 100%; background: transparent; border: 2px dashed var(--color-border); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-muted); font-weight: 500; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .quiz-grid__new:hover { border-color: var(--color-accent); color: var(--color-accent); } .quiz-grid__new-plus { font-size: 24px; line-height: 1; } /* ── Empty state ────────────────────────────────────────── */ .quiz-empty { text-align: center; padding: 64px 24px; background: var(--color-card); border: 1px dashed var(--color-border); border-radius: 16px; } .quiz-empty__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--color-accent-dim); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .quiz-empty h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .quiz-empty p { color: var(--color-text-muted); margin-bottom: 20px; } .quiz-empty__form { display: inline-block; margin: 0; } @media (max-width: 720px) { body.admin { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } } /* ── Quiz editor ───────────────────────────────────────── */ .quiz-editor { max-width: 760px; margin: 0 auto; padding: 0 0 80px; } .quiz-editor__top { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-card); margin-bottom: 16px; } .quiz-editor__back { font-size: 22px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); border-radius: 8px; } .quiz-editor__back:hover { background: var(--color-card-alt); color: var(--color-text); } .quiz-editor__title { flex: 1; font-size: 22px; font-weight: 700; display: inline-flex; cursor: text; } .quiz-editor__title-input { font-size: 22px; font-weight: 700; padding: 6px 12px; } .quiz-editor__top-actions { display: flex; gap: 10px; align-items: center; } .quiz-editor__publish-form { margin: 0; } .quiz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-card); margin-bottom: 24px; overflow: hidden; } .quiz-stats__cell { padding: 14px 18px; border-right: 1px solid var(--color-border-subtle); } .quiz-stats__cell:last-child { border-right: none; } .quiz-stats__label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .quiz-stats__value { font-size: 22px; font-weight: 700; } .quiz-editor__list { display: flex; flex-direction: column; gap: 24px; } /* Round group */ .round-group { border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-card); padding: 16px; } .round-group__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .round-group__title-form { flex: 1; margin: 0; } .round-group__title-input { width: 100%; background: transparent; border: 1px solid transparent; font-size: 14px; font-weight: 600; color: var(--color-text); padding: 6px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; } .round-group__title-input:hover { border-color: var(--color-border-subtle); } .round-group__title-input:focus { border-color: var(--color-accent); background: var(--color-card-alt); } .round-group__remove { background: transparent; border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--color-text-muted); cursor: pointer; } .round-group__remove:hover { color: var(--color-danger); border-color: var(--color-danger); } .round-group__list { display: flex; flex-direction: column; gap: 8px; min-height: 8px; } .round-group__add-form { margin-top: 8px; } .round-group__add { width: 100%; background: transparent; border: 1px dashed var(--color-border); border-radius: 12px; padding: 10px; color: var(--color-text-muted); font-size: 13px; cursor: pointer; } .round-group__add:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Question row */ .question-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: var(--color-card); transition: border-color 0.15s ease; } .question-row:hover { border-color: var(--color-border); } .question-row.is-dragging { opacity: 0.4; } .question-row__handle { cursor: grab; color: var(--color-text-faint); font-size: 14px; letter-spacing: -2px; user-select: none; } .question-row__num { font-size: 11px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 1px; width: 28px; } .question-row__body { flex: 1; min-width: 0; } .question-row__text { display: block; font-size: 14px; color: var(--color-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .question-row__text:hover { color: var(--color-accent); } .question-row__meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .question-row__delete { background: transparent; border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--color-text-faint); cursor: pointer; } .question-row__delete:hover { color: var(--color-danger); border-color: var(--color-danger); } .quiz-editor__add-round-form { margin: 0; } .quiz-editor__add-round { width: 100%; background: transparent; border: 2px dashed var(--color-border); border-radius: 14px; padding: 16px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; font-weight: 500; } .quiz-editor__add-round:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ── Question editor ──────────────────────────────────── */ .question-editor { max-width: 960px; margin: 0 auto; } .question-editor__top { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--color-border-subtle); border-radius: 14px; background: var(--color-card); margin-bottom: 24px; } .question-editor__heading { flex: 1; font-size: 22px; font-weight: 700; } .question-editor__layout { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; } .question-editor__main { display: flex; flex-direction: column; gap: 20px; } .question-editor__field { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 880px) { .question-editor__layout { grid-template-columns: 1fr; } } .type-selector { display: flex; flex-wrap: wrap; gap: 8px; } .type-selector__pill { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); cursor: pointer; } .type-selector__pill.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .mc-options { display: flex; flex-direction: column; gap: 8px; } .mc-option { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--color-border-subtle); border-radius: 10px; } .mc-option.is-correct { border-color: var(--color-success); background: rgba(16, 185, 129, 0.06); } .mc-option__letter { width: 36px; height: 36px; border-radius: 8px; background: var(--color-card-alt); border: 1.5px solid var(--color-border); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text); flex-shrink: 0; } .mc-option.is-correct .mc-option__letter { background: var(--color-success); border-color: var(--color-success); color: #fff; } .mc-option__text { flex: 1; } .tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tf-tile { background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: 14px; padding: 28px; font-size: 22px; font-weight: 700; color: var(--color-text); cursor: pointer; } .tf-tile.is-selected { background: rgba(16, 185, 129, 0.1); border-color: var(--color-success); color: var(--color-success); } .media-form__drop { display: block; border: 2px dashed var(--color-border); border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .media-form__drop:hover { border-color: var(--color-accent); background: rgba(99,102,241,0.04); } .media-form__placeholder { color: var(--color-text-muted); font-size: 14px; } .media-form__placeholder span { font-size: 32px; display: block; margin-bottom: 8px; color: var(--color-text-faint); } .media-form__preview { max-height: 240px; max-width: 100%; margin: 0 auto; border-radius: 8px; display: block; } .media-form__audio { width: 100%; } .question-sidebar { border: 1px solid var(--color-border-subtle); border-radius: 14px; padding: 20px; background: var(--color-card); position: sticky; top: 24px; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); background: var(--color-card-alt); border: 1px solid var(--color-border); cursor: pointer; user-select: none; } .chip:has(input:checked), .chip.is-selected { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .chip input { display: none; } .question-sidebar__summary p { font-size: 14px; color: var(--color-text); margin-top: 4px; } /* ── Universal photo toggle (story 12) ─────────────────── */ .photo-toggle { margin: 12px 0; } .photo-toggle__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-card, #fff); } .photo-toggle__label { display: flex; align-items: center; gap: 8px; font-size: 14px; } .photo-toggle__pill { border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .photo-toggle__pill.is-on { background: var(--color-accent-dim); color: var(--color-accent); border-color: var(--color-accent); } .photo-toggle__zone { margin-top: 12px; } .photo-toggle__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--color-border); border-radius: 12px; padding: 28px; text-align: center; background: var(--color-border-subtle, transparent); cursor: pointer; color: var(--color-text-muted); transition: border-color 0.15s ease; } .photo-toggle__drop:hover { border-color: var(--color-accent); } .photo-toggle__drop-text { font-size: 14px; font-weight: 500; color: var(--color-text); } .photo-toggle__drop-sub { font-size: 12px; color: var(--color-text-muted); } .photo-toggle__preview { max-height: 220px; max-width: 100%; border-radius: 8px; display: block; } /* ────────────────────────────────────────────────────────────────────── * Import questions (story 18) * ────────────────────────────────────────────────────────────────────── */ .qz-import { max-width: 1200px; margin: 0 auto; padding: 32px; } .qz-import__top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .qz-import__title { font-size: 22px; font-weight: 700; } .qz-import__layout { display: grid; grid-template-columns: 420px 1fr; gap: 16px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; min-height: 600px; } .qz-import__left { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--color-border); } .qz-import__tabs { display: flex; align-items: center; gap: 16px; } .qz-import__tab { padding-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; } .qz-import__tab input[type="radio"] { display: none; } .qz-import__tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); } .qz-import__example-btn { margin-left: auto; background: transparent; border: none; color: var(--color-accent); font-size: 13px; font-weight: 600; cursor: pointer; } .qz-import__hint { font-size: 12px; color: var(--color-text-muted); } .qz-import__textarea { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: #0A0F1E; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; resize: none; min-height: 240px; } .qz-import__error { background: rgba(239, 68, 68, 0.13); border: 1px solid rgba(239, 68, 68, 0.27); color: var(--color-danger); font-size: 12px; padding: 10px 14px; border-radius: 10px; } .qz-import__parse-btn { background: var(--color-accent); color: #fff; border: none; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 10px; cursor: pointer; } .qz-import__right { padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .qz-import__empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--color-text-muted); } .qz-import__empty-icon { font-size: 32px; } .qz-import__empty-title { font-size: 14px; font-weight: 600; color: var(--color-text); } .qz-import__empty-hint { font-size: 12px; max-width: 320px; } .qz-import__empty-hint code { background: var(--color-card-alt); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11px; } .qz-import__preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .qz-import__commit-form { padding: 0; margin: 0; } .qz-import__commit-btn { background: var(--color-success); color: #fff; border: none; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; } .qz-import__commit-btn:disabled { opacity: 0.5; cursor: not-allowed; } .qz-import__warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--color-warning); font-size: 12px; padding: 8px 12px; border-radius: 8px; } .qz-import__rows { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; } .qz-import__row { display: flex; gap: 12px; padding: 12px; background: var(--color-card-alt); border: 1px solid var(--color-border); border-radius: 10px; } .qz-import__row.is-invalid { border-color: var(--color-danger); } .qz-import__badge { flex-shrink: 0; width: 30px; height: 30px; background: color-mix(in srgb, var(--badge-color) 20%, transparent); border: 1px solid color-mix(in srgb, var(--badge-color) 33%, transparent); color: var(--badge-color); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .qz-import__row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .qz-import__row-text { font-size: 14px; font-weight: 700; line-height: 1.4; } .qz-import__row-tags { display: flex; gap: 6px; flex-wrap: wrap; } .qz-import__tag { font-size: 11px; background: var(--color-card); padding: 2px 8px; border-radius: 99px; color: var(--color-text-muted); } .qz-import__tag--success { color: var(--color-success); background: rgba(16, 185, 129, 0.13); } .qz-import__row-errors { font-size: 11px; color: var(--color-danger); }