.pick-mix-mode .page-container { isolation: isolate; position: relative; background: radial-gradient(ellipse at 15% 10%, #ffca5c1b, transparent 55%), radial-gradient(ellipse at 90% 80%, #ffbc4017, transparent 60%), #fff9ed; }
.pick-mix-mode .page-container::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .035; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='208' viewBox='0 0 240 208'%3E%3Cpath d='M0 52L30 0H90L120 52L90 104H30ZM120 52L150 0H210L240 52L210 104H150ZM60 156L90 104H150L180 156L150 208H90Z' fill='none' stroke='%239a6500' stroke-width='2'/%3E%3C/svg%3E") repeat; }
.pick-mix-mode #mode-title, .pick-mix-mode #ao-container, .pick-mix-mode #response-style-container,
.pick-mix-mode #mode-setup-guide, .pick-mix-mode #active-class-selection-container,
.pick-mix-mode #top-right-ui-cluster { display: none !important; }
.pick-mix-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.pick-mix-header h2 { color: #233e4c; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 .4rem; }
.pick-mix-header h2 i { color: #b78012; margin-right: .35rem; }
.pick-mix-header p, .pick-mix-step > p { color: #566872; margin: .4rem 0; }
.pick-mix-banner { width: clamp(180px, 22vw, 280px); height: auto; object-fit: contain; justify-self: center; }
.pick-mix-home { justify-self: end; display: grid; justify-items: center; background: transparent; border: 0; color: #43545a; cursor: pointer; font-size: .75rem; font-weight: 600; }
.pick-mix-home img { object-fit: contain; width: 90px; height: auto; }
.pick-mix-home:focus-visible { outline: 2px solid #b78012; border-radius: .75rem; }
.pick-mix-step { padding: 1rem; margin: 1rem 0; border: 1px solid #fff9; border-radius: 18px; background: #ffffffad; box-shadow: 0 3px 12px #8c651408; }
.pick-mix-step[hidden] { display: none; }
.pick-mix-step h3 { color: #294958; font-size: 1.2rem; display: flex; gap: .7rem; align-items: center; }
.pick-mix-step h3 > span { background: #fff1cc; color: #855900; border-radius: 50%; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font-size: 1rem; }
.pick-mix-choices { display: flex; gap: clamp(.5rem, 2vw, 1.8rem); flex-wrap: wrap; margin-top: .8rem; }
.pick-mix-choice { position: relative; display: flex; flex-direction: column; align-items: center; background: #fff; color: #284652; border: 3px solid transparent; border-radius: 20px; padding: .5rem .7rem .7rem; cursor: pointer; transition: border-color .15s, opacity .15s, box-shadow .15s; }
.pick-mix-choice img { display: block; width: clamp(95px, 15vw, 150px); height: auto; border-radius: 50%; }
.pick-mix-choice-label { font-weight: 700; margin-top: .4rem; }
.pick-mix-choice.is-deselected { opacity: .5; }
.pick-mix-choice:hover, .pick-mix-choice:focus-visible { opacity: 1; border-color: #e3bc60; outline: 2px solid transparent; }
.pick-mix-choice[aria-pressed="true"] { border-color: #199368; box-shadow: 0 4px 16px #13745222; }
.pick-mix-tick { display: none; position: absolute; top: .3rem; right: .3rem; background: #168453; color: #fff; border: 2px solid #fff; border-radius: 50%; width: 1.6rem; height: 1.6rem; font-weight: 700; text-align: center; }
.pick-mix-choice[aria-pressed="true"] .pick-mix-tick { display: block; }
.pick-mix-pilot #daily-challenge-grid { grid-template-columns: 1fr; }
.pick-mix-completed { display: grid; place-items: center; width: var(--dashboard-mode-button-size); height: var(--dashboard-mode-button-size); margin: 10px 10px 20px; }
.pick-mix-completed img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 768px) { .pick-mix-completed { width: calc(var(--dashboard-mode-button-size) - 20px); height: calc(var(--dashboard-mode-button-size) - 20px); margin: 8px 8px 18px; } }
@media (max-width: 750px) { .pick-mix-header { grid-template-columns: 1fr auto; gap: .5rem; } .pick-mix-banner { grid-column: 1/-1; grid-row: 1; width: 220px; } .pick-mix-choice { padding: .3rem; } }
@media (prefers-reduced-motion: reduce) { .pick-mix-choice { transition: none; } }

#pick-mix-question-type { margin: 1rem 0 .25rem; max-width: 360px; }
#pick-mix-question-type label { display: block; font-weight: 700; margin-bottom: .4rem; color: #294958; }
#pick-mix-loading { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; color: #856017; font-weight: 600; }
#pick-mix-loading[hidden] { display: none; }
.pick-mix-spinner { width: 20px; height: 20px; border: 3px solid #efdfb6; border-top-color: #b78012; border-radius: 50%; animation: pick-mix-spin .8s linear infinite; }
@keyframes pick-mix-spin { to { transform: rotate(360deg); } }
.pick-mix-mode #topics-container { scroll-margin-top: 1rem; }
.pick-mix-pilot .mode-groups { grid-template-columns: minmax(215px, 240px) minmax(330px, 390px) minmax(330px, 390px); justify-content: center; }
.pick-mix-pilot #daily-challenge-group { position: relative; }
.pick-mix-pilot .mode-group.notes { grid-column: auto; justify-self: stretch; max-width: none; }
.pick-mix-review-info { position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%); border: 0; background: transparent; padding: 0; }
@media (max-width: 1100px) { .pick-mix-pilot .mode-groups { grid-template-columns: minmax(200px, 240px) minmax(320px, 390px); } .pick-mix-pilot .mode-group.notes { grid-column: 1/-1; justify-self: center; width: min(100%, 390px); } }
@media (max-width: 768px) { .pick-mix-pilot .mode-groups { grid-template-columns: minmax(0, 390px); } .pick-mix-pilot .mode-group.notes { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .pick-mix-spinner { animation: none; } }

/* Written responses stay beside the revealed model answer for comparison. */
#response-box[data-pick-mix-written="1"] { position: relative; z-index: 1; margin: 1rem 0; }
#response-box[data-pick-mix-written="1"] > label,
#response-box[data-pick-mix-written="1"] > strong { display: block; margin-bottom: .4rem; }
#response-box[data-pick-mix-written="1"] textarea { display: block; width: 100%; box-sizing: border-box; min-height: 6rem; padding: .65rem; font: inherit; color: #203d4a; border: 2px solid #b78021; border-radius: 8px; background: #fffdf6; opacity: 1; }
#response-box[data-pick-mix-written="1"] textarea:focus { border-color: #168d72; outline: 3px solid #168d722b; outline-offset: 2px; }