#design-inputs label{margin:4px 0;font-size:.85rem}.design-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px}.design-input-grid input{padding:5px 10px!important}.design-ipa-controls{display:flex;align-items:center;gap:5px;font-size:.78rem;margin:4px 0}.design-ipa-controls select{width:auto;max-width:190px;padding:4px}.design-ipa-controls .btn{padding:3px 8px}.design-extra-media{font-size:.85rem;margin:5px 0}.design-extra-media label{display:block}.design-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}.design-tabs .btn{padding:4px 9px;font-size:.85rem}.design-toggle{display:flex;align-items:center;gap:8px;font-size:.9rem}#design-settings{font-size:.85rem}#design-settings>summary{cursor:pointer;font-weight:800;padding:8px;background:var(--bg);border-radius:12px}#design-settings[open]{max-height:52vh;overflow:auto;padding-right:5px}.design-field-row{padding:6px 0;border-bottom:1px solid var(--line)}.design-field-row>label{margin:0;display:flex;align-items:center;gap:5px}.design-field-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:4px 0}.design-field-controls input[type=number]{width:50px}.design-field-controls input[type=color]{width:30px;padding:0}.design-field-controls select{width:65px;padding:3px}.design-field-controls label{font-size:.75rem;margin:0}.design-field-controls .btn{padding:1px 6px}.design-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.design-mini-grid input,.design-mini-grid select{width:100%}.design-hint{font-size:14px}.design-empty{font-size:14px;color:var(--fg)}.image-mask{position:absolute;display:block;background:#ffca49;border:2px solid #111;border-radius:5px}.card-audio{font:inherit!important;font-size:13px!important;padding:3px 7px!important;background:#fff9!important;color:var(--fg)!important;border:1px solid currentColor!important;border-radius:12px!important;box-shadow:none!important}.design-import-dialog{background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:20px;width:min(850px,95vw);max-height:90vh;overflow:auto}.design-import-dialog label{display:flex;align-items:center;gap:12px}.design-import-dialog select{max-width:300px}#mapping-cards{display:flex;gap:10px;overflow:auto}#mapping-cards>div{display:flex;gap:5px}#mapping-cards .card{width:160px;--u:1.6px}.design-note{font-size:.8rem}#design-inputs .design-extra-media input[type=file]{max-width:100%}
#design-inputs input:not([type=file]),#card-designer input:not([type=checkbox]):not([type=color]){width:100%;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;padding:5px 8px;box-sizing:border-box}.design-input-grid label{display:flex!important;flex-direction:column;gap:2px}.design-field-controls input[type=number]{width:50px!important}.design-field-controls input[type=color]{width:30px!important}.design-field-controls select{max-width:65px}#design-settings[open]{position:fixed;top:calc(var(--hdr,90px) + 8px);right:calc(max(12px,(100vw - 1080px)/2) + 310px);width:min(440px,95vw);max-height:calc(100dvh - var(--hdr,90px) - 30px);padding:12px;background:var(--panel);border:2px solid var(--line);border-radius:18px;box-shadow:0 16px 45px #0005;z-index:150;overflow:auto}#design-settings>summary{position:sticky;top:0;z-index:1}#newcard .design-input-grid input{font-size:.9rem}#design-note{display:block;margin-top:6px}#example-picker .btn{font-size:.8rem;white-space:normal;text-align:left}#newcard .row{margin-bottom:5px}
@media(max-width:820px){.design-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#design-settings[open]{left:12px;right:12px;top:90px;width:auto;max-height:75vh}}
@media print{.card-audio,#card-designer,#design-inputs{display:none!important}.image-mask{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
#design-setup{margin:0 0 12px}#design-setup>label{display:flex;align-items:center;gap:12px;font-size:.9rem;margin:0 0 6px}#design-setup>label select{width:auto;flex:1;max-width:420px}#design-setup #design-settings[open]{position:static;width:auto;max-height:none;padding:12px;border:1px solid var(--line);box-shadow:none;overflow:visible}#design-setup #design-settings>summary{position:static;padding:7px 10px;background:transparent}#design-setup #design-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.pv{overflow:visible;max-height:none}.pv #pv{max-width:100%}.design-tabs[hidden]{display:none}#card-designer{margin-top:8px}#card-designer .design-toggle{margin:6px 0}#design-setup~.row{margin-top:8px}
@media(max-width:600px){#design-setup>label{display:block}#design-setup>label select{width:100%;max-width:none}#design-setup #design-fields{grid-template-columns:1fr}}
@media print{#design-setup{display:none!important}}
#design-face-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0}#design-face-choices fieldset{min-width:0;border:1px solid var(--line);border-radius:12px;padding:8px 12px}#design-face-choices legend{font-weight:800;font-size:.9rem;padding:0 5px}.face-checks{display:flex;flex-wrap:wrap;gap:6px 16px}.face-checks label{display:flex;align-items:center;gap:6px;font-size:.85rem;margin:0}.design-extra-media [hidden]{display:none!important}#design-setup>.design-toggle{margin:6px 0;font-size:.9rem}
@media(max-width:600px){#design-face-choices{grid-template-columns:1fr}}
.design-mode-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.design-mode-row>label{display:flex;align-items:center;gap:10px;margin:0;font-size:.9rem}.design-mode-row select{width:auto;min-width:110px}.design-mode-row>label:last-child{flex:1}.design-mode-row #design-preset{flex:1;min-width:180px}.design-toggle[hidden],#newcard [hidden]{display:none!important}#design-face-choices:has(fieldset:only-child){grid-template-columns:1fr}
@media(max-width:600px){.design-mode-row{gap:8px}.design-mode-row>label{width:100%}.design-mode-row select{flex:1}}
.design-mode-row>label[hidden]{display:none!important}.design-mode-row>label:first-child{flex:none;font-weight:800}.design-mode-row #design-face-count{min-width:130px;padding:9px 14px;border-radius:14px}#design-face-choices{gap:14px;margin:12px 0}#design-face-choices fieldset{padding:10px 12px 12px;border-radius:16px;background:var(--bg)}#design-face-choices legend{font-size:.85rem;padding:0 8px}.face-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.face-checks label{padding:7px 8px;border:1px solid var(--line);border-radius:10px;line-height:1.25;cursor:pointer;font-size:.8rem;min-height:36px;box-sizing:border-box}.face-checks label:has(input:checked){border-color:#1f5bff;background:#ff6b9112}.face-checks input{accent-color:#ff5689;flex:none;margin:0}#design-setup #design-settings>summary{color:var(--mute);font-size:.8rem;padding:5px 0}
@media(max-width:1100px){.face-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.design-mode-row>label:first-child{width:auto}.design-mode-row #design-face-count{flex:none}.face-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
#design-settings>[hidden]{display:none!important}.extra-content-table{width:100%;border-collapse:collapse;font-size:.85rem}.extra-content-table th{text-align:left;padding:8px;color:var(--mute);font-size:.8rem}.extra-content-table td{padding:8px;border-top:1px solid var(--line)}.extra-content-table th:not(:first-child),.extra-content-table td:not(:first-child){text-align:center;width:90px}.extra-content-table input{accent-color:#ff5689;width:17px;height:17px;cursor:pointer}.extra-content-table tr:has(input:checked) td{background:#ff6b910b}#design-setup #design-settings[open]{max-width:680px}
.extra-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.extra-content-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:.82rem;min-width:0}.extra-content-item>span{font-weight:700}.extra-face-buttons{display:flex;gap:4px;flex:none}.extra-face-buttons label{position:relative;display:block!important;margin:0!important;cursor:pointer}.extra-face-buttons input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.extra-face-buttons span{display:block;padding:5px 8px;border:1px solid var(--line);border-radius:8px;font-size:.75rem;color:var(--mute)}.extra-face-buttons input:checked+span{background:#ff56891c;border-color:#1f5bff;color:var(--ink)}.extra-face-buttons input:focus-visible+span{outline:2px solid #1f5bff;outline-offset:2px}.extra-more{margin-top:9px}.extra-more>summary{padding:5px 0;font-size:.8rem;color:var(--mute);cursor:pointer}.extra-more .extra-content-grid{margin-top:7px}
@media(max-width:600px){.extra-content-grid{grid-template-columns:1fr}}
#design-setup #design-settings[open]{width:100%;max-width:none;box-sizing:border-box}#design-extra-fields{width:100%;min-width:0}.extra-content-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.extra-content-item{box-sizing:border-box}
.creator-heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.creator-heading-row h2{margin:0!important;line-height:1.2;font-size:1.45rem}.creator-heading-row .design-mode-row{margin:0}.creator-heading-row .design-mode-row>label:first-child{font-size:.8rem;color:var(--mute);gap:10px}.creator-heading-row #design-face-count{border:1px solid #1f5bff66;background:var(--bg);color:var(--ink);font-weight:800;min-width:110px;padding:8px 12px;border-radius:12px}#design-face-choices{margin:0 0 10px;gap:12px}#design-face-choices fieldset{padding:10px 12px 12px;background:linear-gradient(135deg,#ff6b9105,transparent),var(--bg);border:1px solid var(--line);border-radius:16px}#design-face-choices legend{font-size:.85rem;padding:0 7px;color:var(--ink)}.face-checks{gap:7px}.face-checks label{min-height:38px;padding:8px 9px;transition:background .15s,border-color .15s}.face-checks label:hover{border-color:#1f5bff77}.face-checks label:has(input:checked){background:#ff6b9115;border-color:#1f5bff88}.face-checks input{width:14px;height:14px}.creator-heading-row+.design-setup{margin-top:0}
@media(max-width:480px){.creator-heading-row{gap:8px}.creator-heading-row h2{font-size:1.2rem}.creator-heading-row .design-mode-row>label:first-child{gap:5px;font-size:.72rem}.creator-heading-row #design-face-count{min-width:85px;padding:7px 8px}}
.pv #vinfo,.pv #design-note{display:none!important}#card-designer .design-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px}#card-designer .design-tabs[hidden]{display:none}#card-designer .design-tabs .btn{min-width:0;padding:8px 3px;font-size:.73rem;white-space:nowrap;border-radius:11px;box-shadow:none;line-height:1.25}#card-designer .design-tabs .btn[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}#card-designer .design-tabs #design-flip{border-color:#1f5bff77;background:#ff6b910f;color:var(--ink)}.pv h2{margin-bottom:12px!important}
#design-setup,#design-inputs,#card-designer{font-family:inherit;font-size:1rem}#design-inputs input,#design-inputs select,#design-setup input,#design-setup select,#design-inputs button,#design-setup button,#card-designer button{font-family:inherit}#design-inputs label,#newcard .design-input-grid input,#design-setup .design-mode-row>label:first-child,#design-face-choices legend,.face-checks label,.extra-content-item,.extra-face-buttons span,#design-setup #design-settings>summary,.design-extra-media,.design-ipa-controls{font-size:1rem}#design-inputs .btn{font-size:1rem;font-weight:700}.sentence-audio-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.sentence-audio-row .btn{margin:0!important;padding:6px 14px;line-height:1.4;cursor:pointer}.sentence-upload{position:relative;overflow:hidden;display:inline-flex!important;align-items:center}.sentence-file-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}#sentence-audio-status{display:block;color:var(--mute);overflow-wrap:anywhere;font-size:.85rem}.design-extra-media>summary{cursor:pointer;color:var(--mute);font-weight:700}.design-extra-media{margin:8px 0 12px}.extra-content-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.face-checks{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.face-checks label{flex:0 0 auto;width:auto;max-width:100%;white-space:nowrap;padding:8px 12px;min-height:40px}.face-checks input{flex-shrink:0}@media(max-width:600px){.face-checks{display:flex;gap:6px}.face-checks label{padding:7px 9px}}
.creator-method-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.creator-method-tabs .btn{flex:1;padding:10px 12px;font:inherit;font-weight:800;border-radius:14px}.creator-method-tabs .btn[aria-pressed=true]{background:linear-gradient(120deg,#1f5bff,#ff8666);border-color:transparent;color:#fff}.creator-bulk-panel{margin-top:0!important}#v-create .panel[hidden]{display:none!important}@media(max-width:600px){.creator-method-tabs{gap:5px}.creator-method-tabs .btn{padding:9px 5px;font-size:.85rem}}
.deck-main-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.deck-main-actions .btn,.deck-main-actions .go{font:inherit;font-weight:800;padding:8px 14px;border-radius:14px;margin:0}.deck-file-tools{border-top:1px solid var(--line);padding-top:10px;margin:10px 0}.deck-file-tools summary{font:inherit;font-weight:700;color:var(--mute);cursor:pointer}.deck-file-tools .chips{margin:10px 0}.deck-file-tools p{font-size:.9rem!important}.deck-clear{padding:5px 10px!important;color:var(--mute);font-size:.9rem!important}#mine>.chips[hidden]{display:none!important}#mine>#list:has(.empty){margin-top:10px}
.custom-request{margin-top:14px;scroll-margin-top:120px}.custom-request>summary{font:inherit;font-weight:800;cursor:pointer}.request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.request-grid label{display:flex;flex-direction:column;gap:4px;font:inherit}.request-grid input,.request-grid textarea{font:inherit;width:100%;box-sizing:border-box}.request-grid textarea{min-height:80px}.request-consent{display:flex;gap:8px;align-items:flex-start;margin:14px 0}.request-trap{display:none!important}.custom-request p{color:var(--mute)}.promo{flex-wrap:wrap}.promo .btn{white-space:nowrap}@media(max-width:600px){.request-grid{grid-template-columns:1fr}}
.creator-method-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.creator-method-tabs .btn{min-width:0;line-height:1.3}.custom-request{margin-top:0}.pv[hidden]{display:none!important}#v-create .grid:has(.custom-request:not([hidden])){grid-template-columns:1fr}@media(max-width:900px){.creator-method-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.custom-request>h2{margin:0 0 6px}.custom-request>p{margin:0 0 18px;font-size:1rem}.request-group{min-width:0;border:1px solid var(--line);border-radius:18px;margin:0 0 16px;padding:14px 16px 16px;background:var(--bg)}.request-group legend{font:inherit;font-weight:800;padding:0 8px}.request-grid{gap:12px 16px}.request-grid label{margin:0;font-weight:700}.request-grid input,.request-grid textarea{background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:9px 12px;font:inherit;line-height:1.4;min-height:44px;outline:none}.request-grid input:focus,.request-grid textarea:focus{border-color:#1f5bff}.request-grid textarea{min-height:88px;resize:vertical}.request-grid input::placeholder,.request-grid textarea::placeholder{color:var(--mute);opacity:.85}.request-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.request-actions a{margin-left:auto;color:var(--mute);text-decoration:none;font:inherit;font-weight:700}.request-actions a:hover{color:var(--ink)}.request-consent{font:inherit;font-size:1rem;margin:12px 0 16px}.custom-request-mode #cafe,.custom-request-mode #cafe2,.custom-request-mode #v-create>.coffee{display:none!important}@media(max-width:600px){.request-group{padding:10px;margin-bottom:12px}.request-actions{gap:10px}.request-actions a{font-size:.9rem}}
.request-zalo-help{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.request-zalo-help>span{font:inherit;color:var(--mute)}.request-zalo-help a{margin-left:0}@media(max-width:600px){.request-zalo-help{gap:6px}.request-zalo-help>span{font-size:.9rem}}
.custom-request{container-type:inline-size}.request-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.request-grid label{font-weight:600;gap:5px;min-width:0}.request-grid input,.request-grid select,.request-grid textarea{font:inherit;font-weight:500;font-size:1rem;padding:8px 11px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:11px;box-sizing:border-box;width:100%;min-height:42px}.request-grid input::placeholder,.request-grid textarea::placeholder{font-weight:500}.request-grid label[data-request-field=topics],.request-grid label[data-request-field=content],.request-grid label[data-request-field=materials],.request-grid label[data-request-field=notes]{grid-column:span 2}.request-grid textarea{min-height:72px}.request-group{padding:12px;margin-bottom:12px}.custom-request>p{margin-bottom:12px;font-weight:500}@container(max-width:1000px){.request-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@container(max-width:740px){.request-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container(max-width:440px){.request-grid{grid-template-columns:1fr}.request-grid label[data-request-field]{grid-column:auto}}
.custom-request .request-grid input::placeholder,.custom-request .request-grid textarea::placeholder{font-weight:400!important;color:var(--mute)!important;opacity:.42!important;font-size:.92rem}.custom-request .request-grid label{font-weight:600;font-size:.95rem}.custom-request .request-group{position:relative;border-color:var(--line);background:transparent;padding:16px;margin-bottom:20px}.custom-request .request-group legend{font-size:1rem;font-weight:800;padding:5px 14px;border-radius:10px;border:1px solid #6ebbd344;background:#6ebbd312;color:#a6dcf0}.custom-request .request-group:nth-of-type(2) legend{border-color:#ff92ae44;background:#ff92ae12;color:#ffb4c8}.custom-request .request-group:nth-of-type(3) legend{border-color:#c4adff44;background:#c4adff12;color:#d5c4ff}.custom-request .request-grid{row-gap:16px}.custom-request .request-grid input,.custom-request .request-grid textarea,.custom-request .request-grid select{font-weight:400}.custom-request>p{font-weight:400;color:var(--mute)}
:root[data-theme=light]{--bg:#edf6ff;--panel:#fbfdff;--ink:#1c283d;--mute:#60738c;--line:#d3e0ed;--g1:#ffd9e8;--g2:#cde6ff;--g3:#d6f6e2;--sh:0 14px 34px -16px rgba(40,70,120,.35)}.background-theme-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-width:42px;padding:0!important;border-radius:50%;font-size:1.15rem;line-height:1;flex-shrink:0}:root[data-theme=light] .custom-request .request-group legend{color:#28617a}:root[data-theme=light] .custom-request .request-group:nth-of-type(2) legend{color:#963f60}:root[data-theme=light] .custom-request .request-group:nth-of-type(3) legend{color:#695097}
.ipa-field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}.ipa-field-heading .btn{padding:2px 10px!important;font-size:.85rem!important;margin:0}#design-ipa-status{font-size:.75rem;font-weight:400;color:var(--mute)}
#emo [data-illustration]{background:#e9f6ef;border:1px solid #a6d1bd}#emo [data-illustration] img{width:46px;height:46px;object-fit:contain}
.ready-field-count{display:block;font-size:.72rem;font-weight:400;color:var(--mute);line-height:1.3;margin-top:2px}.extra-face-buttons label:has(input:disabled){opacity:.35;cursor:not-allowed}.extra-face-buttons input:disabled{cursor:not-allowed}.ready-topic-select{display:flex;align-items:center;gap:10px;font:inherit;margin:8px 0 12px}.ready-topic-select select{width:auto;max-width:100%;font:inherit;padding:6px 12px}
.ready-topic-search{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:12px 0 16px}.ready-topic-search strong{font:inherit;font-weight:800;color:var(--ink)}.ready-topic-search input{flex:1;max-width:440px;min-width:200px;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:8px 12px}.ready-topic-search input:focus{outline:none;border-color:#1f5bff}#sets .setb[hidden]{display:none!important}#sets .ready-topic-active{border-color:#1f5bff;background:linear-gradient(135deg,#ff568916,transparent),var(--bg)}#sets .ready-topic-active .sn{color:#ff82a4}#sets .sp{cursor:pointer}@media(max-width:600px){.ready-topic-search input{max-width:none;width:100%}}
.creator-bulk-panel .f21-bulk[hidden]{display:none!important}
#bulk-design-guide{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:14px}#bulk-design-guide h3{font:inherit;font-weight:800;margin:0 0 4px}#bulk-design-guide p{font:inherit;color:var(--mute);margin:6px 0}.bulk-column-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.bulk-column-chips>span{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:5px 9px}.bulk-column-chips code{font-size:.8rem;color:var(--mute)}.bulk-example-table{overflow:auto;margin:8px 0}.bulk-example-table table{border-collapse:collapse}.bulk-example-table td,.bulk-example-table th{padding:6px 10px;border:1px solid var(--line);white-space:nowrap;font:inherit}.creator-bulk-panel .chips .btn{padding:8px 14px;border-radius:14px;font:inherit;font-weight:700}.design-tabs{justify-content:center;gap:10px;width:100%}.card-overflow-warning{color:#ff91a5;font-size:15px;line-height:1.4;padding:10px 0;text-align:center}.card-overflow-warning[hidden]{display:none!important}@media print{.card-overflow-warning{display:none!important}}
.quick-create-guide,.quick-check-fields{padding:10px 0;margin:8px 0}.quick-create-guide>summary,.quick-check-fields>summary{cursor:pointer;font-weight:700;font-size:1rem}.quick-create-guide p{margin:8px 0;line-height:1.6}.quick-create-guide small{color:var(--mute)}.quick-image-block{margin:14px 0}.quick-check-fields[open]{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}.quick-meaning{margin:14px 0}.quick-meaning input{width:100%}.quick-check-fields .vrow{margin:14px 0}#newcard>.row:has(#en){display:block}#newcard>.row:has(#en)>div{width:100%}
.sentence-suggestion{display:block;width:100%;white-space:normal!important;text-align:left;margin:10px 0 4px}.sentence-attribution{display:block;font-size:11px;color:var(--mute);overflow-wrap:anywhere}.card-sentence-source{display:block;font-family:system-ui,sans-serif;font-size:9px!important;line-height:1.2;overflow-wrap:anywhere;width:100%}
.quick-bilingual-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.quick-bilingual-row>div{min-width:0}.quick-bilingual-row input{width:100%;box-sizing:border-box}@media(max-width:600px){.quick-bilingual-row{grid-template-columns:1fr}}
.bulk-format-note{margin:12px 0;color:var(--mute)}.bulk-format-note p{margin:5px 0}.bulk-replace-note{display:block;font-size:.85rem;color:var(--mute);margin-top:4px}.creator-bulk-panel .upl{flex-wrap:wrap;align-items:center;gap:14px}
.creator-bulk-panel .bulk-replace-option{display:block!important;margin:12px 0;font-size:1rem}.creator-bulk-panel .bulk-replace-option input{margin-right:6px}.creator-bulk-panel .bulk-replace-note{display:block!important;margin:4px 0 0 25px;font-size:.85rem;font-weight:400;line-height:1.5}

.bulk-quota-notice{padding:18px;border:1px solid var(--line,#314666);border-radius:16px;margin-bottom:20px}

.preview-heading-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;min-width:0}.preview-heading-row h2{margin:0!important;flex:1;white-space:nowrap}.preview-heading-row .btn{margin:0;padding:8px 10px;white-space:nowrap;flex:0 0 auto}.pv .preview-heading-row{grid-column:1/-1}@media(max-width:520px){.preview-heading-row{gap:6px}.preview-heading-row .btn{padding:8px}}
.pv .preview-heading-row{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:8px}.pv .preview-heading-row h2{font-size:1.25rem!important}.pv .preview-heading-row .btn{width:auto!important}
.pv .preview-heading-row{container-type:inline-size;gap:6px!important;justify-content:flex-start!important}.pv .preview-heading-row h2{flex:1 1 auto;min-width:0;font-size:clamp(16px,6cqi,24px)!important}.pv .preview-heading-row .btn{flex:0 1 auto;min-width:0;font-size:clamp(13px,4.8cqi,18px)!important;padding:8px 7px!important;line-height:1.3;white-space:nowrap}.pv .preview-heading-row{overflow:visible}
#design-face-choices{gap:16px;margin:0 0 16px}
#design-face-choices fieldset{container-type:inline-size;padding:16px;border-radius:18px;background:var(--panel,var(--bg));border:1px solid var(--line)}
#design-face-choices legend{padding:0 8px;line-height:1.3;font-weight:800;color:var(--ink)}
#design-face-choices .face-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
#design-face-choices .face-checks label{display:flex;align-items:center;gap:10px;min-width:0;width:100%;max-width:none;min-height:44px;margin:0!important;padding:8px 10px;white-space:normal;line-height:1.3;font-weight:600;border-radius:10px;border:1px solid var(--line);background:transparent;transition:background .15s,border-color .15s}
#design-face-choices .face-checks label:has(input:checked){background:#ff568914;border-color:#1f5bffb3;color:var(--ink)}
#design-face-choices .face-checks label:hover{background:#1f5bff08;border-color:#1f5bff77}
#design-face-choices .face-checks label:has(input:focus-visible){outline:2px solid #1f5bff;outline-offset:2px}
#design-face-choices .face-checks input{width:16px;height:16px;margin:0;flex:0 0 16px;accent-color:#ff5689}
#design-face-choices .ready-field-count{margin-left:auto;font-weight:400;white-space:nowrap}
@container(min-width:540px){#design-face-choices .face-checks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#design-face-choices{gap:12px}#design-face-choices fieldset{padding:12px}#design-face-choices .face-checks label{padding:8px;gap:8px}}

/* Frosted Glassmorphism Card Stage: seamlessly melts into meadow while framing the card */
.lesson-open-scene,
body.learning-mode .journey-activity .study-card,
.quiz-suite {
  position: relative !important;
  width: min(520px, 92%) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-radius: 32px !important;
  border: 2.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 40px rgba(35, 75, 62, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.8) !important;
  padding: clamp(16px, 2.2dvh, 24px) clamp(16px, 2.4vw, 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 1.4dvh, 16px) !important;
  text-align: center !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

body.learning-mode .lesson-open-scene h2,
body.learning-mode .journey-activity .study-card > .eyebrow {
  font-size: clamp(17px, 1.6vw, 22px) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: #1e5c46 !important;
  background: rgba(220, 245, 232, 0.9) !important;
  border: 1px solid rgba(167, 243, 208, 0.8) !important;
  padding: 4px 18px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1) !important;
}

body.learning-mode .journey-activity .study-card > h2 {
  font-size: clamp(24px, 2.8vw, 36px) !important;
  margin: 6px 0 12px !important;
  line-height: 1.25 !important;
  color: #1e3a34;
  white-space: normal;
  word-break: keep-all;
}

/* Single-row Action Buttons: NO wrapping, always on 1 clean row */
.lesson-open-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin-top: 4px !important;
}
body.learning-mode .lesson-open-actions button {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 800 !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.14), 0 6px 12px rgba(0,0,0,0.08) !important;
  transition: transform .1s ease, box-shadow .1s ease !important;
}
body.learning-mode .lesson-open-actions button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.14), 0 3px 6px rgba(0,0,0,0.08) !important;
}
body.learning-mode .lesson-open-actions button[aria-label="Quay lại"] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
}
body.learning-mode .lesson-open-actions button:not([aria-label="Quay lại"]):not(.journey-next) {
  flex: 1 1 auto !important;
  min-width: 110px !important;
}
body.learning-mode .lesson-open-actions button.journey-next {
  flex: 1 1 auto !important;
  min-width: 100px !important;
  background: #1e5c46 !important;
  color: #ffffff !important;
}

/* Picture strip on the create page (27/10/2026 mobile speed audit): about 500 picture buttons sit in a small
   scroll box; the ones scrolled out of view skip layout and paint until they come near. */
.emo>button{content-visibility:auto;contain-intrinsic-size:auto 3.5rem auto 3.5rem}

/* === TO MAU CHUAN apptienganh: dong bo voi src/phonics-grammar-colors.css, kiem tra bang src/visual-hierarchy.test.mjs === */
/* Màu âm vị (từ) và vai ngữ pháp (câu) apptienganh, đi cùng visual-hierarchy.mjs.
   Bảng màu do chủ dự án chốt, KHÔNG đổi màu. Cách hiển thị chủ dự án duyệt 28/10/2026 (đề xuất 2):
   - Từ: chỉ có màu và khung trọng âm. Không vạch dưới, không gạch chấm, không cung nối.
   - Chữ không đọc thành tiếng (k của knife, b của lamb, e cuối của cake/have) đều màu xám #94a3b8.
   - Câu: gạch dưới chỉ ở đuôi ngữ pháp (chữ s, -ing, -ed). Không đánh dấu từ trọng tâm.
   Lý do sư phạm: mỗi kênh nhìn chỉ mang một nghĩa (nguyên tắc báo hiệu, dư thừa của Mayer); trẻ chưa học
   "magic e" không hiểu cung nối, và chữ e tô xanh dễ bị đọc thành âm "e".
   Không để CSS disabled/opacity của nút đè các màu này thành một màu. */

/* ---------- Từ: âm vị ---------- */
.fc-word{display:inline-block;white-space:nowrap;line-height:1.15}
.fc-ph{display:inline-block}
.fc-ph-c{color:#dc2626;font-weight:700}
.fc-ph-v{color:#1d4ed8;font-weight:800}
.fc-ph-r{color:#7c3aed;font-weight:800}
/* Chữ không đọc thành tiếng: màu xám của bảng màu, không giảm opacity để vẫn đọc được. */
.fc-ph-silent,.fc-ph-split-e{color:#94a3b8;font-weight:700}
/* Trọng âm: nền vàng cho cả âm tiết, chữ bên trong giữ màu âm vị. */
.fc-syl.fc-ph-stress{display:inline-block;background:#fef3c7;box-shadow:inset 0 0 0 .07em #f59e0b;border-radius:.28em;padding:0 .06em;color:inherit}
/* Các lớp sau vẫn được sinh ra (fc-ph-multi, fc-ph-vowel-team, fc-split) để dành cho bài phonics riêng,
   nhưng màn học thường không hiện gì thêm. Đặt lại để đè CSS cũ của app nếu còn sót. */
.fc-ph-multi,.fc-ph-vowel-team{background:none;box-shadow:none;padding:0;border:0}
.fc-split{display:inline}

/* ---------- Câu: vai ngữ pháp (Colourful Semantics) ---------- */
.role-subj{color:#1d4ed8;font-weight:800}
.role-aux{color:#7c3aed;font-weight:800}
.role-verb{color:#ea580c;font-weight:800}
.role-obj{color:#059669;font-weight:800}
.role-mod{color:#6366f1;font-weight:800}
/* Lời chào, cảm ơn, liên từ nối mệnh đề, từ tượng thanh: không có vai, giữ màu chữ thường. */
.role-none{color:inherit;font-weight:700}

/* Từ trọng tâm: không đánh dấu trên màn học (lớp gram-key vẫn có trong HTML). */
.gram-key{border:0;background:none;box-shadow:none;padding:0}

/* Đuôi ngữ pháp, chỉ gạch đúng phần đuôi: chữ s (cam khi ở động từ số ít, xanh lục khi ở danh từ số nhiều), -ing lượn sóng, -ed chấm. */
.gram-sfx-s{text-decoration:underline .1em solid;text-underline-offset:.16em}
.gram-agree-singular .gram-sfx-s{text-decoration-color:#ea580c}
.gram-agree-plural .gram-sfx-s{text-decoration-color:#059669}
.gram-sfx-ing{text-decoration:underline .08em wavy currentColor;text-underline-offset:.16em}
.gram-sfx-ed{text-decoration:underline .1em dotted currentColor;text-underline-offset:.16em}
/* === HET TO MAU CHUAN === */