/* Matrix Hanzi Pro - Normal / Explorer
   Clean layouts for vocabulary, idiom, and sentence content.
*/
:root{
  color-scheme:dark;--ui:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',monospace;--hanzi:'Noto Serif SC',serif;
  --bg:#07111d;--panel:#0d1826;--card:#111f30;--card-2:#0a1421;--line:rgba(130,183,218,.22);
  --text:#f6f9ff;--muted:#91a4b8;--blue:#18b7ff;--green:#34d399;--orange:#fbbf24;--red:#fb7185;
  --blue-dim:rgba(24,183,255,.11);--green-dim:rgba(52,211,153,.11);--orange-dim:rgba(251,191,36,.1);
  --radius:16px;--shadow:0 14px 34px rgba(0,0,0,.25);--nav:68px
}
body.light-mode{color-scheme:light;--bg:#f5f0e6;--panel:#fbf8ef;--card:#fffdf7;--card-2:#f8f4ea;--line:rgba(21,94,117,.18);--text:#0f172a;--muted:#64748b;--blue:#0284c7;--green:#059669;--orange:#d97706;--red:#e11d48;--blue-dim:rgba(2,132,199,.09);--green-dim:rgba(5,150,105,.09);--orange-dim:rgba(217,119,6,.09);--shadow:0 10px 28px rgba(15,23,42,.08)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}html{background:var(--bg)}body{color:var(--text);font:15px/1.5 var(--ui);background:radial-gradient(circle at 10% 0%,var(--blue-dim),transparent 30%),radial-gradient(circle at 90% 12%,var(--green-dim),transparent 24%),var(--bg);-webkit-font-smoothing:antialiased}.screen{display:none}.screen.active{display:block}.workspace-bg-art{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.bg-calligraphy{position:absolute;color:rgba(255,255,255,.025);font:900 clamp(160px,24vw,360px)/1 var(--hanzi)}body.light-mode .bg-calligraphy{color:rgba(15,23,42,.035)}.bg-calligraphy-left{left:-4vw;top:14vh;transform:rotate(-9deg)}.bg-calligraphy-right{right:-3vw;bottom:3vh;transform:rotate(7deg)}.bg-orb{display:none}
.workspace-layout{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.top-navbar{min-height:var(--nav);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:20}.top-navbar>div:first-child{min-width:0}.nav-controls-wrapper{position:relative}.btn{min-height:40px;padding:10px 15px;border:1px solid var(--line);border-radius:11px;background:var(--card-2);color:var(--text);font:700 13px/1 var(--ui);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover{border-color:var(--blue);background:var(--blue-dim)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--green),#0d9488);border:0}.btn-danger{color:var(--red)}.workspace-view-toggle{color:var(--blue);background:var(--blue-dim)}#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-collapse-menu{position:absolute;right:0;top:calc(100% + 12px);width:min(760px,calc(100vw - 40px));padding:12px;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;z-index:50}.mobile-collapse-menu.show{opacity:1;visibility:visible;pointer-events:auto}.toggle-mobile-menu-btn{border-radius:999px}.sub-panel{display:none}
.table-container{flex:1;min-height:0;overflow:auto;padding:18px 22px;overscroll-behavior:contain;scrollbar-gutter:stable}#vocabTable{width:100%;border-collapse:separate;border-spacing:0 10px;table-layout:fixed}#vocabTable th{position:sticky;top:0;z-index:5;padding:10px;color:var(--muted);background:var(--bg);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;text-align:left}#vocabTable td{padding:12px;vertical-align:top;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#vocabTable .content-row td:first-child{border-left:1px solid var(--line);border-radius:var(--radius) 0 0 var(--radius)}#vocabTable .content-row td:last-child{border-right:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0}.content-row.current-row{outline:2px solid var(--blue);outline-offset:-2px}.content-row.current-row td{border-color:var(--blue)}.content-row.forgotten-row td{background:linear-gradient(135deg,var(--orange-dim),var(--card))}.index-cell{width:58px;text-align:center}.mark-cell{width:62px;text-align:center}.index-number{font:700 14px var(--mono);color:var(--muted)}.forgot-control{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}.forgot-checkbox{width:17px;height:17px;accent-color:var(--orange)}.main-cell{position:relative;text-align:center}.hanzi-tools{position:absolute;top:8px;left:8px;display:flex;gap:4px}.compact-tool{width:26px;height:26px;border:0;background:transparent;color:var(--muted);cursor:pointer}.compact-tool:hover{color:var(--blue)}.hanzi-focus,.sentence-hanzi{width:100%;border:0;background:transparent;color:var(--text);font-family:var(--hanzi);font-weight:900;cursor:pointer}.hanzi-focus{padding:27px 4px 4px;font-size:clamp(36px,3vw,50px);line-height:1.12}.main-pinyin,.sentence-pinyin{color:var(--blue);font-family:var(--mono);font-weight:700}.main-meaning,.sentence-meaning{color:var(--orange);font-weight:800}.badge-line{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}.meta-badge{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);border-radius:999px;color:var(--blue);background:var(--blue-dim);font-size:10px;font-weight:900}.meta-badge.green{color:var(--green);background:var(--green-dim);border-color:color-mix(in srgb,var(--green) 35%,transparent)}.meta-badge.orange{color:var(--orange);background:var(--orange-dim);border-color:color-mix(in srgb,var(--orange) 35%,transparent)}.knowledge-cell,.sentence-analysis-cell{display:table-cell}.knowledge-grid,.sentence-analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}.knowledge-grid.single{grid-template-columns:minmax(0,1fr)}.knowledge-block{min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}.knowledge-block.accent{background:linear-gradient(135deg,var(--orange-dim),var(--card-2))}.knowledge-label{display:block;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.knowledge-block p{margin:0;color:var(--orange);font-size:13px;font-weight:700;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.detail-cell{width:84px;text-align:center}.detail-toggle{width:62px;min-height:58px;padding:7px 5px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);color:var(--muted);font:800 11px var(--ui);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.detail-toggle:hover,.detail-toggle[aria-expanded=true]{color:var(--blue);border-color:var(--blue);background:var(--blue-dim)}.detail-toggle-icon{font-size:18px}.content-detail-row[hidden]{display:none}.content-detail-row td{padding:0 12px 14px!important;border:0!important;background:var(--card)!important;border-radius:0 0 var(--radius) var(--radius)!important}.details-open td{border-bottom-color:transparent!important;border-radius:var(--radius) var(--radius) 0 0!important}.detail-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.detail-card h4{margin:0 0 10px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}.detail-items{display:grid;gap:8px}.detail-item{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card-2);display:flex;flex-direction:column;gap:4px}.detail-zh{font:700 18px var(--hanzi)}.detail-pinyin{color:var(--blue);font:600 12px var(--mono)}.detail-vi{color:var(--orange);font-size:13px;font-weight:700}.empty-detail{color:var(--muted)}.relation-type{color:var(--green);font-size:11px}
/* Vocabulary */
#vocabTable.is-vocabulary-mode{min-width:1120px}#vocabTable.is-vocabulary-mode th:nth-child(1),#vocabTable.is-vocabulary-mode td:nth-child(1){width:58px}#vocabTable.is-vocabulary-mode th:nth-child(2),#vocabTable.is-vocabulary-mode td:nth-child(2){width:62px}#vocabTable.is-vocabulary-mode th:nth-child(3),#vocabTable.is-vocabulary-mode td:nth-child(3){width:190px}#vocabTable.is-vocabulary-mode th:nth-child(4),#vocabTable.is-vocabulary-mode td:nth-child(4){width:230px}#vocabTable.is-vocabulary-mode th:nth-child(6),#vocabTable.is-vocabulary-mode td:nth-child(6){width:84px}.summary-cell{text-align:left}.summary-cell .main-pinyin{margin-bottom:5px}.summary-cell .main-meaning{font-size:18px}
/* Idiom */
#vocabTable.is-idiom-mode{min-width:1380px}#vocabTable.is-idiom-mode th:nth-child(1),#vocabTable.is-idiom-mode td:nth-child(1){width:58px}#vocabTable.is-idiom-mode th:nth-child(2),#vocabTable.is-idiom-mode td:nth-child(2){width:62px}#vocabTable.is-idiom-mode th:nth-child(3),#vocabTable.is-idiom-mode td:nth-child(3){width:220px}#vocabTable.is-idiom-mode th:nth-child(4),#vocabTable.is-idiom-mode td:nth-child(4){width:360px}#vocabTable.is-idiom-mode th:nth-child(5),#vocabTable.is-idiom-mode td:nth-child(5){width:300px}#vocabTable.is-idiom-mode th:nth-child(7),#vocabTable.is-idiom-mode td:nth-child(7){width:84px}.idiom-main .main-pinyin{margin-top:8px}.idiom-meaning-cell{display:grid;gap:8px}.idiom-meaning-cell .badge-line{grid-column:1/-1}
#vocabTable.is-idiom-mode .knowledge-cell{display:table-cell!important;vertical-align:top!important}#vocabTable.is-idiom-mode .knowledge-grid{display:block;width:100%}#vocabTable.is-idiom-mode .knowledge-block{width:100%;min-height:100%;overflow-wrap:anywhere}#vocabTable.is-idiom-mode .detail-cell{display:table-cell!important;vertical-align:top!important;text-align:center!important}
/* Sentence */
#vocabTable.is-sentence-mode{min-width:1420px}#vocabTable.is-sentence-mode th:nth-child(1),#vocabTable.is-sentence-mode td:nth-child(1){width:58px}#vocabTable.is-sentence-mode th:nth-child(2),#vocabTable.is-sentence-mode td:nth-child(2){width:62px}#vocabTable.is-sentence-mode th:nth-child(3),#vocabTable.is-sentence-mode td:nth-child(3){width:440px}#vocabTable.is-sentence-mode th:nth-child(4),#vocabTable.is-sentence-mode td:nth-child(4){width:300px}#vocabTable.is-sentence-mode th:nth-child(6),#vocabTable.is-sentence-mode td:nth-child(6){width:84px}.sentence-row td{height:auto;min-height:180px}.sentence-main{text-align:left;padding:18px!important}.sentence-main .hanzi-tools{top:8px;right:8px;left:auto}.sentence-hanzi{padding:18px 0 8px;text-align:left;font-size:clamp(25px,2vw,34px);line-height:1.38;white-space:normal;overflow-wrap:anywhere}.sentence-pinyin{font-size:14px;line-height:1.45;margin-bottom:7px}.sentence-meaning{font-size:17px;line-height:1.45}.sentence-meta-cell{vertical-align:top}.pattern-block p{font-family:var(--mono);color:var(--blue)}.sentence-analysis-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.empty-row td{text-align:center;padding:50px!important;color:var(--muted);border-radius:var(--radius)}
/* Image and speaking overlays */
.modal-image-overlay{position:fixed;right:18px;bottom:18px;width:300px;z-index:9999;display:none}.modal-image-overlay.active{display:block}.modal-image-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}.modal-img-container{height:180px;padding:8px;display:flex;align-items:center;justify-content:center;position:relative;background:#02070d}.modal-img-container img{max-width:100%;max-height:100%;object-fit:contain}.modal-close-btn{position:absolute;right:8px;top:8px;width:29px;height:29px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:white;cursor:pointer}.modal-footer{padding:11px 13px}.modal-status-bar{display:flex;justify-content:space-between;font-size:10px}.dictionary-popup-overlay{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(0,0,0,.3)}.dictionary-popup-overlay.active{display:flex}.dictionary-popup-card{width:min(820px,72vw);height:min(760px,92dvh);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.dictionary-popup-header,.dictionary-popup-footer{padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel)}.dictionary-popup-title-wrap{display:flex;align-items:center;gap:10px}.dictionary-popup-title{color:var(--green);font-size:11px;font-weight:900;text-transform:uppercase}.dictionary-popup-word{font:700 20px var(--hanzi);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dictionary-popup-close{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--text);cursor:pointer}.dictionary-popup-frame-wrap{flex:1;min-height:0}.dictionary-popup-frame{width:100%;height:100%;border:0}.dictionary-popup-footer{font-size:11px;color:var(--muted)}.dictionary-popup-footer a{color:var(--green)}
@media(max-width:768px){:root{--nav:60px}.workspace-layout{padding-top:var(--nav)}.top-navbar{position:fixed;top:0;left:0;right:0;min-height:var(--nav);padding:8px 10px;gap:7px}.top-navbar>div:first-child{gap:7px!important;display:flex;align-items:center;flex:1}.top-navbar #status{font-size:11px!important}.mobile-collapse-menu{position:fixed;top:66px;left:8px;right:8px;width:auto;grid-template-columns:repeat(2,1fr)}.toggle-mobile-menu-btn{min-width:46px;padding:0 10px}.desktop-menu-label{font-size:0}.desktop-menu-label:before{content:'⚙';font-size:18px}.table-container{padding:8px;overflow-x:hidden}#vocabTable,#vocabTable tbody{display:block;width:100%;min-width:0!important}#vocabTable thead{display:none}.content-row{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;margin:0 0 10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}#vocabTable .content-row td{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important}.index-cell,.mark-cell{display:flex!important;width:auto!important;min-width:0!important}.index-cell{position:static!important;align-self:stretch;min-height:34px!important;align-items:center;justify-content:flex-start!important;text-align:left!important;padding-left:2px!important;padding-right:52px!important;z-index:1}.index-number{display:inline-flex!important;align-items:center;justify-content:flex-start;text-align:left!important}.index-number::before{content:'#';margin-right:2px;color:var(--muted)}.mark-cell{position:absolute!important;top:12px;right:12px;width:34px!important;height:34px!important;align-self:auto;align-items:center;justify-content:center;z-index:2}.main-cell{padding-top:2px!important}.hanzi-tools{position:static;justify-content:flex-start;margin-bottom:6px}.hanzi-focus{padding:2px 0;text-align:left;font-size:38px}.summary-cell .main-meaning{font-size:17px}.knowledge-grid,.sentence-analysis-grid{grid-template-columns:1fr!important}.detail-cell{text-align:left!important}.detail-toggle{width:100%;min-height:40px;flex-direction:row}.content-detail-row:not([hidden]){display:block;margin:-4px 0 10px}.content-detail-row td{display:block!important;width:100%!important;padding:0!important}.detail-card{grid-template-columns:1fr;padding:12px}.sentence-main{padding:0!important}.sentence-hanzi{padding:2px 0 7px;font-size:26px}.sentence-pinyin{font-size:13px}.sentence-meaning{font-size:17px}.sentence-meta-cell .badge-line{margin-top:2px}.dictionary-popup-overlay{padding:0}.dictionary-popup-card{width:100vw;height:100dvh;border-radius:0}.modal-image-overlay{right:8px;left:8px;width:auto;bottom:8px}.modal-img-container{height:130px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Mobile sentence controls: keep TTS and Speaking touch targets above sentence content. */
@media (max-width: 768px) {
  .sentence-main {
    position: relative !important;
  }

  .sentence-main .hanzi-tools {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 8px;
    margin-bottom: 8px !important;
  }

  .sentence-main .speaker-icon,
  .sentence-main .dict-icon {
    position: relative !important;
    z-index: 11 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--card-2);
    cursor: pointer !important;
    touch-action: manipulation;
  }
}

/* Ẩn triệt để header popup & mở rộng iframe */
.dictionary-popup-header { display: none !important; }
.dictionary-popup-card { 
  position: relative;
  border-radius: 18px; 
  overflow: hidden; 
}
.dictionary-popup-frame-wrap { 
  flex: 1; 
  height: 100%; 
}

/* Nút Đóng Popup Nổi (Floating Close) */
.floating-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.floating-close-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

@media (max-width: 768px) {
  /* Tinh chỉnh nút đóng nổi trên mobile */
  .floating-close-btn {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(17, 31, 48, 0.85); /* Nền hơi mờ để nhìn rõ trên mobile */
    backdrop-filter: blur(4px);
  }
}

/* ============================================================
   SEO + RESPONSIVE BỔ SUNG (Matrix Hanzi – Learn & Analyze)
   Thêm cuối file để không đụng các dòng CSS đã minify.
============================================================ */
/* Screen-reader only: phục vụ heading H1 chuẩn SEO + accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Khối trái navbar: co giãn tốt, không tràn trên mobile */
.top-navbar .nav-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1}
.top-navbar .nav-controls-wrapper{flex-shrink:0}

/* Trạng thái tải danh sách (đã bỏ inline style trong HTML) */
.top-navbar #status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;color:var(--green);font-size:14px}

@media (max-width:768px){
  .top-navbar .nav-left{gap:7px;flex:1;min-width:0;flex-wrap:nowrap}
  .top-navbar .nav-left .btn{padding:8px 10px;font-size:12px;min-height:36px;white-space:nowrap}
  .top-navbar #status{font-size:11px;flex:1;min-width:0}
}