/* ── Module variables (scoped to popup) ── */
 #dict-popup {
     --dm-ink: #1a1a2e;
     --dm-cream: #fffdf7;
     --dm-accent: #c8603a;
     --dm-green: #4a7c6f;
     --dm-gold: #d4a84b;
     --dm-muted: #7a7065;
     --dm-border: #ddd5c4;

     position: fixed;
     z-index: 9999;
     width: 370px;
     background: var(--dm-cream);
     border: 1px solid var(--dm-border);
     border-radius: 16px;
     box-shadow: 0 24px 64px rgba(26, 26, 46, .24);
     display: none;
     flex-direction: column;
     overflow: hidden;
     animation: dm-popIn .18s cubic-bezier(.34, 1.56, .64, 1);
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     line-height: 1.6;
     color: var(--dm-ink);
 }

 @keyframes dm-popIn {
     from {
         opacity: 0;
         transform: scale(.9) translateY(8px);
     }

     to {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 /* Arrow */
 #dict-popup .dm-arrow {
     position: absolute;
     top: -8px;
     left: 50%;
     transform: translateX(-50%);
     width: 16px;
     height: 8px;
     overflow: hidden;
     pointer-events: none;
 }

 #dict-popup .dm-arrow::after {
     content: '';
     display: block;
     width: 12px;
     height: 12px;
     background: var(--dm-ink);
     transform: rotate(45deg) translate(2px, 2px);
     border-radius: 2px;
 }

 /* Header */
 #dict-popup .dm-header {
     background: var(--dm-ink);
     padding: 14px 16px 12px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 10px;
 }

 #dict-popup .dm-term-wrap {
     flex: 1;
     min-width: 0;
 }

 #dict-popup .dm-term {
     font-size: 18px;
     color: var(--dm-gold);
     word-break: break-word;
 }

 #dict-popup .dm-phonetic {
     font-size: 16px;
     color: #bbb;
     margin-top: 1px;
 }

 #dict-popup .dm-meta {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 5px;
     flex-wrap: wrap;
 }

 #dict-popup .dm-pos {
     font-size: 18px;
     background: var(--dm-accent);
     color: #fff;
     padding: 2px 9px;
     border-radius: 20px;
 }

 #dict-popup .dm-lang {
     font-size: 18px;
     background: #2a2a4e;
     color: #aaa;
     padding: 2px 9px;
     border-radius: 20px;
 }

 #dict-popup #dm-btn-audio {
     background: none;
     border: none;
     color: #aaa;
     cursor: pointer;
     font-size: 1rem;
     line-height: 1;
     padding: 2px 4px;
     border-radius: 6px;
     transition: color .15s, background .15s;
     display: none;
 }

 #dict-popup #dm-btn-audio:hover {
     color: var(--dm-gold);
     background: #2a2a4e;
 }

 #dict-popup #dm-close {
     background: none;
     border: none;
     color: #888;
     cursor: pointer;
     font-size: 1rem;
     line-height: 1;
     padding: 4px;
     flex-shrink: 0;
     border-radius: 6px;
     transition: color .15s;
 }

 #dict-popup #dm-close:hover {
     color: #fff;
 }

 /* Tabs */
 #dict-popup .dm-tabs {
     display: flex;
     background: #ede8de;
     border-bottom: 1px solid var(--dm-border);
 }

 #dict-popup .dm-tab {
     flex: 1;
     padding: 9px 4px;
     font-size: 11px;
     font-weight: 500;
     text-align: center;
     cursor: pointer;
     color: var(--dm-muted);
     border-bottom: 2px solid transparent;
     transition: all .15s;
     text-transform: uppercase;
     letter-spacing: .05em;
 }

 #dict-popup .dm-tab.active {
     color: var(--dm-accent);
     border-bottom-color: var(--dm-accent);
     background: var(--dm-cream);
 }

 #dict-popup .dm-tab:hover:not(.active) {
     color: var(--dm-ink);
 }

 /* Body */
 #dict-popup .dm-body {
     padding: 16px 18px;
     max-height: 270px;
     overflow-y: auto;
 }

 #dict-popup .dm-body::-webkit-scrollbar {
     width: 4px;
 }

 #dict-popup .dm-body::-webkit-scrollbar-thumb {
     background: var(--dm-border);
     border-radius: 2px;
 }

 /* Loading */
 #dict-popup .dm-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 30px;
     gap: 10px;
     color: var(--dm-muted);
     font-size: .85rem;
 }

 #dict-popup .dm-spinner {
     width: 18px;
     height: 18px;
     border: 2px solid var(--dm-border);
     border-top-color: var(--dm-accent);
     border-radius: 50%;
     animation: dm-spin .65s linear infinite;
     flex-shrink: 0;
 }

 @keyframes dm-spin {
     to {
         transform: rotate(360deg);
     }
 }

 #dict-popup .dm-error {
     padding: 16px 18px;
     color: var(--dm-accent);
     font-size: .85rem;
     line-height: 1.5;
 }

 /* Content pieces */
 #dict-popup .dm-label {
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--dm-muted);
     margin-bottom: 5px;
     margin-top: 14px;
 }

 #dict-popup .dm-label:first-child {
     margin-top: 0;
 }

 #dict-popup .dm-trans-val {
     font-size: 16px;
     font-weight: 500;
     color: var(--dm-ink);
     margin-bottom: 4px;
 }

 #dict-popup .dm-def-item {
     padding: 8px 12px;
     border-left: 3px solid var(--dm-green);
     background: #eef5f3;
     border-radius: 0 8px 8px 0;
     margin-bottom: 8px;
     line-height: 1.55;
     color: #2d2d2d;
 }

 #dict-popup .dm-ex-item {
     margin-bottom: 14px;
     padding-bottom: 14px;
     border-bottom: 1px dashed var(--dm-border);
 }

 #dict-popup .dm-ex-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 #dict-popup .dm-ex-en {
     font-style: italic;
     color: #444;
     line-height: 1.5;
 }

 #dict-popup .dm-ex-vi {
     color: var(--dm-green);
     margin-top: 4px;
     font-size: .85rem;
     line-height: 1.5;
 }

 #dict-popup .dm-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 6px;
 }

 #dict-popup .dm-chip {
     background: #e8e0d0;
     color: var(--dm-ink);
     padding: 4px 11px;
     border-radius: 20px;
     font-size: .78rem;
     cursor: pointer;
     transition: background .15s;
 }

 #dict-popup .dm-chip:hover {
     background: #d4c8b0;
 }

 #dict-popup .dm-chip.ant {
     background: #fce8e0;
     color: var(--dm-accent);
 }

 #dict-popup .dm-chip.ant:hover {
     background: #f5d0c0;
 }

 #dict-popup .dm-nodata {
     color: var(--dm-muted);
     font-style: italic;
     font-size: .85rem;
     text-align: center;
     padding: 10px 0;
 }

 /* Highlight effect on the selected element scope */
 .dict-module-scope ::selection {
     background: #fde68a;
     color: #1a1a2e;
 }

 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 .header-badge {
     font-size: .72rem;
     background: #2a2a4e;
     color: #888;
     padding: 5px 12px;
     border-radius: 20px;
     letter-spacing: .06em;
     text-transform: uppercase;
 }

 .header-badge span {
     color: #5cb85c;
 }

 main {
     max-width: 860px;
     margin: 44px auto;
     padding: 0 24px;
 }

 .hint-bar {
     background: #1a1a2e;
     color: #d4a84b;
     border-radius: 10px;
     padding: 13px 20px;
     font-size: .84rem;
     letter-spacing: .03em;
     margin-bottom: 28px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 /* ── Reading card (the designated scope) ── */
 .reading-card {
     background: #fffdf7;
     border: 1px solid #ddd5c4;
     border-radius: 16px;
     padding: 36px 44px;
     box-shadow: 0 12px 40px rgba(26, 26, 46, .14);
     position: relative;
     overflow: hidden;
 }

 .reading-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #c8603a, #d4a84b, #4a7c6f);
 }

 .reading-card h2 {
     font-family: 'Playfair Display', serif;
     font-size: 1.2rem;
     color: #c8603a;
     margin-bottom: 18px;
 }

 #sample-text {
     font-size: 1.04rem;
     color: #2d2d2d;
     line-height: 1.95;
     cursor: text;
     user-select: text;
 }

 #sample-text p {
     margin-bottom: 14px;
 }

 #sample-text p:last-child {
     margin-bottom: 0;
 }

 /* Out-of-scope zone */
 .out-of-scope {
     margin-top: 32px;
     padding: 24px 32px;
     background: #fff;
     border: 2px dashed #ddd5c4;
     border-radius: 12px;
 }

 .out-of-scope h3 {
     font-family: 'Playfair Display', serif;
     color: #7a7065;
     font-size: 1rem;
     margin-bottom: 10px;
 }

 .out-of-scope p {
     color: #888;
     font-size: .95rem;
     line-height: 1.7;
 }

 .scope-badge {
     display: inline-block;
     font-size: .68rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .1em;
     padding: 3px 10px;
     border-radius: 20px;
     margin-bottom: 14px;
 }

 .scope-badge.active {
     background: #d4edda;
     color: #155724;
 }

 .scope-badge.inactive {
     background: #f8d7da;
     color: #721c24;
 }