/* ══════════════════════════════════════════════════════════════════════ Draft Doctor — styles (R1 skeleton) Reuses theme.css custom properties so light/dark themes Just Work. ══════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } main { max-width: 880px; margin: 0 auto; padding: 24px 18px 64px; } /* ── Screens ──────────────────────────────────────────────────────── */ .dd-screen { display: none; animation: ddFade .25s ease; } .dd-screen.active { display: block; } @keyframes ddFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── Loader ───────────────────────────────────────────────────────── */ .dd-loader { text-align: center; padding: 80px 0; } .dd-spinner { width: 38px; height: 38px; margin: 0 auto 16px; border: 3px solid var(--surf3); border-top-color: var(--teal); border-radius: 50%; animation: ddSpin .8s linear infinite; } @keyframes ddSpin { to { transform: rotate(360deg); } } .dd-loader-text { color: var(--dim); font-size: .95rem; } /* ── Hero ─────────────────────────────────────────────────────────── */ .dd-hero { text-align: center; padding: 32px 0 24px; } .dd-kicker { font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .dd-title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; margin: 6px 0 12px; letter-spacing: -.02em; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dd-sub { color: var(--text2); max-width: 620px; margin: 0 auto; line-height: 1.6; } .dd-sub b { color: var(--text); } /* ── Mode cards ───────────────────────────────────────────────────── */ .dd-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; } .dd-mode-card { text-align: left; cursor: pointer; color: inherit; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .12s, box-shadow .15s; } .dd-mode-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); } .dd-mode-ic { font-size: 2rem; line-height: 1; } .dd-mode-name { font-size: 1.25rem; font-weight: 700; } .dd-mode-desc { color: var(--dim); font-size: .9rem; line-height: 1.55; flex: 1; } .dd-mode-go { color: var(--teal); font-weight: 600; font-size: .9rem; } /* ── Screen heads / back ──────────────────────────────────────────── */ .dd-screen-head { padding: 28px 0 18px; } .dd-back { background: none; border: none; cursor: pointer; color: var(--dim); font: inherit; font-size: .85rem; padding: 0 0 10px; } .dd-back:hover { color: var(--teal); } .dd-h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; } .dd-screen-sub { color: var(--dim); margin: 0; font-size: .92rem; } /* ── Task type groups ─────────────────────────────────────────────── */ .dd-task-group { margin-top: 22px; } .dd-task-group-label { font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .06em; color: var(--dim); margin-bottom: 12px; } .dd-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .dd-task-card { text-align: left; cursor: pointer; color: inherit; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .12s; } .dd-task-card:hover { border-color: var(--accent); transform: translateY(-1px); } .dd-task-ic { font-size: 1.4rem; line-height: 1; } .dd-task-name { font-weight: 600; } .dd-task-hint { color: var(--dim); font-size: .8rem; line-height: 1.4; } /* ── Builder stub ─────────────────────────────────────────────────── */ .dd-stub { text-align: center; padding: 48px 20px; color: var(--dim); background: var(--surf); border: 1px dashed var(--border2); border-radius: var(--r); margin-top: 18px; } .dd-stub-ic { font-size: 2.2rem; } .dd-stub-state { display: inline-block; text-align: left; margin-top: 16px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 16px; font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--text2); } /* ── Quick Mode (Quick Check) ─────────────────────────────────────── */ .dd-q-field { margin-top: 16px; } .dd-q-field .dd-section-label { display: block; margin-bottom: 6px; } .dd-q-count { font-size: .8rem; color: var(--dim); margin-top: 5px; } .dd-q-count.is-short { color: #e0a93a; } /* D6 — min-word requirement shown upfront (under-length caps Task Response) */ .dd-q-minreq { font-size: .8rem; color: var(--text2); margin: 2px 0 6px; } .dd-q-minreq b { color: var(--text); } .dd-q-field textarea.dd-ta { min-height: 70px; overflow-y: hidden; resize: none; } .dd-q-bandwrap { margin-top: 20px; text-align: center; } .dd-q-band { display: inline-flex; flex-direction: column; align-items: center; min-width: 130px; padding: 14px 22px; border-radius: var(--r2); border: 1.5px solid var(--accent); background: var(--surf2); } .dd-q-band-num { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--text); } .dd-q-band-cap { font-size: .72rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; } .dd-q-band.dd-q-band-hi { border-color: var(--teal); } .dd-q-band.dd-q-band-hi .dd-q-band-num { color: var(--teal); } .dd-q-band.dd-q-band-mid { border-color: #e0a93a; } .dd-q-band.dd-q-band-mid .dd-q-band-num { color: #e0a93a; } .dd-q-band.dd-q-band-lo { border-color: #d9645a; } .dd-q-band.dd-q-band-lo .dd-q-band-num { color: #d9645a; } .dd-q-band-note { font-size: .82rem; color: var(--text2); max-width: 540px; margin: 8px auto 0; line-height: 1.5; } .dd-q-crit { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 13px 15px; margin-top: 12px; } .dd-q-crit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dd-q-crit-name { font-weight: 700; font-size: .92rem; color: var(--text); } .dd-q-crit-band { font-weight: 800; font-size: .95rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text2); } .dd-q-crit-band.dd-q-band-hi { color: var(--teal); border-color: var(--teal); } .dd-q-crit-band.dd-q-band-mid { color: #e0a93a; border-color: #e0a93a; } .dd-q-crit-band.dd-q-band-lo { color: #d9645a; border-color: #d9645a; } .dd-q-crit-comment { font-size: .86rem; color: var(--text2); margin-top: 7px; line-height: 1.5; } .dd-q-issues { margin: 8px 0 0; padding-left: 20px; } .dd-q-issues li { font-size: .84rem; color: var(--text2); line-height: 1.5; margin-top: 3px; } .dd-q-ok { font-size: .84rem; color: var(--teal); margin-top: 7px; } .dd-q-errs { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; } .dd-q-err { background: var(--surf); border: 1px solid var(--border2); border-radius: var(--r2); padding: 8px 11px; } .dd-q-err-type { display: inline-block; font-size: .72rem; font-weight: 700; color: #d9645a; border: 1px solid #d9645a; border-radius: 999px; padding: 1px 8px; margin-right: 8px; } .dd-q-err-text { font-size: .85rem; color: var(--text); } .dd-q-err-hint { font-size: .82rem; color: var(--text2); margin-top: 5px; line-height: 1.5; } .dd-q-steps { margin-top: 18px; background: var(--surf); border: 1px solid var(--accent); border-radius: var(--r2); padding: 12px 15px; } .dd-q-usp { font-size: .8rem; color: var(--dim); font-style: italic; margin-top: 16px; line-height: 1.5; } .dd-q-actions { margin-top: 16px; } /* ── C2 (#3) — group-name type-in box ─────────────────────────────── */ .dd-cat-add { display: flex; gap: 8px; align-items: stretch; } .dd-cat-input { flex: 1; font: inherit; font-size: .9rem; color: var(--text); background: var(--surf2); border: 1px solid var(--border2, var(--border)); border-radius: var(--r2); padding: 9px 13px; transition: border-color .15s, box-shadow .15s; } .dd-cat-input::placeholder { color: var(--dim); } .dd-cat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,191,.18); } .dd-cat-add .dd-btn { white-space: nowrap; } /* ── C5 (#11) — finish congrats animation ─────────────────────────── */ .dd-congrats { text-align: center; padding: 10px 0 4px; } .dd-congrats-burst { font-size: 2.6rem; line-height: 1; animation: dd-pop .6s cubic-bezier(.18,.89,.32,1.28) both; } .dd-congrats-msg { margin-top: 6px; font-weight: 700; color: var(--teal); animation: dd-fade-up .5s ease .15s both; } @keyframes dd-pop { 0% { transform: scale(0) rotate(-18deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } } @keyframes dd-fade-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── A (#7) — Sample Lab ───────────────────────────────────────────── */ .dd-lab-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .dd-lab-tab { font: inherit; font-size: .8rem; cursor: pointer; background: var(--surf2); border: 1px solid var(--border2, var(--border)); color: var(--text2); border-radius: 999px; padding: 5px 12px; } .dd-lab-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .dd-lab-ctl { margin-top: 10px; } .dd-lab-list { margin-top: 14px; display: flex; flex-direction: column; gap: 18px; } .dd-lab-card { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 15px 16px; } .dd-lab-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dd-lab-title { font-weight: 700; color: var(--text); font-size: .98rem; } .dd-lab-band { font-size: .76rem; font-weight: 700; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 1px 9px; } /* per-criterion band breakdown strip (Sample Lab v2) */ .dd-lab-crit { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; } .dd-lab-crit-cap { flex-basis: 100%; font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); line-height: 1.4; } .dd-lab-crit-item { display: inline-flex; align-items: center; gap: 8px; background: var(--surf2); border: 1px solid var(--border); border-radius: 9px; padding: 5px 11px; } .dd-lab-crit-lbl { font-size: .78rem; color: var(--text2); } .dd-lab-crit-band { font-weight: 800; font-size: .95rem; min-width: 1.5em; text-align: center; } .dd-lab-crit-band.hi { color: var(--green); } .dd-lab-crit-band.mid { color: var(--yellow, #E0A422); } .dd-lab-crit-band.lo { color: var(--coral, #E07856); } .dd-lab-prompt { font-size: .86rem; color: var(--text2); font-style: italic; margin-top: 9px; line-height: 1.5; border-left: 3px solid var(--accent); padding-left: 10px; } .dd-lab-fig { margin: 12px 0; text-align: center; } .dd-lab-img { max-width: 100%; border-radius: var(--r2); background: #fff; border: 1px solid var(--border); } .dd-lab-cap { font-size: .76rem; color: var(--dim); margin-top: 5px; line-height: 1.4; } .dd-lab-legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; } .dd-lab-leg { font-size: .7rem; padding: 1px 8px; border-radius: 999px; color: var(--text); } .dd-lab-essay { margin-top: 8px; font-size: .92rem; line-height: 1.85; color: var(--text); } .dd-lab-annot { margin-top: 12px; background: var(--surf); border: 1px solid var(--border2, var(--border)); border-radius: var(--r2); padding: 12px 14px; } /* DD Feedback #7 #3 — annotations as a 2-level bullet hierarchy (category → sub-points) */ .dd-lab-annot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .dd-lab-annot-item { border-left: 2px solid var(--border2, var(--border)); padding-left: 11px; } .dd-lab-annot-cat { display: block; font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-hover, var(--accent)); margin-bottom: 6px; } .dd-lab-annot-sub { list-style: disc; margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 5px; } .dd-lab-annot-sub li { font-size: .83rem; color: var(--text2); line-height: 1.5; } .dd-lab-annot-sub li::marker { color: var(--dim); } .dd-lab-annot-sub li b { color: var(--text); font-weight: 700; } /* element colour-coding — DD Feedback #7 #1 + Sample Lab v2 (2026-06-16): every meaningful type has its OWN hue, now driven by a CSS variable so the admin colour editor (writing_lab_theme) can override each one live. The fill is the hue mixed into the card surface via color-mix; --dd-el-tint controls the global intensity (higher = bolder, less pale — the old tints sat ~.30). T1 and T2 never share a card, so a few hues are intentionally reused across them; within any single card all visible types stay distinct. */ :root { --dd-el-tint: 44%; /* highlight fill strength (admin-overridable) */ --dd-el-chain-tint: 36%; /* chains also carry a solid coloured underline */ --dd-el-overview: #6B7C8C; /* slate — rarely shown in T1 */ --dd-el-thesis: #8B5CF6; /* violet */ --dd-el-core_feature: #14B8A6; /* teal — process steps */ --dd-el-data_evidence: #64748B; /* slate — de-emphasised */ --dd-el-trend: #22C55E; /* green */ --dd-el-comparison: #F97316; /* orange */ --dd-el-location: #3B82F6; /* blue */ --dd-el-change: #EC4899; /* magenta */ --dd-el-mirror: #F43F5E; /* rose */ --dd-el-chain_A: #3B82F6; /* blue — building… */ --dd-el-chain_B: #14B8A6; /* teal */ --dd-el-chain_C: #F59E0B; /* amber */ --dd-el-chain_D: #F0612E; /* deep-orange — …toward the conclusion */ --dd-el-cohesion_linking: #8C9BB0; /* slate underline */ --dd-el-cohesion_ref: #8C9BB0; } .dd-el { border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .dd-el-overview { background: color-mix(in srgb, var(--dd-el-overview) var(--dd-el-tint), transparent); } .dd-el-thesis { background: color-mix(in srgb, var(--dd-el-thesis) var(--dd-el-tint), transparent); } .dd-el-core_feature { background: color-mix(in srgb, var(--dd-el-core_feature) var(--dd-el-tint), transparent); } .dd-el-data_evidence { background: color-mix(in srgb, var(--dd-el-data_evidence) var(--dd-el-tint), transparent); } .dd-el-trend { background: color-mix(in srgb, var(--dd-el-trend) var(--dd-el-tint), transparent); } .dd-el-comparison { background: color-mix(in srgb, var(--dd-el-comparison) var(--dd-el-tint), transparent); } .dd-el-location { background: color-mix(in srgb, var(--dd-el-location) var(--dd-el-tint), transparent); } .dd-el-change { background: color-mix(in srgb, var(--dd-el-change) var(--dd-el-tint), transparent); } .dd-el-mirror { background: color-mix(in srgb, var(--dd-el-mirror) var(--dd-el-tint), transparent); } /* Sequential Reasoning chain — 4 DISTINCT hues, cool→warm = building toward the conclusion */ .dd-el-chain_A { background: color-mix(in srgb, var(--dd-el-chain_A) var(--dd-el-chain-tint), transparent); border-bottom: 2px solid var(--dd-el-chain_A); } .dd-el-chain_B { background: color-mix(in srgb, var(--dd-el-chain_B) var(--dd-el-chain-tint), transparent); border-bottom: 2px solid var(--dd-el-chain_B); } .dd-el-chain_C { background: color-mix(in srgb, var(--dd-el-chain_C) var(--dd-el-chain-tint), transparent); border-bottom: 2px solid var(--dd-el-chain_C); } .dd-el-chain_D { background: color-mix(in srgb, var(--dd-el-chain_D) var(--dd-el-chain-tint), transparent); border-bottom: 2px solid var(--dd-el-chain_D); } .dd-el-cohesion_linking { text-decoration: underline; text-decoration-color: var(--dd-el-cohesion_linking); text-decoration-thickness: 2px; text-underline-offset: 3px; } .dd-el-cohesion_ref { text-decoration: underline dotted; text-decoration-color: var(--dd-el-cohesion_ref); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* legend swatches reuse the same backgrounds (drop the chain underline on the pill) */ .dd-lab-leg.dd-el-chain_A, .dd-lab-leg.dd-el-chain_B, .dd-lab-leg.dd-el-chain_C, .dd-lab-leg.dd-el-chain_D { border-bottom: 0; } .dd-lab-leg.dd-el-cohesion_linking, .dd-lab-leg.dd-el-cohesion_ref { background: var(--surf); border: 1px solid var(--border2, var(--border)); } /* Learner element-toggle bar (Sample Lab) — clickable legend chips that show/ hide each framework element. Chips reuse .dd-lab-leg + the .dd-el-* hues. */ .dd-lab-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 2px; } .dd-lab-toggle .lab-tg-lbl { font-size: .78rem; font-weight: 600; color: var(--text2); margin-right: 2px; } button.dd-lab-leg { font-family: inherit; border: 1px solid transparent; cursor: pointer; } button.dd-lab-leg.is-off { opacity: .32; filter: grayscale(.7); text-decoration: line-through; } .dd-lab-tg-act { font: inherit; font-size: .72rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border2, var(--border)); background: var(--surf); color: var(--text2); cursor: pointer; } .dd-lab-tg-act:hover { border-color: var(--accent); color: var(--text); } /* ══ STUDIO — Layered Builder (R2) ════════════════════════════════════ */ /* ── Stepper ──────────────────────────────────────────────────────── */ .dd-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 22px; } .dd-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surf2); border: 1px solid var(--border); color: var(--dim); font-size: .82rem; } .dd-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surf3); color: var(--text2); font-size: .72rem; font-weight: 700; } .dd-step.is-active { border-color: var(--teal); color: var(--text); } .dd-step.is-active .dd-step-n { background: var(--teal); color: #06251f; } .dd-step.is-done { color: var(--text2); } .dd-step.is-done .dd-step-n { background: var(--green); color: #07210f; } .dd-step.is-locked { opacity: .5; } .dd-step-sep { flex: 0 0 14px; height: 1px; background: var(--border2); } /* ── Common building blocks ───────────────────────────────────────── */ .dd-step-body { display: flex; flex-direction: column; gap: 14px; } .dd-question { background: var(--surf2); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 12px 16px; color: var(--text2); line-height: 1.55; font-size: .92rem; } .dd-rule { background: rgba(124,92,191,.10); border: 1px solid var(--stat-new-border); border-radius: var(--r2); padding: 10px 14px; color: var(--text2); font-size: .86rem; line-height: 1.5; } .dd-rule b { color: var(--text); } .dd-section-label, .dd-group-label, .dd-ref-title { font-family: "JetBrains Mono", monospace; font-size: .76rem; letter-spacing: .05em; color: var(--dim); text-transform: uppercase; } /* ── Slots (simple) ───────────────────────────────────────────────── */ .dd-group { display: flex; flex-direction: column; gap: 10px; } .dd-slot { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; } .dd-slot-key { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(245,158,11,.25) inset; } .dd-slot-label { font-weight: 600; font-size: .92rem; margin-bottom: 2px; } .dd-slot-hint { color: var(--dim); font-size: .82rem; margin-bottom: 8px; line-height: 1.45; } .dd-chain { display: inline-block; background: var(--surf3); color: var(--teal); border-radius: 5px; padding: 0 6px; font-family: "JetBrains Mono", monospace; font-size: .72rem; margin-left: 4px; } textarea.dd-ta { width: 100%; min-height: 40px; resize: none; overflow-y: hidden; background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: var(--r2); padding: 9px 11px; font: inherit; font-size: .92rem; line-height: 1.5; } textarea.dd-ta:focus { outline: none; border-color: var(--teal); } .dd-feedback { font-size: .84rem; margin-top: 7px; line-height: 1.45; } .dd-feedback:empty { display: none; } .dd-feedback.ok { color: var(--green); } .dd-feedback.warn { color: var(--coral); } /* ── Reference list ───────────────────────────────────────────────── */ .dd-ref { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .dd-ref-item { font-size: .9rem; line-height: 1.5; color: var(--text2); } .dd-ref-id { color: var(--dimmer); font-family: "JetBrains Mono", monospace; font-size: .72rem; } /* ── Suggestions (combine) ────────────────────────────────────────── */ .dd-suggestions { display: flex; flex-direction: column; gap: 8px; } .dd-sug { background: var(--surf2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r2); padding: 10px 13px; } .dd-sug-structure { font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--accent-hover); text-transform: capitalize; } .dd-sug-model { font-size: .9rem; margin: 4px 0; } .dd-sug-why { font-size: .82rem; color: var(--dim); } /* ── Combined sentence rows ───────────────────────────────────────── */ .dd-combined-list { display: flex; flex-direction: column; gap: 12px; } .dd-combined { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; } .dd-combined-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .88rem; margin-bottom: 8px; } .dd-x { background: none; border: none; color: var(--dim); cursor: pointer; font-size: .9rem; } .dd-x:hover { color: var(--red); } /* ── Grammar errors ───────────────────────────────────────────────── */ .dd-grammar-out { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; } .dd-err { background: rgba(224,120,86,.08); border: 1px solid var(--stat-learning-border); border-radius: var(--r2); padding: 8px 11px; } .dd-err-type { display: inline-block; font-size: .76rem; font-weight: 700; color: var(--coral); background: var(--stat-learning-bg); border-radius: 5px; padding: 1px 7px; } .dd-err-type.vn { color: #fff; background: var(--coral); } .dd-err-exp { font-size: .85rem; margin: 5px 0 2px; } .dd-err-hint { font-size: .8rem; color: var(--dim); } /* Concrete fix line: "✗ sai → ✓ đúng" (clarity — show the corrected fragment) */ .dd-err-fix { font-size: .84rem; margin: 4px 0; line-height: 1.5; } .dd-err-fix .dd-err-x { color: var(--red, #ef4444); text-decoration: line-through; } .dd-err-fix .dd-err-arrow { color: var(--dim); margin: 0 5px; font-weight: 700; } .dd-err-fix .dd-err-ok { color: var(--teal, #16a34a); font-weight: 700; } /* Item 5 — severity: clear errors (red, "nên sửa") vs low-confidence (yellow, "cân nhắc") */ .dd-err.is-high { border-left: 3px solid var(--red, #ef4444); } .dd-err.is-low { background: rgba(245,158,11,.08); border-color: var(--yellow, #f59e0b); border-left: 3px solid var(--yellow, #f59e0b); } .dd-err-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .dd-err-sev { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; letter-spacing: .02em; } .dd-err-sev.high { color: var(--red, #ef4444); background: rgba(239,68,68,.12); } .dd-err-sev.low { color: var(--yellow, #f59e0b); background: rgba(245,158,11,.14); } .dd-err-legend { font-size: .76rem; color: var(--dim); margin-bottom: 2px; } /* Tutor mode — guiding cue (a question) + reveal-the-answer-on-request flow */ .dd-err-cue { font-size: .84rem; color: var(--teal, #16a34a); margin: 4px 0 2px; line-height: 1.45; } .dd-err-ansrow { margin-top: 6px; } .dd-err-reveal { background: var(--surf3, var(--surf2)); color: var(--text2); border: 1px solid var(--border2); border-radius: 999px; padding: 3px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; } .dd-err-reveal:hover { border-color: var(--teal); color: var(--teal); } .dd-err-ans { font-size: .84rem; line-height: 1.5; } .dd-err-ans .dd-err-x { color: var(--red, #ef4444); text-decoration: line-through; } .dd-err-ans .dd-err-arrow { color: var(--dim); margin: 0 5px; font-weight: 700; } .dd-err-ans .dd-err-ok { color: var(--teal, #16a34a); font-weight: 700; } /* Simple-step (câu đơn) tutor feedback inside .dd-feedback */ .dd-fb-type { font-weight: 700; } .dd-fb-cue { color: var(--teal, #16a34a); font-size: .82rem; margin-top: 3px; font-weight: 500; } /* ── Enrich / paraphraser ─────────────────────────────────────────── */ .dd-enrich { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; } .dd-enrich-base { font-size: .9rem; color: var(--text2); margin-bottom: 8px; line-height: 1.5; } .dd-para-out { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .dd-para { font-size: .85rem; padding: 7px 11px; border-radius: var(--r2); line-height: 1.45; } .dd-para.on { background: var(--stat-mastered-bg); border: 1px solid var(--stat-mastered-border); } .dd-para.off { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); } .dd-para-tag { font-size: .74rem; font-weight: 700; opacity: .85; } .dd-para-idea { font-size: .82rem; color: var(--dim); padding-left: 4px; } /* ── Linking Gate ─────────────────────────────────────────────────── */ .dd-link-out { display: flex; flex-direction: column; gap: 9px; } .dd-pair { border-radius: var(--r2); padding: 10px 13px; border: 1px solid var(--border); } .dd-pair.linked { background: var(--stat-mastered-bg); border-color: var(--stat-mastered-border); } .dd-pair.suggest { background: var(--surf2); border-left: 3px solid var(--yellow); } .dd-pair-head { font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--dim); } .dd-pair-verdict { font-size: .9rem; margin: 4px 0; } .dd-pair-verdict.ok { color: var(--teal); } .dd-pair-verdict.suggest { color: var(--yellow); } .dd-pair-note { font-size: .82rem; color: var(--dim); line-height: 1.45; } /* P-D5 — paragraph-opening suggestion card ("🔗 Câu mở đoạn") */ .dd-para-open { border-radius: var(--r2); padding: 10px 13px; border: 1px solid var(--border); border-left: 3px solid var(--teal); background: var(--surf2); } .dd-para-open-head { font-size: .78rem; font-weight: 700; color: var(--teal); margin-bottom: 2px; } /* P-D5 (R2) — soft (style-only) opening nudge: lighter, dashed, clearly optional */ .dd-para-open.is-soft { border-style: dashed; border-left: 3px dashed var(--dim); background: transparent; opacity: .9; } .dd-para-open.is-soft .dd-para-open-head { color: var(--dim); font-weight: 600; } /* ── Final paragraph ──────────────────────────────────────────────── */ .dd-final { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px 18px; line-height: 1.7; font-size: .96rem; } /* ── Buttons ──────────────────────────────────────────────────────── */ .dd-btn { font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; border-radius: var(--r2); padding: 10px 16px; border: 1px solid transparent; transition: transform .1s, border-color .15s, background .15s; } .dd-btn:hover { transform: translateY(-1px); } .dd-btn-primary { background: var(--grad); color: #fff; } .dd-btn-secondary { background: var(--surf2); color: var(--teal); border-color: var(--teal); } .dd-btn-ghost { background: none; color: var(--dim); border-color: var(--border2); } .dd-btn-ghost:hover { color: var(--text); border-color: var(--text2); } .dd-btn-mini { background: var(--surf2); color: var(--text2); border-color: var(--border2); padding: 6px 11px; font-size: .82rem; margin-top: 8px; } .dd-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .dd-dim { color: var(--dim); font-size: .9rem; padding: 8px 0; } /* AI error inline notice (retry/quota/parse failures) */ .dd-ai-err { display: none; } .dd-ai-err.show { display: block; color: var(--coral); font-size: .84rem; margin-top: 8px; line-height: 1.45; } .dd-btn:disabled { opacity: .65; cursor: progress; transform: none; } /* ══ R4 — OPAL WRAPPER (Task 1) ═══════════════════════════════════════ */ .dd-wrap-progress { margin-bottom: 18px; } .dd-wrap-pick { font-size: .86rem; color: var(--text2); } .dd-wrap-pick b { color: var(--text); } textarea.dd-ta-lg { min-height: 132px; resize: none; overflow-y: hidden; font-size: .95rem; } /* ── Nature Gate verdict ──────────────────────────────────────────── */ .dd-nature-verdict { background: var(--surf2); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 12px 14px; } .dd-nature-head { font-size: 1rem; } .dd-nature-head b { color: var(--text); } .dd-nature-flag { font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--yellow); background: rgba(245,158,11,.12); border-radius: 5px; padding: 1px 7px; margin-left: 6px; } .dd-nature-why { font-size: .85rem; color: var(--dim); margin-top: 5px; line-height: 1.45; } .dd-nature-feats { display: flex; flex-direction: column; gap: 4px; } .dd-nature-feat { font-size: .87rem; color: var(--text2); line-height: 1.5; } .dd-nature-advice { background: rgba(124,92,191,.10); border: 1px solid var(--stat-new-border); border-radius: var(--r2); padding: 9px 13px; font-size: .85rem; color: var(--text2); line-height: 1.5; } /* ── Nature chooser chips ─────────────────────────────────────────── */ .dd-nature-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .dd-nature-chip { display: flex; align-items: center; gap: 7px; cursor: pointer; text-align: left; font: inherit; font-size: .86rem; color: var(--text2); background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 9px 12px; transition: border-color .15s, background .15s; } .dd-nature-chip:hover { border-color: var(--teal); } .dd-nature-chip.is-on { border-color: var(--teal); background: var(--stat-mastered-bg); color: var(--text); font-weight: 600; } /* ── VINES (T2) · keywords + technique grid + ideate prompts ──────── */ .dd-kw-row { display: flex; flex-wrap: wrap; gap: 6px; } .dd-kw { font-family: "JetBrains Mono", monospace; font-size: .74rem; color: var(--teal); background: var(--surf3); border-radius: 5px; padding: 2px 8px; } .dd-tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .dd-tech-card { display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; font: inherit; color: var(--text2); background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 11px 13px; transition: border-color .15s, background .15s, transform .12s; } .dd-tech-card:hover { border-color: var(--accent); transform: translateY(-1px); } .dd-tech-card.is-on { border-color: var(--teal); background: var(--stat-mastered-bg); color: var(--text); } .dd-tech-card:disabled { opacity: .6; cursor: progress; } .dd-tech-ic { font-size: 1.3rem; line-height: 1; } .dd-tech-name { font-weight: 600; font-size: .9rem; } .dd-tech-desc { font-size: .78rem; color: var(--dim); line-height: 1.4; } .dd-ideate-prompts { display: flex; flex-direction: column; gap: 5px; } .dd-ideate-q { font-size: .88rem; color: var(--text2); line-height: 1.5; background: var(--surf2); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 7px 11px; } /* D3 — side/aspect chip before each guiding question */ .dd-qtag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: 1px 8px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; color: var(--teal); background: rgba(32, 185, 185, .12); border: 1px solid rgba(32, 185, 185, .35); } .dd-qtag-warn { color: #e0a93a; background: rgba(224, 169, 58, .12); border-color: rgba(224, 169, 58, .38); } .dd-qtag-alt { color: var(--accent); background: rgba(124, 92, 191, .13); border-color: rgba(124, 92, 191, .38); } /* ── Outline preview ──────────────────────────────────────────────── */ .dd-outline { display: flex; flex-direction: column; gap: 12px; } .dd-outline-group { display: flex; flex-direction: column; gap: 6px; } .dd-outline-slot { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 9px 12px; } .dd-outline-slot.is-key { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(245,158,11,.25) inset; } .dd-outline-slot-label { font-weight: 600; font-size: .9rem; } .dd-outline-slot-hint { font-size: .81rem; color: var(--dim); margin-top: 3px; line-height: 1.45; } .dd-outline-subhead { font-size: .76rem; font-weight: 700; color: var(--dim); margin-top: 4px; opacity: .85; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 640px) { .dd-modes { grid-template-columns: 1fr; } .dd-step-label { display: none; } .dd-wrap-progress .dd-step-label { display: inline; } /* keep wrapper labels */ .dd-nature-chips { grid-template-columns: 1fr 1fr; } } /* ── R13 (#7) — autosave indicator + "tiếp tục bài" resume card ──────── */ .dd-save-status { display: inline-block; margin-left: 10px; font-size: .74rem; font-weight: 600; color: var(--dim); vertical-align: middle; } .dd-save-status.is-saved { color: var(--green); } .dd-save-status.is-off { color: var(--yellow); } .dd-resume-card { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 14px 16px; background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); box-shadow: var(--shadow); } .dd-resume-ic { font-size: 1.6rem; line-height: 1; } .dd-resume-body { flex: 1 1 auto; min-width: 0; } .dd-resume-title { font-weight: 700; color: var(--text); font-size: .98rem; } .dd-resume-meta { color: var(--text2); font-size: .82rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-resume-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .dd-resume-dismiss { background: none; border: none; color: var(--dim); font-size: 1rem; cursor: pointer; padding: 6px 8px; border-radius: var(--r2); line-height: 1; } .dd-resume-dismiss:hover { color: var(--text); } @media (max-width: 560px) { .dd-resume-card { flex-wrap: wrap; } .dd-resume-meta { white-space: normal; } .dd-resume-actions { width: 100%; justify-content: flex-end; } } /* ── R14 (#13) — step guide ("Hướng dẫn viết") collapsible panel ─────── */ .dd-guide { margin: 0 0 14px; } .dd-guide-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surf2); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r2); padding: 5px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1.2; } .dd-guide-btn:hover { filter: brightness(1.08); } .dd-guide-btn.is-open { background: var(--accent); color: #fff; } .dd-guide-body { margin-top: 8px; padding: 12px 14px; background: var(--surf2); border: 1px solid var(--line, var(--accent)); border-radius: var(--r2); color: var(--text2); font-size: .88rem; line-height: 1.55; } .dd-guide-body ul { margin: 6px 0 0; padding-left: 18px; } .dd-guide-body li { margin: 3px 0; } .dd-guide-body b { color: var(--text); } /* ── R14 (#6) — sample-essay viewer (button + modal) ────────────────── */ .dd-sample-btn { display: inline-block; margin-top: 8px; background: none; border: 1px dashed var(--accent); color: var(--accent); border-radius: var(--r2); padding: 5px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; } .dd-sample-btn:hover { background: var(--surf2); } .dd-sample-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1000; overflow-y: auto; } .dd-sample-box { position: relative; width: 100%; max-width: 720px; background: var(--surf, #fff); border-radius: var(--r2); box-shadow: var(--shadow); padding: 22px 24px; } .dd-sample-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.2rem; color: var(--dim); cursor: pointer; line-height: 1; } .dd-sample-h { margin: 0 0 14px; color: var(--text); font-size: 1.05rem; } .dd-sample-empty { text-align: center; padding: 28px 8px; color: var(--text2); } .dd-sample-item { border: 1px solid var(--line, var(--surf2)); border-radius: var(--r2); padding: 14px 16px; margin-bottom: 14px; } .dd-sample-title { font-weight: 700; color: var(--text); margin-bottom: 6px; } .dd-sample-prompt { font-style: italic; color: var(--text2); font-size: .86rem; margin-bottom: 8px; } .dd-sample-essay { white-space: pre-wrap; color: var(--text); font-size: .9rem; line-height: 1.6; margin-bottom: 10px; } .dd-sample-annot { font-size: .84rem; color: var(--text2); margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--accent); } @media (max-width: 560px) { .dd-sample-overlay { padding: 16px 8px; } .dd-sample-box { padding: 18px 16px; } } /* ── R15 (#2+#9) — I-1 Tìm ý (8-aspect grid + idea list) ─────────────── */ .dd-aspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; margin-bottom: 4px; } .dd-aspect { cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; color: var(--text2); background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 9px 10px; text-align: center; transition: border-color .15s, background .15s, transform .12s; } .dd-aspect:hover { border-color: var(--teal); background: var(--surf2); transform: translateY(-1px); } .dd-idea-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .dd-idea { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 10px 12px; } .dd-idea-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .dd-idea-n { font-weight: 700; font-size: .84rem; color: var(--accent); } .dd-x { background: none; border: none; color: var(--dim); font-size: .95rem; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: var(--r2); } .dd-x:hover { color: var(--red, #e5484d); background: var(--surf2); } /* ── R15 — I-2 Sequential Reasoning chain builder ───────────────────── */ .dd-idea-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .dd-idea-tab { cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; color: var(--text2); background: var(--surf); border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px; } .dd-idea-tab:hover { border-color: var(--teal); } .dd-idea-tab.is-on { border-color: var(--teal); background: var(--stat-mastered-bg); color: var(--text); } .dd-seed { background: rgba(124,92,191,.10); border: 1px solid var(--stat-new-border); border-radius: var(--r2); padding: 9px 13px; font-size: .88rem; color: var(--text2); line-height: 1.5; margin-bottom: 12px; } .dd-seed b { color: var(--text); } .dd-chain-build { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 10px; } .dd-chain-arrow { display: flex; align-items: center; color: var(--teal); font-size: 1.2rem; font-weight: 700; align-self: center; } .dd-node { flex: 1 1 200px; min-width: 180px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 8px 10px; } .dd-node.is-seed { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(124,92,191,.25) inset; } .dd-node-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .dd-node-key { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .82rem; color: var(--teal); } .dd-node-ctrls { display: flex; gap: 2px; } .dd-node-btn { background: none; border: 1px solid var(--border); color: var(--text2); font-size: .72rem; cursor: pointer; border-radius: 5px; padding: 1px 6px; line-height: 1.3; } .dd-node-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--text); } .dd-node-btn:disabled { opacity: .35; cursor: default; } .dd-node-ta { margin: 0; } .dd-chain-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .dd-seq-out { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .dd-seq-flag { background: rgba(245,158,11,.12); border: 1px solid var(--yellow); border-radius: var(--r2); padding: 7px 11px; font-size: .85rem; color: var(--text2); line-height: 1.45; } .dd-seq-issue { font-size: .85rem; color: var(--text2); line-height: 1.45; padding-left: 4px; } .dd-dev-hint { margin: 12px 0; padding: 9px 13px; border-radius: var(--r2); font-size: .83rem; line-height: 1.5; color: var(--dim); background: var(--surf2); border: 1px dashed var(--border); } .dd-dev-hint b { color: var(--text); } /* ── R15 — reasoning-chain reference on the Narrow (dàn ý) step ──────── */ .dd-chain-ref { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .dd-chain-ref-item { background: var(--surf2); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 9px 12px; } .dd-chain-ref-body { font-size: .88rem; color: var(--text2); line-height: 1.5; } .dd-chain-ref-body b { color: var(--text); } .dd-chain-ref-seq { font-size: .83rem; color: var(--teal); line-height: 1.5; margin-top: 4px; } .dd-chain-ref-topic { font-size: .85rem; color: var(--text2); font-style: italic; margin-top: 4px; } @media (max-width: 560px) { .dd-chain-build { flex-direction: column; } .dd-chain-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 16px; } .dd-node { min-width: 0; } .dd-aspect-grid { grid-template-columns: 1fr 1fr; } } /* ── R16 (#2) — optional develop layers (Mirror · Compare · Refute) ──── */ .dd-weakside { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: .85rem; color: var(--text2); cursor: pointer; } .dd-weakside input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .dd-weakside b { color: var(--text); } .dd-layers { display: flex; flex-direction: column; gap: 8px; } .dd-layer { border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; background: var(--surf); } .dd-layer.is-locked { opacity: .6; } .dd-layer-head { width: 100%; text-align: left; font: inherit; font-size: .92rem; font-weight: 600; color: var(--text); background: var(--surf2); border: none; padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .dd-layer-head::before { content: '▸'; color: var(--accent); transition: transform .15s; } .dd-layer-head.is-open::before { transform: rotate(90deg); } .dd-layer-head:disabled { cursor: not-allowed; color: var(--dim); } .dd-layer-tip { font-size: .7rem; font-weight: 600; color: var(--teal); background: var(--surf3); border-radius: 5px; padding: 1px 7px; } .dd-layer-lock { margin-left: auto; font-size: .85rem; } .dd-layer-lockmsg { font-size: .8rem; color: var(--dim); padding: 0 14px 11px; line-height: 1.45; } .dd-layer-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .dd-layer-intro { font-size: .85rem; color: var(--text2); line-height: 1.5; } .dd-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; } .dd-steps li { font-size: .85rem; color: var(--text2); line-height: 1.45; } .dd-mirror-node { background: var(--surf2); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 8px 11px; } .dd-mirror-map { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .8rem; color: var(--teal); margin-bottom: 3px; } .dd-mirror-hint { font-size: .82rem; color: var(--dim); line-height: 1.45; margin-bottom: 5px; } .dd-phrasebank { display: flex; flex-direction: column; gap: 3px; background: var(--surf2); border-radius: var(--r2); padding: 7px 11px; } .dd-phrase-row { font-size: .8rem; color: var(--text2); } .dd-refute-cands { display: flex; flex-direction: column; gap: 6px; } .dd-refute-cand { text-align: left; font: inherit; font-size: .84rem; color: var(--text2); line-height: 1.45; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 8px 11px; cursor: pointer; } .dd-refute-cand:hover { border-color: var(--yellow); } .dd-refute-cand.is-on { border-color: var(--yellow); background: rgba(245,158,11,.10); color: var(--text); } .dd-refute-cand b { color: var(--text); font-family: "JetBrains Mono", monospace; } /* ── R17 (#3/#4/#5) — side chooser · weak-side · thesis lock ─────────── */ .dd-side-panel { background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 12px 14px; margin: 4px 0 16px; } .dd-side-panel.is-locked { border-color: var(--green); } .dd-side-hint { font-size: .84rem; color: var(--text2); line-height: 1.5; margin-bottom: 8px; } .dd-side-hint b { color: var(--text); } .dd-side-verdict { font-size: .9rem; color: var(--text); line-height: 1.5; margin-bottom: 8px; } .dd-side-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .dd-side-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .dd-side-pick-label { font-size: .8rem; color: var(--dim); } .dd-side-mini { font: inherit; font-size: .8rem; color: var(--text2); background: var(--surf); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; cursor: pointer; } .dd-side-mini:hover { border-color: var(--teal); } .dd-side-mini.is-on { border-color: var(--teal); background: var(--stat-mastered-bg); color: var(--text); font-weight: 600; } .dd-side-role { font-size: .78rem; font-weight: 600; margin-left: 4px; } .dd-role-weak { color: var(--yellow); } .dd-role-strong { color: var(--green); } .dd-weakside-auto { font-size: .84rem; color: var(--text2); line-height: 1.5; background: var(--surf2); border-radius: var(--r2); padding: 8px 12px; margin: 4px 0 10px; } .dd-weakside-auto b { color: var(--text); } .dd-slot-locked { opacity: .85; border-style: dashed; } .dd-slot-locknote { font-size: .82rem; color: var(--yellow); line-height: 1.5; background: rgba(245,158,11,.08); border-radius: var(--r2); padding: 8px 11px; margin-top: 6px; } /* ── R19 (#1) — Task 1 chart image paste (dropzone + thumbnails) ─────── */ .dd-imgzone { margin-bottom: 12px; } .dd-drop { border: 1.5px dashed var(--accent); border-radius: var(--r2); padding: 16px 14px; text-align: center; font-size: .85rem; color: var(--text2); cursor: pointer; background: var(--surf2); transition: background .15s, border-color .15s; } .dd-drop:hover { background: var(--surf3, var(--surf2)); border-color: var(--teal); } .dd-drop.is-over { background: var(--stat-mastered-bg); border-color: var(--teal); color: var(--text); } .dd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .dd-thumb { position: relative; width: 96px; height: 72px; border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; background: var(--surf); } .dd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dd-thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 1; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; cursor: pointer; padding: 0; } .dd-thumb-x:hover { background: var(--red, #e5484d); } /* ── R20 (#11) — combine technique cards ────────────────────────────── */ .dd-tech-panel { margin: 0 0 14px; } .dd-tech-panel-head { width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 9px 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .dd-tech-panel-head::before { content: '▸'; color: var(--accent); transition: transform .15s; } .dd-tech-panel-head.is-open::before { transform: rotate(90deg); } .dd-combine-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; } .dd-combine-card { background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 9px 12px; } .dd-combine-name { font-weight: 700; font-size: .86rem; color: var(--text); } .dd-combine-when { font-size: .8rem; color: var(--text2); line-height: 1.45; margin: 3px 0; } .dd-combine-ex { font-size: .8rem; color: var(--teal); font-family: "JetBrains Mono", monospace; } @media (max-width: 560px) { .dd-combine-cards { grid-template-columns: 1fr; } } /* P1 (R1) — grammar-transformer tree (Combine step) */ .dd-gt-tree { display: block; } .dd-gt-group { margin-top: 8px; } .dd-gt-group-head { width: 100%; text-align: left; font: inherit; font-size: .83rem; font-weight: 700; color: var(--text); background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 7px 11px; cursor: pointer; display: flex; align-items: center; gap: 7px; } .dd-gt-group-head::before { content: '▸'; color: var(--accent); transition: transform .15s; } .dd-gt-group-head.is-open::before { transform: rotate(90deg); } .dd-combine-card.is-locked { opacity: .55; border-left-color: var(--text2); } .dd-combine-lock { font-size: .74rem; color: var(--text2); margin-top: 4px; font-style: italic; } .dd-combine-ex-maps { color: #a8694c; margin-top: 3px; } /* ── R19b (§6B) — Task 1 paragraph-grouping chooser ─────────────────── */ .dd-group-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 8px 0 4px; } .dd-group-opt { text-align: left; font: inherit; cursor: pointer; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 11px 13px; transition: border-color .15s, background .15s; } .dd-group-opt:hover { border-color: var(--teal); } .dd-group-opt.is-on { border-color: var(--teal); background: var(--stat-mastered-bg); } .dd-group-opt-label { font-weight: 700; font-size: .88rem; color: var(--text); margin-bottom: 4px; } .dd-group-opt-pc { font-size: .8rem; color: var(--green); line-height: 1.45; } .dd-group-opt-pc.con { color: var(--yellow); } @media (max-width: 560px) { .dd-group-opts { grid-template-columns: 1fr; } } /* ══ P0.1 — Context Dock (đề bài + chart + nature/type chip, mọi bước) ══ */ /* Layout: step body + sticky right rail on desktop; stacked (dock = top bar) on mobile. Dock is first in DOM so the mobile order is natural. */ .dd-layout { display: block; } .dd-btn-sm { padding: 5px 10px; font-size: .8rem; } .dd-dock { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); margin: 0 0 14px; overflow: hidden; } .dd-dock-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); padding: 10px 14px; text-align: left; } .dd-dock-title { font-weight: 700; font-size: .86rem; } .dd-dock-caret { color: var(--dim); font-size: .8rem; } .dd-dock-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; } .dd-dock-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dd-dock-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surf); border: 1px solid var(--border); color: var(--text2); } .dd-dock-chip-side { border-color: var(--teal); color: var(--teal); } .dd-dock-q { font-size: .9rem; line-height: 1.55; color: var(--text2); border-left: 3px solid var(--teal); padding-left: 12px; } .dd-dock-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .dd-dock-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r2); border: 1px solid var(--border); cursor: zoom-in; display: block; } .dd-dock-imgph { font-size: .82rem; color: var(--dim); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* Lightbox — full-screen chart preview */ .dd-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } .dd-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: var(--r2); box-shadow: 0 12px 48px rgba(0,0,0,.5); } /* Desktop ≥1024px: dock becomes a sticky right rail beside the step body. */ @media (min-width: 1024px) { .dd-layout { display: flex; gap: 22px; align-items: flex-start; } .dd-layout > .dd-step-body { flex: 1 1 auto; min-width: 0; order: 1; } .dd-layout > .dd-dock { order: 2; flex: 0 0 296px; width: 296px; margin: 0; position: sticky; top: 14px; } .dd-layout > .dd-dock .dd-dock-thumbs { flex-direction: column; } .dd-layout > .dd-dock .dd-dock-thumb { width: 100%; } .dd-layout > .dd-dock .dd-dock-thumb img { width: 100%; height: auto; max-height: 170px; object-fit: contain; } } /* Give the builder screen room for the rail without widening other screens. */ @media (min-width: 1024px) { body:has(#sBuilder.active) main { max-width: 1140px; } body:has(#sPrompts.active) main { max-width: 1180px; } /* Quick Check 3-column layout (PC-first): widen so the workflow / editor / toolbox columns get room. Mobile stays narrow + stacked (quick.js CSS). */ body:has(#sQuick.active) main { max-width: 1180px; } } /* ══ P1.1 — Nature Quiz (W2) ══ */ .dd-quiz-q { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px 16px; } .dd-quiz-qtext { font-weight: 600; font-size: .94rem; color: var(--text); margin-bottom: 10px; } .dd-quiz-opts { display: flex; flex-direction: column; gap: 8px; } .dd-quiz-opt { text-align: left; font: inherit; cursor: pointer; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 9px 13px; color: var(--text2); transition: border-color .15s, background .15s; } .dd-quiz-opt:hover { border-color: var(--accent); } .dd-quiz-opt.is-picked { border-color: var(--accent); background: var(--surf); color: var(--text); } .dd-quiz-opt.is-correct { border-color: var(--green, #36c08a); background: var(--stat-mastered-bg, rgba(54,192,138,.12)); color: var(--text); } .dd-quiz-opt.is-wrong { border-color: var(--yellow, #e0a93a); background: rgba(224,169,58,.12); } .dd-quiz-why { margin-top: 9px; font-size: .84rem; color: var(--dim); line-height: 1.5; } .dd-quiz-result { border-radius: var(--r2); padding: 11px 15px; font-size: .9rem; font-weight: 600; } .dd-quiz-result.ok { background: var(--stat-mastered-bg, rgba(54,192,138,.12)); color: var(--green, #36c08a); border: 1px solid var(--green, #36c08a); } .dd-quiz-result.warn { background: rgba(224,169,58,.12); color: var(--yellow, #e0a93a); border: 1px solid var(--yellow, #e0a93a); } /* ══ P1.2 — Division: body-count selector ══ */ .dd-count-row { display: flex; gap: 8px; } .dd-count-btn { width: 44px; height: 40px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); color: var(--text2); } .dd-count-btn:hover { border-color: var(--teal); } .dd-count-btn.is-on { border-color: var(--teal); background: var(--stat-mastered-bg, rgba(32,185,185,.14)); color: var(--text); } /* ══ P1.3 — Outline Board (drag-drop + tap) ══ */ .dd-board-pool { background: var(--surf); border: 1px dashed var(--border2, var(--border)); border-radius: var(--r2); padding: 12px 14px; } .dd-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .dd-cat-chip { font: inherit; font-size: .86rem; font-weight: 600; cursor: grab; user-select: none; background: var(--surf2); border: 1px solid var(--teal); color: var(--teal); border-radius: 999px; padding: 6px 13px; transition: transform .1s, box-shadow .15s; } .dd-cat-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.18); } .dd-cat-chip.is-sel { background: var(--teal); color: #fff; transform: scale(1.04); } /* Item 3b — per-kernel category tag (click-to-assign, not draggable) */ .dd-cat-tag { margin-top: 8px; } .dd-cat-tag-h { font-size: .76rem; color: var(--dim); margin-bottom: 5px; } .dd-tag-chip { font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; user-select: none; background: var(--surf2); border: 1px solid var(--border); color: var(--text2); border-radius: 999px; padding: 4px 11px; transition: border-color .15s, background .15s, color .15s; } .dd-tag-chip:hover { border-color: var(--teal); color: var(--text); } .dd-tag-chip.is-sel { background: var(--teal); border-color: var(--teal); color: #fff; } /* Item 2 — skip-to-complex toggle at the simple step */ .dd-skipsimple { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surf2); border: 1px dashed var(--border2, var(--border)); border-radius: var(--r2); padding: 9px 13px; margin: 8px 0; } .dd-skipsimple-msg { font-size: .82rem; color: var(--text2); } /* Item 7 — reuse-as-is affordance on a reference sentence */ .dd-ref-copy { display: inline-block; margin-top: 5px; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; background: none; border: 1px solid var(--teal); color: var(--teal); border-radius: 999px; padding: 2px 10px; transition: background .15s, color .15s; } .dd-ref-copy:hover { background: var(--teal); color: #fff; } .dd-board-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .dd-board-box { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; min-height: 92px; transition: border-color .15s, background .15s; } .dd-board-box.is-droppable { border-style: dashed; border-color: var(--teal); } .dd-board-box.is-over { background: var(--surf2); border-color: var(--teal); } .dd-board-box-head { font-weight: 700; font-size: .86rem; color: var(--text); margin-bottom: 9px; } .dd-board-empty { font-size: .82rem; color: var(--dim); font-style: italic; } .dd-board-check { display: flex; flex-direction: column; gap: 8px; } .dd-board-criterion { font-size: .86rem; color: var(--text2); line-height: 1.5; } @media (max-width: 560px) { .dd-board-boxes { grid-template-columns: 1fr; } } /* ══ #4 — user-defined groups (Socratic board) ══ */ .dd-guide-qs { background: var(--surf2); border-left: 3px solid var(--accent); border-radius: var(--r2); padding: 10px 14px; } .dd-guide-qs-title { font-weight: 700; font-size: .86rem; color: var(--text); margin-bottom: 5px; } .dd-guide-q { font-size: .85rem; color: var(--text2); line-height: 1.6; } .dd-cat-add { display: flex; gap: 8px; align-items: center; } .dd-cat-add input { flex: 1 1 auto; } .dd-ai-suggest { background: var(--surf); border: 1px dashed var(--border); border-radius: var(--r2); padding: 8px 12px; } .dd-ai-suggest-sum { cursor: pointer; font-size: .84rem; color: var(--dim); font-weight: 600; } .dd-ai-suggest[open] .dd-ai-suggest-sum { margin-bottom: 8px; } .dd-suggest-chip { font: inherit; font-size: .82rem; cursor: pointer; background: var(--surf2); border: 1px dashed var(--accent); color: var(--accent-hover, var(--accent)); border-radius: 999px; padding: 5px 12px; } .dd-suggest-chip:hover { background: rgba(124,92,191,.16); } .dd-cat-chip-wrap { display: inline-flex; align-items: center; gap: 2px; } .dd-cat-rm { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: .72rem; padding: 2px 4px; } .dd-cat-rm:hover { color: var(--yellow, #e0a93a); } /* ══ P2.1 — Overview Composer + intro hints + add/remove slots ══ */ .dd-slot-tip { font-size: .82rem; color: var(--dim); line-height: 1.5; margin: 2px 0 6px; } .dd-tmpl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .dd-tmpl-chip { font: inherit; font-size: .82rem; cursor: pointer; background: var(--surf2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text2); transition: border-color .15s, color .15s; } .dd-tmpl-chip:hover { border-color: var(--accent); color: var(--text); } .dd-slot-rm { display: inline-block; margin-top: 6px; font: inherit; font-size: .78rem; cursor: pointer; background: none; border: 0; color: var(--dim); padding: 2px 0; } .dd-slot-rm:hover { color: var(--yellow, #e0a93a); } /* ══ P2.2 — per-subject combine groups ══ */ .dd-subject-group { border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; margin-bottom: 12px; background: var(--surf); } .dd-subject-head { font-weight: 700; font-size: .9rem; color: var(--teal); margin-bottom: 8px; } .dd-sug-subject { font-size: .78rem; color: var(--dim); margin-bottom: 2px; } /* ══ P2.3 — Linking Gate paragraph editor ══ */ .dd-para-block { border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; margin-bottom: 12px; background: var(--surf); } .dd-para-block-head { font-weight: 700; font-size: .88rem; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .dd-para-ed { width: 100%; min-height: 64px; font: inherit; font-size: .92rem; line-height: 1.55; resize: none; overflow-y: hidden; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 10px 12px; color: var(--text); } .dd-underuse { font-size: .82rem; color: var(--yellow, #e0a93a); margin-top: 6px; } /* ══ P3.1 — T2 prompt highlighter + focus/topic/issue ══ */ .dd-warn-band { background: rgba(224,169,58,.14); border: 1px solid var(--yellow, #e0a93a); color: var(--yellow, #e0a93a); border-radius: var(--r2); padding: 10px 14px; font-size: .88rem; font-weight: 600; } .dd-hl-prompt { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 12px 14px; line-height: 1.7; font-size: .95rem; color: var(--text); } .dd-hl { padding: 1px 3px; border-radius: 4px; font-style: normal; color: var(--text); } .dd-hl-kw { background: rgba(124,92,191,.30); box-shadow: inset 0 -2px 0 var(--accent); } .dd-hl-abs { background: rgba(224,90,90,.28); box-shadow: inset 0 -2px 0 #e05a5a; } .dd-hl-cmp { background: rgba(32,185,185,.28); box-shadow: inset 0 -2px 0 var(--teal); } .dd-hl-scope { background: rgba(224,169,58,.28); box-shadow: inset 0 -2px 0 #e0a93a; } .dd-hl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .dd-hl-legend-item { font-size: .78rem; color: var(--dim); } .dd-fti-field { margin-bottom: 8px; } .dd-fti-label { font-size: .84rem; font-weight: 600; color: var(--text2); margin-bottom: 4px; } .dd-fti-hint { font-size: .8rem; color: var(--text2); opacity: .8; margin-top: 3px; } /* Issue 1: AI claim helper */ /* ══ P4.2 — Vocab Pool (USP) ══ */ .dd-vocab { background: var(--surf); border: 1px solid var(--accent); border-radius: var(--r2); overflow: hidden; } .dd-vocab-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(90deg, rgba(124,92,191,.16), transparent); border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .9rem; color: var(--text); padding: 10px 14px; text-align: left; } .dd-vocab-caret { color: var(--accent); } .dd-vocab-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; } .dd-vocab-note { font-size: .8rem; color: var(--dim); line-height: 1.5; } .dd-vocab-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dd-vocab-chip { font: inherit; font-size: .84rem; cursor: pointer; background: var(--surf2); border: 1px solid var(--accent); color: var(--text); border-radius: 999px; padding: 6px 13px; transition: background .15s; } .dd-vocab-chip:hover { background: rgba(124,92,191,.18); } .dd-vocab-chip b { color: var(--accent-hover, var(--accent)); } .dd-vocab-chip-more { font-size: .72rem; color: var(--dim); margin-left: 2px; } .dd-vocab-badges { display: flex; flex-wrap: wrap; gap: 6px; } .dd-vocab-badge { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surf2); border: 1px solid var(--teal); color: var(--teal); } .dd-vocab-badge.is-streak { border-color: #e0a93a; color: #e0a93a; background: rgba(224,169,58,.12); } .dd-vocab-nudge, .dd-vocab-loading { font-size: .84rem; color: var(--dim); background: var(--surf); border: 1px dashed var(--border2, var(--border)); border-radius: var(--r2); padding: 10px 14px; line-height: 1.5; } .dd-vocab-recap { background: var(--surf); border: 1px solid var(--accent); border-radius: var(--r2); padding: 12px 14px; margin-top: 12px; } .dd-vocab-recap-line { font-size: .88rem; color: var(--text2); margin-top: 4px; } .dd-vocab-recap-line.streak { color: #e0a93a; font-weight: 600; } /* popover */ .dd-vocab-pop { position: absolute; z-index: 9998; width: 270px; background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .dd-vocab-pop-word { font-weight: 700; color: var(--text); margin-bottom: 5px; padding-right: 18px; } .dd-vocab-pop-pos { font-size: .76rem; font-weight: 600; color: var(--accent-hover, var(--accent)); margin-top: 7px; } .dd-vocab-pop-mean { font-size: .86rem; color: var(--text2); } .dd-vocab-pop-coll { font-size: .82rem; color: var(--teal); margin-top: 5px; } .dd-vocab-pop-note { font-size: .78rem; color: var(--dim); margin-top: 7px; font-style: italic; } .dd-vocab-pop-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: .9rem; } /* toast */ .dd-vocab-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 9999; background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem; padding: 11px 20px; border-radius: 999px; box-shadow: 0 8px 28px rgba(124,92,191,.5); animation: ddFade .25s ease; } /* ══ P5 — Leveling: locked shells + modals ══ */ .dd-locked { display: flex; flex-direction: column; gap: 2px; opacity: .55; border: 1px dashed var(--border2, var(--border)); border-radius: var(--r2); padding: 8px 12px; cursor: not-allowed; } .dd-locked-label { font-weight: 600; font-size: .85rem; color: var(--dim); } .dd-locked-msg { font-size: .76rem; color: var(--dim); } .dd-count-btn.is-locked { opacity: .5; cursor: not-allowed; border-style: dashed; } .dd-layer.is-locked { opacity: .6; } .dd-modal-ov { position: fixed; inset: 0; z-index: 9997; background: rgba(0,0,0,.66); display: flex; align-items: center; justify-content: center; padding: 20px; } .dd-modal { background: var(--surf); border: 1px solid var(--accent); border-radius: var(--r2); padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 16px 48px rgba(0,0,0,.5); } .dd-modal.dd-modal-lg { max-width: 560px; max-height: 86vh; overflow-y: auto; } .dd-modal-title { font-weight: 700; font-size: 1.15rem; color: var(--text); margin-bottom: 8px; } .dd-modal-sub { font-size: .9rem; color: var(--text2); line-height: 1.55; margin-bottom: 16px; } .dd-modal-list { margin: 6px 0 16px; padding-left: 20px; color: var(--text2); font-size: .9rem; line-height: 1.7; } .dd-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .dd-modal .dd-quiz-q { margin-bottom: 12px; } .dd-level-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(124,92,191,.16); border: 1px solid var(--accent); color: var(--accent-hover, var(--accent)); } .dd-xp-bar { height: 7px; border-radius: 999px; background: var(--surf2); overflow: hidden; margin-top: 6px; } .dd-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--teal)); } /* ══ P6.1 — Review (Nghiệm thu) ══ */ .dd-wc { font-size: .88rem; font-weight: 600; padding: 9px 14px; border-radius: var(--r2); } .dd-wc.ok { background: var(--stat-mastered-bg, rgba(54,192,138,.12)); color: var(--green, #36c08a); border: 1px solid var(--green, #36c08a); } .dd-wc.warn { background: rgba(224,169,58,.12); color: var(--yellow, #e0a93a); border: 1px solid var(--yellow, #e0a93a); } .dd-check-crit { font-weight: 700; font-size: .82rem; color: var(--accent-hover, var(--accent)); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .03em; } .dd-check-row { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: .9rem; color: var(--text2); cursor: pointer; line-height: 1.45; } .dd-check-row input { margin-top: 2px; flex: 0 0 auto; } .dd-check-count { font-size: .82rem; color: var(--dim); margin-top: 8px; } /* Item 9 — branded self-assessment tiles (replace generic native checkboxes) */ .dd-check-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 9px 12px; margin: 5px 0; color: var(--text2); line-height: 1.45; transition: border-color .15s, background .15s; } .dd-check-item:hover { border-color: var(--teal); } .dd-check-item.is-on { border-color: var(--teal); background: var(--stat-mastered-bg, rgba(32,185,185,.1)); color: var(--text); } .dd-check-box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--border2, var(--border)); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: #fff; transition: background .15s, border-color .15s; } .dd-check-item.is-on .dd-check-box { background: var(--teal); border-color: var(--teal); } .dd-check-text { font-size: .9rem; } .dd-level-out { display: flex; flex-direction: column; gap: 6px; } .dd-level-verdict { font-weight: 700; font-size: .95rem; padding: 9px 14px; border-radius: var(--r2); } .dd-level-verdict.ok { background: var(--stat-mastered-bg, rgba(54,192,138,.12)); color: var(--green, #36c08a); border: 1px solid var(--green, #36c08a); } .dd-level-verdict.warn { background: rgba(224,169,58,.12); color: var(--yellow, #e0a93a); border: 1px solid var(--yellow, #e0a93a); } .dd-rubric-note { font-size: .86rem; color: var(--text2); line-height: 1.5; } /* ══ P6.2 — sample provenance badge ══ */ .dd-sample-prov { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin: 2px 0 6px; background: var(--surf2); border: 1px solid var(--border); color: var(--dim); } .dd-sample-prov-timed { border-color: var(--yellow, #e0a93a); color: var(--yellow, #e0a93a); } .dd-sample-prov-polished { border-color: var(--teal); color: var(--teal); } /* ══ WP-3 — review band table + IELTS Band Descriptor modal ══ */ .dd-band { margin: 12px 0; border: 1px solid var(--border2); border-radius: var(--r2); overflow: hidden; background: var(--surf); } .dd-band-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--surf2); } .dd-band-overall { font-size: 15px; color: var(--text); } .dd-band-info { background: transparent; border: 1px solid var(--border2); color: var(--text); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 12px; } .dd-band-info:hover { border-color: var(--teal); color: var(--teal); } .dd-band-disclaimer { padding: 6px 12px; font-size: 11px; color: var(--dim); } .dd-band-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 12px; border-top: 1px solid var(--border2); } .dd-band-crit { font-weight: 600; font-size: 13px; color: var(--text); } .dd-band-score { font-weight: 700; color: var(--teal); font-size: 14px; text-align: right; } .dd-band-comment { grid-column: 1 / -1; font-size: 12px; color: var(--text2); } .dd-modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .dd-modal { position: relative; max-width: 1100px; max-height: 86vh; overflow: auto; background: var(--bg); border: 1px solid var(--border2); border-radius: 12px; padding: 22px; box-shadow: var(--shadow); } .dd-modal-x { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--text); font-size: 18px; cursor: pointer; } .dd-modal-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .dd-modal-sub { font-size: 12px; color: var(--dim); margin-bottom: 14px; } .dd-desc-band { display: grid; grid-template-columns: 64px repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border2); } .dd-desc-bandno { font-weight: 700; font-size: 15px; color: var(--teal); } .dd-desc-cell { font-size: 11px; line-height: 1.45; color: var(--text2); } .dd-desc-cell-label { font-weight: 700; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; } .dd-desc-cell.is-you { background: rgba(94,191,124,.14); border-radius: 6px; padding: 5px; outline: 1px solid var(--teal); color: var(--text); } .dd-desc-cell.is-you.is-you-range { background: rgba(94,191,124,.07); outline: 1px dashed var(--teal); } /* band-range: cả 2 dòng của khoảng ước lượng */ /* QA-2026-06-08: on phones the 4-criteria descriptor grid is too cramped (~65px cols, one word per line) — stack it to a single column per band. Also enlarge the small guide-button tap target (~27px → 40px). */ @media (max-width: 560px) { .dd-modal { padding: 18px 14px; } .dd-desc-band { grid-template-columns: 1fr; gap: 6px; } .dd-desc-bandno { font-size: 16px; margin-bottom: 2px; } .dd-desc-cell { font-size: 12px; } .dd-guide-btn { min-height: 40px; padding: 8px 14px; } } /* ── WP-4 — Maps location-language legend (simple step) ── */ .dd-maps-help { margin: 4px 0 8px; } .dd-maps-legend { font-size: 12px; color: var(--text2); background: var(--surf2); border: 1px solid var(--border2); border-radius: var(--r2); padding: 8px 10px; margin-top: 4px; line-height: 1.7; } /* ── P5 (R1) — Link step: pairing tip + body-paragraph opener bank ── */ .dd-pairing-tip { margin: 4px 0 8px; } .dd-link-intro { margin: 2px 0 6px; } /* ── P7 (R1) — T2 intro paraphrase dropdown + linking-words bank ── */ .dd-paraphrase-method { width: 100%; font: inherit; font-size: 12px; color: var(--text); background: var(--surf); border: 1px solid var(--border2); border-radius: var(--r2); padding: 6px 8px; margin-bottom: 6px; } .dd-paraphrase-cue { font-size: 12px; color: var(--text2); line-height: 1.6; } .dd-linkbank { margin: 0 0 12px; } .dd-linkbank-head { width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 9px 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .dd-linkbank-head::before { content: '▸'; color: var(--accent); transition: transform .15s; } .dd-linkbank-head.is-open::before { transform: rotate(90deg); } .dd-linkbank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; } .dd-linkbank-row { background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 8px 11px; } .dd-linkbank-fn { font-weight: 700; font-size: .84rem; color: var(--text); margin-bottom: 3px; } .dd-linkbank-words { font-size: .8rem; color: var(--teal); font-family: "JetBrains Mono", monospace; line-height: 1.5; } @media (max-width: 560px) { .dd-linkbank-grid { grid-template-columns: 1fr; } } /* ── P6 (R1) — Storytelling Paraphrase Scaffold (premium, enrich step) ── */ .dd-btn-premium { border-color: var(--accent); color: var(--accent); } .dd-scaffold-out { margin-top: 6px; } .dd-scaffold-note { font-size: 12px; color: var(--accent); margin: 4px 0 6px; font-weight: 600; } .dd-scaffold { background: var(--surf2); border: 1px solid var(--border2); border-left: 3px solid var(--accent); border-radius: var(--r2); padding: 8px 11px; margin-bottom: 6px; } .dd-scaffold-tech { font-size: .82rem; font-weight: 700; color: var(--text); } .dd-scaffold-frame { font-size: .85rem; color: var(--teal); font-family: "JetBrains Mono", monospace; margin: 4px 0; line-height: 1.55; } .dd-scaffold-hint { font-size: 12px; color: var(--text2); line-height: 1.6; } /* ── P8 (R1) — type-aware T1 vocab banks (Combine/Enrich/Overview) ── */ .dd-vbank { margin: 0 0 12px; } .dd-vbank-head { width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--surf2); border: 1px solid var(--teal); border-radius: var(--r2); padding: 9px 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .dd-vbank-head::before { content: '▸'; color: var(--teal); transition: transform .15s; } .dd-vbank-head.is-open::before { transform: rotate(90deg); } .dd-vbank-groups { margin-top: 8px; } .dd-vbank-group { margin-bottom: 8px; } /* D6 — vocab bank as a grid of function cards (tidy, not a flat stack) */ .dd-vbank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .dd-vbank-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r2); padding: 10px 11px; } .dd-vbank-ic { display: inline-block; color: var(--teal); font-weight: 700; } .dd-vbank-glabel { font-size: .8rem; font-weight: 700; color: var(--text2); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } @media (max-width: 540px) { .dd-vbank-grid { grid-template-columns: 1fr; } } .dd-vbank-chip { font: inherit; font-size: .8rem; color: var(--text); background: var(--surf); border: 1px solid var(--border2); border-radius: 999px; padding: 4px 10px; margin: 0 4px 4px 0; cursor: pointer; } .dd-vbank-chip.is-locked { opacity: .55; } .dd-vbank-pop { position: relative; margin: 4px 0 8px; background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 9px 30px 9px 11px; } .dd-vbank-pop-en { font-weight: 700; font-size: .85rem; color: var(--text); } .dd-vbank-pop-vi { font-size: 12px; color: var(--text2); margin-top: 2px; } .dd-vbank-pop-lock { font-size: 12px; color: var(--accent); margin-top: 2px; } .dd-vbank-pop-ex { font-size: .82rem; color: var(--teal); font-style: italic; margin-top: 4px; line-height: 1.5; } .dd-vbank-pop-note { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.55; } .dd-vbank-pop-x { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 14px; } /* ── D7 — data-insertion frame reference (Data enrich step; 4 colored cards) ── */ .dd-datains { margin: 0 0 14px; } .dd-datains-h { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 8px; } .dd-datains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .dd-datains-card { background: var(--surf); border: 1px solid var(--border); border-left: 4px solid var(--dim); border-radius: var(--r2); padding: 10px 12px; } .dd-datains-title { font-size: .8rem; font-weight: 700; margin-bottom: 6px; letter-spacing: .01em; } .dd-datains-frames { margin: 0 0 6px; padding-left: 18px; } .dd-datains-frames li { font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--text2); line-height: 1.6; } .dd-datains-eg { font-size: .76rem; font-style: italic; color: var(--dim); line-height: 1.5; } /* 4 distinct accent hues (readable on both themes) */ .dd-datains-a { border-left-color: #22c55e; } .dd-datains-a .dd-datains-title { color: #22c55e; } .dd-datains-b { border-left-color: #f59e0b; } .dd-datains-b .dd-datains-title { color: #f59e0b; } .dd-datains-c { border-left-color: #20B9B9; } .dd-datains-c .dd-datains-title { color: #20B9B9; } .dd-datains-d { border-left-color: #9470D4; } .dd-datains-d .dd-datains-title { color: #9470D4; } @media (max-width: 540px) { .dd-datains-grid { grid-template-columns: 1fr; } } /* ── WP-5 — history hub ── */ .dd-mode-foot { text-align: center; margin-top: 16px; } .dd-hist-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .dd-hist-card { border: 1px solid var(--border2); border-radius: var(--r2); background: var(--surf); padding: 12px 14px; } .dd-hist-title { font-weight: 700; color: var(--text); flex: 1 1 auto; min-width: 0; } .dd-hist-q { font-size: 12px; color: var(--text2); margin: 3px 0; } .dd-hist-date { font-size: 11px; color: var(--dim); } .dd-hist-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } /* P-D1 — history sections (Studio / Quick / Bài tập) + status chips */ .dd-hist-tabs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .dd-hist-tab { font: inherit; font-size: .8rem; cursor: pointer; background: var(--surf2); border: 1px solid var(--border2, var(--border)); color: var(--text2); border-radius: 999px; padding: 5px 14px; } .dd-hist-tab.is-active { border-color: var(--teal); color: var(--text); font-weight: 600; } .dd-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .dd-hist-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border2); white-space: nowrap; } .dd-hist-status.is-done { color: var(--teal); border-color: var(--teal); } .dd-hist-status.is-doing { color: var(--yellow, #e0a93a); border-color: var(--yellow, #e0a93a); } /* Feature 4 — band chip + graded badge in history rows */ .dd-hist-gradeslot { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dd-hist-band { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--teal); white-space: nowrap; letter-spacing: .2px; } /* Feature 4 — detail panel: band note + next-steps (appended after band table) */ .dd-band-note { font-size: 12px; color: var(--text2); margin: 8px 0 0; line-height: 1.55; } .dd-band-next { margin: 10px 0 2px; background: rgba(124,92,191,.08); border: 1px solid var(--border2); border-radius: var(--r2); padding: 9px 12px; } .dd-band-next-h { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; } .dd-band-next-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text2); line-height: 1.6; } /* ── Feature 5 — 📈 Tiến bộ (writing-progress analytics) ── */ .dd-prog { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .dd-prog-empty { text-align: center; padding: 36px 20px; color: var(--text2); background: var(--surf); border: 1px dashed var(--border2); border-radius: var(--r2); display: flex; flex-direction: column; gap: 8px; align-items: center; } .dd-prog-empty-ic { font-size: 2rem; } /* summary stats */ .dd-prog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .dd-prog-stat { background: var(--surf2); border: 1px solid var(--border2); border-radius: var(--r2); padding: 10px 12px; text-align: center; } .dd-prog-stat-val { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; } .dd-prog-stat-lbl { font-size: .72rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; } .dd-prog-stat-hint { font-size: .72rem; color: var(--text2); margin-top: 2px; } .dd-prog-stat.is-up .dd-prog-stat-val { color: var(--teal); } .dd-prog-stat.is-down .dd-prog-stat-val { color: var(--yellow, #e0a93a); } .dd-prog-stat.is-flat .dd-prog-stat-val { color: var(--text2); } /* cards (chart / criteria / errors) */ .dd-prog-card { background: var(--surf); border: 1px solid var(--border2); border-radius: var(--r2); padding: 12px 14px; } .dd-prog-card-h { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 8px; } .dd-prog-chart-wrap { width: 100%; } .dd-prog-chart { width: 100%; height: auto; display: block; } /* criteria average bars */ .dd-prog-crit { display: flex; flex-direction: column; gap: 8px; } .dd-prog-crit-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; } .dd-prog-crit-lbl { font-size: 12px; font-weight: 600; color: var(--text2); } .dd-prog-crit-track { height: 9px; background: var(--surf2); border: 1px solid var(--border2); border-radius: 999px; overflow: hidden; } .dd-prog-crit-fill { height: 100%; background: var(--teal); border-radius: 999px; } .dd-prog-crit-num { font-size: 13px; font-weight: 800; color: var(--teal); text-align: right; } .dd-prog-crit-row.is-weak .dd-prog-crit-fill { background: var(--yellow, #e0a93a); } .dd-prog-crit-row.is-weak .dd-prog-crit-num { color: var(--yellow, #e0a93a); } .dd-prog-crit-row.is-weak .dd-prog-crit-lbl { color: var(--text); } /* frequent-error chips */ .dd-prog-errs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; } .dd-prog-err-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(124,92,191,.12); border: 1px solid var(--border2); color: var(--text2); } .dd-prog-err-chip b { color: var(--text); } /* ── WP-6 — intro paraphrase chips + synonym pool + dock legend ── */ .dd-paraphrase { margin-top: 6px; padding: 8px 10px; background: var(--surf2); border: 1px solid var(--border2); border-radius: var(--r2); } .dd-paraphrase-h { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .dd-paraphrase-sub { font-size: 11px; color: var(--dim); margin: 8px 0 4px; } .dd-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .dd-tech-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(124,92,191,.12); border: 1px solid var(--border2); color: var(--text2); } .dd-syn-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surf); border: 1px dashed var(--border2); color: var(--text2); } .dd-dock-legend { margin-top: 8px; } /* ── WP-10 — Sequential-Reasoning chain colour-coding (A→B→C→D + mirror) ── */ .dd-cc0 { --cc: #4a9eff; } .dd-cc1 { --cc: #23b3a3; } .dd-cc2 { --cc: #e0a93a; } .dd-cc3 { --cc: #e8743b; } .dd-cc4 { --cc: #b07cc6; } .dd-cc5 { --cc: #e0607e; } .dd-node[class*="dd-cc"] { border-left: 3px solid var(--cc); } .dd-node[class*="dd-cc"] .dd-node-key { color: var(--cc); font-weight: 700; } .dd-chain-arrow[class*="dd-cc"] { color: var(--cc); font-weight: 700; } .dd-mirror-map[class*="dd-cc"] { color: var(--cc); font-weight: 700; } /* ── WP-12 — "already complex at simple step" skip banner ── */ .dd-skip-banner { margin: 8px 0; padding: 10px 12px; background: rgba(224,169,58,.10); border: 1px solid var(--yellow, #e0a93a); border-radius: var(--r2); } .dd-skip-msg { font-size: 12px; color: var(--text); margin-bottom: 8px; } .dd-skip-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ── WP-13 — combine 1-sentence warning + history chart image ── */ .dd-combine-warn { display: none; } .dd-combine-warn.show { display: block; font-size: 11px; color: var(--yellow, #e0a93a); margin-top: 4px; } .dd-hist-fig { margin: 0 0 12px; text-align: center; } .dd-hist-fig img { max-width: 100%; border-radius: 8px; background: #fff; } /* ── DD #6 — Homework Suite (student hub) ── */ .dd-hw-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .dd-hw-card { border: 1px solid var(--border2); border-radius: var(--r2); background: var(--surf); padding: 12px 14px; } .dd-hw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .dd-hw-title { font-weight: 700; color: var(--text); } .dd-hw-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text2); white-space: nowrap; } .dd-hw-chip-todo { border-color: var(--border2); } .dd-hw-chip-doing { color: var(--yellow, #e0a93a); border-color: var(--yellow, #e0a93a); background: rgba(224,169,58,.10); } .dd-hw-chip-done { color: var(--teal); border-color: var(--teal); background: rgba(35,179,163,.10); } .dd-hw-chip-returned { color: var(--accent); border-color: var(--accent); background: rgba(124,92,191,.12); } .dd-hw-chip-graded { color: var(--teal); border-color: var(--teal); background: rgba(35,179,163,.16); } .dd-hw-chip-applied { color: var(--accent); border-color: var(--accent); background: rgba(124,92,191,.12); } /* unread teacher-reply badge ("🔔 N") on the assignment card head */ .dd-hw-bell { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--accent); border: 1px solid var(--accent); white-space: nowrap; line-height: 1.3; } .dd-hw-meta { font-size: 12px; color: var(--text2); margin: 4px 0; } .dd-hw-q { font-size: 12px; color: var(--text2); font-style: italic; margin: 3px 0; } .dd-hw-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .dd-hw-detail-title { margin: 12px 0 6px; color: var(--text); } .dd-hw-instructions { font-size: .9rem; color: var(--text); background: var(--surf2); border-left: 3px solid var(--teal); border-radius: var(--r2); padding: 8px 11px; margin-bottom: 8px; } .dd-hw-prompt { font-size: .92rem; color: var(--text); background: var(--surf); border: 1px solid var(--border2); border-radius: var(--r2); padding: 10px 12px; margin-bottom: 10px; line-height: 1.6; } .dd-hw-version { border: 1px solid var(--border2); border-radius: var(--r2); background: var(--surf); padding: 9px 12px; margin-bottom: 8px; } .dd-hw-version-meta { font-size: 12px; color: var(--text2); margin-bottom: 4px; } .dd-hw-notes { font-size: .88rem; color: var(--text); background: rgba(124,92,191,.10); border-radius: var(--r2); padding: 7px 10px; margin: 6px 0; line-height: 1.55; } .dd-hw-final-note { font-size: .9rem; color: var(--teal); margin-top: 10px; } .dd-hw-gate { border: 1px solid var(--accent); border-radius: var(--r2); background: var(--surf); padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; } .dd-hw-gate-ic { font-size: 28px; } /* ── HWv2 — student view: per-criterion chips + in-essay teacher comments ── */ .dd-hw-crit-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .dd-hw-crit-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text2); background: var(--surf); } .dd-hw-crit-chip b { color: var(--text); } .dd-hw-crit-total { border-color: var(--teal); color: var(--teal); background: rgba(35,179,163,.08); } .dd-hw-ann-item { border: 1px solid var(--border2); border-radius: var(--r2); background: var(--surf); padding: 7px 10px; margin-bottom: 6px; cursor: pointer; } .dd-hw-ann-item:hover { border-color: var(--accent); } .dd-hw-ann-ex { font-size: 12px; color: var(--text2); font-style: italic; } .dd-hw-ann-cmt { font-size: .85rem; color: var(--text); margin-top: 3px; } .dd-hw-ann-thread { margin-top: 5px; padding-left: 5px; border-left: 2px solid var(--border2); } .dd-hw-ann-err { font-size: .76rem; color: #ef5350; margin-top: 4px; } /* ── P2-1: summary-first ("Top 3 cần sửa") card in the student modal ── */ .dd-hw-summary { background: var(--surf2); border: 1px solid var(--accent); border-radius: var(--r2); padding: 12px 14px; margin: 4px 0 14px; } .dd-hw-summary-band { font-size: .92rem; color: var(--text2); margin-bottom: 6px; } .dd-hw-summary-band b { color: var(--teal); font-size: 1.05rem; } .dd-hw-summary-note { font-size: .88rem; color: var(--text); background: rgba(124,92,191,.10); border-radius: var(--r2); padding: 7px 10px; margin-bottom: 8px; line-height: 1.55; } .dd-hw-summary-h { font-family: "JetBrains Mono", monospace; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin: 6px 0 6px; } .dd-hw-summary-list { display: flex; flex-direction: column; gap: 5px; } .dd-hw-summary-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: .86rem; color: var(--text2); cursor: pointer; background: var(--surf); border: 1px solid var(--border2, var(--border)); border-radius: var(--r2); padding: 6px 10px; line-height: 1.4; } .dd-hw-summary-row:hover { border-color: var(--accent); color: var(--text); } .dd-hw-summary-row-static { cursor: default; } .dd-hw-summary-row-static:hover { border-color: var(--border2, var(--border)); color: var(--text2); } .dd-hw-summary-crit { flex: none; font-size: .95rem; line-height: 1; } .dd-hw-summary-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a/x focus cursor over the suggestion cards */ .dd-hw-ann-item.dd-ann-sg-focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(32,185,185,.45); } .dd-hw-sg-hint { font-size: .78rem; color: var(--dim); margin-top: 8px; line-height: 1.5; } .dd-hw-sg-hint b { color: var(--text2); font-family: "JetBrains Mono", monospace; font-size: .74rem; } /* ── O4: Studio step coach cards (studio-tour.js) ─────────────────── */ .ddst-card { position: absolute; z-index: 980; width: 340px; max-width: calc(100vw - 20px); background: var(--bg); border: 1px solid var(--teal); border-radius: var(--r2); padding: 14px 16px 12px; box-shadow: 0 12px 36px rgba(0,0,0,.45); font-size: .88rem; line-height: 1.55; color: var(--text2); animation: ddstIn .22s ease-out; } @keyframes ddstIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ddst-card::before { content: ''; position: absolute; top: -7px; left: var(--ddst-arrow-x, 24px); width: 12px; height: 12px; transform: rotate(45deg); background: var(--bg); border-left: 1px solid var(--teal); border-top: 1px solid var(--teal); } .ddst-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-right: 22px; } .ddst-ic { font-size: 1.1rem; } .ddst-title { font-weight: 700; color: var(--text); font-size: .92rem; } .ddst-body b { color: var(--text); } .ddst-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: var(--dim); font-size: .85rem; cursor: pointer; line-height: 1; } .ddst-x:hover { background: rgba(255,255,255,.08); color: var(--text); } .ddst-foot { margin-top: 10px; text-align: right; } .ddst-ok { border: 1px solid var(--teal); background: rgba(32,185,185,.12); color: var(--teal); border-radius: 999px; padding: 6px 16px; font-size: .82rem; font-weight: 700; cursor: pointer; } .ddst-ok:hover { background: rgba(32,185,185,.22); } .ddst-glow { outline: 2px solid rgba(32,185,185,.55); outline-offset: 3px; border-radius: 6px; transition: outline-color .3s; } .ddst-help { margin-left: 8px; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; border: 1px solid var(--stat-new-border); border-radius: 50%; background: rgba(124,92,191,.18); color: var(--text2); font-size: .72rem; font-weight: 700; cursor: pointer; line-height: 1; } .ddst-help:hover { background: rgba(124,92,191,.32); color: var(--text); } @media (max-width: 480px) { .ddst-card { font-size: .84rem; padding: 12px 13px 10px; } } /* ══ Practice Prompts Bank (#7) — browse curated questions → launch Quick/Studio ══ */ .dd-pb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .dd-pb-tab { font: inherit; font-size: .8rem; cursor: pointer; background: var(--surf2); border: 1px solid var(--border2, var(--border)); color: var(--text2); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; } .dd-pb-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .dd-pb-tab.is-empty { opacity: .5; } .dd-pb-tabn { font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.18); border-radius: 999px; padding: 0 6px; line-height: 1.5; } .dd-pb-tab.is-on .dd-pb-tabn { background: rgba(255,255,255,.28); } .dd-pb-topicbar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .dd-pb-topiclbl { font-size: .82rem; color: var(--dim); font-weight: 600; } .dd-pb-topicsel { font: inherit; font-size: .84rem; background: var(--surf2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; outline: none; } .dd-pb-list { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; } .dd-pb-card { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r2); padding: 15px 16px; } .dd-pb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .dd-pb-chip { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; } .dd-pb-topic { background: rgba(124,92,191,.16); color: var(--text2); border: 1px solid var(--stat-new-border); } .dd-pb-diff { background: var(--surf); color: var(--dim); border: 1px solid var(--border); } .dd-pb-q { color: var(--text); font-size: .98rem; line-height: 1.55; white-space: pre-wrap; } .dd-pb-fig { margin: 12px 0 0; } .dd-pb-img { max-width: 100%; border: 1px solid var(--border); border-radius: var(--r2); display: block; } .dd-pb-cap { font-size: .78rem; color: var(--dim); margin-top: 5px; } .dd-pb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } /* ── Đề luyện picker — PC-first filter rail + card grid (2026-06 rework) ── */ .dd-pb-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; margin-top: 16px; align-items: start; } @media (max-width: 820px) { .dd-pb-layout { grid-template-columns: 1fr; } } .dd-pb-rail { display: flex; flex-direction: column; gap: 5px; position: sticky; top: 12px; } @media (max-width: 820px) { .dd-pb-rail { position: static; } } .dd-pb-rlabel { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 12px 0 3px; } .dd-pb-rlabel:first-child { margin-top: 0; } .dd-pb-rgroup { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; } .dd-pb-rgrouph { font-size: .72rem; color: var(--dim); margin: 5px 0 2px; } .dd-pb-rtype { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: .82rem; cursor: pointer; background: var(--surf2); color: var(--text2); border: 1px solid var(--border2, var(--border)); border-radius: 9px; padding: 6px 10px; } .dd-pb-rtype:hover { border-color: var(--accent); } .dd-pb-rtype.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .dd-pb-rtype.is-empty { opacity: .42; } .dd-pb-rtype .dd-pb-tabn { font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.16); border-radius: 999px; padding: 0 7px; } .dd-pb-rtype.is-on .dd-pb-tabn { background: rgba(255,255,255,.28); } .dd-pb-difs { display: flex; flex-wrap: wrap; gap: 6px; } .dd-pb-dif { font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 4px 11px; border: 1px solid var(--border); background: var(--surf); color: var(--text2); opacity: .5; } .dd-pb-dif.is-on { opacity: 1; } .dd-pb-sortsel, .dd-pb-rail .dd-pb-topicsel { width: 100%; font: inherit; font-size: .82rem; background: var(--surf2); color: var(--text); border: 1px solid var(--border2, var(--border)); border-radius: 9px; padding: 6px 9px; } .dd-pb-content { min-width: 0; } .dd-pb-searchbar { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } .dd-pb-search { flex: 1; min-width: 0; font: inherit; font-size: .9rem; background: var(--surf2); color: var(--text); border: 1px solid var(--border2, var(--border)); border-radius: 999px; padding: 9px 16px; } .dd-pb-count { font-size: .8rem; color: var(--dim); white-space: nowrap; } .dd-pb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1180px) { .dd-pb-grid { grid-template-columns: 1fr; } } .dd-pb-empty { grid-column: 1 / -1; padding: 26px 0; text-align: center; } /* horizontal card: T1 thumbnail left, body right; T2 = body only */ .dd-pb-card { display: flex; flex-direction: column; } .dd-pb-card.has-thumb { flex-direction: row; gap: 13px; } .dd-pb-thumb { position: relative; flex: 0 0 148px; align-self: stretch; min-height: 100px; border-radius: var(--r2); overflow: hidden; background: var(--surf); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .dd-pb-thumb .dd-pb-img { width: 100%; height: 100%; object-fit: contain; background: #fff; border: 0; border-radius: 0; } .dd-pb-thumb-ph { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 1.7rem; color: var(--dim); text-align: center; } .dd-pb-thumb-ph span { font-size: .62rem; } .dd-pb-kind { position: absolute; top: 6px; left: 6px; font-size: .61rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; } .dd-pb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dd-pb-q { color: var(--text); font-size: .9rem; line-height: 1.5; white-space: normal; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .dd-pb-actions { margin-top: auto; padding-top: 12px; } /* difficulty colour-coding — translucent hue + border; text + emoji stay theme-aware */ .dd-pb-diff-easy { background: color-mix(in srgb, #22C55E 20%, transparent); border-color: color-mix(in srgb, #22C55E 46%, transparent); color: var(--text); } .dd-pb-diff-medium { background: color-mix(in srgb, #F59E0B 22%, transparent); border-color: color-mix(in srgb, #F59E0B 48%, transparent); color: var(--text); } .dd-pb-diff-hard { background: color-mix(in srgb, #EF4444 20%, transparent); border-color: color-mix(in srgb, #EF4444 46%, transparent); color: var(--text); }