/* ============== Updating Status Styles ============== */
.updating-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
font-size: 0.75rem;
border-radius: 0.25rem;
animation: pulse-subtle 2s ease-in-out infinite;
}
.updating-badge.small {
padding: 0.0625rem 0.25rem;
font-size: 0.625rem;
}
@keyframes pulse-subtle {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.updating-notice {
display: block;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border-radius: var(--radius-md);
font-size: 0.875rem;
text-align: center;
}
.is-updating {
color: #92400e;
}
/* ============== Pronunciation Section Styles ============== */
.pronunciation-section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.pronunciation-section h4 {
margin-bottom: 1rem;
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
}
.pronunciation-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.pronunciation-grid .info-item {
background: var(--background-tertiary);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
}
.pronunciation-grid .info-item label {
font-size: 0.75rem;
color: var(--text-tertiary);
}
/* ============== Dictionary References Styles ============== */
.dict-refs-content {
margin-top: 0.5rem;
}
.dict-refs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
}
.dict-ref-item {
display: flex;
flex-direction: column;
padding: 0.75rem;
background: var(--background-tertiary);
border-radius: var(--radius-md);
border-left: 3px solid var(--primary-color);
}
.dict-ref-item .dict-name {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.dict-ref-item .dict-desc {
font-size: 0.75rem;
color: var(--text-tertiary);
margin: 0.125rem 0 0.5rem;
}
.dict-ref-item .dict-value {
font-family: monospace;
font-size: 0.875rem;
color: var(--primary-color);
background: var(--background-color);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.dict-ref {
display: block;
color: var(--primary-color);
font-weight: 500;
margin-bottom: 0.5rem;
}
/* ============== Classical Text Styles ============== */
.classical-text {
font-family: "Noto Serif SC", "Source Han Serif SC", serif;
line-height: 1.8;
padding: 1rem;
background: var(--background-tertiary);
border-radius: var(--radius-md);
border-left: 3px solid var(--accent-color);
}
/* ============== Historical Forms Styles ============== */
.historical-forms {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
}
.form-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.form-label {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.form-char {
font-size: 2.5rem;
font-family: "Kaiti TC", "KaiTi", "Noto Serif SC", serif !important;
min-width: 4rem;
min-height: 4rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-tertiary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
/* ============== Etymology Section Improvements ============== */
.etym-section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.etym-section h4 {
margin-bottom: 0.75rem;
color: var(--text-primary);
font-weight: 600;
}
.etymology-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.etym-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.etym-item label {
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 500;
}
.etym-item span {
color: var(--text-primary);
font-size: 0.9rem;
}
/* Mobile responsive for new styles */
@media (max-width: 640px) {
.pronunciation-grid {
grid-template-columns: repeat(2, 1fr);
}
.dict-refs-grid {
grid-template-columns: 1fr;
}
.historical-forms {
gap: 1rem;
}
.form-char {
font-size: 2rem;
min-width: 3rem;
min-height: 3rem;
}
}
/* Enhanced Meanings Display */
.meaning-label {
font-weight: 600;
color: var(--primary-color);
margin-right: 0.5rem;
}
.han-viet-reading {
font-size: 1.1rem;
padding: 0.75rem;
background: linear-gradient(135deg, rgba(32, 128, 128, 0.08), rgba(236, 72, 153, 0.04));
border-radius: var(--radius-md);
margin-bottom: 0.5rem;
}
.han-viet-reading strong {
color: var(--primary-color);
font-size: 1.2rem;
}
.vietnamese-meanings {
font-weight: 600;
color: var(--text-secondary);
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
margin-top: 0.5rem;
}
.sub-meaning {
padding-left: 1rem;
border-left: 2px solid var(--border-color);
margin-left: 0.5rem;
}
.view-more-hint {
font-size: 0.8rem;
color: var(--primary-color);
margin-top: 0.75rem;
font-style: italic;
opacity: 0.8;
}
.meaning-def {
line-height: 1.7;
margin-bottom: 0.5rem;
}
.meaning-def strong {
color: var(--text-secondary);
}
/* ============== Variants Tab Styles ============== */
.variants-section {
padding: 1rem;
}
.variant-group {
margin-bottom: 1.5rem;
}
.variant-group h4 {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.variant-chars {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.variant-char {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
border: 2px solid transparent;
transition: all var(--transition-fast);
}
.variant-char.clickable {
cursor: pointer;
}
.variant-char.clickable:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Same-form variant - show with muted styling */
.variant-char.same-form {
opacity: 0.7;
background: var(--bg-tertiary);
border: 1px dashed var(--border-color);
}
.variant-char.same-form .char {
color: var(--text-secondary);
}
.variant-char .char {
font-size: 2rem;
font-family: var(--font-chinese);
color: var(--text-primary);
line-height: 1.2;
}
.variant-char .label {
font-size: 0.65rem;
color: var(--text-tertiary);
padding: 0.125rem 0.375rem;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
margin-top: 0.375rem;
}
/* Dark mode variant styles */
[data-theme="dark"] .variant-char {
background: var(--bg-tertiary);
}
[data-theme="dark"] .variant-char.clickable:hover {
background: var(--bg-secondary);
}
[data-theme="dark"] .variant-char .label {
background: rgba(32, 128, 128, 0.2);
color: var(--primary-light);
}
/* ============== Dictionary References Simple (Related Tab) ============== */
.dict-refs-simple {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.dict-ref-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
font-size: 0.8rem;
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .dict-ref-badge {
background: var(--bg-tertiary);
border-color: var(--border-color);
}
/* ============== Nôm Tab Styles ============== */
.nom-section {
padding: 1rem 0;
}
.nom-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
}
.nom-header h4 {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.nom-subtitle {
font-size: 0.9rem;
color: var(--text-secondary);
}
.nom-meanings-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Nôm source group styles */
.nom-source-group {
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: var(--radius-lg);
background: var(--bg-secondary);
}
.nom-source-group.nguyen-trai-group {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
border-left: 4px solid var(--primary-color);
}
.nom-source-group.nom-tay-group {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
border-left: 4px solid var(--success-color);
}
/* Giản Dị Hán Nôm - Purple theme */
.nom-source-group.gdhn-group {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.05) 100%);
border-left: 4px solid #a855f7;
}
/* Từ Điển Hán Nôm (Viện Hán Nôm) - Blue theme */
.nom-source-group.vhn-group {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
border-left: 4px solid #3b82f6;
}
/* Bảng Tra Chữ Nôm - Teal theme */
.nom-source-group.btcn-group {
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
border-left: 4px solid #14b8a6;
}
/* Từ Điển Chữ Nôm Tày - Amber theme */
.nom-source-group.tdcnt-group {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
border-left: 4px solid #f59e0b;
}
/* Từ Điển Chữ Nôm Dao-Giáy - Rose theme */
.nom-source-group.tdcndg-group {
background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(251, 113, 133, 0.05) 100%);
border-left: 4px solid #f43f5e;
}
/* Từ Điển Hán Việt - Indigo theme */
.nom-source-group.tdhv-group {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.08) 0%, rgba(129, 140, 248, 0.05) 100%);
border-left: 4px solid #208080;
}
/* Nan Tự Giải Âm - Brown/sepia scholarly theme */
.nom-source-group.nantugiaiam-chugiai-group {
background: linear-gradient(135deg, rgba(146, 64, 14, 0.08) 0%, rgba(180, 83, 9, 0.05) 100%);
border-left: 4px solid #92400e;
}
/* Hồng nghĩa giác tư y thư - Green herbal/medical theme */
.nom-source-group.hongnghia-ythu-group {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(74, 222, 128, 0.05) 100%);
border-left: 4px solid #22c55e;
}
/* Taberd (1838) - Slate/sepia theme */
.nom-source-group.taberd-group {
background: linear-gradient(135deg, rgba(139, 119, 101, 0.08) 0%, rgba(180, 160, 140, 0.05) 100%);
border-left: 4px solid #8b7765;
}
/* Génibrel - Olive green theme */
.nom-source-group.genibrel-group {
background: linear-gradient(135deg, rgba(132, 204, 22, 0.08) 0%, rgba(163, 230, 53, 0.05) 100%);
border-left: 4px solid #84cc16;
}
/* Truyện Kiều editions - Red/brown theme */
.nom-source-group.kieu-1866-group,
.nom-source-group.kieu-1871-group,
.nom-source-group.kieu-1902-group {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(248, 113, 113, 0.05) 100%);
border-left: 4px solid #dc2626;
}
/* Lục Vân Tiên - Sky blue theme */
.nom-source-group.luc-van-tien-group {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(56, 189, 248, 0.05) 100%);
border-left: 4px solid #0ea5e9;
}
/* Other sources - Gray theme */
.nom-source-group.other-source-group {
background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(148, 163, 184, 0.05) 100%);
border-left: 4px solid #64748b;
}
.nom-group-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.nom-meaning-item {
background: var(--bg-primary);
border-radius: var(--radius-md);
padding: 1rem;
border: 1px solid var(--border-color);
margin-bottom: 0.75rem;
}
.nom-meaning-item:last-child {
margin-bottom: 0;
}
.nom-meaning-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.nom-reading {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
font-family: var(--font-chinese);
}
.nom-word-class {
display: inline-block;
padding: 0.125rem 0.5rem;
background: var(--primary-light);
color: var(--primary-hover);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}
.nom-meaning-content {
font-size: 0.95rem;
color: var(--text-primary);
line-height: 1.7;
white-space: pre-wrap;
}
/* Nan Tự Giải Âm - Phiên thiết formatting */
.nom-section {
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
border-left: 3px solid var(--primary);
}
.nom-section-label {
font-weight: 600;
color: var(--primary);
margin-right: 0.5rem;
}
.nom-section-content {
color: var(--text-primary);
}
.nom-section-meaning {
border-left-color: var(--success);
}
.nom-section-meaning .nom-section-label {
color: var(--success);
}
.nom-meaning-text {
margin-top: 0.25rem;
line-height: 1.8;
}
.nom-section-kangxi {
border-left-color: var(--warning);
}
.nom-section-kangxi .nom-section-label {
color: var(--warning);
}
.nom-section-phienthiet {
border-left-color: #9c27b0;
padding-bottom: 0.75rem;
}
.nom-section-phienthiet .nom-section-label {
color: #9c27b0;
display: block;
margin-bottom: 0.5rem;
}
.nom-phienthiet-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
margin: 0.5rem 0;
padding: 0.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.nom-phienthiet-source {
font-size: 0.85rem;
color: var(--text-secondary);
font-style: italic;
display: block;
width: 100%;
margin-bottom: 0.25rem;
}
.nom-phienthiet-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0.25rem 0 0.25rem 1rem;
}
.nom-phienthiet-chinese {
font-family: var(--font-chinese);
font-size: 1.1rem;
color: var(--text-primary);
padding: 0.2rem 0.5rem;
background: var(--bg-primary);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
}
.nom-phienthiet-viet {
font-size: 0.9rem;
color: var(--primary);
font-style: italic;
}
.nom-section-radical {
border-left-color: #ff5722;
display: flex;
align-items: center;
}
.nom-section-radical .nom-section-label {
color: #ff5722;
}
.nom-radical-value {
font-family: var(--font-chinese);
font-size: 1.2rem;
color: var(--text-primary);
padding: 0.2rem 0.5rem;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
}
.nom-source {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--text-tertiary);
font-style: italic;
}
.nom-source-info {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
font-size: 0.85rem;
color: var(--text-tertiary);
}
.nom-empty {
padding: 2rem;
text-align: center;
color: var(--text-tertiary);
}
.nom-empty i {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
/* Nôm corpus examples */
.nom-examples-section {
margin-top: 1.25rem;
}
.nom-examples-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nom-example-block {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 0.75rem;
}
.nom-example-work-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.nom-example-line {
font-family: var(--font-chinese);
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-primary);
white-space: normal;
word-break: break-word;
}
.nom-example-qn {
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
.nom-char-hit {
background: var(--primary-light);
border-radius: 0.25rem;
padding: 0 0.15rem;
}
/* Kangxi dictionary styles */
.kangxi-ref {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--bg-secondary);
border-radius: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.kangxi-img-link {
text-decoration: none;
font-size: 1rem;
opacity: 0.7;
transition: opacity 0.2s;
}
.kangxi-img-link:hover {
opacity: 1;
}
.kangxi-image-wrapper {
margin-bottom: 1rem;
}
.kangxi-toggle-img {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
cursor: pointer;
color: var(--text-secondary);
transition: background 0.2s;
}
.kangxi-toggle-img:hover {
background: var(--bg-tertiary);
}
.kangxi-image-container {
display: none;
margin-top: 0.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
max-width: 100%;
}
.kangxi-image-container.show {
display: block;
}
.kangxi-image-container img {
width: 100%;
height: auto;
display: block;
}
.kangxi-img-error {
padding: 1rem;
text-align: center;
color: var(--text-tertiary);
font-size: 0.85rem;
}
.kangxi-definition {
font-size: 0.95rem;
line-height: 1.8;
color: var(--text-primary);
white-space: pre-wrap;
font-family: 'HanaMinA', 'HanaMinB', 'Noto Serif CJK SC', 'SimSun-ExtB', 'MingLiU-ExtB', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif;
}
/* Kangxi Parsed Content Styles */
.kangxi-parsed-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.kangxi-line {
padding: 0.75rem;
border-radius: var(--radius-md);
background: var(--bg-secondary);
border-left: 3px solid var(--border-color);
}
.kangxi-line.primary {
border-left-color: var(--color-primary, #208080);
background: linear-gradient(135deg, rgba(32, 128, 128, 0.05), transparent);
}
.kangxi-line.alt-reading {
border-left-color: var(--color-accent, #0ea5e9);
padding-left: 1rem;
}
.kangxi-fanqie-block {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.kangxi-fanqie-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
background: rgba(32, 128, 128, 0.1);
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.fanqie-source-badge {
font-size: 0.7rem;
padding: 0.1rem 0.3rem;
background: var(--color-primary, #208080);
color: white;
border-radius: 3px;
font-weight: 500;
}
.fanqie-formula {
font-weight: 600;
color: var(--text-primary);
}
.kangxi-yin-refs {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.kangxi-yin-item {
font-size: 0.85rem;
color: var(--color-accent, #0ea5e9);
padding: 0.15rem 0.4rem;
background: rgba(14, 165, 233, 0.1);
border-radius: var(--radius-sm);
}
.kangxi-line-text {
font-family: 'HanaMinA', 'HanaMinB', 'Noto Serif CJK SC', serif;
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-primary);
}
.you-marker {
color: var(--color-accent, #0ea5e9);
font-weight: 600;
}
.fanqie-highlight {
color: var(--color-primary, #208080);
font-weight: 600;
}
.yin-highlight {
color: var(--color-accent, #0ea5e9);
}
.kangxi-meaning-viet {
margin-top: 0.5rem;
padding: 0.5rem;
background: rgba(32, 128, 128, 0.05);
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--text-secondary);
border-left: 2px solid var(--color-primary, #208080);
}
/* Dark theme adjustments */
[data-theme="dark"] .kangxi-line.primary {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.1), transparent);
}
[data-theme="dark"] .kangxi-fanqie-item {
background: rgba(32, 128, 128, 0.2);
}
[data-theme="dark"] .kangxi-yin-item {
background: rgba(14, 165, 233, 0.15);
}
.kangxi-source {
color: var(--color-accent, #0ea5e9);
font-weight: 500;
}
.kangxi-variant {
color: var(--text-tertiary);
font-size: 0.9em;
}
.kangxi-definition em {
font-style: normal;
color: var(--color-primary, #208080);
}
/* Word class abbreviation styles */
.wc-dt { background: #dbeafe; color: #1e40af; } /* Danh từ */
.wc-dgt { background: #dcfce7; color: #166534; } /* Động từ */
.wc-tt { background: #fef3c7; color: #92400e; } /* Tính từ */
.wc-pht { background: #fce7f3; color: #9d174d; } /* Phó từ */
.wc-trgt { background: #e0e7ff; color: #4338ca; } /* Trạng từ */
.wc-lt { background: #f3e8ff; color: #7e22ce; } /* Liên từ */
.wc-st { background: #fee2e2; color: #b91c1c; } /* Số từ */
[data-theme="dark"] .nom-meaning-item {
background: var(--bg-tertiary);
border-color: var(--border-color);
}
[data-theme="dark"] .nom-word-class {
background: rgba(32, 128, 128, 0.2);
color: var(--primary-light);
}
[data-theme="dark"] .wc-dt { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .wc-dgt { background: rgba(34, 197, 94, 0.2); color: #86efac; }
[data-theme="dark"] .wc-tt { background: rgba(234, 179, 8, 0.2); color: #fde047; }
[data-theme="dark"] .wc-pht { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
[data-theme="dark"] .wc-trgt { background: rgba(32, 128, 128, 0.2); color: #a5b4fc; }
[data-theme="dark"] .wc-lt { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
[data-theme="dark"] .wc-st { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
/* ============================================
FOOTER STYLES
============================================ */
.site-footer {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border-top: 1px solid var(--border-color);
padding: 3rem 1.5rem 1.5rem;
margin-top: 4rem;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
.footer-logo-image {
height: 50px;
width: auto;
object-fit: contain;
}
.footer-logo-icon {
font-size: 1.75rem;
}
.footer-tagline {
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.footer-dmca {
margin-top: 1rem;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-dmca:hover {
opacity: 1;
}
.dmca-badge {
height: 32px;
width: auto;
display: block;
filter: grayscale(0.2);
transition: all 0.3s ease;
}
.dmca-badge:hover {
filter: grayscale(0);
transform: translateY(-2px);
}
[data-theme="dark"] .dmca-badge {
filter: grayscale(0.3) brightness(0.9);
}
[data-theme="dark"] .dmca-badge:hover {
filter: grayscale(0) brightness(1);
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-links-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-links-group h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.footer-links-group a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-links-group a:hover {
color: var(--primary);
padding-left: 0.25rem;
}
.footer-bottom {
padding-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.footer-copyright {
color: var(--text-tertiary);
font-size: 0.85rem;
}
.footer-note {
color: var(--text-tertiary);
font-size: 0.8rem;
}
.footer-note a {
color: var(--primary);
text-decoration: none;
}
.footer-note a:hover {
text-decoration: underline;
}
/* Responsive Footer */
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-links {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.footer-brand {
text-align: center;
align-items: center;
}
}
@media (max-width: 480px) {
.footer-links {
grid-template-columns: 1fr;
text-align: center;
}
.footer-links-group {
align-items: center;
}
.footer-links-group a:hover {
padding-left: 0;
}
}
/* Dark theme adjustments */
[data-theme="dark"] .site-footer {
background: linear-gradient(135deg, var(--bg-secondary) 0%, #0f172a 100%);
}
/* ============== Combined Etymology Tab Styles ============== */
.glyph-evolution-section {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.glyph-evolution-section h4 {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.historical-forms {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}
.form-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
min-width: 100px;
transition: transform var(--transition-fast);
}
.form-item:hover {
transform: translateY(-2px);
}
.form-label {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-bottom: 0.5rem;
}
.form-char {
font-size: 2.5rem;
color: var(--text-primary);
font-family: "Kaiti TC", "KaiTi", "STKaiti", var(--font-chinese) !important;
}
.form-char.ancient-font {
font-family: 'Oracle Bone', 'Bronze Script', "Kaiti TC", "KaiTi", 'STKaiti', 'AR PL UKai CN', var(--font-chinese) !important;
}
/* Historical form image container */
.form-char-container {
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
min-height: 60px;
flex-wrap: wrap;
}
.historical-form-img,
.form-img {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 4px;
background: var(--bg-primary);
padding: 2px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.historical-form-img:hover,
.form-img:hover {
transform: scale(1.5);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 10;
position: relative;
}
/* Form glyph for SVG glyphs - historical character forms */
.form-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
min-height: 50px;
max-width: 60px;
max-height: 60px;
margin: 0.25rem;
vertical-align: middle;
background: var(--bg-tertiary);
border-radius: 6px;
padding: 4px;
transition: transform 0.2s ease;
}
.form-glyph:hover {
transform: scale(1.3);
z-index: 10;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.form-glyph svg {
width: 100%;
height: 100%;
max-width: 50px;
max-height: 50px;
fill: currentColor;
}
.form-loading {
font-size: 1rem;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.form-char.no-data {
color: var(--text-tertiary);
font-size: 1.5rem;
}
/* Current character highlight in form display */
.form-char-current {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.15), rgba(139, 92, 246, 0.15));
border: 2px solid var(--primary-color);
border-radius: 8px;
padding: 0.25rem 0.5rem;
box-shadow: 0 2px 8px rgba(32, 128, 128, 0.25);
}
/* Clickable variant character in form display */
.form-char-clickable {
cursor: pointer;
transition: all 0.2s ease;
padding: 0.25rem 0.5rem;
border-radius: 6px;
border: 1px solid transparent;
}
.form-char-clickable:hover {
background: rgba(32, 128, 128, 0.1);
border-color: var(--primary-color);
transform: scale(1.05);
}
/* ============== Stroke Preview in Overview ============== */
/* Merged style for stroke preview section */
/* Char display header stroke animation container */
#modalChar {
min-width: 120px;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.variants-section-combined {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.variants-section-combined h4 {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.variant-groups {
display: flex;
flex-direction: column;
gap: 1rem;
}
.variant-group {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.variant-group label {
font-weight: 500;
color: var(--text-secondary);
min-width: 150px;
}
.etymology-info {
margin-bottom: 2rem;
}
.etymology-info h4 {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.etymology-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.etym-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.75rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
}
.etym-item label {
font-weight: 500;
color: var(--text-tertiary);
white-space: nowrap;
}
.etym-item span {
color: var(--text-primary);
font-family: var(--font-chinese);
}
.etym-section {
margin-bottom: 1.5rem;
}
.etym-section h4 {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.classical-text {
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
font-family: var(--font-chinese);
line-height: 1.8;
white-space: pre-line;
}
/* ============== Pronunciation Tab Styles ============== */
.pronunciation-detailed {
padding: 1rem 0;
}
.pronunciation-detailed h4 {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.pronunciation-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.75rem;
}
/* ============== Fanqie Section Styles ============== */
.fanqie-section {
margin-top: 2rem;
padding: 1.25rem;
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(139, 92, 246, 0.05) 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(139, 92, 246, 0.15);
}
.fanqie-section h4 {
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.fanqie-description {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
line-height: 1.5;
}
.fanqie-main-reading,
.fanqie-other-readings {
margin-bottom: 1.25rem;
}
.fanqie-reading-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.fanqie-label {
font-weight: 600;
color: var(--text-secondary);
font-size: 0.9rem;
}
.fanqie-reading-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
padding: 0.25rem 0.75rem;
background: rgba(139, 92, 246, 0.1);
border-radius: var(--radius-md);
}
.fanqie-derivations {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fanqie-derivation-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
font-size: 0.9rem;
}
.fanqie-sources {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
background: rgba(14, 165, 233, 0.1);
color: #0ea5e9;
border-radius: var(--radius-sm);
font-weight: 500;
}
/* Source links in Kangxi/Fanqie sections */
.source-link {
color: #0ea5e9;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.source-link:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* MC Initial Latin format */
.mc-initial-zh {
font-family: var(--font-chinese);
}
.mc-initial-latin {
color: var(--text-secondary);
font-size: 0.9em;
font-family: monospace;
}
/* Baxter Middle Chinese notation */
.mc-detail {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Wang Li MC IPA styling */
.mc-ipa {
font-family: 'Doulos SIL', 'Charis SIL', 'Gentium', 'Lucida Sans Unicode', sans-serif;
font-weight: 600;
color: var(--primary-color);
font-size: 1.1rem;
}
.mc-latin {
font-family: monospace;
font-size: 0.85rem;
color: var(--text-secondary);
margin-left: 4px;
}
.mc-tone {
font-size: 0.75rem;
color: var(--text-muted);
font-family: var(--font-chinese);
}
.mc-ipa-cell {
text-align: center;
vertical-align: middle;
}
.mc-source-note {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
font-style: italic;
}
.mc-source-note strong {
color: var(--text-secondary);
}
.baxter-mc {
font-family: monospace;
font-weight: 600;
color: var(--primary-color);
letter-spacing: 0.5px;
}
.baxter-tone {
font-family: monospace;
font-weight: 600;
color: #dc2626;
margin-left: 1px;
}
.baxter-mc-cell {
font-family: monospace;
text-align: center;
}
.fanqie-from-base {
font-size: 0.9rem;
cursor: help;
}
.fanqie-formula {
font-family: var(--font-chinese);
font-size: 1.1rem;
color: var(--text-primary);
background: rgba(139, 92, 246, 0.08);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.fanqie-arrow {
color: var(--text-muted);
font-size: 1rem;
}
.fanqie-result {
font-weight: 600;
color: var(--primary-color);
}
.fanqie-mc-info {
font-size: 0.8rem;
color: var(--text-muted);
margin-left: auto;
}
.fanqie-mc-info .mc-initial {
color: var(--text-secondary);
font-weight: 500;
}
.fanqie-confidence,
.fanqie-confidence-dual {
font-size: 0.75rem;
padding: 0.15rem 0.4rem;
border-radius: 99px;
background: var(--bg-secondary);
}
.fanqie-confidence.high,
.fanqie-confidence-dual.high {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.fanqie-confidence.medium,
.fanqie-confidence-dual.medium {
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
}
/* v4: Academic only - high phonology, low lexical */
.fanqie-confidence-dual.academic {
background: rgba(139, 92, 246, 0.15);
color: #8b5cf6;
}
/* v4: Common usage - low phonology, high lexical */
.fanqie-confidence-dual.common {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.fanqie-confidence.low,
.fanqie-confidence-dual.low {
background: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
/* HV Layer badges */
.hv-layer-badge {
font-size: 0.6rem;
padding: 1px 4px;
border-radius: 3px;
margin-left: 2px;
font-weight: 600;
}
.fanqie-other-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fanqie-other-reading-group {
padding: 0.75rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.fanqie-other-reading-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.fanqie-inherited-notice {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: rgba(59, 130, 246, 0.1);
border-radius: var(--radius-md);
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 1rem;
}
.fanqie-inherited-notice svg {
width: 16px;
height: 16px;
color: #3b82f6;
}
.fanqie-inherited-notice strong {
font-family: var(--font-chinese);
color: var(--primary-color);
}
/* ============== Kangxi Phonetic Section Styles ============== */
.kangxi-phonetic-section {
margin-top: 2rem;
padding: 1.25rem;
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(168, 85, 247, 0.05) 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(168, 85, 247, 0.15);
}
.kangxi-phonetic-section h4 {
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.kangxi-phonetic-description {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
line-height: 1.5;
}
.kangxi-phonetic-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Comparison Table */
.fanqie-comparison {
overflow-x: auto;
}
.fanqie-comparison h5 {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.fanqie-comparison table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
overflow: hidden;
}
.fanqie-comparison th,
.fanqie-comparison td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.fanqie-comparison th {
background: var(--bg-tertiary);
color: var(--text-secondary);
font-weight: 600;
font-size: 0.85rem;
}
.fanqie-comparison tr:last-child td {
border-bottom: none;
}
.fanqie-comparison tr:hover {
background: rgba(139, 92, 246, 0.05);
}
.fanqie-comparison .source-cell {
font-weight: 500;
color: #0ea5e9;
}
.fanqie-comparison .fanqie-cell {
font-family: var(--font-chinese);
font-size: 1rem;
color: var(--text-primary);
}
.fanqie-comparison .mc-cell {
font-size: 0.85rem;
color: var(--text-muted);
font-family: monospace;
}
.fanqie-comparison .hv-cell {
font-weight: 600;
color: var(--primary-color);
}
.fanqie-comparison .pinyin-cell {
font-style: italic;
color: var(--text-secondary);
}
/* Kangxi Original Lines */
.kangxi-original-lines {
padding: 1rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.kangxi-original-lines h5 {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.kangxi-lines-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.kangxi-line-item {
padding: 0.75rem;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
line-height: 1.7;
font-family: var(--font-chinese);
font-size: 1rem;
}
.kangxi-line-item .kx-source {
display: inline-block;
padding: 0.1rem 0.4rem;
background: rgba(14, 165, 233, 0.15);
color: #0ea5e9;
border-radius: 3px;
font-size: 0.85rem;
font-weight: 500;
margin-right: 0.25rem;
}
.kangxi-line-item .kx-fanqie {
display: inline-block;
padding: 0.1rem 0.4rem;
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
border-radius: 3px;
font-weight: 600;
}
.kangxi-line-item .kx-yin {
display: inline-block;
padding: 0.1rem 0.4rem;
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
border-radius: 3px;
}
.kangxi-line-item .kx-you {
display: inline-block;
padding: 0.1rem 0.4rem;
background: rgba(234, 179, 8, 0.15);
color: #ca8a04;
border-radius: 3px;
}
/* ============== Kangxi Parsed With Translation Section ============== */
.kangxi-parsed-section {
margin-top: 2rem;
padding: 1.25rem;
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(34, 197, 94, 0.05) 100%);
border-radius: var(--radius-lg);
border: 1px solid rgba(34, 197, 94, 0.15);
}
/* Kangxi section toggle header */
.kangxi-section-header {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem 0;
user-select: none;
}
.kangxi-section-header:hover {
opacity: 0.85;
}
.kangxi-section-header .toggle-icon {
font-size: 0.8rem;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.kangxi-section-header h4 {
margin: 0;
flex: 1;
}
.kangxi-section-header .line-count {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: normal;
}
/* Collapsible body */
.kangxi-parsed-body {
transition: max-height 0.3s ease, opacity 0.2s ease;
overflow: hidden;
}
.kangxi-parsed-body.collapsed {
max-height: 0;
opacity: 0;
overflow: hidden;
}
/* Toggle icon rotation when collapsed */
.kangxi-section-header:has(+ .kangxi-parsed-body.collapsed) .toggle-icon {
transform: rotate(-90deg);
}
.kangxi-parsed-section h4 {
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.kangxi-parsed-description {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
line-height: 1.5;
}
.kangxi-parsed-lines {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* NEW: Clean kangxi line item */
.kangxi-parsed-line {
padding: 0;
background: transparent;
border-radius: 0;
border: none;
transition: all 0.2s ease;
}
/* Header row: line number + original text (header-style color, no background) */
.kangxi-line-header {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem 0;
color: var(--text-primary);
font-weight: 500;
}
.kangxi-line-header:hover {
color: var(--primary-color);
}
.kangxi-line-header .line-number {
font-weight: 600;
color: var(--text-secondary);
min-width: 1.5rem;
}
.kangxi-line-header .line-preview {
flex: 1;
font-family: var(--font-chinese);
font-size: 1rem;
line-height: 1.7;
}
/* Toggle icon - dashed arrow pointing down */
.kangxi-line-header .toggle-icon {
font-size: 0.7rem;
color: var(--text-tertiary);
transition: transform 0.25s ease;
opacity: 0.6;
margin-left: auto;
padding: 0.25rem;
}
/* Dashed connector line */
.kangxi-line-header::after {
content: '';
position: absolute;
left: 1rem;
top: 100%;
width: 0;
height: 0;
border-left: 1px dashed var(--border-color);
transition: height 0.25s ease;
}
/* When expanded, rotate icon */
.kangxi-parsed-line.expanded .kangxi-line-header .toggle-icon {
transform: rotate(90deg);
}
/* Detail section (Phân tích + Nghĩa) - hidden by default */
.kangxi-line-detail {
display: none;
padding: 0.75rem 0 0.75rem 1.5rem;
margin-left: 0.75rem;
border-left: 1px dashed var(--border-color);
position: relative;
}
/* Show detail when expanded */
.kangxi-parsed-line.expanded .kangxi-line-detail {
display: block;
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Original text in detail (smaller, muted) */
.kangxi-line-detail .original-text {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dotted var(--border-color);
}
.kangxi-line-detail .original-text strong {
color: var(--text-tertiary);
font-weight: 500;
}
/* Translation/Analysis section */
.kangxi-line-detail .translation-text {
font-size: 0.9rem;
line-height: 1.6;
}
.kangxi-line-detail .translation-text strong {
color: var(--primary-color);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.kangxi-line-detail .trans-line {
padding: 0.25rem 0;
color: var(--text-secondary);
}
/* Dark mode adjustments */
[data-theme="dark"] .kangxi-line-header:hover {
color: var(--primary-light);
}
[data-theme="dark"] .kangxi-line-detail {
border-left-color: var(--border-color);
}
.kangxi-line-original {
flex: 1;
font-family: var(--font-chinese);
font-size: 1.05rem;
line-height: 1.7;
color: var(--text-primary);
}
.toggle-translation-btn {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: var(--radius-sm);
color: #16a34a;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.toggle-translation-btn:hover {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.5);
}
.toggle-translation-btn .toggle-icon {
font-size: 0.85rem;
transition: transform 0.2s ease;
}
.toggle-translation-btn.active .toggle-icon {
transform: rotate(180deg);
}
.kangxi-line-translation {
display: none;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--border-color);
}
.kangxi-line-translation.show {
display: block;
}
.kangxi-translation-content {
font-size: 0.9rem;
line-height: 1.7;
color: var(--text-secondary);
}
.kangxi-translation-content .trans-source {
display: inline-block;
padding: 0.1rem 0.4rem;
background: rgba(14, 165, 233, 0.15);
color: #0ea5e9;
border-radius: 3px;
font-size: 0.85rem;
font-weight: 500;
margin-right: 0.25rem;
}
.kangxi-translation-content .trans-fanqie {
color: #a855f7;
font-weight: 500;
}
.kangxi-translation-content .trans-char {
color: var(--primary-color);
font-weight: 600;
}
.kangxi-translation-content .trans-hv {
color: #16a34a;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85em;
}
.kangxi-translation-content .trans-meaning {
color: var(--text-muted);
font-style: italic;
}
/* Toggle all translations button */
.toggle-all-translations {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: var(--radius-md);
color: #16a34a;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.toggle-all-translations:hover {
background: rgba(34, 197, 94, 0.2);
}
/* Cihui Numbered List Styles */
.cihui-numbered-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.cihui-numbered-list li {
position: relative;
padding: 0.5rem 0 0.5rem 2rem;
border-bottom: 1px dashed var(--border-color);
line-height: 1.6;
}
.cihui-numbered-list li:last-child {
border-bottom: none;
}
.cihui-numbered-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.5rem;
height: 1.5rem;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
}
.cihui-annotation {
display: block;
margin-top: 0.25rem;
padding-left: 0.5rem;
border-left: 2px solid rgba(139, 92, 246, 0.3);
font-size: 0.85rem;
color: var(--text-muted);
font-style: italic;
}
/* ============== Stroke Preview in Overview ============== */
.stroke-preview-section {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
}
.stroke-preview-section h4 {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.stroke-preview {
display: flex;
justify-content: center;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
width: 150px;
height: 150px;
margin: 0 auto 1rem;
align-items: center;
}
.stroke-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.btn-stroke {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
font-size: 0.875rem;
transition: all 0.2s ease;
min-width: 2.5rem;
}
.btn-stroke:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
}
.btn-stroke:active {
transform: translateY(0);
}
.btn-stroke:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* ============== Word Stroke Animation (Multi-Character) ============== */
.word-stroke-preview {
width: auto !important;
height: auto !important;
min-height: 120px;
padding: 1.5rem 1rem;
}
.word-stroke-container {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
}
.char-stroke-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem;
background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.char-stroke-card:hover {
border-color: var(--primary-color);
box-shadow: 0 4px 16px rgba(32, 128, 128, 0.15);
transform: translateY(-2px);
}
.char-stroke-card .stroke-target {
background: #fff;
border-radius: 8px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.char-stroke-card .char-label {
margin-top: 0.5rem;
text-align: center;
}
.char-stroke-card .char-label .char-text {
font-size: 1rem;
font-weight: 600;
color: var(--text-secondary);
font-family: var(--font-chinese);
}
.char-stroke-card .char-play-btn {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(32, 128, 128, 0.1);
color: var(--primary-color);
font-size: 0.65rem;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.char-stroke-card:hover .char-play-btn {
opacity: 1;
}
.char-stroke-card .char-play-btn:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
/* Sequenced animation indicator */
.char-stroke-card::before {
content: attr(data-index);
position: absolute;
top: -8px;
left: -8px;
width: 20px;
height: 20px;
background: var(--primary-color);
color: white;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
}
/* Dark mode adjustments */
[data-theme="dark"] .char-stroke-card {
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-tertiary));
}
[data-theme="dark"] .char-stroke-card .stroke-target {
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .char-stroke-card .stroke-target svg path {
stroke: #e2e8f0 !important;
}
/* ============== MOE/Xinhua Content Styles ============== */
.xinhua-content,
.moe-content {
padding: 0.5rem 0;
background: transparent;
border-radius: 0;
font-family: var(--font-chinese);
line-height: 1.8;
}
.moe-content {
max-height: none;
overflow: visible;
}
/* Han Viet Main Display */
.hanviet-main {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
}
/* ============== Meaning Formatting Styles - Content-First Design ============== */
/* Nguyên tắc: Nội dung > UI, giảm lớp thị giác, màu có ngữ nghĩa */
.meaning-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Source Section - for word modal meanings by source */
.source-section {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
background: rgba(32, 128, 128, 0.03);
border-left: 3px solid rgba(32, 128, 128, 0.3);
border-radius: 0 8px 8px 0;
}
.source-section h5.source-label {
font-size: 0.85rem;
font-weight: 600;
color: #208080;
margin: 0 0 0.75rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(32, 128, 128, 0.15);
}
.source-section .source-meanings {
font-size: 0.92rem;
line-height: 1.7;
color: #374151;
}
.source-section .source-meanings .meaning-content {
padding: 0.25rem 0;
}
/* Meanings organized by source - Đơn giản hóa */
.meanings-by-source {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 0.5rem;
}
.source-block {
background: transparent;
padding: 0;
border-left: none;
}
/* Simplified source block - với border nhẹ phân tách */
.source-block-white {
background: transparent !important;
border-radius: 0;
padding: 1rem;
margin-bottom: 2rem;
border: 1px solid rgba(229, 231, 235, 0.8);
border-left: 3px solid rgba(32, 128, 128, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Header nguồn - gradient nổi bật, in nghiêng */
.source-header-numbered {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, rgba(32, 128, 128, 0.1), rgba(236, 72, 153, 0.08));
border-radius: 8px;
border: none;
font-style: italic;
}
.source-number {
display: none; /* Ẩn số thứ tự */
}
/* Text label - tên nguồn từ điển - nổi bật hơn */
.source-label {
font-size: 0.9rem;
color: #1a6666;
font-weight: 600;
font-style: italic;
background: linear-gradient(45deg, #208080, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Source attribution ở cuối block - metadata style */
.source-attribution {
margin-top: 0.5rem;
font-size: 0.75rem;
color: #9ca3af;
text-align: right;
}
.source-block-white .source-meanings {
display: block;
}
/* Flat meaning items - chỉ text, không nền */
.source-block-white .source-meanings .meaning-item,
.source-block-white .source-meanings .meaning-entry {
font-size: 0.95rem;
line-height: 1.7;
color: #374151;
padding: 0.35rem 0;
background: transparent;
border: none;
}
.source-block-white .source-meanings .meaning-entry + .meaning-entry {
border-top: 1px dashed #e5e7eb;
}
/* === Parsed meaning styles (new clean data) === */
.parsed-meaning .examples-section {
margin-top: 0.75rem;
padding: 0.75rem;
background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 100%);
border-radius: 8px;
border-left: 3px solid #10b981;
}
.parsed-meaning .examples-header {
margin-bottom: 0.5rem;
}
.parsed-meaning .examples-label {
font-weight: 600;
color: #059669;
font-size: 0.85rem;
}
.parsed-meaning .example-item {
font-size: 0.9rem;
color: #374151;
padding: 0.35rem 0;
line-height: 1.5;
border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.parsed-meaning .example-item:last-child {
border-bottom: none;
}
.parsed-meaning .example-chinese {
color: #dc2626;
font-weight: 600;
font-size: 1rem;
}
.parsed-meaning .example-hanzi {
color: #7c3aed;
font-family: var(--font-chinese);
}
.parsed-meaning .example-text {
color: #1f2937;
}
.parsed-meaning .example-meaning {
color: #059669;
}
.parsed-meaning .examples-more {
margin-top: 0.5rem;
font-size: 0.8rem;
color: #6b7280;
font-style: italic;
}
.parsed-meaning .meaning-notes {
margin-top: 0.25rem;
color: #9ca3af;
font-style: italic;
}
.pos-tag {
display: inline-block;
padding: 0.1rem 0.4rem;
background: #dbeafe;
color: #1e40af;
font-size: 0.75rem;
border-radius: 3px;
margin-right: 0.25rem;
}
.pos-tag-zh {
display: inline-block;
padding: 0.1rem 0.4rem;
background: #fee2e2;
color: #991b1b;
font-size: 0.75rem;
border-radius: 3px;
margin-right: 0.25rem;
}
.moe-meaning-item {
padding: 0.5rem 0;
border-bottom: 1px dashed #e5e7eb;
}
.moe-meaning-item:last-child {
border-bottom: none;
}
.source-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.source-code {
display: inline-block;
padding: 0.15rem 0.5rem;
background: #6b7280;
color: white;
font-size: 0.7rem;
font-weight: 600;
border-radius: var(--radius-sm);
text-transform: uppercase;
}
.source-name {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.source-meanings {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.source-meanings .meaning-item {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-primary);
padding-left: 0;
border-left: none;
}
.source-meanings .meaning-item:hover {
background: transparent;
}
.more-meanings {
font-size: 0.8rem;
color: #9ca3af;
font-style: italic;
padding-left: 0;
margin-top: 0.25rem;
}
/* Pinyin inline highlights - subtle, không nổi bật quá */
.pinyin-inline {
display: inline;
color: #6b7280;
font-weight: 400;
font-style: italic;
background: transparent;
padding: 0;
border-radius: 0;
}
/* Classifier (Lượng từ) styling - đơn giản */
.classifier-section {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
margin-bottom: 0.5rem;
background: transparent;
border-radius: 0;
border-left: none;
}
.classifier-label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 500;
color: #78350f;
font-size: 0.85rem;
background: transparent;
padding: 0.15rem 0;
border-radius: 0;
}
.classifier-value {
color: #374151;
font-weight: 500;
}
/* ============================================================
SOURCE-SPECIFIC MEANING FORMATTING STYLES - Simplified
Nguyên tắc: Content-first, màu có ngữ nghĩa, giảm decoration
============================================================ */
/* Base meaning content wrapper - bỏ box, flat design */
.meaning-content {
background: transparent;
color: #1f2937;
padding: 0;
border-radius: 0;
line-height: 1.8;
font-size: 0.95rem;
}
/* Reading header block - inline, không nền */
.reading-header {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
margin-bottom: 0.25rem;
}
/* Han Viet reading - in đậm, không nền */
.han-viet-reading {
font-size: 0.95rem;
font-weight: 700;
color: #1f2937;
text-transform: capitalize;
}
/* Pinyin - nhỏ, xám */
.pinyin-reading {
font-size: 0.85rem;
color: #9ca3af;
font-style: italic;
}
/* Meaning content - counter reset at content level for continuous numbering */
.meaning-content {
margin: 0.75rem 0;
counter-reset: definition-counter; /* Reset at content level not block level */
}
/* Definition blocks - với counter tự động đánh số */
.definition-block {
margin: 0.25rem 0;
/* counter-reset: definition-counter; moved up to meaning-content */
}
.sub-definition {
padding: 0.25rem 0;
padding-left: 1rem;
counter-increment: definition-counter;
position: relative;
}
.sub-definition::before {
content: counter(definition-counter) ".";
position: absolute;
left: 0;
font-weight: 700;
color: #208080;
font-size: 0.9rem;
top: 0.25rem;
}
.sub-marker {
display: none; /* Ẩn marker cũ vì dùng CSS counter */
}
.def-text {
color: #374151;
}
.def-num {
display: inline-block;
min-width: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.numbered-def {
padding: 0.5rem 0;
padding-left: 0.5rem;
border-bottom: 1px solid #f3f4f6;
}
.numbered-def:last-child {
border-bottom: none;
}
.def-line {
padding: 0.25rem 0;
}
/* Examples list - flat, chỉ indent */
.examples-list {
margin-top: 0.5rem;
margin-left: 1rem;
padding-left: 0.5rem;
border-left: none;
background: transparent;
}
.example-item {
display: flex;
gap: 0.5rem;
padding: 0.25rem 0;
align-items: baseline;
}
/* Chữ Hán trong ví dụ - màu đỏ = chữ Hán */
.ex-chinese {
font-weight: 600;
color: #b91c1c;
cursor: pointer;
font-size: 0.95rem;
}
.ex-chinese:hover {
text-decoration: underline;
color: #991b1b;
}
/* Nghĩa trong ví dụ - màu đen/xám */
.ex-meaning {
color: #4b5563;
font-size: 0.9rem;
}
/* ============ BKTD Format - Đơn giản hóa ============ */
.bktd-format {
border-left: none;
}
/* Compound section - collapsible */
.compound-section {
margin: 0.25rem 0;
padding-left: 0.5rem;
border-left: none;
}
/* Compound header - clickable */
.compound-header {
display: flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
padding: 0.2rem 0;
}
.compound-header:hover {
background: rgba(32, 128, 128, 0.04);
}
.compound-toggle {
font-size: 0.65rem;
color: #9ca3af;
width: 0.8rem;
transition: transform 0.15s;
}
/* Collapsible content - initially hidden */
.compound-content {
padding-left: 1.1rem;
display: none; /* Initially hidden, toggled by JS */
}
/* Removed collapsed class - using display toggle instead */
/* .compound-content.collapsed {
max-height: 0;
opacity: 0;
} */
/* Từ ghép - in đậm */
.compound-word {
font-size: 0.95rem;
font-weight: 700;
color: #374151;
cursor: pointer;
}
.compound-word:hover {
color: #208080;
text-decoration: underline;
}
/* Han Viet cho từ ghép - xám */
.compound-hanviet {
font-weight: 500;
color: #6b7280;
margin-left: 0.35rem;
font-size: 0.85rem;
}
.compound-pinyin {
font-style: italic;
color: #9ca3af;
font-size: 0.85rem;
}
/* ============ Cihui Format - Simplified ============ */
.cihui-format {
border-left: none;
}
/* Classifier - đơn giản, không gradient */
.classifier-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
background: transparent;
border-radius: 0;
}
.classifier-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.4rem;
background: #fbbf24;
color: #78350f;
font-weight: 600;
font-size: 0.75rem;
border-radius: 3px;
}
.pinyin-tone {
color: #6b7280;
font-style: italic;
font-weight: 400;
}
.usage-note {
color: #9ca3af;
font-style: italic;
font-size: 0.85rem;
}
/* ============ Thiều Chửu Format - Simplified ============ */
.thieuchuu-format {
border-left: none;
}
/* Han Viet inline - chip nhỏ, không nổi bật như link */
.hanviet-inline {
display: inline;
font-weight: 500;
color: #4b5563;
background: #f3f4f6;
padding: 0.1rem 0.35rem;
border-radius: 3px;
font-size: 0.9rem;
}
/* Hanzi reference - màu đỏ = chữ Hán */
.hanzi-ref {
color: #b91c1c;
cursor: pointer;
font-weight: 500;
}
.hanzi-ref:hover {
text-decoration: underline;
color: #991b1b;
}
/* Alternative reading - xám đậm, không quá nổi bật */
.alt-reading {
display: inline;
font-weight: 600;
color: #4b5563;
background: #e5e7eb;
padding: 0.1rem 0.35rem;
border-radius: 3px;
}
/* ============ HVDTD Format - Simplified ============ */
.hvdtd-format {
border-left: none;
}
/* Hanzi inline - màu đỏ = chữ Hán */
.hanzi-inline {
color: #b91c1c;
cursor: pointer;
font-weight: 500;
}
.hanzi-inline:hover {
text-decoration: underline;
}
/* ============ NQH Format - Simplified ============ */
.nqh-format {
border-left: none;
}
.meanings-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.meaning-item {
padding: 0.35rem 0;
border-bottom: 1px solid #f3f4f6;
}
.meaning-item:last-child {
border-bottom: none;
}
/* Example marker - xanh lá = ví dụ/mở rộng */
.example-marker {
font-weight: 500;
color: #059669;
font-size: 0.85rem;
}
/* See also - xanh dương = tham chiếu */
.see-also {
font-weight: 500;
color: #2563eb;
cursor: pointer;
}
.see-also:hover {
text-decoration: underline;
}
/* ============ LacViet Format - Simplified ============ */
.lacviet-format {
border-left: none;
}
.pinyin-header {
margin-bottom: 0.25rem;
}
/* Han Viet header - đơn giản, không box */
.hanviet-header {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0;
margin-bottom: 0.5rem;
background: transparent;
border-radius: 0;
}
.hanviet-header .label {
color: #9ca3af;
font-size: 0.8rem;
}
/* Han Viet reading - metadata style */
.hanviet-reading {
font-weight: 600;
color: #4b5563;
letter-spacing: 0;
background: #f3f4f6;
padding: 0.15rem 0.4rem;
border-radius: 3px;
}
.definitions-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.def-item {
padding: 0.35rem 0;
border-bottom: 1px solid #f3f4f6;
}
.def-item:last-child {
border-bottom: none;
}
/* Chinese explanation - nhẹ nhàng hơn */
.zh-explanation {
margin-top: 0.35rem;
padding: 0.35rem 0.5rem;
background: transparent;
border-left: none;
border-radius: 0;
font-size: 0.85rem;
color: #7f1d1d;
}
/* ============ TDTT (Thiền tông) Format ============ */
.tdtt-format {
border-left: none;
}
.tdtt-text {
line-height: 1.8;
font-size: 0.95rem;
}
.tdtt-text .numbered-def {
margin: 0.75rem 0;
padding: 0.5rem 0;
}
.tdtt-text .def-num {
color: #208080;
margin-right: 0.5rem;
}
.tdtt-text .text-ref {
background: rgba(32, 128, 128, 0.1);
color: #1a6666;
padding: 0.1rem 0.3rem;
border-radius: 3px;
font-weight: 600;
font-size: 0.85rem;
}
/* ============ Chinese Sources (xinhua, hydcd, kanghi) - Simplified ============ */
.chinese-format {
border-left: none;
}
.book-ref {
color: #6b7280;
font-style: italic;
font-size: 0.9rem;
}
.def-separator {
color: #d1d5db;
margin: 0 0.25rem;
}
.chinese-text {
line-height: 1.8;
color: #374151;
}
/* ============ English Sources (unihan, han_hoa_anh) - Simplified ============ */
.english-format {
border-left: none;
}
.english-meaning {
color: #374151;
font-style: normal;
}
/* ============ TDTT Format - Simplified ============ */
.tdtt-format {
border-left: none;
}
.text-ref {
font-style: italic;
color: #9ca3af;
font-size: 0.8rem;
}
/* Generic format fallback - no border */
.generic-format {
border-left: none;
}
/* ============ Dark Mode Support - Simplified ============ */
[data-theme="dark"] .detail-header {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.12), rgba(147, 197, 253, 0.08));
color: #e2e8f0;
border-bottom-color: rgba(32, 128, 128, 0.2);
}
[data-theme="dark"] .meaning-content {
background: transparent;
color: #e2e8f0;
}
[data-theme="dark"] .reading-header {
background: transparent;
}
[data-theme="dark"] .han-viet-reading {
color: #9ca3af;
background: #374151;
}
[data-theme="dark"] .def-text {
color: #e2e8f0;
}
[data-theme="dark"] .examples-list {
background: transparent;
border-left-color: #4b5563;
}
[data-theme="dark"] .ex-chinese {
color: #f87171;
}
[data-theme="dark"] .ex-meaning {
color: #9ca3af;
}
[data-theme="dark"] .compound-section {
background: transparent;
}
[data-theme="dark"] .compound-header:hover {
background: rgba(32, 128, 128, 0.1);
}
[data-theme="dark"] .compound-toggle {
color: #6b7280;
}
[data-theme="dark"] .compound-word {
color: #34d399;
}
[data-theme="dark"] .compound-hanviet {
color: #9ca3af;
}
[data-theme="dark"] .classifier-item {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
}
[data-theme="dark"] .hanviet-inline {
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
}
[data-theme="dark"] .alt-reading {
background: rgba(234, 88, 12, 0.2);
color: #fb923c;
}
[data-theme="dark"] .hanzi-inline,
[data-theme="dark"] .hanzi-ref {
color: #f87171;
}
[data-theme="dark"] .numbered-def {
border-bottom-color: #334155;
}
[data-theme="dark"] .sub-definition::before {
color: #a5b4fc;
}
[data-theme="dark"] .sub-definition {
border-bottom-color: #334155;
}
[data-theme="dark"] .def-item {
border-bottom-color: #334155;
}
[data-theme="dark"] .hanviet-header {
background: rgba(13, 148, 136, 0.15);
}
[data-theme="dark"] .hanviet-reading {
color: #2dd4bf;
}
[data-theme="dark"] .zh-explanation {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
[data-theme="dark"] .source-block-white {
background: transparent !important;
border: 1px solid rgba(75, 85, 99, 0.6);
border-left: 3px solid rgba(32, 128, 128, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .source-header-numbered {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.15), rgba(236, 72, 153, 0.12));
border: 1px solid rgba(32, 128, 128, 0.2);
}
[data-theme="dark"] .source-number {
color: #e2e8f0;
}
[data-theme="dark"] .source-label {
color: #a5b4fc;
background: linear-gradient(45deg, #a5b4fc, #f0abfc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="dark"] .source-attribution {
color: #64748b;
}
[data-theme="dark"] .han-viet-reading {
color: #f1f5f9;
}
[data-theme="dark"] .compound-word {
color: #e2e8f0;
}
[data-theme="dark"] .def-text {
color: #cbd5e1;
}
[data-theme="dark"] .meaning-entry {
border-top-color: #334155 !important;
}
[data-theme="dark"] .source-block-white .source-meanings .meaning-item,
[data-theme="dark"] .source-block-white .source-meanings .meaning-entry {
color: #e2e8f0;
background: transparent;
}
[data-theme="dark"] .source-block-white .source-meanings .meaning-item:hover,
[data-theme="dark"] .source-block-white .source-meanings .meaning-entry:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Meaning markers - semantic colors */
.marker-same,
.marker-antonym,
.marker-synonym {
display: inline;
font-weight: 500;
padding: 0 0.15rem;
font-size: 0.9rem;
}
.marker-same { color: #059669; } /* Xanh lá = đồng nghĩa */
.marker-antonym { color: #dc2626; } /* Đỏ = trái nghĩa */
.marker-synonym { color: #2563eb; } /* Xanh dương = tham chiếu */
/* Legacy cihui content styling - kept for compatibility */
.cihui-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Han Viet Section - Simplified, metadata style */
.han-viet-section {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0;
background: transparent;
border-radius: 0;
border-left: none;
margin-bottom: 0.5rem;
}
.han-viet-section .label {
font-weight: 400;
color: #9ca3af;
white-space: nowrap;
font-size: 0.9rem;
}
/* Han Viet reading - Xám đậm, chip style, KHÔNG giống link */
.han-viet-section .reading {
font-size: 1rem;
font-weight: 600;
color: #374151;
text-transform: capitalize;
background: #f3f4f6;
padding: 0.2rem 0.6rem;
border-radius: 4px;
}
.vietnamese-meanings-section {
padding: 0.25rem 0;
}
.vietnamese-meanings-section .label {
display: block;
font-weight: 400;
color: #9ca3af;
margin-bottom: 0.25rem;
font-size: 0.85rem;
}
.meaning-list.formatted {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Meaning items - flat, no box */
.meaning-list .meaning-item {
padding: 0.35rem 0;
background: transparent;
border-radius: 0;
line-height: 1.7;
border-bottom: 1px solid #f3f4f6;
}
.meaning-list .meaning-item.reading-line {
background: var(--bg-secondary);
font-weight: 500;
color: var(--text-accent);
}
.meaning-list .meaning-item.numbered {
padding-left: 1.5rem;
}
.meaning-list .meaning-item.bullet {
padding-left: 1.25rem;
}
.meaning-text {
line-height: 1.8;
white-space: pre-line;
}
/* Xinhua formatting */
.xinhua-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.xinhua-origin {
font-style: italic;
color: var(--text-tertiary);
padding: 0.25rem 0;
background: transparent;
border-radius: 0;
}
.xinhua-category {
font-weight: 600;
color: var(--text-primary);
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
margin-top: 0.5rem;
}
.xinhua-item {
padding: 0.25rem 0;
line-height: 1.7;
background: transparent;
border-radius: 0;
}
.xinhua-item.numbered {
border-left: none;
padding-left: 1.25rem;
}
/* Dark mode adjustments for meanings */
[data-theme="dark"] .han-viet-section {
background: linear-gradient(135deg, rgba(32, 128, 128, 0.15) 0%, transparent 100%);
}
[data-theme="dark"] .meaning-list .meaning-item {
background: var(--bg-tertiary);
}
/* New meaning block styles */
.meaning-blocks {
display: flex;
flex-direction: column;
gap: 1rem;
}
.meaning-block .reading-header {
font-weight: 600;
font-size: 1.1rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.meaning-list-clean {
list-style: none;
padding: 0;
margin: 0;
}
.meaning-list-clean li {
padding: 0.25rem 0;
line-height: 1.6;
}
.meaning-list-clean li.more-indicator {
color: var(--text-tertiary);
font-style: italic;
}
.more-indicator {
color: var(--text-tertiary);
font-style: italic;
font-size: 0.9rem;
margin-top: 0.5rem;
}
/* Overview meaning def improvements */
.meaning-def {
line-height: 1.8;
margin-bottom: 0.75rem;
}
.meaning-def strong {
color: var(--text-accent);
}
[data-theme="dark"] .meaning-block {
background: var(--bg-tertiary);
}
/* ============================================
Voice Search Styles
============================================ */
/* Voice button states */
#voiceSearchBtn.listening {
background: var(--danger-color);
color: white;
animation: voicePulse 1.5s ease-in-out infinite;
}
#voiceSearchBtn.detecting {
background: var(--warning-color);
color: white;
}
#voiceSearchBtn.error {
background: var(--danger-color);
color: white;
}
@keyframes voicePulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
/* Voice Search Overlay */
.voice-search-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.voice-search-overlay.active {
opacity: 1;
visibility: visible;
}
.voice-search-modal {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 2rem;
max-width: 400px;
width: 90%;
text-align: center;
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: var(--shadow-xl);
}
.voice-search-overlay.active .voice-search-modal {
transform: scale(1);
}
.voice-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
width: 2rem;
height: 2rem;
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
cursor: pointer;
font-size: 1rem;
color: var(--text-secondary);
transition: all 0.2s;
}
.voice-close-btn:hover {
background: var(--danger-color);
color: white;
}
/* Voice Animation */
.voice-animation {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.voice-circle {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--primary-color);
opacity: 0;
}
.voice-search-modal.listening .voice-circle {
animation: voiceWave 2s ease-out infinite;
}
.voice-circle:nth-child(1) { animation-delay: 0s; }
.voice-circle:nth-child(2) { animation-delay: 0.4s; }
.voice-circle:nth-child(3) { animation-delay: 0.8s; }
@keyframes voiceWave {
0% {
transform: scale(0.5);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.voice-mic-icon {
font-size: 3rem;
z-index: 1;
animation: none;
}
.voice-search-modal.listening .voice-mic-icon {
animation: micBounce 1s ease-in-out infinite;
}
.voice-search-modal.detecting .voice-mic-icon {
animation: micShake 0.3s ease-in-out infinite;
}
@keyframes micBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes micShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* Voice Status */
.voice-status {
margin-bottom: 1rem;
}
.voice-status-text {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.voice-search-modal.listening .voice-status-text {
color: var(--danger-color);
}
.voice-search-modal.detecting .voice-status-text {
color: var(--warning-color);
}
.voice-search-modal.success .voice-status-text {
color: var(--success-color);
}
/* Voice Transcript */
.voice-transcript {
min-height: 60px;
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}
.voice-transcript-text {
font-size: 1.25rem;
font-family: var(--font-chinese);
color: var(--text-primary);
line-height: 1.5;
}
.voice-transcript-text.interim {
color: var(--text-tertiary);
font-style: italic;
}
/* Voice Language Info */
.voice-language-info {
margin-bottom: 1rem;
}
.voice-lang-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.2s;
}
.voice-lang-btn:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
}
.voice-lang-flag {
font-size: 1.25rem;
}
.voice-lang-name {
font-size: 0.875rem;
color: var(--text-secondary);
}
.voice-lang-arrow {
font-size: 0.75rem;
color: var(--text-tertiary);
}
/* Voice Actions */
.voice-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.voice-cancel-btn {
padding: 0.75rem 2rem;
background: var(--bg-tertiary);
border: none;
border-radius: var(--radius-md);
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.voice-cancel-btn:hover {
background: var(--danger-color);
color: white;
}
/* Voice Feedback */
.voice-feedback {
position: absolute;
bottom: -3rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
font-size: 0.875rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
box-shadow: var(--shadow-md);
}
.voice-feedback.show {
opacity: 1;
}
.voice-feedback.success { color: var(--success-color); }
.voice-feedback.warning { color: var(--warning-color); }
.voice-feedback.error { color: var(--danger-color); }
.voice-feedback.info { color: var(--text-secondary); }
/* Language Selector */
.voice-language-selector {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.voice-language-selector.active {
opacity: 1;
}
.voice-lang-list {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
max-width: 320px;
width: 90%;
box-shadow: var(--shadow-xl);
}
.voice-lang-list h4 {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--text-primary);
text-align: center;
}
.voice-lang-option {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 1rem;
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
margin-bottom: 0.5rem;
transition: all 0.2s;
}
.voice-lang-option:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
}
.voice-lang-option.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.voice-lang-option .lang-flag {
font-size: 1.5rem;
}
.voice-lang-option .lang-name {
flex: 1;
text-align: left;
font-size: 0.9rem;
}
.voice-lang-option .lang-check {
color: white;
font-weight: bold;
}
/* Permission Help */
.voice-help-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.voice-permission-help {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 2rem;
max-width: 400px;
width: 90%;
text-align: left;
}
.voice-permission-help h4 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.voice-permission-help p {
color: var(--text-secondary);
margin-bottom: 1rem;
}
.voice-permission-help ol {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.voice-permission-help li {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.voice-permission-help .btn-primary {
width: 100%;
}
/* Dark mode adjustments */
[data-theme="dark"] .voice-search-modal {
background: var(--bg-secondary);
}
[data-theme="dark"] .voice-circle {
border-color: var(--primary-light);
}
[data-theme="dark"] .voice-transcript {
background: var(--bg-tertiary);
}
[data-theme="dark"] .voice-lang-list {
background: var(--bg-secondary);
}
[data-theme="dark"] .voice-permission-help {
background: var(--bg-secondary);
}
/* Mobile responsive */
@media (max-width: 480px) {
.voice-search-modal {
padding: 1.5rem;
margin: 1rem;
}
.voice-animation {
width: 100px;
height: 100px;
}
.voice-mic-icon {
font-size: 2.5rem;
}
.voice-transcript-text {
font-size: 1.1rem;
}
}
/* ============================================================
READING SEARCH RESULTS - Âm Hán Việt / Nôm
============================================================ */
/* Result count with reading stats */
.reading-search-label {
display: block;
margin-bottom: 0.5rem;
}
.reading-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.reading-stats .stat-item {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.reading-stats .stat-item.hanviet {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: #2e7d32;
}
.reading-stats .stat-item.nom {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
color: #e65100;
}
.reading-stats .stat-item.words {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
}
/* Reading section */
.reading-section {
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--bg-secondary);
border-radius: 16px;
border: 1px solid var(--border-color);
}
.reading-section.nom-section {
background: linear-gradient(135deg, #fffaf0, #fff8e1);
border-color: #ffe082;
}
.reading-section .section-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.reading-section .section-icon {
font-size: 1.25rem;
}
.reading-section .section-count {
margin-left: auto;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary);
}
/* Character grid */
.reading-chars-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.reading-char-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--bg-primary);
border-radius: 12px;
border: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.reading-char-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: var(--primary-color);
}
.reading-char-item.nom-char {
border-left: 3px solid #ff9800;
}
.reading-char-item.hanviet-char {
border-left: 3px solid #4caf50;
}
.reading-char-item .char-display {
font-size: 2.5rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.reading-char-item .char-reading {
font-size: 0.95rem;
color: var(--primary-color);
font-weight: 500;
margin-bottom: 0.25rem;
}
.reading-char-item .char-meaning-preview {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.4;
max-height: 2.8em;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.5rem;
}
.reading-char-item .char-meta {
display: flex;
gap: 0.5rem;
align-items: center;
font-size: 0.75rem;
color: var(--text-tertiary);
}
.reading-char-item .nom-badge {
padding: 0.15rem 0.5rem;
background: #ff9800;
color: white;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
}
.reading-char-item .char-source {
font-size: 0.7rem;
color: var(--text-tertiary);
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--border-color);
width: 100%;
}
/* Words list */
.reading-words-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.reading-word-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-primary);
border-radius: 10px;
border: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s ease;
}
.reading-word-item:hover {
background: var(--bg-hover);
border-color: var(--primary-color);
}
.reading-word-item .word-chinese {
font-size: 1.5rem;
font-weight: 500;
color: var(--text-primary);
min-width: 80px;
}
.reading-word-item .word-pinyin {
font-size: 0.9rem;
color: var(--primary-color);
min-width: 100px;
}
.reading-word-item .word-meaning {
flex: 1;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Dark mode */
[data-theme="dark"] .reading-section.nom-section {
background: linear-gradient(135deg, #3e2723, #4e342e);
border-color: #8d6e63;
}
[data-theme="dark"] .reading-stats .stat-item.hanviet {
background: linear-gradient(135deg, #1b5e20, #2e7d32);
color: #a5d6a7;
}
[data-theme="dark"] .reading-stats .stat-item.nom {
background: linear-gradient(135deg, #e65100, #f57c00);
color: #fff;
}
[data-theme="dark"] .reading-stats .stat-item.words {
background: linear-gradient(135deg, #0d47a1, #1565c0);
color: #90caf9;
}
/* Responsive */
@media (max-width: 768px) {
.reading-chars-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 0.75rem;
}
.reading-char-item {
padding: 0.75rem;
}
.reading-char-item .char-display {
font-size: 2rem;
}
.reading-word-item {
flex-wrap: wrap;
}
.reading-word-item .word-meaning {
width: 100%;
margin-top: 0.5rem;
}
}
@media (max-width: 480px) {
.reading-chars-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.reading-char-item .char-display {
font-size: 1.75rem;
}
.reading-char-item .char-meaning-preview {
display: none;
}
}
/* ============================================================
MEANING SEARCH RESULTS - Tra nghĩa (EN, VI, ZH)
============================================================ */
.meaning-search-label {
display: block;
margin-bottom: 0.5rem;
}
.meaning-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.meaning-stats .stat-item {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
}
.meaning-section {
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--bg-secondary);
border-radius: 16px;
border: 1px solid var(--border-color);
}
.meaning-section .section-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.meaning-section .section-icon {
font-size: 1.25rem;
}
.meaning-section .section-count {
margin-left: auto;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary);
}
.meaning-chars-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
}
.meaning-char-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--bg-primary);
border-radius: 12px;
border: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.meaning-char-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: var(--accent-color);
}
.meaning-char-item .char-display {
font-size: 2.5rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.5rem;
line-height: 1.2;
font-family: var(--font-chinese);
}
.meaning-char-item .char-readings {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.meaning-char-item .char-readings .pinyin {
font-size: 0.85rem;
color: var(--primary-color);
font-weight: 500;
}
.meaning-char-item .char-readings .hanviet {
font-size: 0.85rem;
color: var(--success-color);
font-weight: 500;
}
.meaning-char-item .char-meaning-highlight {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.4;
max-height: 3.5em;
overflow: hidden;
text-overflow: ellipsis;
}
.meaning-char-item .char-meaning-highlight mark {
background: linear-gradient(135deg, #fef08a, #fde047);
color: var(--text-primary);
padding: 0 0.2rem;
border-radius: 2px;
}
/* Dark mode */
[data-theme="dark"] .meaning-stats .stat-item {
background: linear-gradient(135deg, #0d47a1, #1565c0);
color: #90caf9;
}
[data-theme="dark"] .meaning-char-item .char-meaning-highlight mark {
background: linear-gradient(135deg, #b45309, #d97706);
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.meaning-chars-grid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.75rem;
}
.meaning-char-item {
padding: 0.75rem;
}
.meaning-char-item .char-display {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.meaning-chars-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.meaning-char-item .char-display {
font-size: 1.75rem;
}
.meaning-char-item .char-meaning-highlight {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
/* ===========================================
SHUOWEN AND DUAN NOTE STYLES
=========================================== */
.shuowen-original {
margin-bottom: 1rem;
padding: 1rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-radius: 8px;
border-left: 4px solid #f59e0b;
}
.shuowen-label {
font-size: 0.75rem;
font-weight: 600;
color: #92400e;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.shuowen-text {
font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
font-size: 1.1rem;
line-height: 1.8;
color: #78350f;
}
.duan-note {
padding: 1rem;
background: linear-gradient(135deg, #e0f2fe, #bae6fd);
border-radius: 8px;
border-left: 4px solid #0284c7;
}
.duan-label {
font-size: 0.75rem;
font-weight: 600;
color: #075985;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.duan-text {
font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
font-size: 0.95rem;
line-height: 1.7;
color: #0c4a6e;
}
.duan-expand-btn {
margin-top: 0.5rem;
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
background: #0284c7;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.duan-expand-btn:hover {
background: #0369a1;
}
/* Dark mode Shuowen/Duan */
[data-theme="dark"] .shuowen-original {
background: linear-gradient(135deg, #422006, #78350f);
border-left-color: #fbbf24;
}
[data-theme="dark"] .shuowen-label {
color: #fcd34d;
}
[data-theme="dark"] .shuowen-text {
color: #fef3c7;
}
[data-theme="dark"] .duan-note {
background: linear-gradient(135deg, #0c4a6e, #075985);
border-left-color: #38bdf8;
}
[data-theme="dark"] .duan-label {
color: #7dd3fc;
}
[data-theme="dark"] .duan-text {
color: #e0f2fe;
}
[data-theme="dark"] .duan-expand-btn {
background: #0ea5e9;
}
[data-theme="dark"] .duan-expand-btn:hover {
background: #38bdf8;
}
/* ===========================================
IMPROVED TOOLBAR STYLES
=========================================== */
.toolbar-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.5rem 0;
}
.search-type-group {
display: flex;
gap: 0.25rem;
flex: 1;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.search-type-group::-webkit-scrollbar {
display: none;
}
.search-toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.6rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.search-toggle svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.search-toggle span {
display: inline;
}
.search-toggle:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--bg-secondary);
}
.search-toggle.active {
background: var(--gradient-primary);
color: white;
border-color: transparent;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.action-buttons {
display: flex;
gap: 0.25rem;
flex-shrink: 0;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.icon-btn svg {
width: 16px;
height: 16px;
}
.icon-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--bg-secondary);
}
.icon-btn.active {
background: var(--gradient-primary);
color: white;
border-color: transparent;
}
/* Responsive toolbar */
@media (max-width: 640px) {
.toolbar-row {
gap: 0.35rem;
}
.search-toggle {
padding: 0.3rem 0.5rem;
font-size: 0.7rem;
}
.search-toggle span {
display: none;
}
.search-toggle svg {
width: 16px;
height: 16px;
}
.icon-btn {
width: 30px;
height: 30px;
}
.icon-btn svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 400px) {
.search-type-group {
gap: 0.2rem;
}
.search-toggle {
padding: 0.25rem 0.4rem;
}
.action-buttons {
gap: 0.15rem;
}
.icon-btn {
width: 28px;
height: 28px;
}
}
/* ===========================================
214 RADICAL SEARCH PANEL
=========================================== */
/* Lock body scroll when panel is open */
body.panel-open {
overflow: hidden;
}
.radical-panel {
display: none;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
margin-top: 0.5rem;
overflow: hidden;
box-shadow: var(--shadow-md);
scroll-margin: 2rem;
}
.radical-panel.active {
display: block;
animation: panelSlideIn 0.3s ease-out;
}
@keyframes panelSlideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.radical-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
}
.radical-panel-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
}
.radical-stroke-filter {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
padding: 0.5rem 1rem;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.stroke-btn {
min-width: 24px;
height: 24px;
padding: 0 0.35rem;
font-size: 0.7rem;
font-weight: 600;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.stroke-btn:hover,
.stroke-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.radical-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 0.35rem;
padding: 0.75rem;
max-height: 300px;
overflow-y: auto;
}
.radical-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.4rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s ease;
}
.radical-item:hover {
border-color: var(--primary-color);
background: var(--bg-tertiary);
transform: scale(1.05);
}
.radical-item.selected,
.radical-item.active {
background: var(--gradient-primary);
color: white;
border-color: transparent;
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(32, 128, 128, 0.5);
animation: radicalPulse 0.6s ease-out;
}
@keyframes radicalPulse {
0% {
box-shadow: 0 0 0 0 rgba(32, 128, 128, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(32, 128, 128, 0);
}
100% {
box-shadow: 0 4px 12px rgba(32, 128, 128, 0.5);
}
}
.radical-char {
font-size: 1.2rem;
font-family: var(--font-chinese);
line-height: 1.2;
}
.radical-stroke {
font-size: 0.6rem;
color: var(--text-tertiary);
margin-top: 0.15rem;
}
.radical-item.selected .radical-stroke,
.radical-item.active .radical-stroke {
color: rgba(255,255,255,0.9);
font-weight: 500;
}
/* HSK/TOCFL Level Badges */
.level-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 20px;
padding: 0 0.4rem;
font-size: 0.7rem;
font-weight: 600;
border-radius: 10px;
margin-right: 0.35rem;
cursor: help;
transition: transform 0.15s;
}
.level-badge:hover {
transform: scale(1.05);
}
/* HSK levels (1-6 old, 7-9 new HSK 3.0) */
.level-badge.hsk-1 { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.level-badge.hsk-2 { background: linear-gradient(135deg, #84cc16, #65a30d); color: white; }
.level-badge.hsk-3 { background: linear-gradient(135deg, #eab308, #ca8a04); color: white; }
.level-badge.hsk-4 { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
.level-badge.hsk-5 { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.level-badge.hsk-6 { background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; }
.level-badge.hsk-7 { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: white; }
.level-badge.hsk-8 { background: linear-gradient(135deg, #208080, #1a6666); color: white; }
.level-badge.hsk-9 { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
/* TOCFL levels (1-5 + bands 6-7) */
.level-badge.tocfl-1 { background: linear-gradient(135deg, #06b6d4, #0891b2); color: white; }
.level-badge.tocfl-2 { background: linear-gradient(135deg, #0891b2, #0e7490); color: white; }
.level-badge.tocfl-3 { background: linear-gradient(135deg, #0e7490, #155e75); color: white; }
.level-badge.tocfl-4 { background: linear-gradient(135deg, #155e75, #164e63); color: white; }
.level-badge.tocfl-5 { background: linear-gradient(135deg, #164e63, #134e4a); color: white; }
/* Generic TOCFL badge (no specific level) */
.level-badge.tocfl-badge:not(.tocfl-1):not(.tocfl-2):not(.tocfl-3):not(.tocfl-4):not(.tocfl-5) {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white;
}
/* Part of speech badges */
.pos-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.pos-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 4px;
white-space: nowrap;
}
.pos-badge.pos-noun, .pos-badge.pos-n { 
background: linear-gradient(135deg, #3b82f6, #2563eb); 
color: white; 
}
.pos-badge.pos-verb, .pos-badge.pos-v { 
background: linear-gradient(135deg, #22c55e, #16a34a); 
color: white; 
}
.pos-badge.pos-adj, .pos-badge.pos-adjective { 
background: linear-gradient(135deg, #f97316, #ea580c); 
color: white; 
}
.pos-badge.pos-adv, .pos-badge.pos-adverb { 
background: linear-gradient(135deg, #8b5cf6, #7c3aed); 
color: white; 
}
.pos-badge.pos-pron, .pos-badge.pos-pronoun { 
background: linear-gradient(135deg, #ec4899, #db2777); 
color: white; 
}
.pos-badge.pos-prep, .pos-badge.pos-preposition { 
background: linear-gradient(135deg, #06b6d4, #0891b2); 
color: white; 
}
.pos-badge.pos-conj, .pos-badge.pos-conjunction { 
background: linear-gradient(135deg, #eab308, #ca8a04); 
color: white; 
}
.pos-badge.pos-interj, .pos-badge.pos-interjection { 
background: linear-gradient(135deg, #ef4444, #dc2626); 
color: white; 
}
.pos-badge.pos-part, .pos-badge.pos-particle { 
background: linear-gradient(135deg, #64748b, #475569); 
color: white; 
}
.level-badge.pos-badge {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
}
.no-level {
color: var(--text-muted);
font-size: 0.85rem;
}
.result-levels {
display: flex;
gap: 0.25rem;
margin-top: 0.25rem;
}
/* Radical Results */
.radical-results {
display: none;
margin-top: 1rem;
border-top: 1px solid var(--border-color);
padding-top: 1rem;
}
.radical-results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.radical-results-header strong {
color: var(--primary-color);
font-size: 1.25rem;
}
.btn-close-results {
padding: 0.25rem;
border: none;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
border-radius: var(--radius-sm);
}
.btn-close-results:hover {
background: var(--bg-tertiary);
}
.radical-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
gap: 0.5rem;
max-height: 300px;
overflow-y: auto;
}
.radical-result-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
}
.radical-result-item:hover {
background: var(--primary-color);
color: white;
transform: scale(1.05);
}
.radical-result-item .char {
font-size: 1.25rem;
font-family: var(--font-chinese);
}
.radical-result-item .strokes {
font-size: 0.65rem;
color: var(--text-tertiary);
}
.radical-result-item:hover .strokes {
color: rgba(255,255,255,0.8);
}
.radical-search-btn {
margin-top: 1rem;
padding: 0.6rem 1rem;
width: 100%;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background 0.2s;
}
.radical-search-btn:hover {
background: var(--primary-hover);
}
.radical-search-btn svg {
width: 16px;
height: 16px;
}
.radical-item.selected {
background: var(--primary-color);
color: white;
}
.radical-results-loading,
.radical-results-empty,
.radical-results-error {
padding: 1.5rem;
text-align: center;
color: var(--text-tertiary);
}
.radical-results-loading .spin {
animation: spin 1s linear infinite;
}
/* Dark mode */
[data-theme="dark"] .radical-panel {
background: var(--bg-secondary);
}
[data-theme="dark"] .radical-item {
background: var(--bg-tertiary);
}
[data-theme="dark"] .stroke-btn {
background: var(--bg-secondary);
}
/* ==========================================
Morphological Search Panel
========================================== */
.morpho-panel {
display: none;
background: var(--bg-primary);
border-radius: 12px;
border: 1px solid var(--border-light);
padding: 1rem;
margin-top: 0.5rem;
scroll-margin: 2rem;
}
.morpho-panel.active {
display: block;
animation: panelSlideIn 0.3s ease-out;
}
.morpho-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
}
.morpho-panel-title {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.morpho-filters {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.morpho-filter-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.morpho-filter-group label {
min-width: 100px;
font-size: 0.85rem;
color: var(--text-secondary);
}
.stroke-range {
display: flex;
align-items: center;
gap: 0.25rem;
}
.stroke-input {
width: 60px;
padding: 0.4rem 0.5rem;
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 0.85rem;
background: var(--bg-secondary);
color: var(--text-primary);
}
.stroke-input:focus {
outline: none;
border-color: var(--primary);
}
.range-sep {
color: var(--text-muted);
font-size: 0.9rem;
}
.morpho-input {
flex: 1;
padding: 0.4rem 0.75rem;
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 0.85rem;
background: var(--bg-secondary);
color: var(--text-primary);
}
.morpho-input:focus {
outline: none;
border-color: var(--primary);
}
.morpho-select {
flex: 1;
padding: 0.4rem 0.75rem;
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 0.85rem;
background: var(--bg-secondary);
color: var(--text-primary);
cursor: pointer;
}
.morpho-select:focus {
outline: none;
border-color: var(--primary);
}
.morpho-search-btn {
margin-top: 0.5rem;
padding: 0.6rem 1rem;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background 0.2s;
}
.morpho-search-btn:hover {
background: var(--primary-dark);
}
.morpho-search-btn svg {
width: 16px;
height: 16px;
}
.morpho-results {
margin-top: 1rem;
max-height: 300px;
overflow-y: auto;
}
.morpho-results-header {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--border-light);
}
.morpho-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
gap: 0.5rem;
}
.morpho-result-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
background: var(--bg-secondary);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
}
.morpho-result-item:hover {
background: var(--bg-tertiary);
border-color: var(--primary);
}
.morpho-result-char {
font-size: 1.5rem;
line-height: 1.2;
}
.morpho-result-info {
font-size: 0.65rem;
color: var(--text-muted);
margin-top: 2px;
}
.morpho-no-results {
text-align: center;
padding: 1.5rem;
color: var(--text-muted);
font-size: 0.9rem;
}
.morpho-loading {
text-align: center;
padding: 1rem;
color: var(--text-secondary);
}
/* Structure grid */
.morpho-structure-group {
flex-direction: column;
align-items: flex-start !important;
}
.morpho-structure-group label {
margin-bottom: 0.5rem;
}
.structure-grid {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.structure-btn {
width: 28px;
height: 28px;
font-size: 1rem;
font-family: var(--font-chinese);
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
}
.structure-btn:hover {
background: var(--bg-tertiary);
border-color: var(--primary);
}
.structure-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* Component inputs */
.component-inputs {
display: flex;
align-items: center;
gap: 0.35rem;
flex: 1;
}
.comp-input {
width: 60px !important;
flex: none !important;
text-align: center;
font-size: 1.1rem !important;
font-family: var(--font-chinese);
padding: 0.35rem 0.25rem !important;
}
.comp-plus {
color: var(--text-muted);
font-size: 1.1rem;
}
/* Dark mode */
[data-theme="dark"] .morpho-panel {
background: var(--bg-secondary);
}
[data-theme="dark"] .morpho-result-item {
background: var(--bg-tertiary);
}
[data-theme="dark"] .stroke-input,
[data-theme="dark"] .morpho-input,
[data-theme="dark"] .morpho-select {
background: var(--bg-tertiary);
}
[data-theme="dark"] .structure-btn {
background: var(--bg-tertiary);
}
/* ==========================================
Related Words Tab (Word Mode)
========================================== */
.related-words-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
}
.related-word-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
}
.related-word-card:hover {
background: var(--primary-light);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.related-word-card .word-main {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.related-word-card .chinese {
font-size: 1.25rem;
font-family: var(--font-chinese);
color: var(--primary-color);
font-weight: 600;
}
.related-word-card .pinyin {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.related-word-card .word-meaning {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-word-card .similarity-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
color: var(--text-tertiary);
}
.related-word-card .similarity-bar {
height: 4px;
background: linear-gradient(90deg, var(--success-color), var(--primary-color));
border-radius: 2px;
min-width: 20px;
}
.compound-tag {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0.75rem;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-chinese);
font-size: 1rem;
}
.compound-tag:hover {
background: var(--primary-light);
border-color: var(--primary-color);
}
.compound-tag small {
font-size: 0.65rem;
color: var(--text-tertiary);
margin-top: 0.25rem;
font-family: var(--font-primary);
}
.ai-similar-word {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: 8px;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.ai-similar-word:hover {
background: linear-gradient(135deg, var(--primary-light), var(--bg-secondary));
border-color: var(--primary-color);
}
.ai-similar-word .word-info {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.ai-similar-word .chinese {
font-size: 1.1rem;
font-family: var(--font-chinese);
color: var(--primary-color);
font-weight: 600;
}
.ai-similar-word .pinyin {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.ai-similar-word .meaning {
flex: 1;
font-size: 0.8rem;
color: var(--text-secondary);
margin: 0 1rem;
text-align: center;
}
.ai-similar-word .ai-badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
background: linear-gradient(135deg, #8b5cf6, #208080);
color: white;
border-radius: 4px;
white-space: nowrap;
}
.similar-words-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Dark mode for related words */
[data-theme="dark"] .related-word-card,
[data-theme="dark"] .compound-tag,
[data-theme="dark"] .ai-similar-word {
background: var(--bg-tertiary);
}
/* Footer Version Display / 页脚版本显示 */
.footer-version {
color: #999 !important;
font-size: 0.85em;
font-weight: 300;
opacity: 0.7;
margin-left: 10px;
transition: opacity 0.2s ease;
}
.footer-version:hover {
opacity: 1;
}
/* ===========================================
SERVICE WORKER UPDATE NOTIFICATION
=========================================== */
.sw-update-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sw-update-overlay.visible {
opacity: 1;
visibility: visible;
}
.sw-update-modal {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: 2rem;
max-width: 380px;
width: 90%;
text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.sw-update-overlay.visible .sw-update-modal {
transform: scale(1) translateY(0);
}
.sw-update-icon {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
}
.sw-spinner {
width: 80px;
height: 80px;
animation: sw-rotate 2s linear infinite;
}
.sw-spinner circle {
stroke: var(--primary-color);
stroke-linecap: round;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
animation: sw-dash 1.5s ease-in-out infinite;
}
.sw-spinner.active circle {
stroke: var(--success-color);
}
@keyframes sw-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes sw-dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.sw-refresh-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
color: var(--primary-color);
}
.sw-update-modal h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.sw-update-modal p {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.sw-update-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(32, 128, 128, 0.4);
}
.sw-update-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(32, 128, 128, 0.5);
}
.sw-update-btn svg {
width: 18px;
height: 18px;
}
.sw-later-btn {
display: block;
width: 100%;
padding: 0.75rem;
margin-top: 0.75rem;
background: transparent;
color: var(--text-tertiary);
border: none;
font-size: 0.875rem;
cursor: pointer;
transition: color 0.2s;
}
.sw-later-btn:hover {
color: var(--text-secondary);
}
.sw-loading {
padding: 1rem 0;
}
.sw-loading-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin: 1rem 0 0.5rem;
}
.sw-loading-subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
}
/* Reload Transition Animations */
.sw-reload-transition {
padding: 2rem 1rem;
text-align: center;
}
.sw-success-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
}
.sw-checkmark {
width: 80px;
height: 80px;
border-radius: 50%;
display: block;
stroke-width: 3;
stroke: var(--success-color);
stroke-miterlimit: 10;
box-shadow: inset 0 0 0 var(--success-color);
animation: sw-fill 0.4s ease-in-out 0.4s forwards, sw-scale 0.3s ease-in-out 0.9s both;
}
.sw-checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: var(--success-color);
fill: none;
animation: sw-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.sw-checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke: white;
stroke-width: 3;
animation: sw-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes sw-stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes sw-scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes sw-fill {
100% {
box-shadow: inset 0 0 0 50px var(--success-color);
}
}
.sw-success-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
animation: sw-fadeInUp 0.6s ease-out 1s both;
}
@keyframes sw-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sw-reload-progress {
width: 100%;
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
margin-top: 1rem;
}
.sw-reload-progress-bar {
height: 100%;
background: var(--gradient-primary);
width: 0;
animation: sw-progressBar 1s ease-out forwards;
}
@keyframes sw-progressBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* Fullscreen Reload Overlay */
.sw-fullscreen-reload {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(32, 128, 128, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.sw-fullscreen-reload.visible {
opacity: 1;
visibility: visible;
}
.sw-reload-content {
text-align: center;
color: white;
animation: sw-fadeInScale 0.6s ease-out;
}
.sw-reload-content h3 {
font-size: 1.5rem;
font-weight: 600;
color: white;
margin-bottom: 2rem;
}
.sw-reload-content .sw-reload-progress {
max-width: 300px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
}
.sw-reload-content .sw-reload-progress-bar {
background: white;
}
@keyframes sw-fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Dark mode */
[data-theme="dark"] .sw-update-modal {
background: var(--bg-secondary);
}
[data-theme="dark"] .sw-reload-progress {
background: var(--bg-secondary);
}