:root { --radius: 14px; --radius-sm: 10px; --font-sans: "DM Sans", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; } [data-theme="dark"] { color-scheme: dark; --bg: #0c0f14; --bg-elevated: #141922; --border: rgba(255, 255, 255, 0.08); --text: #e8ecf1; --muted: #8b95a8; --accent: #3d9cf0; --accent-dim: rgba(61, 156, 240, 0.18); --accent-hover-border: rgba(61, 156, 240, 0.45); --success: #3ecf8e; --success-dim: rgba(62, 207, 142, 0.15); --danger: #f07178; --danger-dim: rgba(240, 113, 120, 0.15); --warning: #e6c06d; --shadow: 0 24px 48px rgba(0, 0, 0, 0.45); --input-bg: rgba(0, 0, 0, 0.25); --option-bg: rgba(0, 0, 0, 0.2); --progress-track: rgba(255, 255, 255, 0.08); --progress-mid: #6ec8ff; --btn-primary-fg: #061018; --ghost-hover: rgba(255, 255, 255, 0.05); --hint-fg: #f0e6c8; --hint-border: rgba(230, 192, 109, 0.35); --hint-bg: rgba(230, 192, 109, 0.08); --feedback-ok-fg: #b8f0d4; --feedback-bad-fg: #ffc8cb; --code-bg: rgba(255, 255, 255, 0.06); --noise-opacity: 0.04; --theme-toggle-bg: rgba(255, 255, 255, 0.1); --theme-toggle-thumb: #e8ecf1; } /* Visibile solo con file:// (classe impostata in di index.html) */ .quiz-file-env-banner { display: none; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--hint-bg); color: var(--text); } html.quiz-file-origin .quiz-file-env-banner:not([hidden]) { display: flex; } .quiz-file-env-text { margin: 0; flex: 1; font-size: 0.875rem; line-height: 1.45; color: var(--muted); } .quiz-file-env-text code { font-size: 0.8125rem; padding: 0.12em 0.35em; border-radius: 6px; background: var(--code-bg); color: var(--text); } .quiz-file-env-cmd { display: inline-block; margin-top: 0.35em; } .quiz-file-env-dismiss { flex-shrink: 0; align-self: center; } [data-theme="light"] { color-scheme: light; --bg: #eef1f7; --bg-elevated: #ffffff; --border: rgba(0, 0, 0, 0.1); --text: #1a2233; --muted: #5a6578; --accent: #1a6fd4; --accent-dim: rgba(26, 111, 212, 0.12); --accent-hover-border: rgba(26, 111, 212, 0.45); --success: #0d8f5f; --success-dim: rgba(13, 143, 95, 0.12); --danger: #c42f38; --danger-dim: rgba(196, 47, 56, 0.1); --warning: #9a7209; --shadow: 0 14px 44px rgba(0, 0, 0, 0.08); --input-bg: rgba(0, 0, 0, 0.04); --option-bg: rgba(0, 0, 0, 0.03); --progress-track: rgba(0, 0, 0, 0.08); --progress-mid: #4a9eff; --btn-primary-fg: #ffffff; --ghost-hover: rgba(0, 0, 0, 0.05); --hint-fg: #4a3d12; --hint-border: rgba(154, 114, 9, 0.35); --hint-bg: rgba(230, 192, 109, 0.2); --feedback-ok-fg: #0a5c3e; --feedback-bad-fg: #8b2229; --code-bg: rgba(0, 0, 0, 0.06); --noise-opacity: 0.025; --theme-toggle-bg: rgba(0, 0, 0, 0.08); --theme-toggle-thumb: #ffffff; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); position: relative; } .bg-noise { pointer-events: none; position: fixed; inset: 0; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); z-index: 0; } .app { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 3rem; } .header { margin-bottom: 2rem; } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .theme-toggle { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem 0.35rem 0.35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--muted); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: var(--accent-hover-border); color: var(--text); } .theme-toggle-track { position: relative; width: 2.5rem; height: 1.35rem; border-radius: 999px; background: var(--theme-toggle-bg); flex-shrink: 0; } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: calc(1.35rem - 4px); height: calc(1.35rem - 4px); border-radius: 50%; background: var(--theme-toggle-thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.22s ease; } [data-theme="light"] .theme-toggle-thumb { transform: translateX(1.15rem); } .theme-toggle-label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 2.75rem; } .theme-label-light, .theme-label-dark { display: none; } [data-theme="light"] .theme-label-light { display: block; color: var(--text); } [data-theme="dark"] .theme-label-dark { display: block; color: var(--text); } .brand { display: flex; align-items: center; gap: 0.65rem; } .brand-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; object-fit: contain; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } [data-theme="light"] .brand-logo { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .brand h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; margin: 0; letter-spacing: -0.02em; } .tagline { color: var(--muted); margin: 0.75rem 0 0; font-size: 0.95rem; max-width: 36em; } .panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.5rem; } .label-inline { margin-top: 1rem; margin-bottom: 0.35rem; } .textarea { width: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-family: var(--font-sans); font-size: 0.95rem; resize: vertical; min-height: 120px; } .textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .textarea-compact { min-height: 72px; font-size: 0.9rem; } .input-layout { display: grid; gap: 1.35rem; align-items: start; } @media (min-width: 860px) { .input-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } } .input-column-main { min-width: 0; } .input-column-prompt { min-width: 0; } .llm-prompt-card { position: sticky; top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: var(--shadow); } .llm-prompt-heading { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--text); } .llm-prompt-lead { margin: 0 0 0.85rem; font-size: 0.86rem; line-height: 1.45; color: var(--muted); } .llm-prompt-card .label { margin-top: 0.25rem; } .llm-prompt-accordion { display: flex; flex-direction: column; gap: 0.35rem; } .llm-prompt-disclosure { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); overflow: hidden; } .llm-prompt-summary { list-style: none; cursor: pointer; padding: 0.55rem 0.75rem; font-size: 0.84rem; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; user-select: none; transition: background 0.15s; } .llm-prompt-summary::-webkit-details-marker { display: none; } .llm-prompt-summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); flex-shrink: 0; margin-left: 0.35rem; transition: transform 0.2s ease; } .llm-prompt-disclosure[open] .llm-prompt-summary::after { transform: rotate(-135deg); margin-top: 0.2rem; } .llm-prompt-summary:hover { background: var(--ghost-hover); } .llm-prompt-disclosure:not([open]) > .llm-prompt-disclosure-body { display: none; } .llm-prompt-disclosure-body { padding: 0 0.65rem 0.65rem; border-top: 1px solid var(--border); } .llm-prompt-disclosure-actions { margin-top: 0.5rem; } .llm-prompt-textarea { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 0.72rem; line-height: 1.45; min-height: 180px; max-height: min(48vh, 380px); resize: vertical; margin-top: 0.5rem; width: 100%; } .llm-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 0.65rem; } .llm-prompt-actions-global { margin-top: 0.5rem; min-height: 1.25em; } .llm-copy-feedback { font-size: 0.82rem; font-weight: 600; color: var(--success); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .input-quiz-prefs { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); font-size: 0.88rem; } .pref-check { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; color: var(--text); user-select: none; } .pref-check input { accent-color: var(--accent); } .pref-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 0.35rem; border-top: 1px solid var(--border); } .pref-timer-mode-label { display: flex; align-items: center; } .select-timer-mode, .input-timer-secs { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); min-width: 0; } .input-timer-secs { width: 5.5rem; } .pref-timer-secs { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; } .quiz-timer { font-size: 0.9rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); padding: 0.25rem 0.65rem; border-radius: 8px; background: var(--option-bg); border: 1px solid var(--border); } .quiz-timer--warn { color: var(--warning); border-color: var(--hint-border); } .quiz-timer--expired { color: var(--danger); border-color: var(--danger-dim); } .quiz-keyboard-hint { margin: 0 0 0.85rem; font-size: 0.78rem; line-height: 1.45; color: var(--muted); } .quiz-keyboard-hint kbd { display: inline-block; padding: 0.12em 0.4em; font-size: 0.85em; font-family: inherit; border-radius: 4px; border: 1px solid var(--border); background: var(--code-bg); color: var(--text); } .input-actions, .quiz-actions, .results-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .btn { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--btn-primary-fg); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--ghost-hover); } .btn-small { font-size: 0.85rem; padding: 0.45rem 0.85rem; } .parse-error { color: var(--danger); font-size: 0.9rem; margin: 0.75rem 0 0; } .resume-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--accent-hover-border); background: var(--accent-dim); } .resume-banner-text { margin: 0; font-size: 0.92rem; color: var(--text); flex: 1; min-width: 200px; } .resume-banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .history-block { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .history-heading { margin-top: 0; margin-bottom: 0.35rem; } .history-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.65rem; } .history-export-details { position: relative; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); } .history-export-details--toolbar { border: none; background: transparent; } .history-export-summary { list-style: none; cursor: pointer; padding: 0.4rem 0.65rem; font-size: 0.85rem; font-weight: 600; color: var(--text); user-select: none; } .history-export-details--toolbar .history-export-summary { padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; } .history-export-summary::-webkit-details-marker { display: none; } .history-export-row { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.45rem 0.5rem 0.55rem; border-top: 1px solid var(--border); } .history-export-details--toolbar .history-export-row { position: absolute; z-index: 4; right: 0; margin-top: 0.2rem; min-width: 12rem; padding: 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: var(--shadow); } .history-item-actions .history-export-details { flex-basis: 100%; margin-top: 0.15rem; } .history-item-actions .history-export-row { border-top: 1px solid var(--border); } .history-import-ok { margin: 0.35rem 0 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--success); } .history-folder-wrap { list-style: none; margin: 0; padding: 0; } .history-folder-wrap--root { margin-top: 0.15rem; } .history-folder-details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--option-bg); overflow: hidden; } .history-folder-details[open] .history-folder-summary { border-bottom: 1px solid var(--border); } .history-folder-summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; padding: 0.55rem 0.75rem; list-style: none; font-size: 0.9rem; } .history-folder-summary::-webkit-details-marker { display: none; } .history-folder-name { font-weight: 600; color: var(--text); } .history-folder-count { font-weight: 500; font-size: 0.82rem; color: var(--muted); } .history-folder-toolbar { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .history-nested { list-style: none; padding: 0.5rem 0.65rem 0.65rem 0.85rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .btn-with-trash { display: inline-flex; align-items: center; gap: 0.35rem; } .btn-with-trash .btn-icon-wrap { display: inline-flex; flex-shrink: 0; line-height: 0; } .btn-with-trash .icon-trash { display: block; opacity: 0.9; } .history-folder-select { min-width: 8.5rem; max-width: 100%; padding: 0.35rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-family: var(--font-sans); font-size: 0.8rem; } .history-empty { margin: 0; font-size: 0.9rem; color: var(--muted); } .history-save-error { margin: 0.35rem 0 0.5rem; } .history-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.65rem; } .history-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--option-bg); } .history-item-main { flex: 1; min-width: 180px; } .history-item-title { display: block; font-weight: 600; font-size: 0.95rem; color: var(--text); } .history-item-meta { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; } .history-item-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } .quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .progress-wrap { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 0.75rem; } .progress-bar { flex: 1; height: 8px; background: var(--progress-track); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--progress-mid)); border-radius: 99px; transition: width 0.35s ease; } .progress-label { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; } .results-actions .llm-copy-feedback { align-self: center; margin: 0; } .question-card { margin-top: 0.5rem; } .question-meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.35rem; } .question-text { font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 600; line-height: 1.35; margin: 0 0 1.25rem; letter-spacing: -0.01em; } .question-text .katex, .option-body .katex, .feedback .katex, .study-chip .katex, .match-tile .katex, .flash-back-main .katex, .flash-hint .katex, .wrong-item-stem .katex, .wrong-item-correct .katex, .hint-box .katex { font-size: 0.97em; } .options { display: flex; flex-direction: column; gap: 0.6rem; } .option { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; text-align: left; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--option-bg); color: var(--text); font-family: var(--font-sans); font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .option:hover:not(:disabled) { border-color: var(--accent-hover-border); background: var(--accent-dim); } .option:disabled { cursor: default; opacity: 0.85; } .option.selected { border-color: var(--accent); background: var(--accent-dim); } .option-key { flex-shrink: 0; font-weight: 700; color: var(--accent); min-width: 1.5rem; } .option.correct-reveal { border-color: var(--success); background: var(--success-dim); } .option.wrong-reveal { border-color: var(--danger); background: var(--danger-dim); } .argomentazione { margin-top: 1.25rem; } .hint-box { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--hint-border); background: var(--hint-bg); font-size: 0.9rem; color: var(--hint-fg); } .feedback { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.95rem; } .feedback.ok { border: 1px solid rgba(62, 207, 142, 0.4); background: var(--success-dim); color: var(--feedback-ok-fg); } .feedback.bad { border: 1px solid rgba(240, 113, 120, 0.4); background: var(--danger-dim); color: var(--feedback-bad-fg); } .feedback.feedback-exam { border: 1px solid var(--border); background: var(--accent-dim); color: var(--text); } [data-theme="light"] .feedback.ok { border-color: rgba(13, 143, 95, 0.35); } [data-theme="light"] .feedback.bad { border-color: rgba(196, 47, 56, 0.35); } .stats-main { padding-bottom: 2.5rem; } .stats-main--wide { max-width: 920px; margin: 0 auto; } .stats-page-tagline { max-width: 42rem; } .stats-callout { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 0.9rem; line-height: 1.45; } .stats-callout--muted { background: var(--bg-elevated); color: var(--muted); } .stats-callout--error { background: var(--danger-dim); color: var(--feedback-bad-fg); border-color: rgba(240, 113, 120, 0.35); } .stats-kpi-section { margin-bottom: 2rem; } .stats-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .stats-kpi-card { margin: 0; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } [data-theme="dark"] .stats-kpi-card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } .stats-kpi-label { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .stats-kpi-value { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; color: var(--text); line-height: 1.15; } .stats-kpi-desc { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--muted); } .stats-kpi-footnote { margin: 0.85rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); } .stats-section { margin-top: 0.35rem; } .stats-section--chart { margin-top: 0.5rem; } .stats-section-head { margin-bottom: 1rem; } .stats-section-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text); } .stats-section-lead { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); max-width: 48rem; } .stats-chart-wrap { position: relative; margin: 0 0 1.25rem; width: 100%; max-width: 100%; height: min(320px, 55vh); min-height: 200px; } .stats-table-wrap { overflow-x: auto; margin-top: 0.5rem; } .stats-table-wrap--elevated { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); } .stats-recent-wrap { overflow-x: auto; margin-top: 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); } .stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .stats-table th, .stats-table td { padding: 0.55rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); } .stats-table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; } .stats-table tbody tr:hover td { background: var(--ghost-hover); } .stats-table tbody tr:last-child td { border-bottom: none; } .stats-table-pct { font-variant-numeric: tabular-nums; font-weight: 600; } .stats-table-pct--high { color: var(--success); } .stats-table-pct--low { color: var(--danger); } .stats-table-result { font-variant-numeric: tabular-nums; } .stats-result-n { font-weight: 600; } .stats-result-p { color: var(--muted); font-size: 0.85em; } .stats-pill { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .stats-pill--quiz { background: var(--accent-dim); color: var(--accent); } .stats-pill--review { background: var(--hint-bg); color: var(--hint-fg); } .quiz-top-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; min-width: 0; } .quiz-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.65rem; } .quiz-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; } .quiz-cloud-save-feedback { margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--success); text-align: right; max-width: 280px; } .quiz-cloud-save-feedback--error { color: var(--danger); } .panel-results .results-title { font-family: var(--font-display); margin: 0 0 0.5rem; font-size: 1.5rem; } .results-score { font-size: 1.35rem; font-weight: 700; margin: 0.5rem 0; } .results-detail { color: var(--muted); margin: 0 0 1.25rem; } .subsection-title { font-size: 1rem; margin: 1.5rem 0 0.65rem; color: var(--muted); } .wrong-items { list-style: none; padding: 0; margin: 0; } .wrong-items li { padding: 0.85rem 0; border-bottom: 1px solid var(--border); } .wrong-items li:last-child { border-bottom: none; } .wrong-item-stem { margin: 0 0 0.55rem; white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.45; color: var(--text); } .wrong-item-correct { margin: 0; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--success-dim); background: var(--success-dim); font-size: 0.86rem; line-height: 1.4; color: var(--text); } .wrong-item-correct strong { color: var(--success); font-weight: 700; } .muted-inline { display: inline-block; margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; font-weight: 400; } .header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; } .auth-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; max-width: 100%; } .auth-no-config { margin: 0; font-size: 0.78rem; color: var(--muted); max-width: 14rem; } .auth-guest:not([hidden]), .auth-user:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; } .auth-email { font-size: 0.82rem; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.4rem; border-radius: 4px; margin-left: 0.35rem; vertical-align: middle; background: var(--accent-dim); color: var(--accent); } .history-badge.local { background: var(--ghost-hover); color: var(--muted); } .auth-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } .auth-modal[hidden] { display: none !important; } .auth-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); } .auth-modal-dialog { position: relative; width: 100%; max-width: 400px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow); } .auth-modal-title { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 1rem; } .auth-unconfigured { display: flex; flex-direction: column; gap: 0.75rem; } .auth-unconfigured[hidden] { display: none !important; } .auth-unconfigured-lead { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--text); } .auth-unconfigured-list { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); } .auth-unconfigured-list code { font-size: 0.85em; } .auth-unconfigured-note { margin: 0; font-size: 0.85rem; color: var(--muted); font-style: italic; } #auth-modal-forms-wrap[hidden] { display: none !important; } .auth-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; } .auth-tab { flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: 0.88rem; cursor: pointer; } .auth-tab[aria-selected="true"] { background: var(--accent-dim); color: var(--text); border-color: var(--accent-hover-border); } .auth-form { display: none; flex-direction: column; gap: 0.75rem; } .auth-form.is-active { display: flex; } .auth-field { display: flex; flex-direction: column; gap: 0.3rem; } .auth-field label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .auth-field input { padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-family: var(--font-sans); font-size: 0.95rem; } .auth-field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-error { margin: 0; font-size: 0.88rem; color: var(--danger); min-height: 1.25em; } .auth-modal-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } @media (max-width: 520px) { .app { padding: 1.25rem 1rem 2rem; } .panel { padding: 1.15rem; } } /* —— Formati di studio (completamento, abbinamenti, flashcard) —— */ .select-study-format { font: inherit; font-size: 0.88rem; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); max-width: 100%; } .study-format-hint { margin: 0.25rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); } .quiz-body-mode[hidden] { display: none !important; } .study-card .study-lead { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--muted); } .study-stem-rich { white-space: pre-wrap; } .blank-slot { display: inline-block; margin: 0 0.15em; padding: 0.1em 0.45em; border-radius: 6px; border: 1px dashed var(--accent-hover-border); background: var(--accent-dim); font-family: var(--font-sans); font-size: 0.92em; font-weight: 600; color: var(--accent); vertical-align: baseline; } .study-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } .study-chip { font: inherit; font-size: 0.9rem; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid var(--border); background: var(--option-bg); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .study-chip:hover:not(:disabled) { border-color: var(--accent-hover-border); background: var(--accent-dim); } .study-chip:disabled { cursor: default; opacity: 0.88; } .study-chip--selected { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); } .study-chip--correct { border-color: var(--success); background: var(--success-dim); } .study-chip--wrong { border-color: var(--danger); background: var(--danger-dim); } .input.study-input-line { width: 100%; margin-top: 0.35rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; } .input.study-input-line:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 0.5rem; } @media (max-width: 640px) { .match-columns { grid-template-columns: 1fr; } } .match-col-title { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .match-list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 2rem; } .match-tile { width: 100%; text-align: left; font: inherit; font-size: 0.88rem; line-height: 1.35; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--option-bg); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .match-tile:hover:not(:disabled) { border-color: var(--accent-hover-border); background: var(--accent-dim); } .match-tile:disabled { cursor: default; } .match-tile--picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); } .match-tile--paired { opacity: 0.55; border-style: dashed; } .flash-card-article .flash-card-surface { margin: 0.5rem 0 0; padding: 1.35rem 1.25rem; min-height: 9rem; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(145deg, var(--bg-elevated), var(--option-bg)); box-shadow: var(--shadow); } .flash-back { animation: flash-reveal 0.35s ease; } @keyframes flash-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .flash-back-kicker { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .flash-back-main { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: clamp(1.1rem, 2.8vw, 1.35rem); font-weight: 600; line-height: 1.35; color: var(--text); } .flash-hint { margin: 0; font-size: 0.88rem; color: var(--hint-fg); padding: 0.65rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--hint-border); background: var(--hint-bg); } .flash-actions { margin-top: 1.25rem; }