/* LIGHT MODE (Default) */ :root { --bg-body: #f2f2f6; --bg-card: #ffffff; --bg-panel: #ffffff; --bg-alert: rgba(255, 255, 255, 0.7); --text-main: #1d1d1f; --text-secondary: #86868b; --text-tertiary: #aeaeb2; --apple-blue: #0071e3; --border-color: #e8e8ed; --alert-border: rgba(255, 255, 255, 0.3); --score-inactive: rgb(131, 194, 251); --score-active: rgb(9, 124, 249); --option-bg: #f5f5f7; --option-hover: #d1d1d5; --option-selected-bg: #e1f0ff; --success-green: #34c759; --success-bg: #e6f4ea; --success-text: #137333; --error-red: #ff3b30; --error-bg: #fce8e6; --error-text: #c5221f; --score-bg: #e1f0ff; --overlay-bg: rgba(0, 0, 0, 0.15); --glass-bg: rgba(255,255,255,0.15); --glass-border: rgba(255,255,255,0.18); --glass-shadow: rgba(0,0,0,0.12); --separator: rgba(60, 60, 67, 0.18); --builder-card-bg-dark: rgb(254, 254, 254); --builder-deep-bg: rgb(239, 239, 245); --builder-empty-answer-text: rgb(189, 189, 191); --builder-add-answer-text: rgb(160, 160, 160); --builder-question-separator: rgb(235, 235, 237); --builder-answer-separator: rgb(228, 228, 229); /* SELECT MODE custom green palette */ --sel-green: #34C759; --sel-selected-bg: #EDF8F0; --sel-selected-border: #C2E6CC; --sel-selected-text: #18522A; /* SELECT MODE custom false palette */ --sel-false-bg: #FCE8E6; --sel-false-border: #F6C2BE; --sel-false-text: #B31412; --control-bg: rgba(118, 118, 128, 0.12); --selector-bg: rgba(255, 255, 255, 0.85); --icon-inactive: rgb(138, 138, 142); --icon-active: rgb(0, 0, 0); --select-active-color: #34C759; --plus-bg: rgba(52, 199, 89, 0.90); --plus-border: rgba(52, 199, 89, 1); --plus-shadow: rgba(52, 199, 89, 0.35); } /* DARK MODE (OS-synced) */ @media (prefers-color-scheme: dark) { :root { --bg-body: #000000; --bg-card: rgb(26, 26, 28); --bg-panel: #1c1c1e; --bg-alert: rgba(30, 30, 30, 0.75); --text-main: #f5f5f7; --text-secondary: #98989d; --text-tertiary: #6e6e73; --apple-blue: #0a84ff; --border-color: #38383a; --alert-border: rgba(255, 255, 255, 0.1); --score-inactive: rgb(24, 78, 125); --score-active: rgb(10, 134, 249); --option-bg: rgb(39, 39, 40); --option-hover: #3a3a3c; --option-selected-bg: #1a2b3c; --success-green: #32d74b; --success-bg: #0b3d1b; --success-text: #32d74b; --error-red: #ff453a; --error-bg: #4a0f0d; --error-text: #ff453a; --score-bg: #1a2b3c; --overlay-bg: rgba(0, 0, 0, 0.4); --separator: rgba(84, 84, 88, 0.55); --builder-card-bg-dark: rgb(44, 44, 46); --builder-deep-bg: rgb(0, 0, 0); --builder-empty-answer-text: rgb(90, 90, 94); --builder-add-answer-text: rgb(160, 160, 160); --builder-question-separator: rgb(54, 54, 57); --builder-answer-separator: rgb(56, 56, 58); /* SELECT MODE custom green palette — dark */ --sel-green: #30D158; --sel-selected-bg: #213828; --sel-selected-border: #375C41; --sel-selected-text: #C4F2D0; /* SELECT MODE custom false palette — dark */ --sel-false-bg: #3B1614; --sel-false-border: #6D2925; --sel-false-text: #FF8985; --control-bg: rgba(255, 255, 255, 0.08); --selector-bg: rgba(90, 90, 94, 0.85); --icon-inactive: rgb(142, 142, 147); --icon-active: rgb(255, 255, 255); --select-active-color: #30D158; --plus-bg: rgba(48, 209, 88, 0.90); --plus-border: rgba(48, 209, 88, 1); --plus-shadow: rgba(48, 209, 88, 0.25); } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-body); color: var(--text-main); display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; transition: background-color 0.3s ease, color 0.3s ease; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; overflow-x: hidden; } body.is-animating { pointer-events: none !important; cursor: not-allowed; } body.is-dragging-active, body.is-card-dragging-active { cursor: grabbing !important; } body:has(.quiz-container.builder-wide) { background-color: var(--builder-deep-bg); align-items: flex-start; } body:has(.quiz-container.results-view) { align-items: flex-start; } #question-text, .option-content-col span, .review-question-text, .review-badge span, .editable-input { -webkit-user-select: text; user-select: text; } .quiz-container { padding: 80px clamp(14px, 4vw, 32px) clamp(14px, 4vw, 32px) clamp(14px, 4vw, 32px); width: 100%; max-width: 600px; box-sizing: border-box; position: relative; min-width: 0; } .quiz-container.builder-wide { max-width: 680px; padding-bottom: 100px; } .sticky-action-bar { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; z-index: 999999; display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; max-width: 600px; padding: 0 clamp(14px, 4vw, 32px); box-sizing: border-box; pointer-events: none; } body:has(.quiz-container.builder-wide) .sticky-action-bar { max-width: 680px; } .sticky-action-bar > * { pointer-events: auto; } .glass-exit-button { border: none; border-radius: 999px; padding: 0 20px; height: 42px; font-size: 16px; font-weight: 600; color: var(--text-main); background: rgba(255,255,255,0.5); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s ease, opacity 0.2s ease; display: flex; align-items: center; gap: 6px; box-sizing: border-box; } .glass-exit-button svg { width: 15px; height: 15px; fill: currentColor; } @media (prefers-color-scheme: dark) { .glass-exit-button { background: rgba(30,30,30,0.6); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } } .glass-exit-button:active { transform: scale(0.96); opacity: 0.85; } .glass-add-button { border: none; border-radius: 999px; padding: 0 18px; height: 38px; font-size: 16px; font-weight: 600; color: var(--success-green); background: rgba(255,255,255,0.5); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s ease, opacity 0.2s ease; display: flex; align-items: center; gap: 6px; box-sizing: border-box; white-space: nowrap; } .glass-add-button svg { width: 14px; height: 14px; fill: currentColor; } @media (prefers-color-scheme: dark) { .glass-add-button { background: rgba(30,30,30,0.6); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } } .glass-add-button:active { transform: scale(0.96); opacity: 0.85; } .glass-download-button { margin-left: auto; color: var(--text-secondary); transition: color 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .glass-download-button.is-ready { color: var(--apple-blue); } .glass-exit-button svg.lucide { fill: none !important; stroke: currentColor; } .bottom-action-bar { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 999999; display: none; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 430px; pointer-events: none; padding-left: 16px; padding-right: 22px; box-sizing: border-box; } .bottom-action-bar > * { pointer-events: auto; } .segmented-control { position: relative; flex: 1; height: 47px; padding: 4px; background-color: var(--control-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 999px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.05); touch-action: pan-y; user-select: none; -webkit-user-select: none; } .segmented-control input[type="radio"] { display: none; } .labels-container { position: absolute; top: 4px; left: 4px; bottom: 4px; right: 4px; display: flex; z-index: 1; } .segment { flex: 1; display: flex; justify-content: center; align-items: center; gap: 3px; cursor: pointer; color: var(--icon-inactive); } .segment svg { width: 34px; height: 34px; pointer-events: none; } .selector { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px); background-color: var(--selector-bg); border-radius: 999px; overflow: hidden; z-index: 2; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0,0,0, 0.04); } .selector-inner { display: flex; width: 200%; height: 100%; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .active-segment { color: var(--icon-active); } .active-segment.select-segment { color: var(--select-active-color); } #button-select:checked ~ .selector { transform: translateX(100%); } #button-select:checked ~ .selector .selector-inner { transform: translateX(-50%); } .no-transition { transition: none !important; } .add-button { width: 47px; height: 47px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--plus-bg); backdrop-filter: blur(20px) saturate(250%); -webkit-backdrop-filter: blur(20px) saturate(250%); border: 1px solid var(--plus-border); box-shadow: 0 4px 14px var(--plus-shadow); cursor: pointer; padding: 0; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s; } .add-button:active { transform: scale(0.92); filter: brightness(0.9); box-shadow: 0 2px 6px var(--plus-shadow); } .add-button svg { width: 24px; height: 24px; stroke: #ffffff; stroke-width: 2.5; } .header-info { padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--separator); } .header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .quiz-name { font-size: 13px; color: var(--apple-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; flex: 1; } .progress { font-size: 13px; color: var(--text-secondary); font-weight: 500; margin: 0; white-space: nowrap; } .quiz-description { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.4; } .quiz-description:not(:empty) { margin-top: 6px; } .quiz-description:empty { display: none; } h2 { font-size: 26px; font-weight: 600; margin-top: 0; margin-bottom: 24px; line-height: 1.3; color: var(--text-main); letter-spacing: -0.5px; } @media (max-width: 500px) { .quiz-container { margin-top: 0; margin-bottom: auto; padding-top: 40px; } .mode-choice-button { aspect-ratio: auto; min-height: 220px; } } /* removed #play-question-image CSS as it is now styled via wrapper */ #play-question-image:hover { opacity: 0.9; } .options-container { display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } @media (prefers-color-scheme: dark) { .options-container { background-color: var(--option-bg); } } .option-number { flex-shrink: 0; width: 24px; text-align: center; margin-left: -2px; font-size: 16px; font-weight: 500; color: inherit; opacity: 0.5; line-height: 1.4; letter-spacing: -0.2px; user-select: none; } .option-button { background-color: transparent; color: var(--text-main); border: 2px solid transparent; padding: 12px 14px; border-radius: 0; text-align: left; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; box-sizing: border-box; position: relative; margin: -1px 0; z-index: 1; will-change: transform; transform: translateZ(0); } .option-button::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: inherit; background-color: transparent; z-index: -1; transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .options-container .option-button:first-child { margin-top: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; } .options-container .option-button:last-child { margin-bottom: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .option-button:not(:last-child)::after { content: ''; position: absolute; left: 48px; right: 14px; bottom: 0; height: 1px; background-color: var(--separator); } .option-button.trueFalse-active-row:not(:last-child)::after, .option-button.trueFalse-state-true:not(:last-child)::after, .option-button.trueFalse-state-false:not(:last-child)::after, .option-button.selected:not(:last-child)::after, .option-button.correct-state:not(:last-child)::after, .option-button.incorrect-state:not(:last-child)::after, .option-button.missed-state:not(:last-child)::after, .option-button:has(+ .option-button.trueFalse-active-row)::after, .option-button:has(+ .option-button.trueFalse-state-true)::after, .option-button:has(+ .option-button.trueFalse-state-false)::after, .option-button:has(+ .option-button.selected)::after, .option-button:has(+ .option-button.correct-state)::after, .option-button:has(+ .option-button.incorrect-state)::after, .option-button:has(+ .option-button.missed-state)::after { display: none; } .option-content-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; word-break: break-word; } .option-image-wrap { flex-shrink: 0; width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); border: 1px solid var(--border-color); padding: 4px; } @media (prefers-color-scheme: dark) { .option-image-wrap { background: rgba(255,255,255,0.06); } } .option-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; pointer-events: none; } .option-button:hover:not(:disabled) { /* remove background hover */ } .option-button.selected { border-color: var(--apple-blue); background-color: var(--option-selected-bg); z-index: 2; } .multi-select-hint { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: -10px 0 14px 2px; display: flex; align-items: center; gap: 6px; } .multi-select-hint svg { width: 13px; height: 13px; fill: none; flex-shrink: 0; } .play-points-badge { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: -18px 0 18px 2px; display: block; } .option-button.missed-state { background-color: transparent; color: var(--success-text); border-color: var(--success-green); cursor: default; z-index: 2; } .option-button.correct-state { background-color: var(--sel-selected-bg); color: var(--sel-selected-text); border-color: var(--sel-selected-border); cursor: default; z-index: 1; } .option-button.correct-state.was-chosen { border-color: var(--apple-blue); z-index: 2; } .option-button.incorrect-state { background-color: var(--sel-false-bg); color: var(--sel-false-text); border-color: var(--sel-false-border); cursor: default; z-index: 1; } .option-button.incorrect-state.was-chosen { border-color: var(--apple-blue); z-index: 2; } .option-button.correct-state:has(+ .option-button.incorrect-state), .option-button.incorrect-state:has(+ .option-button.correct-state) { margin-bottom: 0; } .option-button.correct-state + .option-button.incorrect-state, .option-button.incorrect-state + .option-button.correct-state { margin-top: 0; } .option-button.dimmed-state { opacity: 0.4; cursor: default; } .button-meta { font-size: 13px; font-weight: 600; opacity: 0.8; white-space: nowrap; color: var(--apple-blue); margin-top: 2px; } .option-button.correct-state .button-meta { color: var(--success-text); } .option-button.incorrect-state .button-meta { color: var(--error-text); } .next-button { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; background-color: var(--apple-blue); color: white; border: none; padding: 16px; border-radius: 18px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .next-button:active { opacity: 0.8; } .next-button:disabled { background-color: var(--option-hover); color: var(--text-secondary); cursor: not-allowed; } #results-download-bottom-button { border-radius: 999px !important; background-color: color-mix(in srgb, var(--apple-blue) 90%, transparent) !important; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } .cancel-text-button { background: transparent; border: none; color: var(--apple-blue); font-size: 16px; font-weight: 500; margin-top: 16px; cursor: pointer; -webkit-appearance: none; width: 100%; padding: 12px; transition: opacity 0.2s; } .cancel-text-button:active { opacity: 0.6; } .summary-card { text-align: center; } .score-circle { width: 120px; height: 120px; background-color: var(--score-bg); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 32px; font-weight: 600; color: var(--apple-blue); margin: 0 auto 24px; transition: all 0.3s ease; } .review-area { margin-top: 32px; border-top: 1px solid var(--border-color); text-align: left; } .review-item { padding: 24px 0; border-bottom: 1px solid var(--border-color); } .review-item:last-child { border-bottom: none; } .review-question-text { font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0 0 14px 0; } .review-q-image { max-width: 100%; max-height: 150px; border-radius: 14px; margin-bottom: 12px; object-fit: contain; border: 1px solid var(--border-color); cursor: zoom-in; } .review-choices { display: flex; flex-direction: column; gap: 0; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: visible; } .review-badge { font-size: 16px; padding: 12px 14px; border: 2px solid transparent; border-radius: 0; font-weight: 500; background-color: transparent; color: var(--text-primary); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin: -1px 0; position: relative; } .review-choices .review-badge:first-child { margin-top: 0; border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; } .review-choices .review-badge:last-child { margin-bottom: 0; border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } .review-badge:not(:last-child)::after { content: ''; position: absolute; left: 48px; right: 14px; bottom: 0; height: 1px; background-color: var(--separator); } .review-badge.correct-review:not(:last-child)::after, .review-badge.incorrect-review:not(:last-child)::after, .review-choices .review-badge:has(+ .review-badge.correct-review)::after, .review-choices .review-badge:has(+ .review-badge.incorrect-review)::after, .review-choices .review-badge.was-chosen:not(:last-child)::after, .review-choices .review-badge:has(+ .review-badge.was-chosen)::after { display: none; } .review-choices .review-badge.correct-review, .review-choices .review-badge.incorrect-review, .review-choices .review-badge.was-chosen { z-index: 1; } .review-badge-text-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; justify-content: center; } .review-badge.correct-review { background-color: var(--sel-selected-bg) !important; color: var(--sel-selected-text) !important; border-color: var(--sel-selected-border) !important; } .review-badge.correct-review.was-chosen { border-color: var(--apple-blue) !important; z-index: 2; } .review-badge.incorrect-review { background-color: var(--sel-false-bg) !important; color: var(--sel-false-text) !important; border-color: var(--sel-false-border) !important; } .review-badge.incorrect-review.was-chosen { border-color: var(--apple-blue) !important; z-index: 2; } .review-time-badge { font-size: 13px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; background: rgba(0,0,0,0.05); padding: 4px 10px; border-radius: 12px; display: inline-block; } @media (prefers-color-scheme: dark) { .review-time-badge { background: rgba(255,255,255,0.1); } } .review-badge.correct-review:has(+ .review-badge.incorrect-review), .review-badge.incorrect-review:has(+ .review-badge.correct-review) { margin-bottom: 0; } .review-badge.correct-review + .review-badge.incorrect-review, .review-badge.incorrect-review + .review-badge.correct-review { margin-top: 0; } .error-banner { background-color: var(--error-bg); color: var(--error-red); padding: 12px; border-radius: 14px; font-size: 13px; font-weight: 500; margin-top: 16px; display: none; text-align: left; white-space: pre-line; } .download-error-banner { background-color: var(--error-bg); color: var(--error-red); border: 1px solid var(--error-red); padding: 12px; border-radius: 14px; font-size: 16px; font-weight: 500; margin-top: 16px; display: none; text-align: left; white-space: pre-line; } .success-banner { background-color: var(--success-bg); color: var(--success-text); padding: 12px; border-radius: 14px; font-size: 16px; font-weight: 500; margin-top: 16px; display: none; text-align: left; white-space: pre-line; } p { color: var(--text-secondary); margin-bottom: 24px; } /* MODALS */ .image-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; touch-action: none; } .image-modal-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.15s ease-out, visibility 0s linear 0s; } .image-modal-content { position: relative; max-width: 90vw; max-height: 90vh; border-radius: 16px; overflow: hidden; background: var(--bg-panel); box-shadow: 0 12px 48px rgba(0,0,0,0.3); transform: scale(0.96) translateY(10px); opacity: 0; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .image-modal-overlay.active .image-modal-content { transform: scale(1) translateY(0); opacity: 1; } .image-modal-image { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; } .trueFalse-popover { position: absolute; z-index: 9999; pointer-events: auto; background: var(--bg-alert); border: 1px solid var(--alert-border); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); padding: 4px; display: flex; flex-direction: column; align-items: center; width: 32px; box-sizing: border-box; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.2s ease 0.05s, visibility 0s linear 0.3s, height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center center; margin-top: 0; will-change: transform; transform: translateZ(0); } .trueFalse-popover.open { opacity: 1; visibility: visible; transition: opacity 0.15s ease, visibility 0s linear 0s, height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .trueFalse-popover[data-anchor="top"] { transform-origin: center 16px; transform: scale(1) translateZ(0); } .trueFalse-popover[data-anchor="top"].open { transform: scale(1.02) translateZ(0); margin-top: 0; } .trueFalse-popover[data-anchor="center"] { transform-origin: center 44px; transform: scale(1) translateZ(0); } .trueFalse-popover[data-anchor="center"].open { transform: scale(1.02) translateZ(0); margin-top: -28px; } .trueFalse-popover[data-anchor="bottom"] { transform-origin: center 72px; transform: scale(1) translateZ(0); } .trueFalse-popover[data-anchor="bottom"].open { transform: scale(1.02) translateZ(0); margin-top: -56px; } .option-button.trueFalse-active-row { z-index: 9998; position: relative; transform: scale(1.02) translateZ(0); will-change: transform; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1); background-color: transparent !important; box-shadow: none !important; } .option-button.trueFalse-active-row::before { background-color: var(--option-bg) !important; top: -5px; bottom: -5px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); will-change: top, bottom; } .builder-option-row.trueFalse-active-row .correct-toggle-button, .option-button.trueFalse-active-row .correct-toggle-button { outline-color: transparent !important; } .option-button .correct-toggle-button.trueFalse-state-true, .option-button .correct-toggle-button.trueFalse-state-false, .option-button .correct-toggle-button.trueFalse-state-none, .review-badge .correct-toggle-button.trueFalse-state-true, .review-badge .correct-toggle-button.trueFalse-state-false, .review-badge .correct-toggle-button.trueFalse-state-none { outline: 2px solid var(--apple-blue); outline-offset: 2px; border-radius: 50%; } .builder-option-row.trueFalse-active-row .row-bg { background-color: var(--option-bg) !important; top: -5px; bottom: -5px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); will-change: top, bottom; } .builder-qa-panel:has(.trueFalse-active-row), .builder-qa-panel:has(.score-active-row) { overflow: visible; } .builder-option-row.trueFalse-active-row .delete-button { visibility: hidden; } .builder-option-row.trueFalse-active-row::after, .builder-option-row:has(+ .builder-option-row.trueFalse-active-row)::after { opacity: 0; display: none !important; } .add-question-popover { position: absolute; z-index: 10000; background: var(--bg-alert); border: 1px solid var(--alert-border); border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,0.25); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(0.96) translateY(4px); transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.15s; overflow: hidden; width: auto; min-width: 180px; padding: 6px; box-sizing: border-box; } @media (prefers-color-scheme: dark) { .add-question-popover { box-shadow: 0 12px 48px rgba(0,0,0,0.5); } } .add-question-popover.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s; } .add-q-button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; border: none; border-radius: 10px; color: var(--text-main); font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; transition: background 0.15s; width: 100%; box-sizing: border-box; } .add-q-button:active { background: rgba(0,0,0,0.05); } @media (prefers-color-scheme: dark) { .add-q-button:active { background: rgba(255,255,255,0.05); } } .add-q-button svg { flex-shrink: 0; color: var(--text-main); } @media (prefers-color-scheme: dark) { .trueFalse-popover { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); } } .trueFalse-button { width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease, opacity 0.1s ease; padding: 0; flex-shrink: 0; background: transparent; overflow: hidden; } .trueFalse-button:active { transform: scale(0.9); opacity: 0.8; } .trueFalse-button svg { width: 24px; height: 24px; pointer-events: none; } .trueFalse-button:not(:last-child) { margin-bottom: 4px; } .trueFalse-popover:not(.open) .trueFalse-button.trueFalse-button-active:not(:last-child) { margin-bottom: 0px; } .trueFalse-popover:not(.open) .trueFalse-button:not(.trueFalse-button-active) { height: 0px; margin-bottom: 0px; opacity: 0; pointer-events: none; transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease; } .trueFalse-popover.open .trueFalse-button:not(.trueFalse-button-active) { height: 24px; margin-bottom: 4px; opacity: 1; pointer-events: auto; transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease 0.1s; } .trueFalse-popover.open .trueFalse-button:last-child { margin-bottom: 0px !important; } .trueFalse-button.trueFalse-true { background: transparent; color: white; } .trueFalse-button.trueFalse-none { background: transparent; color: var(--text-secondary); } .trueFalse-button.trueFalse-false { background: transparent; color: white; } @media (prefers-color-scheme: dark) { .trueFalse-button.trueFalse-none { background: transparent; color: var(--text-secondary); } } .correct-toggle-button.trueFalse-state-true { background-color: transparent; border: none; color: #ffffff; padding: 0; } .correct-toggle-button.trueFalse-state-false { background-color: transparent; border: none; color: #ffffff; padding: 0; } .correct-toggle-button.trueFalse-state-none { background-color: transparent; border: none; color: var(--text-secondary); padding: 0; } @media (prefers-color-scheme: dark) { .correct-toggle-button.trueFalse-state-none { background-color: transparent; } } .builder-qa-panel .builder-option-row.trueFalse-state-true .correct-toggle-button { background-color: transparent; border: none; color: var(--sel-green); } .builder-qa-panel .builder-option-row.trueFalse-state-false .correct-toggle-button { background-color: transparent; border: none; color: var(--error-red); } .builder-qa-panel .builder-option-row.trueFalse-state-none .correct-toggle-button { background-color: transparent; border: none; color: var(--text-secondary); } @media (prefers-color-scheme: dark) { .builder-qa-panel .builder-option-row.trueFalse-state-none .correct-toggle-button { background-color: transparent; } } .correct-toggle-button[class*="trueFalse-state-"] svg { width: 24px; height: 24px; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; z-index: 9999; pointer-events: none; touch-action: none; visibility: hidden; transition: visibility 0s linear 0.15s; } .modal-overlay::before { content: ''; position: absolute; inset: 0; background-color: var(--overlay-bg); z-index: -1; opacity: 0; transition: opacity 0.15s ease-out; } .modal-overlay.active::before { opacity: 1; } .modal-overlay.active { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } .apple-alert { background: var(--bg-alert); width: 340px; border-radius: 28px; text-align: left; box-shadow: 0 24px 48px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--alert-border); box-sizing: border-box; position: relative; z-index: 1; opacity: 0; transition: opacity 0.15s ease-out; } .modal-overlay.active .apple-alert { opacity: 1; } @media (prefers-color-scheme: dark) { .apple-alert { box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1); } } .alert-content { padding: 24px 20px 20px 20px; } .alert-title { font-size: 19px; font-weight: 700; margin: 0 0 8px 0; color: var(--text-main); letter-spacing: -0.5px; } .time-popover { position: absolute; background-color: var(--bg-alert); border-color: var(--alert-border); box-shadow: none; clip-path: inset(var(--clip-top, 50%) var(--clip-right, 50%) var(--clip-bottom, 50%) var(--clip-left, 50%) round 6px); transition: clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0s linear 0.35s, visibility 0s linear 0.35s; margin-top: 0; z-index: 99999; width: max-content; max-width: 90vw; box-sizing: border-box; display: flex; flex-direction: column; opacity: 1; visibility: hidden; pointer-events: none; } .time-popover.fade-out-only { clip-path: inset(0px 0px 0px 0px round 28px) !important; opacity: 0 !important; background-color: var(--bg-alert) !important; border-color: var(--alert-border) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; transition: opacity 0.15s ease-out, visibility 0s linear 0.15s !important; } .time-popover.fade-out-only .time-dials-wrapper { transform: scale(1) translateY(0) !important; } .time-popover.fade-out-only #popover-transition-label, .time-popover.fade-out-only #scale-popover-transition-label { opacity: 0 !important; } .time-popover.fade-out-only .timer-picker-container::before { width: 100% !important; height: 36px !important; margin-top: -18px !important; border-radius: 12px !important; } .time-popover.closing:not(.fade-out-only) { background-color: var(--bg-alert) !important; border-color: var(--alert-border) !important; box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important; opacity: 1 !important; visibility: visible !important; transition: none !important; /* Let JS handle clip-path, force static styles otherwise */ } .time-popover.closing:not(.fade-out-only) .timer-item, .time-popover.closing:not(.fade-out-only) .timer-item-fg, .time-popover.closing:not(.fade-out-only) #time-picker-title-text { color: transparent !important; } .time-popover.active { opacity: 1; visibility: visible; clip-path: inset(0px 0px 0px 0px round 28px); background-color: var(--bg-alert); border-color: var(--alert-border); box-shadow: 0 10px 40px rgba(0,0,0,0.15); pointer-events: auto; transition: clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0s, background-color 0.35s ease 0s, border-color 0.35s ease 0s, box-shadow 0.35s ease 0s, visibility 0s linear 0s; } #calendar-time-button, #calendar-time-button-end, #scale-type-popover-btn { transition: transform 0.1s ease, filter 0.1s ease; background-color: transparent !important; font-variant-numeric: tabular-nums; position: relative; z-index: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translateZ(0); will-change: transform; } #calendar-time-button::before, #calendar-time-button-end::before, #scale-type-popover-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(120, 120, 128, 0.16); border-radius: 6px; z-index: -1; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-color-scheme: dark) { #calendar-time-button::before, #calendar-time-button-end::before, #scale-type-popover-btn::before { background: rgba(120, 120, 128, 0.32); } } .active-time-btn::before, .closing-hide-text::before { background: transparent !important; transform: scale(1); transition: none; } .active-time-btn { z-index: 9998 !important; } .closing-hide-text { color: transparent !important; } .time-popover-header { opacity: 0; transition: opacity 0.15s ease; } .time-popover.active .time-popover-header { opacity: 1; transition: opacity 0.2s ease 0.1s; } .time-dials-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform-origin: center; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .time-popover:not(.active) .time-dials-wrapper { transform: scale(0.591) translateY(-2px); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease 0s; } .time-popover.active .time-dials-wrapper { transform: scale(1) translateY(0); opacity: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease 0.05s; } .alert-message { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-main); line-height: 1.4; } .alert-buttons { display: flex; gap: 12px; padding: 0 20px 20px 20px; } .alert-button { flex: 1; padding: 12px 10px; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 999px; border: none; transition: transform 0.15s ease, opacity 0.2s ease; } .modal-button-bg, .alert-button.secondary { background-color: rgba(0, 0, 0, 0.05) !important; box-shadow: none !important; } .apple-alert, .explanation-modal-box, .image-modal-box { --option-bg: rgba(0, 0, 0, 0.05); } .alert-button.secondary { color: var(--text-main); } .alert-button.cancel-button { background-color: rgba(0, 0, 0, 0.05); color: var(--text-main); } .alert-button.primary { background-color: var(--apple-blue); color: #ffffff; } .alert-button.destructive { background-color: var(--error-red); color: #ffffff; } @media (prefers-color-scheme: dark) { .modal-button-bg, .alert-button.secondary { background-color: rgba(255, 255, 255, 0.1) !important; } .apple-alert, .explanation-modal-box, .image-modal-box { --option-bg: rgba(255, 255, 255, 0.1); } .alert-button.cancel-button { background-color: rgba(255, 255, 255, 0.1); } .alert-button.destructive { background-color: rgba(255, 255, 255, 0.1); } .alert-button.secondary { background-color: rgba(255, 255, 255, 0.1); } } .alert-button:active { transform: scale(0.97); opacity: 0.8; } /* PASSWORD MODAL AND iOS TOGGLE CSS */ .ios-toggle { position: relative; width: 44px; height: 24px; -webkit-appearance: none; background: rgba(120, 120, 128, 0.16); outline: none; border-radius: 12px; transition: background 0.2s; cursor: pointer; flex-shrink: 0; } @media (prefers-color-scheme: dark) { .ios-toggle { background: rgba(120, 120, 128, 0.32); } } .ios-toggle:checked { background: var(--success-green); } .ios-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .ios-toggle:checked::after { transform: translateX(20px); } .ios-toggle.dragging { transition: none !important; } .ios-toggle.dragging::after { transition: none !important; transform: translateX(var(--drag-x, 0px)) !important; } /* OPTIONS CARD & TIMER CSS */ .builder-meta-card.options-card { margin-top: 16px; margin-bottom: 0; padding: 16px; overflow: hidden; transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .options-header { display: flex; justify-content: space-between; align-items: center; padding: 0; cursor: pointer; user-select: none; } .options-title { font-size: 16px; font-weight: 600; color: var(--text-main); } .options-chevron { color: var(--text-tertiary); transition: transform 0.3s ease; display: flex; align-items: center; } .options-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .options-card.expanded .options-chevron { transform: rotate(90deg); } .options-content-grid { display: block; } .options-content-wrapper { overflow: hidden; } .options-content { padding-top: 0; border-top: none; margin-top: 0; } .option-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ios-slider-container { display: flex; align-items: center; gap: 12px; flex: 1; } .ios-slider { -webkit-appearance: none; width: 100%; height: 4px; background: rgba(120, 120, 128, 0.16); border-radius: 2px; outline: none; } .passing-capsule .stepper-container { margin: 0 !important; } @media (prefers-color-scheme: dark) { .ios-slider { background: rgba(120, 120, 128, 0.32); } } .ios-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .slider-val { font-size: 16px; font-weight: 600; color: var(--text-main); width: 44px; text-align: right; } .timer-picker-container { display: none; flex-direction: row; justify-content: center; align-items: center; height: 200px; margin: 0 0 16px 0; padding: 0 14px; border-radius: 12px; overflow-y: hidden; overflow-x: visible; position: relative; } .timer-picker-container::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: var(--btn-width, 60px); height: var(--btn-height, 24px); margin-top: calc(var(--btn-height, 24px) / -2); background: rgba(120, 120, 128, 0.16); border-radius: 6px; pointer-events: none; z-index: 1; transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-color-scheme: dark) { .timer-picker-container::before { background: rgba(120, 120, 128, 0.32); } } .time-popover:not(.active) .timer-picker-container::before { left: calc(var(--clip-origin-x, 50%) - 15px) !important; top: 50% !important; width: var(--btn-width, 60px) !important; height: var(--btn-height, 24px) !important; margin-top: calc(var(--btn-height, 24px) / -2 + var(--pill-margin-top-offset, 0px)) !important; border-radius: 6px !important; transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .time-popover.active .timer-picker-container::before { left: 50%; width: 100%; height: 36px; margin-top: -18px; border-radius: 12px; transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0s, width 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, height 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; } .timer-group { flex: 1; position: relative; height: 100%; display: flex; align-items: center; overflow: hidden; } .colon-dial { font-size: 20px; font-weight: 600; margin-top: -6px; margin: 0 2px; color: var(--text-main); } .timer-column { height: 100%; flex: none; width: calc(100% + 30px); padding-right: 30px; box-sizing: border-box; text-align: center; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: none; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; position: relative; z-index: 2; -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(50% - 18px), transparent calc(50% - 18px), transparent calc(50% + 18px), black calc(50% + 18px), black 100%); mask-image: linear-gradient(to bottom, black 0%, black calc(50% - 18px), transparent calc(50% - 18px), transparent calc(50% + 18px), black calc(50% + 18px), black 100%); } .timer-column::-webkit-scrollbar, .timer-column-fg::-webkit-scrollbar { display: none; } .timer-item { height: 36px; line-height: 36px; font-size: 22px; font-weight: 400; color: var(--text-tertiary); scroll-snap-align: center; font-variant-numeric: tabular-nums; } .timer-column-fg-wrapper { position: absolute; top: 50%; left: 0; width: 100%; height: 36px; margin-top: -18px; overflow: hidden; pointer-events: none; z-index: 4; } .timer-column-fg { width: 100%; overflow: visible; box-sizing: border-box; text-align: center; padding-right: 0px; will-change: transform; transform: translateY(-82px); } .timer-item-fg { height: 36px; line-height: 36px; font-size: 22px; font-weight: 400; color: var(--text-main); font-variant-numeric: tabular-nums; } .cal-item { font-size: 18px; } .cal-item-fg { font-size: 18px; } .timer-label { flex: 0 0 50%; width: 50%; font-size: 17px; font-weight: 500; color: var(--text-main); padding-left: 6px; pointer-events: none; z-index: 3; } #timer-display-play { font-size: 16px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; display: none; background: rgba(0,0,0,0.05); padding: 6px 12px; border-radius: 14px; } @media (prefers-color-scheme: dark) { #timer-display-play { background: rgba(255,255,255,0.1); } } .later-button { background: rgba(255, 149, 0, 0.15); color: #FF9500; border: 1px solid rgba(255, 149, 0, 0.1); border-radius: 999px; padding: 0 16px; height: 42px; font-size: 16px; font-weight: 600; cursor: pointer; display: none; align-items: center; gap: 6px; box-sizing: border-box; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.15s, opacity 0.2s; margin-left: auto; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); opacity: 0.9; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .later-button svg { width: 18px; height: 18px; } @media (prefers-color-scheme: dark) { .later-button:not(:disabled) { background: rgba(255, 149, 0, 0.25); } } .later-button:active:not(:disabled) { transform: scale(0.96); opacity: 0.85; } .later-button:disabled { background: var(--control-bg); color: var(--text-tertiary); border-color: transparent; cursor: default; opacity: 0.5; } .password-wrapper { position: relative; display: flex; align-items: center; margin-top: 14px; } .password-wrapper .text-input { margin-bottom: 0; padding-right: 44px; } .password-eye-button { position: absolute; right: 10px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .password-eye-button:hover { color: var(--apple-blue); } .password-eye-button svg { width: 18px; height: 18px; fill: currentColor; } /* LIGHTBOX FOR IMAGE ZOOM */ .lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 20000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-image { max-width: 90vw; max-height: 90vh; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); object-fit: contain; transform: scale(0.95); transition: transform 0.2s ease; } .lightbox-overlay.active .lightbox-image { transform: scale(1); } .lightbox-close { position: absolute; top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); background: rgba(255,255,255,0.15); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lightbox-close svg { width: 20px; height: 20px; fill: currentColor; } .lightbox-close:hover { background: rgba(255,255,255,0.3); } .mode-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; } .card-canvas-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: inherit; } .mode-choice-button { position: relative; overflow: hidden; background-color: var(--option-bg); color: #fff; border: none; padding: 18px; border-radius: 22px; text-align: left; cursor: pointer; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; aspect-ratio: 1 / 1; min-height: 165px; box-sizing: border-box; box-shadow: 0 4px 14px rgba(0,0,0,0.06); } .mode-choice-button > .mode-bottom-content { position: relative; z-index: 1; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin-top: auto; } .mode-choice-button:active { filter: brightness(0.9); } .mode-choice-button.button-play { background: linear-gradient(135deg, #FF7B47, #FF4527); } .mode-choice-button.button-check { background: linear-gradient(135deg, #DF6EE8, #A644FF); } .mode-choice-button.button-create { background: linear-gradient(135deg, #8A8BFF, #5C5BE5); } .mode-choice-button.button-edit { background: linear-gradient(135deg, #4DB3FF, #1E88E5); } .mode-choice-header { display: flex; align-items: center; gap: 8px; } .mode-icon-container { flex-shrink: 0; color: #fff; display: flex; align-items: center; justify-content: center; } .mode-icon-container svg { width: 28px; height: 28px; fill: currentColor; } .mode-choice-button .mode-title { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.3px; line-height: 1; } .mode-choice-button .mode-sub { font-size: 13px; color: rgba(255, 255, 255, 0.9); font-weight: 500; line-height: 1.25; width: 100%; } .section-header { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px 2px; display: block; } .section-header.with-top-spacing { margin-top: 28px; } .field-label { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-main); margin: 0 0 8px 0; display: block; } .builder-meta-card { background-color: rgb(254, 254, 254); border-radius: 21px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding: 14px 14px 4px 14px; margin-bottom: 0; box-sizing: border-box; position: relative; } @media (prefers-color-scheme: dark) { .builder-meta-card { background-color: var(--bg-card); } } .builder-meta-card .builder-meta-separator { height: 2px; background-color: var(--builder-question-separator); margin: 10px -14px; } .builder-meta-divider { border: none; border-top: 1px solid var(--separator); margin: 32px 0 32px 0; } .builder-meta-card .builder-meta-input { margin-bottom: 0; width: 100%; box-sizing: border-box; min-width: 0; background-color: rgb(234, 245, 254); color: rgb(131, 194, 251); font-size: 17px; font-weight: 500; line-height: 1.4; padding: 5px 8px; border-radius: 10px; border: 2px solid transparent; font-family: inherit; text-transform: uppercase; letter-spacing: 0.3px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; outline: none; } .builder-meta-card .builder-meta-input::placeholder { color: rgb(131, 194, 251); font-weight: 500; opacity: 1; } .builder-meta-card .builder-meta-input:not(:empty):not(:focus) { background-color: rgb(234, 245, 254); color: rgb(9, 124, 249); } .builder-meta-card .builder-meta-input:focus:empty { background-color: rgb(241, 241, 242); color: rgb(134, 134, 135); border-color: transparent; } .builder-meta-card .builder-meta-card .builder-meta-input:focus:not(:empty) { background-color: rgb(241, 241, 242); color: rgb(0, 0, 0); border-color: transparent; } @media (prefers-color-scheme: dark) { .builder-meta-card .builder-meta-input { background-color: rgb(37, 45, 53); color: rgb(24, 78, 125); } .builder-meta-card .builder-meta-input::placeholder { color: rgb(24, 78, 125); font-weight: 500; } .builder-meta-card .builder-meta-input:not(:empty):not(:focus) { background-color: rgb(37, 45, 53); color: rgb(10, 134, 249); } .builder-meta-card .builder-meta-input:focus:empty { background-color: rgb(47, 47, 49); color: rgb(122, 122, 124); } .builder-meta-card .builder-meta-card .builder-meta-input:focus:not(:empty) { background-color: rgb(47, 47, 49); color: rgb(254, 254, 254); } } .builder-meta-card .builder-meta-textarea { margin-bottom: 0; width: 100%; box-sizing: border-box; min-width: 0; background-color: transparent; color: var(--text-main); font-size: 17px; font-weight: 600; line-height: 1.4; padding: 7px 8px; border-radius: 10px; border: none; min-height: 36px; resize: none; overflow: hidden; font-family: inherit; outline: none; } .builder-meta-card .builder-meta-textarea:empty::before { content: attr(data-placeholder); color: var(--builder-empty-answer-text); font-weight: 500; pointer-events: none; display: block; } .builder-meta-card .builder-meta-textarea:focus:empty { caret-color: var(--builder-empty-answer-text); } .builder-meta-card .builder-meta-textarea:focus { background-color: transparent; outline: none; } .text-input, .textarea-input { width: 100%; box-sizing: border-box; min-width: 0; background-color: var(--option-bg); color: var(--text-main); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; font-size: 17px; font-family: inherit; line-height: 1.4; margin-bottom: 20px; transition: border-color 0.2s ease, background-color 0.2s ease; } .text-input::placeholder, .textarea-input::placeholder { color: var(--text-tertiary); } .text-input:empty::before, .textarea-input:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); pointer-events: none; display: block; } .text-input:focus:empty, .textarea-input:focus:empty { caret-color: var(--text-tertiary); } .text-input:focus, .textarea-input:focus { outline: none; border-color: var(--apple-blue); } .custom-select-button { width: 100%; box-sizing: border-box; background-color: var(--option-bg); color: var(--text-main); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; font-size: 17px; font-family: inherit; line-height: 1.4; transition: border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } .custom-select-button svg { width: 18px; height: 18px; color: var(--text-tertiary); } .grouped-scale-option { background-color: var(--option-bg); border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all 0.2s ease; user-select: none; margin-bottom: 8px; } .grouped-scale-option:last-child { margin-bottom: 0; } .grouped-scale-option:active { transform: scale(0.98); } .grouped-scale-option.active { border-color: var(--apple-blue); background-color: var(--option-selected-bg); } .stepper-control { display: flex; align-items: center; background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; height: 36px; } .stepper-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; user-select: none; -webkit-user-select: none; padding: 0; } .stepper-btn:hover { background-color: rgba(0,0,0,0.05); color: var(--text-main); } .stepper-btn:active { background-color: rgba(0,0,0,0.1); } .stepper-btn svg { width: 16px; height: 16px; } .stepper-val-text { font-size: 16px; font-weight: 600; color: var(--text-main); min-width: 48px; text-align: center; user-select: none; -webkit-user-select: none; } .options-island-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .island-icon-box { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .island-icon-box svg { width: 18px; height: 18px; } .options-island { background-color: var(--option-bg); border-radius: 16px; padding: 16px; width: calc(50% - 8px); margin-bottom: 16px; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); max-height: 1000px; min-width: 0; } .options-island:last-child { margin-bottom: 0; } .options-island.expanded .island-accordion { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 16px; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .options-island.full-width { width: 100%; } .island-expanded-horizontal { width: 100% !important; cursor: default !important; } .island-hidden-horizontal { width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; min-height: 0 !important; max-height: 0 !important; } .island-accordion { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; overflow: hidden; margin-top: 0; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; align-items: start; } .island-accordion.open-summary { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 16px; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .options-island.expanded #timer-collapsed-summary:not(.open-summary) { grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: 0; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; } .island-accordion.open-fields { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 16px; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .island-accordion-inner { min-height: 0; width: 100%; white-space: nowrap; } .options-island-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text-main); display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; } /* Ensure text in side-by-side islands truncates properly */ #island-class-topic .options-island-title > div, #island-grading .options-island-title > div { min-width: 0; } #class-topic-collapsed-summary > div > div, #grading-collapsed-summary > div > div { min-width: 0; } #island-class-topic .island-content-wrapper, #island-grading .island-content-wrapper, #island-class-topic .island-accordion-wrapper, #island-grading .island-accordion-wrapper, #island-class-topic .island-accordion, #island-grading .island-accordion, #island-class-topic .island-accordion-inner, #island-grading .island-accordion-inner { min-width: 0; } #island-class-topic .options-island-title span, #island-grading .options-island-title span, #class-topic-collapsed-summary span, #grading-collapsed-summary span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #island-class-topic .options-island-title span span, #island-grading .options-island-title span span, #class-topic-collapsed-summary span span, #grading-collapsed-summary span span { display: inline !important; white-space: inherit; overflow: visible; text-overflow: clip; } .options-island-row { display: flex; justify-content: space-between; align-items: flex-start; } .options-island .text-input, .options-island .custom-select-button { background-color: var(--bg-card); } .grading-sidebar-button { background: transparent; border: none; padding: 10px 12px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text-secondary); text-align: left; cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box; } .grading-sidebar-button:hover { background: rgba(0,0,0,0.05); color: var(--text-main); } .grading-sidebar-button.active { color: var(--apple-blue); font-weight: 400; background: rgba(0, 122, 255, 0.08); } .grading-sub-button { background: transparent; border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--text-secondary); text-align: left; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; width: auto; } .grading-sub-button:hover { background: rgba(0,0,0,0.05); color: var(--text-main); } .grading-sub-button.active { color: var(--text-main); font-weight: 400; background: rgba(0,0,0,0.04); border-color: #a0a0a0; } .options-island .grouped-scale-option { background-color: var(--bg-card); } .timer-badge { background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 16px; color: #fff; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 6px; transform-origin: right center; } .timer-badge.badge-indefinite { color: rgba(255,255,255,0.7); font-weight: 500; background: rgba(0,0,0,0.2); } #island-timer { cursor: pointer; } @media (max-width: 712px) { .options-island:not(#island-class-topic):not(#island-grading) { width: 100% !important; } } @media (max-width: 800px) { .topic-grid-1 { grid-template-columns: 1fr 1fr !important; } .topic-grid-2 { grid-template-columns: 1fr !important; } } .topic-grid-1 { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr; gap: 8px; margin-bottom: 12px; } .topic-grid-2 { display: grid; grid-template-columns: 2fr 3fr 1fr; gap: 8px; } .topic-grid-1 > div, .topic-grid-2 > div { min-width: 0; } .calendar-header-flex { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; } .calendar-grid-header > div, #calendar-grid > div { min-width: 0; } .access-wrapper { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(220px, 3fr); gap: 16px; padding-top: 16px; } .access-sidebar-container { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--border-color); padding-right: 16px; min-width: 0; position: relative; z-index: 10; } .access-segmented-control { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; gap: 4px; position: relative; } .access-segmented-button { background: transparent; border: none; padding: 0 12px; height: 38px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text-secondary); text-align: left; cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; z-index: 2; position: relative; } .access-segmented-button:hover { background: transparent; color: var(--text-secondary); } .access-segmented-button.active { background: transparent; color: var(--text-secondary); font-weight: 500; } .access-slider { display: block; position: absolute; top: calc(42px * var(--idx, 0)); left: 0; right: 0; height: 38px; width: auto; background-color: var(--apple-blue); border-radius: 10px; z-index: 3; overflow: hidden; transition: top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; box-shadow: 0 2px 5px rgba(0,122,255,0.3); } .slider-mask-container { position: absolute; top: calc(-42px * var(--idx, 0)); left: 0; width: 100%; height: calc(3 * 42px); display: flex; flex-direction: column; gap: 4px; padding: 0; box-sizing: border-box; transition: top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; } .slider-mask-container .access-segmented-button { color: #fff !important; font-weight: 600 !important; } #access-button-time-limit { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease; border-radius: 16px; transform: translateZ(0); will-change: transform; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #access-button-time-limit.time-limit-button-open { transform: scale(1.04) translateZ(0); box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); z-index: 10; position: relative; } @media (prefers-color-scheme: dark) { #access-button-time-limit.time-limit-button-open { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); background-color: var(--bg-alert); } } .time-limit-popover-container { position: absolute; z-index: 90; background: var(--bg-alert); border: 1px solid var(--alert-border); border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); padding: 16px 12px; width: 250px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(0.9); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s linear 0.2s; transform-origin: top left; margin-top: 8px; } .time-limit-popover-container.open { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s linear 0s; } .time-limit-popover-container.fade-out-only { transform: scale(1) !important; opacity: 0 !important; transition: opacity 0.15s ease-out, visibility 0s linear 0.15s !important; } .time-limit-popover-container .timer-picker-container { padding: 0; } .time-limit-popover-container .timer-picker-container::before { width: 100%; height: 36px; margin-top: -18px; border-radius: 12px; background-color: rgba(120, 120, 128, 0.15); transition: none; } /* Time & Access Layout - toggled via JS for View Transitions */ body.is-mobile-access .access-wrapper { display: flex; flex-direction: column; } #time-limit-btn-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 12px 14px; width: 100%; box-sizing: border-box; } body.is-mobile-access #time-limit-btn-inner { flex-direction: row; justify-content: space-between; align-items: center; } body.is-mobile-access .access-sidebar-container { border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } body.is-mobile-access .access-sidebar-container.empty-sidebar { display: none; padding: 0; border: none; } body.is-mobile-access .access-segmented-control { flex-direction: row; height: 42px; background-color: rgba(0,0,0,0.06); border-radius: 12px; padding: 4px; position: relative; gap: 0; touch-action: none; cursor: grab; } body.is-mobile-access .access-segmented-control:active { cursor: grabbing; } @media (prefers-color-scheme: dark) { body.is-mobile-access .access-segmented-control { background-color: rgba(255,255,255,0.08); } } body.is-mobile-access .access-segmented-button { flex: 0 0 33.3333%; width: 33.3333%; min-width: 0; justify-content: center; padding: 0; text-align: center; border-radius: 0; font-size: 16px; font-weight: 500; color: var(--text-secondary); z-index: 2; height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } body.is-mobile-access .access-segmented-button:hover { background: transparent; color: var(--text-secondary); } body.is-mobile-access .access-segmented-button.active { background: transparent; color: var(--text-secondary); font-weight: 500; } body.is-mobile-access .access-slider { top: 4px; bottom: 4px; left: calc(4px + (100% - 8px) / 3 * var(--idx, 0)); right: auto; height: auto; width: calc((100% - 8px) / 3); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); } body.is-mobile-access .access-slider.dragging { transition: none; } body.is-mobile-access .slider-mask-container { top: -4px; left: calc(-4px - 100% * var(--idx, 0)); width: calc(300% + 8px); height: 42px; flex-direction: row; gap: 0; padding: 4px; transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body.is-mobile-access .access-slider.dragging .slider-mask-container { transition: none; } html.vt-active .access-slider, body.is-resizing-layout .access-slider, body.is-resizing-window .access-slider { transition: none !important; } /* Mobile overrides removed for calendar-header-flex since it is centered and stacked by default now */ body.is-mobile-access #calendar-time-selectors { width: 100%; justify-content: center; } body.is-mobile-access .calendar-grid-header { font-size: 10px !important; } /* View Transition Names for Access & Grading Island Elements */ #island-timer { view-transition-name: vt-island-timer; } #island-grading { view-transition-name: vt-island-grading; } #timer-fields { view-transition-name: vt-timer-fields; } #grading-fields { view-transition-name: vt-grading-fields; } /* Time & Access / Grading island structural names */ #access-right-panel { view-transition-name: vt-access-right; } #grading-right-panel { view-transition-name: vt-grad-right; } #access-calendar-view { view-transition-name: vt-access-cal-view; } #access-calendar-header { view-transition-name: vt-access-cal-head; } #calendar-grid { view-transition-name: vt-access-cal-grid; } #grade-slider-wrapper { view-transition-name: vt-grade-slider-wrap; } #grade-grouped-container { view-transition-name: vt-grade-grouped; } #capsule-passfail { view-transition-name: vt-cap-pf; } #capsule-percentage { view-transition-name: vt-cap-perc; } .scale-config-container { view-transition-name: vt-scale-container; } #grade-label { view-transition-name: vt-grade-label; } #scale-type-label { view-transition-name: vt-scale-label; } #scale-configs-wrapper { transition: height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; height: 108px; display: grid; align-items: start; } .scale-config-container { grid-area: 1 / 1; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease-out 0s, visibility 0s linear 0.15s; } .scale-config-container.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.15s ease-in 0.15s, visibility 0s linear 0s; } #scale-type-popover-btn { view-transition-name: vt-scale-btn; } #grade-percentage-text { view-transition-name: vt-grade-perc-txt; } #grade-passfail-text { view-transition-name: vt-grade-pf-txt; } #grade-grouped-container > p { view-transition-name: vt-grade-helper; } /* Time & Access layout inner elements */ #access-indefinite-view > div:nth-child(1) { view-transition-name: vt-acc-indef-icon; } #access-indefinite-view > div:nth-child(2) { view-transition-name: vt-acc-indef-title; } #access-indefinite-view > div:nth-child(3) { view-transition-name: vt-acc-indef-desc; } #access-calendar-view > div:nth-child(1) { view-transition-name: vt-acc-cal-header; } #access-calendar-view > div:nth-child(2) { view-transition-name: vt-acc-cal-grid; } #access-calendar-view > div:nth-child(3) { view-transition-name: vt-acc-cal-footer; } #access-calendar-view .calendar-controls { view-transition-name: vt-acc-cal-controls; } /* Unified scale config names for morphing */ .scale-config-container > div > div:nth-child(1) { view-transition-name: vt-grade-cap-1; } .scale-config-container > div > div:nth-child(2) { view-transition-name: vt-grade-cap-2; } .scale-config-container > div > div:nth-child(3) { view-transition-name: vt-grade-cap-3; } .scale-config-container > div > div:nth-child(4) { view-transition-name: vt-grade-cap-4; } .scale-config-container > div > div:nth-child(5) { view-transition-name: vt-grade-cap-5; } .scale-config-container > div > div:nth-child(6) { view-transition-name: vt-grade-cap-6; } .scale-config-container > div > div:nth-child(7) { view-transition-name: vt-grade-cap-7; } .scale-config-container > div > div:nth-child(8) { view-transition-name: vt-grade-cap-8; } .scale-config-container > div > div:nth-child(9) { view-transition-name: vt-grade-cap-9; } .scale-config-container > div > div:nth-child(10) { view-transition-name: vt-grade-cap-10; } ::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); } /* Smooth fade-in for right panel contents during tab switches */ @keyframes fadeInSlide { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } #grade-slider-wrapper, #grade-grouped-container, #capsule-passfail, #capsule-percentage, .scale-config-container, #access-indefinite-view, #access-calendar-view, #grade-percentage-text, #grade-passfail-text { animation: fadeInSlide 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .grouped-scale-option .scale-check { display: none; color: var(--apple-blue); } .grouped-scale-option.active .scale-check { display: block; } /* error styles moved to central location */ .textarea-input { resize: vertical; min-height: 50px; } .builder-question-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .builder-card { padding: 14px; text-align: left; box-sizing: border-box; background-color: var(--bg-card); border-radius: 21px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: none; overflow: visible; position: relative; } /* builder-card dark mode background now uses var(--bg-card) */ .builder-card-top { padding: 0 0 14px 0; } .builder-question-input { width: 100%; box-sizing: border-box; background-color: var(--option-bg); color: var(--text-main); border: 2px solid transparent; border-radius: 14px; padding: 14px 80px 14px 16px; font-size: 16px; font-weight: 600; font-family: inherit; line-height: 1.4; margin-bottom: 14px; resize: vertical; min-height: 24px; transition: border-color 0.2s ease; } .builder-question-input::placeholder { color: var(--text-tertiary); font-weight: 600; } .builder-question-input:focus { outline: none; border-color: var(--apple-blue); } .builder-options-group { border-radius: 0; overflow: visible; background-color: transparent; position: relative; } .builder-option-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 2px 0; position: relative; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .builder-option-row:not(:last-child)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--builder-answer-separator); transition: opacity 0.2s ease; } .builder-option-input { flex: 1; min-width: 0; box-sizing: border-box; background-color: transparent; color: var(--text-main); border: none; border-radius: 10px; padding: 14px 8px; font-size: 17px; font-weight: 500; font-family: inherit; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; outline: none; } .builder-option-input:empty::before { content: attr(data-placeholder); color: var(--builder-empty-answer-text); font-weight: 500; pointer-events: none; display: block; } .builder-option-input:focus:empty { caret-color: var(--builder-empty-answer-text); } .builder-option-input:focus { outline: none; background-color: transparent; } .correct-toggle-button { --mag-x: 0px; --mag-y: 0px; --mag-scale: 1; transform: translate(var(--mag-x), var(--mag-y)) scale(var(--mag-scale)); flex-shrink: 0; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-color); background-color: transparent; color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1); padding: 0; position: relative; } .correct-toggle-button:hover { transition: transform 0.1s linear, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.25); } .correct-toggle-button::before { content: ''; position: absolute; top: -15px; right: -15px; bottom: -15px; left: -15px; z-index: 1; } .correct-toggle-button:not([class*="trueFalse-state-"]) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; } .correct-toggle-button.is-correct.animate-check { background-color: var(--success-green); border-color: var(--success-green); color: #ffffff; } .drag-handle-button { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: grab; background: transparent; border: none; padding: 0; color: var(--text-tertiary); transition: color 0.15s ease; touch-action: none; } .drag-handle-button svg { width: 16px; height: 16px; fill: currentColor; } .drag-handle-button:hover, .drag-handle-button:active { color: var(--text-main); } .drag-handle-button:active { cursor: grabbing; } .builder-option-row.dragging { z-index: 1000; cursor: grabbing; transition: none !important; will-change: transform; } .builder-option-row.dragging .drag-handle-button { color: var(--apple-blue); } .builder-option-row.snap-back, .builder-card.snap-back { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, background-color 0.3s ease !important; will-change: transform; } .add-option-row { display: flex; align-items: center; margin-left: -14px; margin-right: -14px; background-color: var(--option-bg); border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } .add-option-button { background-color: transparent; border: none; padding: 14px; text-align: left; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } .add-option-button .plus-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background-color: var(--success-green); color: #ffffff; display: flex; align-items: center; justify-content: center; } .add-option-button .plus-icon svg { width: 12px; height: 12px; fill: currentColor; } .add-option-button .select-answers-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background-color: var(--success-green); color: #ffffff; display: flex; align-items: center; justify-content: center; } .add-option-button .select-answers-icon svg { width: 13px; height: 13px; fill: none; stroke: #ffffff; stroke-width: 2.5; } .add-option-button .add-option-label { font-size: 16px; font-weight: 500; color: var(--builder-add-answer-text); padding: 7px 8px; } .add-option-button:hover .plus-icon { opacity: 0.85; } /* ERROR STYLES (Light Mode) */ /* Builder Question/Option Yellow Error Styles */ /* Inactive */ .builder-question-input.input-error:not(:focus), .builder-option-input.input-error:not(:focus) { background-color: #FFFAF1 !important; box-shadow: inset 0 0 0 1px #C2A075 !important; color: #A27336 !important; } .builder-question-input.input-error:not(:focus)::placeholder, .builder-option-input.input-error:not(:focus)::placeholder { color: #A27336 !important; opacity: 1; } /* Active */ .builder-question-input.input-error:focus, .builder-option-input.input-error:focus { background-color: #FFFAF1 !important; box-shadow: inset 0 0 0 1px #A27336 !important; color: #935C18 !important; } .builder-question-input.input-error:focus::placeholder, .builder-option-input.input-error:focus::placeholder { color: #935C18 !important; opacity: 1; } /* ERROR STYLES (Dark Mode) */ @media (prefers-color-scheme: dark) { /* Inactive */ .builder-question-input.input-error:not(:focus), .builder-option-input.input-error:not(:focus) { background-color: #261C07 !important; box-shadow: inset 0 0 0 1px #A16E1D !important; color: #E09829 !important; } .builder-question-input.input-error:not(:focus)::placeholder, .builder-option-input.input-error:not(:focus)::placeholder { color: #E09829 !important; } /* Active */ .builder-question-input.input-error:focus, .builder-option-input.input-error:focus { background-color: #261C07 !important; box-shadow: inset 0 0 0 1px #E09829 !important; color: #FFAC2E !important; } .builder-question-input.input-error:focus::placeholder, .builder-option-input.input-error:focus::placeholder { color: #FFAC2E !important; } } /* General Text Input Error Styles (Red) */ .text-input.input-error { background-color: var(--error-bg) !important; border-color: var(--error-red) !important; color: var(--error-red) !important; } .text-input.input-error::placeholder { color: var(--error-red) !important; opacity: 0.8; } /* Adjust question input width during error so highlighting doesn't extend under icons */ .question-input-row .builder-question-input.input-error { width: calc(100% - 68px) !important; padding-right: 8px !important; } .image-upload-button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 10px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease; padding: 0; position: relative; } .image-upload-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; } .image-upload-button.has-image { color: var(--apple-blue); } .image-upload-button:hover, .image-upload-button.has-image:hover { color: var(--apple-blue); } .image-upload-button.select-image-off { opacity: 1; cursor: default; pointer-events: none; color: var(--text-tertiary); } .builder-qa-panel .builder-option-row { cursor: pointer; background-color: transparent; margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, color 0.2s ease; position: relative; } .builder-qa-panel .builder-option-row:hover { background-color: rgba(0,0,0,0.02); } .builder-qa-panel .builder-option-row:not(:last-child)::after { left: 14px; right: 14px; } .builder-qa-panel .builder-option-row.select-is-correct .correct-toggle-button { background-color: var(--sel-green); border-color: var(--sel-green); color: #ffffff; } .builder-qa-panel .builder-option-row.select-is-correct .image-upload-button { color: #7DDE97; } .builder-qa-panel .builder-option-row.select-is-correct .image-upload-button.has-image { color: #32BF57; } .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button { color: #7DDE97; } .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button:hover, .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button:active { color: #32BF57; } .builder-qa-panel .builder-option-row.select-is-correct .builder-option-input::placeholder { color: #7DDE97; } .builder-qa-panel .builder-option-row.trueFalse-state-true .image-upload-button { color: #7DDE97; } .builder-qa-panel .builder-option-row.trueFalse-state-true .image-upload-button.has-image { color: #32BF57; } .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button { color: #7DDE97; } .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button:hover, .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button:active { color: #32BF57; } .builder-qa-panel .builder-option-row.trueFalse-state-true .builder-option-input::placeholder { color: #7DDE97; } .builder-qa-panel .builder-option-row.trueFalse-state-false .image-upload-button { color: #F5928F; } .builder-qa-panel .builder-option-row.trueFalse-state-false .image-upload-button.has-image { color: #E54844; } .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button { color: #F5928F; } .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button:hover, .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button:active { color: #E54844; } .builder-qa-panel .builder-option-row.trueFalse-state-false .builder-option-input::placeholder { color: #F5928F; } @media (prefers-color-scheme: dark) { /* Correct (green) rows — unfocused icons are dim #1D7234, focused/has-image icons are bright */ .builder-qa-panel .builder-option-row.select-is-correct .image-upload-button { color: #1D7234; } .builder-qa-panel .builder-option-row.select-is-correct .image-upload-button.has-image { color: #7DDE97; } .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button { color: #1D7234; } .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button:hover, .builder-qa-panel .builder-option-row.select-is-correct .drag-handle-button:active { color: #32BF57; } .builder-qa-panel .builder-option-row.select-is-correct .builder-option-input::placeholder { color: #1D7234; } .builder-qa-panel .builder-option-row.trueFalse-state-true .image-upload-button { color: #1D7234; } .builder-qa-panel .builder-option-row.trueFalse-state-true .image-upload-button.has-image { color: #7DDE97; } .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button { color: #1D7234; } .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button:hover, .builder-qa-panel .builder-option-row.trueFalse-state-true .drag-handle-button:active { color: #32BF57; } .builder-qa-panel .builder-option-row.trueFalse-state-true .builder-option-input::placeholder { color: #1D7234; } .builder-qa-panel .builder-option-row.trueFalse-state-false .image-upload-button { color: #8B1C1A; } .builder-qa-panel .builder-option-row.trueFalse-state-false .image-upload-button.has-image { color: #F5928F; } .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button { color: #8B1C1A; } .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button:hover, .builder-qa-panel .builder-option-row.trueFalse-state-false .drag-handle-button:active { color: #E54844; } .builder-qa-panel .builder-option-row.trueFalse-state-false .builder-option-input::placeholder { color: #8B1C1A; } } .builder-qa-panel { display: flow-root; background-color: transparent; padding: 0 14px 0 14px; } body.is-dragging-active .builder-qa-panel { overflow: visible; } /* Deprecated delete badge width adjustment removed */ .question-number { flex-shrink: 0; width: 24px; height: 26px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: -0.2px; user-select: none; } .question-input-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 0 0 14px 0; position: relative; } .question-input-row::after { display: none; } .question-number-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; } .question-number { font-size: 16px; font-weight: 600; color: var(--text-tertiary); width: 100%; height: 100%; border-radius: 50%; background-color: var(--builder-card-bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; } .question-delete-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: none; background-color: var(--error-red); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transition: opacity 0.2s ease, transform 0.15s ease; } .question-delete-button svg { width: 12px; height: 12px; fill: currentColor; } .question-number-wrap:hover .question-number { opacity: 0; } .question-number-wrap:hover .question-delete-button { opacity: 1; } .question-delete-button:active { transform: scale(0.92); } .question-delete-button:disabled { background-color: var(--option-hover); color: var(--text-tertiary); cursor: not-allowed; opacity: 1; } .question-number-wrap:hover .question-delete-button:disabled { opacity: 1; } .question-drag-handle-inline { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-tertiary); cursor: grab; opacity: 0.5; border: none; background: transparent; padding: 0; touch-action: none; } .question-drag-handle-inline:hover { opacity: 1; } .question-drag-handle-inline:active { cursor: grabbing; } /* svg rule removed to inherit from .drag-handle-button svg */ .score-pill-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 10px; border: none; background: transparent; color: var(--apple-blue); cursor: pointer; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, opacity 0.15s ease; position: static; } .question-input-wrap { position: relative; flex: 1; min-width: 0; } .question-input-wrap .question-image-button-wrap { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); padding-top: 0; display: flex; align-items: center; gap: 10px; } /* padding-right moved to .question-input-wrap */ .builder-qa-panel .question-input-wrap:has(.builder-option-image-wrap) { padding-right: 152px; } .builder-qa-panel .question-input-wrap:has(.builder-option-image-wrap) .builder-question-input { min-height: 140px; } .builder-qa-panel .question-input-wrap .image-upload-button:not(.has-image), .builder-qa-panel .question-input-wrap .question-row-image-off { color: rgb(131, 194, 251); opacity: 1; } .builder-qa-panel .question-input-wrap .image-upload-button.has-image { color: rgb(9, 124, 249); } .builder-qa-panel .builder-option-row:not(.select-is-correct):not(.trueFalse-state-true):not(.trueFalse-state-false) .image-upload-button.has-image { color: var(--apple-blue); } @media (prefers-color-scheme: dark) { .builder-qa-panel .question-input-wrap .image-upload-button:not(.has-image), .builder-qa-panel .question-input-wrap .question-row-image-off { color: rgb(24, 78, 125); opacity: 1; } .builder-qa-panel .question-input-wrap .image-upload-button.has-image { color: rgb(10, 134, 249); } .builder-qa-panel .builder-option-row:not(.select-is-correct):not(.trueFalse-state-true):not(.trueFalse-state-false) .image-upload-button.has-image { color: var(--apple-blue); } } .question-input-wrap { background-color: #EAF5FE; border-radius: 18px; border: 2px solid transparent; box-sizing: border-box; transition: background-color 0.2s, border-color 0.2s; margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 56px; } .question-input-row .builder-question-input { margin-bottom: 0; width: 100%; background-color: transparent; color: #097CF9; font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.5px; padding: 6px 0; min-height: 40px; border: none; resize: none; overflow: hidden; box-sizing: border-box; display: block; outline: none; word-wrap: break-word; white-space: pre-wrap; } .question-input-row .builder-question-input:empty::before { content: attr(data-placeholder); color: #83C2FB; font-weight: 500; pointer-events: none; display: block; } .question-input-wrap:focus-within { background-color: var(--option-bg); } .question-input-row .builder-question-input:focus { outline: none; color: #000000; } .question-input-row .builder-question-input:focus:empty { caret-color: #868687; } .question-input-row .builder-question-input:focus:empty::before { color: #868687; } .question-input-row { position: relative; transition: margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .question-input-row.score-active-row { z-index: 9999; transform: scale(1.02) translateZ(0); } .question-input-row.score-active-row::before { content: ''; position: absolute; z-index: -1; background-color: var(--option-bg); top: -19px; left: -14px; right: -14px; bottom: -5px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); border-radius: 18px 18px 0 0; pointer-events: none; } .question-input-row.score-active-row::after { opacity: 0; display: none !important; } .question-input-row.score-active-row .score-pill-button { color: var(--score-active); opacity: 1 !important; transform: scale(1.05); } @media (prefers-color-scheme: dark) { .question-input-wrap { background-color: #252D35; border-radius: 18px; padding-right: 42px; } .question-input-row .builder-question-input { background-color: transparent; color: #0A86F9; } .question-input-row .builder-question-input:empty::before { color: #184E7D; } .question-input-wrap:focus-within { background-color: var(--option-bg); } .question-input-row .builder-question-input:focus { color: #FEFEFE; } .question-input-row .builder-question-input:focus:empty { caret-color: #7A7A7C; } .question-input-row .builder-question-input:focus:empty::before { color: #7A7A7C; } } .question-image-button-wrap { flex-shrink: 0; } .question-input-wrap .image-upload-button:not(.has-image), .question-input-wrap .score-pill-button:not(.has-custom-score) { color: rgb(131, 194, 251); } .question-input-wrap:has(.builder-question-input:focus) .image-upload-button:not(.has-image), .question-input-wrap:has(.builder-question-input:focus) .score-pill-button:not(.has-custom-score) { color: rgb(134, 134, 135); } .question-input-wrap .image-upload-button.has-image, .question-input-wrap .score-pill-button.has-custom-score { color: rgb(9, 124, 249); } .question-input-wrap:has(.builder-question-input:focus) .image-upload-button.has-image, .question-input-wrap:has(.builder-question-input:focus) .score-pill-button.has-custom-score { color: rgb(0, 0, 0); } @media (prefers-color-scheme: dark) { .question-input-wrap .image-upload-button:not(.has-image), .question-input-wrap .score-pill-button:not(.has-custom-score) { color: rgb(24, 78, 125); } .question-input-wrap:has(.builder-question-input:focus) .image-upload-button:not(.has-image), .question-input-wrap:has(.builder-question-input:focus) .score-pill-button:not(.has-custom-score) { color: rgb(122, 122, 124); } .question-input-wrap .image-upload-button.has-image, .question-input-wrap .score-pill-button.has-custom-score { color: rgb(10, 134, 249); } .question-input-wrap:has(.builder-question-input:focus) .image-upload-button.has-image, .question-input-wrap:has(.builder-question-input:focus) .score-pill-button.has-custom-score { color: rgb(254, 254, 254); } } .question-input-wrap .question-drag-handle-inline { color: rgb(131, 194, 251); opacity: 1; transition: color 0.2s ease; } .question-input-wrap .question-drag-handle { color: rgb(131, 194, 251); opacity: 1; transition: color 0.2s ease; } .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle { color: rgb(134, 134, 135); } .question-input-wrap .question-drag-handle:hover, .question-input-wrap .question-drag-handle:active, .builder-card.dragging .question-input-wrap .question-drag-handle { color: rgb(9, 124, 249); } .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle:hover, .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle:active, .builder-card.dragging .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle { color: rgb(0, 0, 0); } @media (prefers-color-scheme: dark) { .question-input-wrap:has(.builder-question-input:focus) { border-color: rgb(254, 254, 254); } .question-input-wrap .question-drag-handle { color: rgb(24, 78, 125); } .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle { color: rgb(122, 122, 124); } .question-input-wrap .question-drag-handle:hover, .question-input-wrap .question-drag-handle:active, .builder-card.dragging .question-input-wrap .question-drag-handle { color: rgb(10, 134, 249); } .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle:hover, .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle:active, .builder-card.dragging .question-input-wrap:has(.builder-question-input:focus) .question-drag-handle { color: rgb(254, 254, 254); } } .card-delete-badge-button { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: none; background-color: var(--option-hover); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; z-index: 5; display: none; /* Deprecated */ } .card-delete-badge-button svg { width: 12px; height: 12px; fill: currentColor; } .card-delete-badge-button:hover { background-color: var(--error-red); color: #ffffff; } .card-delete-badge-button:active { transform: scale(0.92); } .card-delete-badge-button:disabled { color: var(--text-tertiary); cursor: not-allowed; } .card-delete-badge-button:disabled:hover { background-color: var(--option-hover); color: var(--text-tertiary); } .question-row-image-off { flex-shrink: 0; width: 28px; height: 28px; border-radius: 10px; border: none; background: transparent; color: var(--text-tertiary); opacity: 0.25; cursor: default; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 0; } .question-row-image-off svg { width: 16px; height: 16px; fill: none; stroke: currentColor; } .score-pill-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 10px; border: none; background: transparent; color: var(--score-inactive); cursor: pointer; transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease; position: static; } .score-pill-button.has-custom-score { color: var(--score-active); } .score-pill-button svg { width: 18px; height: 18px; flex-shrink: 0; } @media (hover: hover) { .score-pill-button:hover { color: var(--score-active); opacity: 0.8; } .score-pill-button.has-custom-score:hover { opacity: 1; } } .score-pill-button:active { opacity: 0.7; color: var(--score-active); } .score-pill-button.has-custom-score:active { opacity: 1; } #score-popover-root { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; z-index: 9999; pointer-events: none; display: none; } .score-popover { position: absolute; z-index: 9999; pointer-events: auto; background: var(--bg-alert); border: 1px solid var(--alert-border); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); padding: 2px; display: flex; flex-direction: column; align-items: center; width: 44px; box-sizing: border-box; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.2s ease 0.05s, visibility 0s linear 0.3s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center center; transform: scale(0.88); margin-top: 0; } .score-popover.open { opacity: 1; visibility: visible; transform: scale(1); margin-top: -26px; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .score-popover:not(.open) .score-step-button { height: 0px; margin: 0; opacity: 0; pointer-events: none; transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease; } .score-popover.open .score-step-button { height: 26px; margin: 0; opacity: 1; pointer-events: auto; transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease 0.1s; } .score-stepper { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .score-step-button { width: 40px; border-radius: 8px; border: none; background: transparent; color: var(--score-inactive); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; overflow: hidden; transition: color 0.1s ease, opacity 0.15s ease, transform 0.1s ease; } .score-step-button svg { width: 24px; height: 24px; pointer-events: none; stroke-width: 2.5px; } @media (hover: hover) { .score-step-button:hover:not(:disabled) { color: var(--score-active); opacity: 0.8; } } .score-step-button:active:not(:disabled) { color: var(--score-active); opacity: 1; transform: scale(0.95); } .score-step-button:disabled { opacity: 0 !important; pointer-events: none !important; cursor: default; } .score-value-label { width: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(--score-active); user-select: none; padding: 2px 0; line-height: 1.2; cursor: pointer; } .image-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; z-index: 10000; pointer-events: none; touch-action: none; visibility: hidden; transition: visibility 0s linear 0.15s; } .image-modal-overlay::before { content: ''; position: absolute; inset: 0; background-color: var(--overlay-bg); z-index: -1; opacity: 0; transition: opacity 0.15s ease-out; } .image-modal-overlay.active::before { opacity: 1; } .image-modal-overlay.active { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } .image-modal-box { background: var(--bg-alert); width: 340px; border-radius: 28px; text-align: left; box-shadow: 0 24px 48px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--alert-border); box-sizing: border-box; padding: 24px 20px 20px 20px; position: relative; z-index: 1; opacity: 0; transition: opacity 0.15s ease-out; } .image-modal-overlay.active .image-modal-box { opacity: 1; } @media (prefers-color-scheme: dark) { .image-modal-box { box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1); } } .image-modal-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0 0 6px 0; letter-spacing: -0.3px; } .image-modal-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px 0; line-height: 1.4; } .image-preview-area { width: 100%; height: 140px; border-radius: 18px; border: 2px dashed var(--border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 14px; background-color: var(--option-bg); cursor: pointer; transition: all 0.2s ease; } .image-preview-area:hover, .image-preview-area.dragover { border-color: var(--apple-blue); background-color: var(--option-selected-bg); } .image-preview-area image { width: 100%; height: 100%; object-fit: contain; } .image-preview-area.view-only:hover { background-color: var(--option-bg); border-color: transparent; } .image-preview-area.view-only:hover image { transform: scale(1.6); } .image-preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-tertiary); pointer-events: none; } .image-preview-placeholder svg { width: 28px; height: 28px; fill: currentColor; } .image-preview-placeholder span { font-size: 13px; font-weight: 500; } .image-modal-actions { display: flex; gap: 10px; margin-top: 4px; } .image-modal-button { flex: 1; padding: 11px 10px; font-size: 16px; font-weight: 400; cursor: pointer; -webkit-appearance: none; box-sizing: border-box; border-radius: 999px; border: none; transition: transform 0.15s ease, opacity 0.2s ease; } .image-modal-button.primary { background-color: var(--apple-blue); color: #ffffff; } .image-modal-button.secondary { background-color: rgba(0,0,0,0.05); color: var(--text-main); } .image-modal-button.danger { background-color: rgba(0,0,0,0.05); color: var(--error-red); } @media (prefers-color-scheme: dark) { .image-modal-button.secondary, .image-modal-button.danger { background-color: rgba(255,255,255,0.1); } } .image-modal-button:active { transform: scale(0.97); opacity: 0.8; } .image-modal-button-row { display: flex; gap: 8px; } .explanation-button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 10px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.2s ease, color 0.2s ease; } .explanation-button svg { width: 18px; height: 18px; } .explanation-button.has-explanation { color: var(--apple-blue); } .explanation-button:hover { color: var(--apple-blue); } .play-explanation-button { flex-shrink: 0; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-tertiary); opacity: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 10px; margin-top: -10px; margin-bottom: -10px; border-radius: 4px; } .play-explanation-button svg { width: 18px; height: 18px; } .explanation-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; z-index: 10000; pointer-events: none; touch-action: none; visibility: hidden; transition: visibility 0s linear 0.15s; } .explanation-modal-overlay::before { content: ''; position: absolute; inset: 0; background-color: var(--overlay-bg); z-index: -1; opacity: 0; transition: opacity 0.15s ease-out; } .explanation-modal-overlay.active::before { opacity: 1; } .explanation-modal-overlay.active { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } .explanation-modal-wrapper { position: relative; width: 340px; z-index: 1; } .explanation-modal-box { position: relative; background: var(--bg-alert); width: 100%; border-radius: 28px; text-align: left; box-shadow: 0 24px 48px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--alert-border); box-sizing: border-box; padding: 50px 14px 14px 14px; overflow: hidden; position: relative; opacity: 0; transition: opacity 0.15s ease-out; } .explanation-modal-overlay.active .explanation-modal-box, .image-modal-overlay.active .explanation-modal-box { opacity: 1; } @media (prefers-color-scheme: dark) { .explanation-modal-box { box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1); } } .explanation-modal-top-button { position: absolute; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform 0.15s ease, opacity 0.2s ease; padding: 0; } .explanation-modal-top-button:active { transform: scale(0.9); opacity: 0.8; } .explanation-modal-top-button.close-button { left: 14px; background-color: rgba(0,0,0,0.05); color: var(--text-main); } .explanation-modal-top-button.save-button { right: 14px; background-color: var(--apple-blue); color: #ffffff; } .explanation-modal-top-button.save-button svg.lucide-check, .icon-button svg.lucide-check { transform: translate(-0.5px, 1px); } @media (prefers-color-scheme: dark) { .explanation-modal-top-button.close-button { background-color: rgba(255,255,255,0.1); } } .explanation-modal-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0 0 16px 0; padding-right: 14px; letter-spacing: -0.3px; text-align: left; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; max-height: 119px; overflow-y: auto; } .explanation-modal-answer-label { font-size: 12px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 14px 0; } .explanation-modal-textarea { width: 100%; box-sizing: border-box; background-color: var(--option-bg); color: var(--text-main); border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; font-size: 16px; font-family: inherit; line-height: 1.5; resize: none; overflow-y: hidden; max-height: 141px; transition: border-color 0.2s ease; margin-bottom: 14px; } .explanation-modal-textarea::placeholder { color: var(--text-tertiary); } .explanation-modal-textarea:focus:empty { caret-color: var(--text-tertiary); } .explanation-modal-textarea:focus { outline: none; border-color: var(--apple-blue); } .explanation-modal-textarea.read-only { pointer-events: none; background-color: var(--option-bg); border-color: transparent; color: var(--text-main); resize: none; } .explanation-modal-actions { display: flex; gap: 10px; } .explanation-modal-button { flex: 1; padding: 11px 10px; font-size: 16px; font-weight: 400; cursor: pointer; -webkit-appearance: none; box-sizing: border-box; border-radius: 999px; border: none; transition: transform 0.15s ease, opacity 0.2s ease; } .explanation-modal-button.primary { background-color: var(--apple-blue); color: #ffffff; } .explanation-popover { display: flex; position: absolute; top: 14px; left: 14px; flex-direction: column; gap: 6px; background-color: var(--bg-alert); box-shadow: 0 12px 30px rgba(0,0,0,0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.05); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 18px; padding: 6px; z-index: 1000; transform-origin: 16px 16px; opacity: 0; visibility: hidden; transform: scale(0.9); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s linear 0.25s; } @media (prefers-color-scheme: dark) { .explanation-popover { box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.05); } } .explanation-popover.active { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s linear 0s; } .explanation-popover-button { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: none; background-color: rgba(0, 0, 0, 0.05); font-size: 16px; font-weight: 400; color: var(--text-main); cursor: pointer; transition: transform 0.15s ease, opacity 0.2s, background-color 0.2s; text-align: left; white-space: nowrap; } @media (prefers-color-scheme: dark) { .explanation-popover-button { background-color: rgba(255, 255, 255, 0.1); } } .explanation-popover-button:active { transform: scale(0.97); } .explanation-popover-button.danger { color: var(--error-red); background-color: rgba(255, 59, 48, 0.12); } @media (prefers-color-scheme: dark) { .explanation-popover-button.danger { background-color: rgba(255, 69, 58, 0.18); } } .explanation-popover-button svg { width: 18px; height: 18px; } .explanation-modal-button.secondary { background-color: rgba(0,0,0,0.05); color: var(--text-main); } .explanation-modal-button.danger { background-color: rgba(0,0,0,0.05); color: var(--error-red); } @media (prefers-color-scheme: dark) { .explanation-modal-button.secondary, .explanation-modal-button.danger { background-color: rgba(255,255,255,0.1); } } .explanation-modal-button:active { transform: scale(0.97); opacity: 0.8; } .explanation-image-area { width: 100%; min-height: 50px; border-radius: 999px; border: 2px solid transparent; background-color: var(--option-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; position: relative; box-sizing: border-box; padding: 12px 14px; } .explanation-image-area:hover .explanation-image-placeholder, .explanation-image-area.dragover .explanation-image-placeholder { color: var(--apple-blue); } .explanation-image-area.dragover { border-color: var(--apple-blue); background-color: var(--option-selected-bg); } .explanation-image-area.has-image { border-color: transparent; cursor: default; height: auto; justify-content: center; padding: 14px; border-radius: 20px; flex-direction: column; } .explanation-image-area.has-image.no-island { border-color: transparent !important; background-color: transparent !important; border-radius: 0 !important; cursor: pointer; } .explanation-image-area.has-image:hover { background-color: var(--option-bg); border-color: transparent; } .explanation-image-area.read-only { cursor: default; pointer-events: none; } .explanation-image-placeholder { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text-tertiary); pointer-events: none; transition: color 0.2s ease; } .explanation-image-placeholder svg { width: 20px; height: 20px; } .explanation-image-placeholder span { font-size: 16px; font-weight: 500; } .explanation-image-remove-button { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.15s ease, transform 0.1s ease; pointer-events: auto; } .explanation-image-remove-button svg { width: 12px; height: 12px; fill: currentColor; } .explanation-image-remove-button:hover { background: rgba(0,0,0,0.7); } .explanation-image-remove-button:active { transform: scale(0.9); } .explanation-image-remove-button.top-left { top: 6px; left: 6px; right: auto; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.2s ease, background 0.15s ease, transform 0.1s ease; } .explanation-image-area.has-image:hover .explanation-image-remove-button.top-left { opacity: 1; } .explanation-image-remove-button.top-left:hover { background: var(--error-red); } @media (max-width: 600px) { body { align-items: flex-start; padding: max(14px, env(safe-area-inset-top)) env(safe-area-inset-right) max(14px, env(safe-area-inset-bottom)) env(safe-area-inset-left); } .header-info { padding-bottom: 12px; margin-bottom: 16px; } h2 { font-size: 22px; margin-bottom: 16px; } .option-button { padding: 14px; } .option-image-wrap { width: 80px; height: 80px; } .builder-seg-control { width: 168px; } .glass-add-button { padding: 0 14px; font-size: 16px; } } @keyframes spin-rotate { 100% { transform: rotate(360deg); } } @keyframes spin-dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } } /* ANIMÁCIÓK - ADD NEW ANSWER / DELETE ANSWER */ body.is-animating { pointer-events: none !important; cursor: not-allowed; } .builder-option-row { background-color: transparent !important; box-shadow: none !important; } .row-bg { position: absolute; inset: 0; background-color: var(--option-bg); z-index: 1; border-radius: inherit; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .builder-qa-panel .builder-option-row.trueFalse-state-true, .builder-qa-panel .builder-option-row.trueFalse-state-false, .builder-qa-panel .builder-option-row.select-is-correct { z-index: 2; } body .builder-qa-panel .builder-option-row.trueFalse-active-row { z-index: 9998 !important; } body .builder-qa-panel .builder-option-row.dragging { z-index: 10000 !important; } body .builder-qa-panel .builder-option-row.dragging::after { opacity: 0 !important; } /* JS-controlled Visual Merging classes for when drag is active */ .builder-option-row.dragging .row-bg { top: -5px; bottom: -5px; box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); border-radius: 0 !important; background-color: var(--option-bg) !important; } .builder-card.dragging { box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 -8px 20px rgba(0,0,0,0.08); transition: none !important; } @media (prefers-color-scheme: dark) { .builder-option-row.trueFalse-active-row .row-bg, .option-button.trueFalse-active-row { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2) !important; } .builder-option-row.dragging .row-bg { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); } .builder-card.dragging { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); } } .builder-option-row::after { z-index: 3 !important; } .builder-option-row > *:not(.delete-button):not(.row-bg):not(.trueFalse-popover) { position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease; } .builder-option-row.revealed > *:not(.delete-button):not(.trueFalse-popover) { transform: translateX(-85px); } .delete-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #EE4F4D; color: white; padding: 8px 16px; border-radius: 16px; font-size: 16px; font-weight: 500; cursor: pointer; z-index: 0; user-select: none; pointer-events: none; } .builder-option-row.revealed .delete-button { pointer-events: auto; } .delete-button:active { transform: translateY(-50%) scale(0.92); filter: brightness(0.9); } .builder-option-row.deleting > *:not(.delete-button) { transform: translateX(-160px); opacity: 0; } .builder-option-row.deleting .delete-button { opacity: 0; transform: translateY(-50%) scale(0.8); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .builder-option-row.deleting { transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease; overflow: hidden; border: none !important; } .builder-option-row.deleting::after { display: none !important; } .builder-card > .builder-qa-panel { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; position: relative; z-index: 1; } .builder-card.revealed > .builder-qa-panel { transform: translateX(-110px); } .builder-card.revealed .delete-button { pointer-events: auto; } .builder-card.deleting > .builder-qa-panel { transform: translateX(-160px); opacity: 0; } .builder-card.deleting .delete-button { opacity: 0; transform: translateY(-50%) scale(0.8); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .builder-card.deleting { transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease; overflow: hidden; pointer-events: none; } .delete-button-content { display: flex; align-items: center; gap: 6px; } @keyframes viewZoomFadeOutIntoCard { 0% { opacity: 1; transform: scale(1); filter: blur(0px); } 100% { opacity: 0; transform: scale(5); filter: blur(12px); } } @keyframes viewZoomFadeInFromCard { 0% { opacity: 0; transform: scale(0.85); filter: blur(8px); } 100% { opacity: 1; transform: scale(1); filter: blur(0px); } } @keyframes viewZoomFadeOutReverse { 0% { opacity: 1; transform: scale(1); filter: blur(0px); } 100% { opacity: 0; transform: scale(0.85); filter: blur(8px); } } @keyframes viewZoomFadeInReverse { 0% { opacity: 0; transform: scale(5); filter: blur(12px); } 100% { opacity: 1; transform: scale(1); filter: blur(0px); } } @keyframes cardLoadPulse { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(0.97) translateY(-4px); } 100% { transform: scale(1) translateY(0); } } .anim-zoom-fade-out { animation: viewZoomFadeOutIntoCard 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards !important; pointer-events: none; } .anim-zoom-fade-in { animation: viewZoomFadeInFromCard 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } .anim-zoom-fade-out-reverse { animation: viewZoomFadeOutReverse 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards !important; pointer-events: none; } .anim-zoom-fade-in-reverse { animation: viewZoomFadeInReverse 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; } .upcoming-exam-pill { position: fixed; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 99px; padding: 8px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, padding 0.2s; display: flex; align-items: center; } .upcoming-exam-pill.no-name { padding: 8px; } .upcoming-exam-pill:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } .exam-pill-content { display: flex; gap: 12px; align-items: center; } .exam-pill-name { font-weight: 600; font-size: 16px; color: var(--text-main); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exam-pill-timer { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; color: var(--apple-blue); background: rgba(0, 122, 255, 0.1); padding: 4px 10px; border-radius: 99px; } @keyframes pulsePill { 0% { transform: translate(var(--mag-x), var(--mag-y)) scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4); } 70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(0, 122, 255, 0); } 100% { transform: translate(var(--mag-x), var(--mag-y)) scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); } } .upcoming-exam-pill.pulse { animation: pulsePill 2s infinite; } /* --- RICH TEXT TOOLBAR --- */ .rich-text-toolbar { position: absolute; z-index: 10000; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translateY(10px) scale(0.95); } .rich-text-toolbar.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .rt-btn { background: transparent; border: none; color: var(--text-main); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.1s; } .rt-btn:hover { background-color: var(--option-bg); } .rt-btn.active { background-color: var(--apple-blue); color: white; } .rt-divider { width: 1px; height: 20px; background-color: var(--border-color); margin: 0 4px; } .rt-action-btn { color: var(--apple-blue); } /* HIDE EMPTY BUTTONS WHEN NOT IN USE */ .image-upload-button:not(.has-image):not(.question-row-image-off) { display: none !important; } .explanation-button:not(.has-explanation) { display: none !important; } /* --- BUILDER INLINE IMAGE STYLES --- */ .builder-question-image-wrap { margin-top: 10px; position: relative; display: inline-flex; flex-direction: column; align-items: center; } .builder-question-image-container { position: relative; max-width: 100%; border: 1px solid var(--border-color); border-radius: 12px; padding: 4px; background: rgba(0,0,0,0.04); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } @media (prefers-color-scheme: dark) { .builder-question-image-container { background: rgba(255,255,255,0.06); } } .builder-question-image-container img { max-width: 100%; max-height: 300px; border-radius: 8px; object-fit: contain; } .builder-option-image-container { position: relative; width: 100px; height: 100px; border: 1px solid var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); padding: 4px; box-sizing: border-box; } @media (prefers-color-scheme: dark) { .builder-option-image-container { background: rgba(255,255,255,0.06); } } .builder-option-image-container img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; } .builder-image-remove-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background-color: var(--error-red); color: white; border: none; border-radius: 50%; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; opacity: 0; transition: opacity 0.2s, transform 0.1s; } .builder-question-image-wrap:hover .builder-image-remove-btn, .builder-option-image-container:hover .builder-image-remove-btn { opacity: 1; } .builder-image-remove-btn:hover { transform: scale(1.1); } /* --- ACTIVE EDIT SCALE EFFECT --- */ .builder-option-row.is-rich-editing, .builder-option-row.trueFalse-active-row { border-radius: 12px; position: relative; z-index: 9999 !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .builder-option-row.trueFalse-active-row { transform: scale(1.02) translateZ(0); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .builder-option-row.is-rich-editing { } .question-input-row.is-rich-editing { position: relative; z-index: 9999 !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .question-input-row.is-rich-editing .question-input-wrap { } .builder-option-row.dragging { transform: scale(1.02) translateZ(0); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 0 !important; position: relative; z-index: 10000 !important; } transition: none !important; } .builder-qa-panel .builder-option-row[class*="trueFalse-state-"].is-rich-editing, .builder-qa-panel .builder-option-row[class*="trueFalse-state-"].trueFalse-active-row, .builder-qa-panel .builder-option-row[class*="trueFalse-state-"].dragging { border-radius: 0 !important; } @media (prefers-color-scheme: dark) { .builder-option-row.is-rich-editing, .builder-option-row.trueFalse-active-row, .builder-option-row.dragging { box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .question-input-row.is-rich-editing .question-input-wrap { box-shadow: 0 0 0 transparent; } .question-input-row.is-rich-editing:hover .question-input-wrap { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); } } /* Ensure True/False row colors and inset borders are kept when elevated (on the row itself to prevent double shadow issues if .row-bg takes over) */ .builder-qa-panel .builder-option-row.trueFalse-state-true.is-rich-editing, .builder-qa-panel .builder-option-row.trueFalse-state-true.trueFalse-active-row, .builder-qa-panel .builder-option-row.trueFalse-state-true.dragging { box-shadow: inset 0 0 0 2px var(--sel-selected-border); } .builder-qa-panel .builder-option-row.trueFalse-state-false.is-rich-editing, .builder-qa-panel .builder-option-row.trueFalse-state-false.trueFalse-active-row, .builder-qa-panel .builder-option-row.trueFalse-state-false.dragging { box-shadow: inset 0 0 0 2px var(--sel-false-border); } /* ====== FOCUS ELEVATION ====== */ .builder-qa-panel:has(:focus) { overflow: visible; } /* Base Transitions for fluid in/out */ .question-input-row { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateZ(0); will-change: transform; } .builder-option-row { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateZ(0); will-change: transform; } /* Question Row Base & Elevation */ /* Ensure separators transition smoothly */ .question-input-row::after, .builder-option-row::after { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Hide question separator if question is elevated */ .question-input-row:has(.builder-question-input:focus)::after { opacity: 0 !important; } /* Hide question separator if the FIRST option is elevated */ .question-input-row:has(~ .builder-options-group .builder-option-row:first-child:has(.builder-option-input:focus))::after { opacity: 0 !important; } /* Option Row Elevation */ .builder-option-row:has(.builder-option-input:focus) { transform: scale(1.02) translateZ(0); z-index: 100; } /* Hide option separator line when option is elevated */ .builder-option-row:has(.builder-option-input:focus)::after { opacity: 0 !important; } /* Hide previous option separator line when option is elevated */ .builder-option-row:has(+ .builder-option-row:has(.builder-option-input:focus))::after { opacity: 0 !important; } /* Hide delete button when option is elevated */ .builder-option-row:has(.builder-option-input:focus) .delete-button { opacity: 0 !important; pointer-events: none; } /* Option Row Background */ .row-bg { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Force full width in Customize mode to avoid horizontal animation */ .builder-option-row .row-bg { left: -14px; right: -14px; } /* Reset to 0 in Select mode since row itself has negative margins */ .builder-qa-panel .builder-option-row .row-bg { left: 0; right: 0; } .builder-option-row:has(.builder-option-input:focus) .row-bg { top: 0; bottom: 0; border-radius: 0; /* Middle rows are square */ box-shadow: none; } .builder-option-row:last-child:has(.builder-option-input:focus) .row-bg { border-radius: 0 0 18px 18px; /* Last row is bottom rounded */ bottom: 0; /* Align perfectly with panel bottom */ } @media (prefers-color-scheme: dark) { .builder-option-row:has(.builder-option-input:focus) .row-bg { box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 -8px 20px rgba(0,0,0,0.2); } } /* Dynamic Image Island */ .builder-option-row, .question-input-row { transition: padding-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .has-open-image-island .dynamic-image-island .island-accordion { grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 16px; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .island-content-row { display: flex; align-items: stretch; height: 120px; gap: 16px; min-height: 0; width: 100%; } .island-image-container { height: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.04); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } @media (prefers-color-scheme: dark) { .island-image-container { background: rgba(255,255,255,0.06); } } .island-image-container img { width: 100%; height: 100%; object-fit: contain; } .island-caption-container { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .island-caption-input { width: 100%; background-color: transparent; border: 1px solid transparent; font-size: 17px; color: var(--text-main); padding: 10px 12px; border-radius: 10px; font-weight: 500; transition: background-color 0.2s, border-color 0.2s; } .island-caption-input:focus { outline: none; background-color: var(--bg-card); border-color: var(--apple-blue); } .island-done-btn { background: rgba(0, 122, 255, 0.1); color: var(--apple-blue); border: none; border-radius: 12px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .island-done-btn:hover { opacity: 0.9; transform: scale(1.02); } .island-done-btn:active { transform: scale(0.98); } .island-remove-btn { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; background-color: var(--error-red); color: white; border: none; border-radius: 50%; font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.1s; } .island-remove-btn:hover { transform: scale(1.1); } .builder-option-image-wrap.options-island { background-color: var(--option-bg) !important; } .builder-option-row:first-of-type { border-top-left-radius: 18px; border-top-right-radius: 18px; } .add-option-button:hover { background-color: rgba(0,0,0,0.02); } .builder-option-row:first-of-type:has(.builder-option-input:focus) .row-bg { border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; } /* FORCE zero transition on dragged row background for instant progressive radius */ /* FORCE opaque background on dragged row even if it has focus */ .builder-option-row.dragging .row-bg, .builder-option-row.dragging:has(.builder-option-input:focus) .row-bg { transition: none !important; background-color: var(--option-bg) !important; } @keyframes check-pop { 0% { transform: translate(var(--mag-x), var(--mag-y)) scale(0.8); } 50% { transform: translate(var(--mag-x), var(--mag-y)) scale(1.15); } 100% { transform: translate(var(--mag-x), var(--mag-y)) scale(1); } } @keyframes draw-check { 0% { stroke-dashoffset: -30; } 100% { stroke-dashoffset: 0; } } .correct-toggle-button.is-correct.animate-check { animation: check-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .correct-toggle-button.is-correct.animate-check svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw-check 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.05s; } @keyframes check-unpop { 0% { transform: translate(var(--mag-x), var(--mag-y)) scale(1); background-color: var(--success-green); border-color: var(--success-green); color: #ffffff; } 40% { transform: translate(var(--mag-x), var(--mag-y)) scale(0.85); background-color: var(--success-green); border-color: var(--success-green); color: #ffffff; } 100% { transform: translate(var(--mag-x), var(--mag-y)) scale(1); background-color: transparent; border-color: var(--border-color); color: transparent; } } @keyframes undraw-check { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } } .correct-toggle-button:not(.is-correct):not(.animate-uncheck) svg.lucide-check path { stroke-dasharray: 30; stroke-dashoffset: -30; } .correct-toggle-button.is-correct:not(.animate-check) svg.lucide-check path { stroke-dasharray: 30; stroke-dashoffset: 0; } .correct-toggle-button.animate-uncheck { animation: check-unpop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .correct-toggle-button.animate-uncheck svg.lucide-check path { stroke-dasharray: 30; stroke-dashoffset: 0; animation: undraw-check 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .correct-toggle-button { --shadow-rgb: 50, 215, 75; } .correct-toggle-button.trueFalse-state-false { --shadow-rgb: 255, 59, 48; } .correct-toggle-button.trueFalse-state-none { --shadow-rgb: 120, 120, 128; } /* Question Footer Dynamic Colors */ .question-footer { color: #83C2FB; transition: color 0.2s ease; } .question-input-wrap:focus-within .question-footer { color: #868687; } @media (prefers-color-scheme: dark) { .question-footer { color: #184E7D; } .question-input-wrap:focus-within .question-footer { color: #7A7A7C; } } /* Text Field Action Badges (Accordion) */ .q-action-badge-accordion { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s; visibility: hidden; padding: 0 14px; } .is-rich-editing .q-action-badge-accordion { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .q-action-badge-inner { overflow: hidden; padding: 10px 10px 24px 10px; margin: -10px -10px -24px -10px; } .q-action-badge-container { display: flex; flex-direction: row; width: 100%; box-sizing: border-box; margin-bottom: 14px; gap: 12px; } .q-action-badge { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; border: none; border-radius: 999px; height: 42px; font-size: 15px; font-weight: 600; color: #ffffff; cursor: pointer; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .q-action-badge.expl-badge { background-color: #AF52DE; } .q-action-badge.expl-badge:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(175, 82, 222, 0.4); } .q-action-badge.media-badge { background-color: #FF9500; } .q-action-badge.media-badge:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4); } .q-action-badge svg { width: 18px; height: 18px; stroke: currentColor; } /* Media Badge Split Animation */ .media-badge-wrapper { flex: 1; position: relative; height: 42px; display: flex; } .media-badge-default { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .media-badge-wrapper:hover .media-badge-default { opacity: 0; pointer-events: none; transform: scale(0.95); } .media-badge-expanded { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; gap: 4px; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .media-badge-wrapper:hover .media-badge-expanded { opacity: 1; pointer-events: auto; } .media-sub-badge { position: relative; flex: 1; background-color: #FF9500; border: none; border-radius: 999px; display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; overflow: hidden; padding: 0; transition: flex 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s; box-shadow: 0 0 0 transparent; } .media-sub-badge:nth-child(1) { transform: translateX(30px); } .media-sub-badge:nth-child(2) { transform: scale(0.85); } .media-sub-badge:nth-child(3) { transform: translateX(-30px); } .media-badge-wrapper:hover .media-sub-badge { transform: translateX(0) scale(1); } .media-sub-badge svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; } .media-sub-badge .sub-text { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; margin-left: 0; transition: max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s, margin-left 0.3s; } .media-badge-expanded:hover .media-sub-badge { flex: 0.8; } .media-badge-expanded .media-sub-badge:hover { flex: 1.6; box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4); z-index: 10; } .media-badge-expanded .media-sub-badge:hover .sub-text { max-width: 60px; opacity: 1; margin-left: 6px; }