/* Shared groups for previews, learning and browser print. */
.card.designed-card{--layout-fit:1;--picture-fit:1;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;box-sizing:border-box;padding:18px!important;border-width:3px;border-radius:20px;overflow:hidden;color:var(--fg)}
.card.designed-card .card-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;min-width:0;flex:none}
.card.designed-card .card-heading{display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;min-width:0}
.card.designed-card .card-copy{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;width:100%;min-width:0;flex:none}
.card.designed-card .design-text{margin:0!important;padding:0!important;width:100%;min-width:0;flex:none;box-sizing:border-box;line-height:1.25!important;overflow-wrap:anywhere;text-wrap:pretty;opacity:1!important;font-size:calc(var(--field-font,16px)*var(--card-scale,1)*var(--layout-fit))!important}
.card.designed-card .design-field-en,.card.designed-card[data-side=back] .design-field-vi{font-size:calc(var(--field-font,36px)*var(--card-scale,1))!important;font-weight:800!important;line-height:1.12!important;letter-spacing:.01em}
.card.designed-card .design-field-ipa{font-family:'Segoe UI','DejaVu Sans',sans-serif;font-weight:400;opacity:.78!important}.card.designed-card .design-field-vi{font-weight:700}.card.designed-card .design-field-sentenceVi{opacity:.8!important}
.card.designed-card .design-pic{position:relative;display:flex!important;align-items:center;justify-content:center;flex:none!important;min-height:0!important;max-height:none!important;height:calc(125px*var(--card-scale,1)*var(--picture-fit))!important;width:100%;margin:0!important;padding:0!important;overflow:visible!important;line-height:1!important;font-size:calc(110px*var(--card-scale,1)*var(--picture-fit))!important}
.card.designed-card .design-pic img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain!important}
.card.designed-card .card-example,.card.designed-card .card-definition{display:flex;flex-direction:column;gap:3px;border-radius:10px;padding:8px 10px;background:color-mix(in srgb,var(--cb) 65%,white);box-sizing:border-box;min-width:0}
.card.designed-card .card-example{border-left:3px solid color-mix(in srgb,var(--fg) 45%,transparent)}
.card.designed-card .card-field-label{display:block;font:600 calc(12px*var(--card-scale,1)*var(--layout-fit))/1.2 'Baloo 2','Baloo 2 Fallback','Trebuchet MS',sans-serif;letter-spacing:.02em;opacity:.7;margin-bottom:2px}
.card.designed-card .card-relations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);padding-top:8px}.card.designed-card .card-relations>.design-field-collocations{grid-column:1/-1}.card.designed-card .card-relations>.design-text{text-align:left!important}
.card.designed-card .card-other{display:flex;flex-direction:column;gap:6px}.card.designed-card .card-sentence-source{font-size:calc(9px*var(--card-scale,1));line-height:1.2;overflow-wrap:anywhere;opacity:.7}
.card.designed-card[data-density=dense]{gap:9px!important;padding:14px!important}.card.designed-card[data-density=dense] .card-hero:has(.design-pic):has(.card-heading){display:grid;grid-template-columns:28% minmax(0,1fr);gap:10px}.card.designed-card[data-density=dense] .design-pic{height:calc(82px*var(--card-scale,1)*var(--picture-fit))!important;font-size:calc(72px*var(--card-scale,1)*var(--picture-fit))!important}.card.designed-card[data-density=dense] .card-heading .design-text{text-align:left!important}
.card.designed-card[data-landscape=true]:has(.design-pic):not([data-density=dense]){display:grid!important;grid-template-columns:40% minmax(0,1fr)!important;grid-template-rows:auto;gap:14px!important}.card.designed-card[data-landscape=true]:not([data-density=dense]) .card-hero{display:contents}.card.designed-card[data-landscape=true]:not([data-density=dense]) .design-pic{grid-column:1;grid-row:1/span 2}.card.designed-card[data-landscape=true]:not([data-density=dense]) .card-heading{grid-column:2;grid-row:1}.card.designed-card[data-landscape=true]:not([data-density=dense]) .card-copy{grid-column:2;grid-row:2}
.card.designed-card[data-layout-overflow=true]{outline:2px dashed #bd5165;outline-offset:3px}
.card.designed-card .design-text.design-field-en,.card.designed-card[data-side=back] .design-text.design-field-vi{font-size:calc(var(--field-font,36px)*var(--card-scale,1))!important}
.card.designed-card[data-landscape=true][data-density=dense] .card-hero:has(.design-pic):has(.card-heading){grid-template-columns:18% minmax(0,1fr)}
.card.designed-card[data-landscape=true][data-density=dense] .card-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center}.card.designed-card[data-landscape=true][data-density=dense] .card-heading>.design-field-vi{grid-column:1/-1}.card.designed-card[data-landscape=true][data-density=dense] .design-pic{height:calc(58px*var(--card-scale,1)*var(--picture-fit))!important}
.card.designed-card[data-landscape=true][data-density=dense] .card-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.card.designed-card[data-landscape=true][data-density=dense] .card-relations{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:5px;gap:6px}.card.designed-card[data-landscape=true][data-density=dense] .card-relations>.design-field-collocations{grid-column:auto}
.card.designed-card{width:100%!important;max-width:100%;height:auto;min-height:0}.card.designed-card .design-text{grid-column:auto;grid-row:auto}.card.designed-card .card-hero .design-pic{grid-column:auto!important;grid-row:auto!important}.card.designed-card .card-pos{font-size:.6em;white-space:nowrap;vertical-align:baseline;font-weight:600}
.card.designed-card{transform:none!important}.pv #pv{width:100%;max-width:100%;min-width:0}.pv .card-overflow-warning{width:100%;grid-column:1/-1;box-sizing:border-box}
@media(max-width:900px){.pv{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important}.pv #pv{width:100%!important;max-width:320px!important;margin:0 auto!important}.pv .card-format-picker{width:100%;box-sizing:border-box}}
/* Quiet editorial hierarchy: one illustration, paired example, supporting text. */
.card.designed-card .card-example,.card.designed-card .card-definition{background:transparent;border:0;border-radius:0;padding:0 2px;gap:4px}
.card.designed-card .card-copy{gap:14px}.card.designed-card .card-example .design-field-sentenceEn{font-weight:600!important}.card.designed-card .card-example .design-field-sentenceVi{font-weight:400!important;opacity:.72!important}
.card.designed-card .card-definition{padding-top:10px;border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.card.designed-card .card-definition .design-text{text-align:left!important;line-height:1.4!important}.card.designed-card .card-field-label{font-weight:500;opacity:.58;letter-spacing:.04em;margin-bottom:4px}
.card.designed-card .card-relations{border-top:0;padding-top:0;gap:8px 12px}.card.designed-card .card-relations>.design-text{line-height:1.35!important}
.card.designed-card[data-density=dense]{padding:20px!important;gap:18px!important}.card.designed-card[data-density=dense] .card-hero:has(.design-pic):has(.card-heading){grid-template-columns:30% minmax(0,1fr);gap:14px}.card.designed-card[data-density=dense] .design-pic{height:calc(90px*var(--card-scale,1)*var(--picture-fit))!important}.card.designed-card[data-density=dense] .card-heading{gap:5px}
.card.designed-card[data-landscape=true][data-density=dense]{gap:8px!important;padding:14px!important}.card.designed-card[data-landscape=true][data-density=dense] .card-definition{padding-top:0;border-top:0}.card.designed-card[data-landscape=true][data-density=dense] .card-hero:has(.design-pic):has(.card-heading){grid-template-columns:18% minmax(0,1fr)}
/* Preserve the centred picture-first style, including content-rich portrait cards. */
.card.designed-card:not([data-landscape=true]) .card-hero:has(.design-pic):has(.card-heading){display:flex!important;flex-direction:column!important;gap:12px!important}
.card.designed-card:not([data-landscape=true]) .card-heading .design-text{text-align:center!important}
.card.designed-card:not([data-landscape=true]) .card-example{background:color-mix(in srgb,var(--cb) 64%,white);border-left:3px solid color-mix(in srgb,var(--fg) 38%,transparent);border-radius:12px;padding:7px 10px;gap:3px}
.card.designed-card .card-example .design-field-sentenceEn{font-weight:500!important}
.card.designed-card[data-density=dense]:not([data-landscape=true]){padding:14px!important;gap:9px!important}.card.designed-card[data-density=dense]:not([data-landscape=true]) .design-pic{height:calc(94px*var(--card-scale,1)*var(--picture-fit))!important}.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-heading{gap:2px}.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-copy{gap:7px}.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-definition{padding-top:5px}.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-field-label{margin-bottom:1px}
/* Refinement of the approved centred composition. */
.card.designed-card .card-definition{border:0;padding-top:2px}.card.designed-card .card-definition .design-text,.card.designed-card .card-relations>.design-text{text-align:center!important;line-height:1.35!important}
.card.designed-card .card-field-label{font-weight:400;letter-spacing:.02em;opacity:.54;margin-bottom:3px}.card.designed-card .design-field-collocations{font-style:italic}.card.designed-card .design-field-collocations>.card-field-label{font-style:normal}
.card.designed-card:not([data-landscape=true]) .card-hero:has(.design-pic):has(.card-heading){gap:6px!important}
.card.designed-card[data-density=dense]:not([data-landscape=true]) .design-pic{height:calc(130px*var(--card-scale,1)*var(--picture-fit))!important}
.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-definition{padding-top:2px}.card.designed-card[data-density=dense]:not([data-landscape=true]) .card-copy{gap:8px}
.card.designed-card.card-tight{gap:5px!important}.card.designed-card.card-tight .card-copy{gap:4px!important}.card.designed-card.card-tight .card-hero{gap:4px!important}.card.designed-card.card-tight .card-example{padding:4px 8px}.card.designed-card.card-tight .card-field-label{margin-bottom:0}
.card.designed-card:not([data-landscape=true]) .design-pic{height:calc(125px*var(--card-scale,1)*var(--picture-fit))!important;font-size:calc(110px*var(--card-scale,1)*var(--picture-fit))!important}

.card.designed-card:not([data-landscape=true]) .design-pic{height:calc(125px*var(--card-scale,1)*var(--picture-fit))!important;font-size:calc(110px*var(--card-scale,1)*var(--picture-fit))!important}

.card.designed-card[data-density]:not([data-landscape=true]) .design-pic{height:calc(125px*var(--card-scale,1)*var(--picture-fit))!important;font-size:calc(110px*var(--card-scale,1)*var(--picture-fit))!important}

/* User typography overrides only fields deliberately edited by the author. */
.card.designed-card .design-text[style*="--user-font"]{font-size:calc(var(--user-font)*var(--card-scale,1))!important}
.card.designed-card.free-card{position:relative!important;display:block!important;padding:0!important;gap:0!important;isolation:isolate}.free-card-element{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0}.free-card-element>.design-text{width:100%;max-height:none}.card.free-card .free-card-element>.design-pic{height:100%!important;width:100%!important;font-size:calc(110px*var(--card-scale,1))!important}.free-card-element .design-pic img{height:100%;width:100%;object-fit:contain}.free-card-element .card-pos{font-size:inherit}.free-card[data-layout-overflow=true]{outline:2px dashed #bd5165}

.free-card-element:has(>.design-pic){container-type:size}.card.free-card .free-card-element>.design-pic{font-size:min(calc(110px*var(--card-scale,1)),90cqw,90cqh)!important}

.free-card-source{position:absolute;left:4%;right:4%;bottom:2%;font-size:calc(9px*var(--card-scale,1));line-height:1.2;overflow-wrap:anywhere}

.card.designed-card .design-text[style*="--user-align"]{text-align:var(--user-align)!important}