/* ===== Computer-delivered IELTS simulation ===== */
.cdi {
  --c-bg: #ffffff; --c-text: #1a1a1a; --c-muted: #555; --c-line: #cfd4dc; --c-head: #ffffff; --c-panel: #f4f5f7;
  --c-accent: #1f5fbf; --c-accent-soft: #e5eefb; --c-hl: #fff176; --c-note: #ffd59a; --c-answered: #1f5fbf; --c-flag: #e0901a;
  --c-fs: 16px;
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--c-bg); color: var(--c-text);
  font-family: Arial, Helvetica, sans-serif; font-size: var(--c-fs); line-height: 1.55;
}
.cdi[data-size="l"] { --c-fs: 18.5px; }
.cdi[data-size="xl"] { --c-fs: 21px; }
.cdi[data-contrast="wb"] { --c-bg: #000; --c-text: #fff; --c-muted: #ddd; --c-line: #666; --c-head: #000; --c-panel: #111; --c-accent: #7fb2ff; --c-accent-soft: #10223f; --c-hl: #6b5d00; --c-note: #6b3e00; }
.cdi[data-contrast="yb"] { --c-bg: #000; --c-text: #ffeb3b; --c-muted: #ffe98a; --c-line: #6d6200; --c-head: #000; --c-panel: #0d0d00; --c-accent: #ffeb3b; --c-accent-soft: #2b2700; --c-hl: #305cde; --c-note: #6b3e00; --c-answered: #b59b00; }
.cdi * { box-sizing: border-box; }
.cdi button { font-family: inherit; }

/* header */
.cdi-head { flex: none; display: flex; align-items: center; gap: 18px; padding: 8px 16px; background: var(--c-head); border-bottom: 1px solid var(--c-line); min-height: 56px; }
.cdi-logo { font-weight: 900; font-size: 22px; letter-spacing: 1px; color: #e4002b; padding-right: 14px; border-right: 1px solid var(--c-line); }
.cdi[data-contrast]:not([data-contrast="std"]) .cdi-logo { color: var(--c-text); }
.cdi-cand { font-size: 14px; color: var(--c-muted); line-height: 1.25; }
.cdi-cand b { color: var(--c-text); display: block; font-size: 15px; }
.cdi-timer { margin: 0 auto; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; padding: 6px 14px; border-radius: 8px; }
.cdi-timer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.cdi-timer.warn { color: #d0021b; background: #fdecee; animation: cdiBlink 1s step-end infinite alternate; }
@keyframes cdiBlink { 50% { background: transparent; } }
.cdi-tools { display: flex; gap: 6px; align-items: center; }
.cdi-tbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text); border-radius: 6px; font-size: 14px; cursor: pointer; }
.cdi-tbtn:hover { background: var(--c-accent-soft); }
.cdi-tbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cdi-tbtn.submit { background: var(--c-accent); color: #fff; border-color: var(--c-accent); font-weight: 700; }
.cdi[data-contrast="yb"] .cdi-tbtn.submit { color: #000; }
.cdi-vol { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cdi-vol input { width: 90px; accent-color: var(--c-accent); }

/* part banner */
.cdi-banner { flex: none; background: var(--c-panel); border-bottom: 1px solid var(--c-line); padding: 10px 20px; font-size: 0.95em; }
.cdi-banner b { font-size: 1.05em; margin-right: 8px; }
.cdi-audiobar { flex: none; padding: 8px 20px; background: var(--c-accent-soft); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 12px; font-size: 14px; }
.cdi-audiobar audio { height: 34px; flex: 1; max-width: 560px; }

/* body */
.cdi-body { flex: 1; min-height: 0; display: flex; position: relative; }
.cdi-pane { overflow: auto; padding: 22px 28px 60px; min-width: 0; }
.cdi-left { flex: 0 0 50%; }
.cdi-right { flex: 1; }
.cdi-single { flex: 1; max-width: 1000px; margin: 0 auto; }
.cdi-split { flex: none; width: 12px; cursor: col-resize; background: var(--c-panel); border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); position: relative; }
.cdi-split::after { content: "⋮"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--c-muted); font-size: 18px; }
.cdi-split:hover, .cdi-split.drag { background: var(--c-accent-soft); }
@media (max-width: 760px) { .cdi-body { flex-direction: column; overflow: auto; } .cdi-left { flex: none; } .cdi-split { display: none; } .cdi-pane { overflow: visible; padding: 16px; } .cdi-head { flex-wrap: wrap; gap: 8px; } .cdi-tbtn span { display: none; } }

.cdi-passage h2 { font-size: 1.35em; margin: 0 0 6px; }
.cdi-passage h3 { font-size: 1.1em; margin: 18px 0 6px; }
.cdi-passage .sub { font-style: italic; color: var(--c-muted); margin-bottom: 14px; }
.cdi-passage p { margin: 0 0 14px; }
.cdi-passage p[data-para] > b:first-child { display: inline-block; min-width: 22px; font-size: 1.05em; }
.cdi-passage img, .cdi-q img.q-img { max-width: 100%; height: auto; display: block; margin: 10px 0; border: 1px solid var(--c-line); background: #fff; }
.cdi-passage .intro { font-size: .93em; color: var(--c-muted); margin-bottom: 14px; }
.cdi-passage table, .cdi-q table { border-collapse: collapse; margin: 10px 0 16px; max-width: 100%; }
.cdi-passage td, .cdi-passage th, .cdi-q td, .cdi-q th { border: 1px solid var(--c-line); padding: 6px 9px; vertical-align: top; text-align: left; }
.cdi-q th { background: var(--c-panel); }

/* questions */
.cdi-group { margin-bottom: 34px; }
.cdi-group > h3 { font-size: 1.05em; margin: 0 0 6px; }
.cdi-instr { margin-bottom: 12px; }
.cdi-instr p { margin: 0 0 5px; }
.cdi-q h4 { margin: 14px 0 6px; font-size: 1em; }
.cdi-q p { margin: 0 0 9px; }
.cdi-q ul { margin: 4px 0 10px; padding-left: 22px; }
.cdi-q li { margin: 5px 0; }
.cdi-gtitle { font-weight: 700; text-align: center; font-size: 1.05em; margin: 4px 0 10px; }
.cdi-gcontent { border: 1px solid var(--c-line); padding: 14px 18px; border-radius: 4px; }
input.gap { font: inherit; font-size: .95em; width: 150px; padding: 3px 7px; border: 1px solid #8a94a6; border-radius: 3px; background: var(--c-bg); color: var(--c-text); margin: 1px 2px; text-align: center; }
input.gap::placeholder { color: var(--c-text); font-weight: 700; opacity: .9; }
input.gap:focus { outline: 2px solid var(--c-accent); border-color: var(--c-accent); }
.cdi-qitem { margin: 0 0 18px; padding: 4px 6px; border-radius: 4px; }
.cdi-qitem.current, .cdi-gap-cur { background: var(--c-accent-soft); }
.cdi-qnum { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 5px; border: 1px solid var(--c-text); border-radius: 3px; font-weight: 700; font-size: .9em; margin-right: 8px; }
.cdi-qtext { display: inline; }
.cdi-opts { margin: 8px 0 0 36px; display: flex; flex-direction: column; gap: 4px; }
.cdi-opts label { display: flex; align-items: flex-start; gap: 9px; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.cdi-opts label:hover { background: var(--c-accent-soft); }
.cdi-opts input { margin-top: 4px; accent-color: var(--c-accent); width: 16px; height: 16px; flex: none; }
.cdi-opts .ol { font-weight: 700; min-width: 16px; }
.cdi-opts.inline { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.cdi-optlist { border: 1px solid var(--c-line); border-radius: 4px; padding: 10px 14px; margin: 0 0 14px; background: var(--c-panel); }
.cdi-optlist h4 { margin: 0 0 8px; }
.cdi-chips { display: flex; flex-direction: column; gap: 6px; }
.cdi-chip { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 4px; cursor: grab; user-select: none; }
.cdi-chip b { min-width: 24px; }
.cdi-chip.used { opacity: .35; }
.cdi-chip.dragging { opacity: .5; }
.cdi-chips.compact { flex-direction: row; flex-wrap: wrap; }
.drop { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 30px; padding: 2px 10px; border: 1.5px dashed #8a94a6; border-radius: 4px; vertical-align: middle; cursor: pointer; background: var(--c-bg); font-weight: 700; margin: 1px 3px; }
.drop.filled { border-style: solid; border-color: var(--c-accent); font-weight: 400; background: var(--c-accent-soft); }
.drop.over { border-color: var(--c-accent); background: var(--c-accent-soft); }
.drop .dn { font-weight: 700; margin-right: 6px; }
.cdi-matchrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.cdi-matchrow .mtext { flex: 1; min-width: 200px; }
select.cdi-sel { font: inherit; font-size: .95em; padding: 3px 6px; border: 1px solid #8a94a6; border-radius: 3px; background: var(--c-bg); color: var(--c-text); min-width: 80px; }
.drop-menu { position: fixed; z-index: 160; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); border-radius: 6px; max-height: 300px; overflow: auto; min-width: 220px; max-width: 420px; font-size: .92em; }
.drop-menu div { padding: 7px 12px; cursor: pointer; }
.drop-menu div:hover { background: var(--c-accent-soft); }

/* writing */
.cdi-write { display: flex; flex-direction: column; height: 100%; }
.cdi-write textarea { flex: 1; width: 100%; min-height: 300px; resize: none; font: inherit; padding: 14px; border: 1px solid #8a94a6; border-radius: 4px; background: var(--c-bg); color: var(--c-text); line-height: 1.6; }
.cdi-wc { margin-top: 8px; font-size: .9em; color: var(--c-muted); text-align: right; }
.cdi-wc b { color: var(--c-text); }

/* footer nav */
.cdi-foot { flex: none; display: flex; align-items: stretch; border-top: 1px solid var(--c-line); background: var(--c-head); min-height: 58px; }
.cdi-review { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--c-line); font-size: 14px; cursor: pointer; user-select: none; }
.cdi-review input { width: 17px; height: 17px; accent-color: var(--c-flag); }
.cdi-parts { flex: 1; display: flex; overflow-x: auto; }
.cdi-part { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-right: 1px solid var(--c-line); cursor: pointer; white-space: nowrap; font-size: 14px; }
.cdi-part .pl { font-weight: 700; }
.cdi-part.active { flex: 1; cursor: default; background: var(--c-panel); }
.cdi-part .pc { color: var(--c-muted); font-size: 13px; }
.cdi-qbtns { display: flex; gap: 4px; flex-wrap: wrap; }
.cdi-qbtn { position: relative; width: 30px; height: 30px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text); border-radius: 3px; font-size: 13px; cursor: pointer; padding: 0; }
.cdi-qbtn.answered { background: var(--c-answered); color: #fff; border-color: var(--c-answered); }
.cdi-qbtn.answered::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 2px; background: rgba(255, 255, 255, .7); }
.cdi-qbtn.current { outline: 2px solid var(--c-text); outline-offset: 1px; }
.cdi-qbtn.flagged { border-radius: 50%; border: 2px solid var(--c-flag); }
.cdi-qbtn.flagged:not(.answered) { color: var(--c-flag); font-weight: 700; }
.cdi-qbtn.right { background: #18a058; border-color: #18a058; color: #fff; }
.cdi-qbtn.wrong { background: #d93848; border-color: #d93848; color: #fff; }
.cdi-arrows { display: flex; }
.cdi-arrows button { width: 58px; border: none; border-left: 1px solid var(--c-line); background: var(--c-head); color: var(--c-text); cursor: pointer; font-size: 22px; }
.cdi-arrows button:hover { background: var(--c-accent-soft); }

/* highlight / notes */
mark.hl { background: var(--c-hl); color: inherit; padding: 0; }
mark.hl.note { background: var(--c-note); border-bottom: 2px dotted #b35c00; cursor: pointer; }
.cdi-ctx { position: fixed; z-index: 170; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 6px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); padding: 4px 0; min-width: 150px; font-size: 14px; }
.cdi-ctx div { padding: 8px 16px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.cdi-ctx div:hover { background: var(--c-accent-soft); }
.cdi-notebox { position: fixed; z-index: 170; width: 280px; background: #fffbe8; color: #222; border: 1px solid #e0c96a; border-radius: 6px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); padding: 10px; }
.cdi-notebox textarea { width: 100%; height: 90px; font: 14px Arial; border: 1px solid #d9c56a; border-radius: 4px; padding: 6px; resize: vertical; }
.cdi-notebox .nb-row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.cdi-notebox button { font-size: 13px; padding: 4px 10px; border-radius: 4px; border: 1px solid #ccb85a; background: #fff; cursor: pointer; }

/* overlays */
.cdi-modal-back { position: absolute; inset: 0; z-index: 150; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; }
.cdi-modal { background: var(--c-bg); color: var(--c-text); border-radius: 8px; padding: 24px 28px; max-width: 640px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); font-size: 15px; }
.cdi-modal h2 { margin: 0 0 12px; font-size: 21px; }
.cdi-modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.cdi-btn { padding: 9px 18px; border-radius: 6px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text); cursor: pointer; font-size: 15px; font-weight: 600; }
.cdi-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.cdi-setgrp { margin: 12px 0; }
.cdi-setgrp > b { display: block; margin-bottom: 8px; }
.cdi-setgrp .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.cdi-setgrp .opts button { padding: 8px 14px; border-radius: 6px; border: 2px solid var(--c-line); cursor: pointer; }
.cdi-setgrp .opts button.sel { border-color: var(--c-accent); }
.cdi-hide { position: absolute; inset: 0; z-index: 140; background: var(--c-bg); display: grid; place-items: center; text-align: center; }
.cdi-intro { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }
.cdi-intro .box { max-width: 720px; border: 1px solid var(--c-line); border-radius: 8px; padding: 28px 32px; background: var(--c-bg); }
.cdi-intro h1 { font-size: 26px; margin: 0 0 6px; }
.cdi-intro ul { padding-left: 20px; }
.cdi-intro li { margin: 6px 0; }

/* review mode */
.cdi.review input.gap, .cdi.review .drop, .cdi.review select.cdi-sel { pointer-events: none; }
.cdi.review .cdi-opts label { pointer-events: none; }
.rvtag { display: inline-block; font-size: .82em; font-weight: 700; padding: 1px 7px; border-radius: 4px; margin-left: 4px; vertical-align: middle; }
.rvtag.ok { background: #e3f6ea; color: #137a42; }
.rvtag.bad { background: #fde7ea; color: #b4232f; }
input.gap.ok, .drop.ok, select.cdi-sel.ok { border-color: #18a058 !important; background: #e3f6ea !important; color: #111 !important; }
input.gap.bad, .drop.bad, select.cdi-sel.bad { border-color: #d93848 !important; background: #fde7ea !important; color: #111 !important; }
.cdi-opts label.ok { background: #e3f6ea; color: #111; }
.cdi-opts label.bad { background: #fde7ea; color: #111; }

/* speaking */
.spk { max-width: 860px; margin: 0 auto; padding: 30px 24px 80px; width: 100%; }
.spk-card { border: 1px solid var(--c-line); border-radius: 10px; padding: 24px 28px; margin-bottom: 18px; }
.spk-card h2 { margin: 0 0 10px; font-size: 1.3em; }
.spk-q { font-size: 1.25em; font-weight: 700; margin: 14px 0; }
.spk-cue { background: var(--c-panel); border: 2px solid var(--c-text); border-radius: 6px; padding: 18px 22px; font-size: 1.08em; }
.spk-cue ul { margin: 8px 0; }
.spk-timer { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 10px 0; }
.spk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #d0021b; animation: cdiBlink 1s step-end infinite alternate; }
.spk audio { width: 100%; margin-top: 8px; }

/* results (inside main app) */
.res-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.res-band { width: 150px; height: 150px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
.res-band b { font-size: 50px; line-height: 1; }
.res-band span { font-size: 13px; opacity: .9; }
@media (max-width: 620px) { .res-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ans-table td.ok { color: var(--success); font-weight: 700; }
.ans-table td.bad { color: var(--danger); font-weight: 700; }
.ans-table tr.wrongrow td { background: color-mix(in srgb, var(--danger-soft) 60%, transparent) !important; }
.essay-box { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-size: 15px; }
.checklist label { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.cdi-passage .footnote, .cdi-passage p.footnote { font-size: .85em; color: var(--c-muted); margin: 4px 0; }
.cdi-qtitle { font-weight: 700; margin: 6px 0 4px; }
/* native controls follow the exam's own palette, not the site theme */
.cdi { color-scheme: light; }
.cdi[data-contrast="wb"], .cdi[data-contrast="yb"] { color-scheme: dark; }
.cdi-q img.q-img { max-width: min(100%, 760px); }

/* ===== Red / black exam theme ===== */
.cdi { --c-accent: #c8102e; --c-accent-soft: #fde8eb; --c-answered: #c8102e; --c-flag: #f5a524; --c-bar: #0f0f10; --c-bar-2: #1b1b1d; --c-bar-line: #2e2e31; --c-bar-text: #f4f0f0; }
.cdi[data-contrast="wb"] { --c-accent: #ff4d5e; --c-accent-soft: #3a0d14; --c-answered: #ff4d5e; }
.cdi-head { background: var(--c-bar); color: var(--c-bar-text); border-bottom: 3px solid var(--c-accent); }
.cdi-logo { color: #ff2e43; border-right-color: var(--c-bar-line); }
.cdi[data-contrast]:not([data-contrast="std"]) .cdi-logo { color: var(--c-accent); }
.cdi-cand { color: #b9b0b1; }
.cdi-cand b { color: #fff; }
.cdi-timer { color: #fff; background: var(--c-bar-2); border: 1px solid var(--c-bar-line); }
.cdi-timer.warn { color: #fff; background: #c8102e; border-color: #c8102e; }
.cdi-head .cdi-tbtn { background: transparent; color: var(--c-bar-text); border-color: var(--c-bar-line); }
.cdi-head .cdi-tbtn:hover { background: var(--c-bar-2); border-color: #555; }
.cdi-head .cdi-tbtn.submit { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.cdi-head .cdi-tbtn.submit:hover { background: #a50d25; }
.cdi[data-contrast="yb"] .cdi-head .cdi-tbtn.submit { color: #000; }
.cdi-vol { color: var(--c-bar-text); }
.cdi-vol input { accent-color: var(--c-accent); }
.cdi-banner { border-left: 5px solid var(--c-accent); }
.cdi-banner b { color: var(--c-accent); }
.cdi-audiobar { background: var(--c-bar-2); color: var(--c-bar-text); border-bottom-color: var(--c-bar-line); }
.cdi-qnum { border-color: var(--c-accent); color: var(--c-accent); }
.cdi-qitem.current .cdi-qnum { background: var(--c-accent); color: #fff; }
.cdi-group > h3 { border-left: 4px solid var(--c-accent); padding-left: 10px; }
.cdi-gtitle { color: var(--c-text); }
.drop.filled { border-color: var(--c-accent); }
.cdi-split:hover, .cdi-split.drag { background: var(--c-accent); }
/* footer */
.cdi-foot { background: var(--c-bar); border-top: 3px solid var(--c-accent); color: var(--c-bar-text); }
.cdi-review { border-right-color: var(--c-bar-line); color: var(--c-bar-text); }
.cdi-part { border-right-color: var(--c-bar-line); }
.cdi-part:hover:not(.active) { background: var(--c-bar-2); }
.cdi-part.active { background: var(--c-bar-2); }
.cdi-part .pc { color: #9d9496; }
.cdi-qbtn { background: #232326; color: #eee; border-color: #3a3a3e; }
.cdi-qbtn:hover { border-color: var(--c-accent); }
.cdi-qbtn.answered { background: var(--c-answered); border-color: var(--c-answered); }
.cdi-qbtn.current { outline-color: #fff; }
.cdi-qbtn.flagged:not(.answered) { color: var(--c-flag); }
.cdi-arrows button { background: var(--c-bar); color: var(--c-bar-text); border-left-color: var(--c-bar-line); }
.cdi-arrows button:hover { background: var(--c-accent); }
.cdi-btn.primary { background: var(--c-accent); border-color: var(--c-accent); }
.cdi-intro h1 { color: var(--c-accent); }
.cdi-intro .box { border-top: 5px solid var(--c-accent); }
.spk-card { border-top: 4px solid var(--c-accent); }
.res-band { box-shadow: 0 18px 40px rgba(160, 6, 25, .4); }

/* ===== TOEIC ===== */
.tc .cdi-logo { letter-spacing: 2px; }
.tc-grid1 { max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; align-content: start; }
.tc-p1 img.q-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 6px; margin: 10px 0 4px; }
.tc-credit { font-size: 11px; color: var(--c-muted); margin-bottom: 6px; }
.tc-play { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--c-accent); background: transparent; color: var(--c-accent); cursor: pointer; margin-left: 6px; vertical-align: middle; }
.tc-play:hover { background: var(--c-accent); color: #fff; }
.tc-set { border-bottom: 1px dashed var(--c-line); padding-bottom: 18px; }
.tc-graphic { border: 1px solid var(--c-line); border-radius: 6px; padding: 10px 14px; margin: 8px 0 14px; background: var(--c-panel); display: inline-block; min-width: 280px; }
.tc-graphic table, .tc-passage table, .tc-doc table { border-collapse: collapse; }
.tc-graphic td, .tc-graphic th, .tc-doc td, .tc-doc th { border: 1px solid var(--c-line); padding: 4px 10px; }
.tc-script { background: var(--c-panel); border-left: 3px solid var(--c-accent); padding: 8px 14px; margin: 8px 0 12px; border-radius: 4px; font-size: .93em; }
.tc-script summary { cursor: pointer; font-weight: 700; color: var(--c-accent); }
.tc-script p { margin: 4px 0; }
.tc-explain { margin: 10px 0 0 36px; padding: 8px 12px; border-radius: 6px; font-size: .92em; border-left: 3px solid; }
.tc-explain.ok { background: #e9f7ef; border-color: #18a058; color: #14532d; }
.tc-explain.bad { background: #fdecee; border-color: #d93848; color: #7f1d1d; }
.tc-blank { font-weight: 700; color: var(--c-accent); white-space: nowrap; }
.tc-doc { border: 1px solid var(--c-line); border-radius: 6px; padding: 14px 18px; margin-bottom: 16px; background: var(--c-bg); }
.tc-doc-title { font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent); margin-bottom: 8px; }
.cdi.review .cdi-opts label { pointer-events: none; }
.tc-p1 .cdi-opts { margin-left: 0; flex-wrap: nowrap; }
.tc-p1 .cdi-opts label { padding: 4px 6px; }