/* Cidian - an online Mandarin dictionary */

:root {
    /* Dark mode (default) */
    --bg-primary: #2A2A2A;
    --bg-secondary: #2A2A2A;
    --bg-card: #383838;
    --bg-input: #404040;
    --bg-input-ring: #555555;
    --bg-button: #505050;
    --text-primary: #D0D0D0;  /* Soft grey-white, touch more contrast */
    --text-secondary: #B0B0B0;
    --text-muted: #808080;
    --accent-primary: #C64F3F;
    --accent-hover: #D96757;
    --border-color: #404040;
    
    /* Comprehensive CJK font fallback chain - rare characters need multiple fallbacks */
    --font-chinese: "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC",
                    "Source Han Sans TC", "Source Han Sans SC", 
                    "PingFang TC", "PingFang SC", 
                    "Microsoft YaHei", "SimSun", "MingLiU",
                    "Heiti TC", "Heiti SC",
                    "HanaMinA", "HanaMinB",  /* Hanazono - excellent rare char coverage */
                    "BabelStone Han",  /* Great for rare/historic characters */
                    "Code2000",
                    serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    --content-max-width: 1100px;
    --sidebar-width: 340px;
}

[data-theme="light"] {
    /* Minimal monochrome — soft black, white, grey (winter/snow theme) */
    --bg-primary: #F5F5F5;
    --bg-secondary: #F5F5F5;  /* Same as primary for header/footer */
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-input-ring: #D0D0D0;
    --bg-button: #E8E8E8;
    --text-primary: #555555;  /* Softer headers */
    --text-secondary: #606060;
    --text-muted: #909090;
    --accent-primary: #707070;  /* Links/buttons: softer */
    --accent-hover: #555555;
    --border-color: #D0D0D0;
    --code-bg: transparent;  /* Override for features page */
}

/* Light mode selection - cool blue-grey highlight (winter theme) */
[data-theme="light"] ::selection,
[data-theme="light"] ::-moz-selection {
    background: #A8B5C4;
    color: #FFFFFF;
    text-shadow: none;
}

/* Light mode logo - breathe from dark down to muted grey */
@keyframes light-breathe {
    0%, 100% {
        color: #767676;
    }
    50% {
        color: #A0A0A0;
    }
}

[data-theme="light"] .logo-hanzi {
    text-shadow: none;
    animation: light-breathe 20s ease-in-out infinite;
}

/* Light mode links - grey to black on hover */
[data-theme="light"] a:hover {
    color: #000000;
    text-shadow: none;
}

/* Light mode nav buttons - subtle lift */
[data-theme="light"] .nav-btn:hover {
    color: #000000;
    background: #E0E0E0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-shadow: none;
}

/* Light mode search box focus */
[data-theme="light"] .search-box {
    border-color: #C0C0C0;
}

[data-theme="light"] .search-box:focus-within {
    border-color: #757575;
    box-shadow: none;
}

/* Light mode dropdown */
[data-theme="light"] .search-dropdown-item.active {
    background: #F0F0F0;
    text-shadow: none;
}

[data-theme="light"] .search-dropdown-btn:hover,
[data-theme="light"] .search-dropdown-item:hover,
[data-theme="light"] .search-clear:hover {
    color: #000000;
    text-shadow: none;
}

/* Light mode search button */
[data-theme="light"] .search-button {
    background: #E8E8E8;
}

[data-theme="light"] .search-button:hover {
    background: #D8D8D8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .search-icon {
    color: #4A4A4A;
}

[data-theme="light"] .search-button:hover .search-icon {
    color: var(--text-primary);
    filter: none;
}

/* Light mode hanzi hover - clean color shift only */
[data-theme="light"] .word-hanzi-char:hover,
[data-theme="light"] .char-display:hover,
[data-theme="light"] .char-detail-display:hover {
    color: var(--text-primary);
    text-shadow: none;
}

/* Light mode cards - no shadow, just borders */
[data-theme="light"] .word-card,
[data-theme="light"] .char-card,
[data-theme="light"] .char-detail-card {
    box-shadow: none;
}

/* Light mode sidebar - slightly darker than main content */
[data-theme="light"] .sidebar-section {
    background: #EBEBEB;
}

/* Light mode toggle buttons */
[data-theme="light"] .toggle-btn {
    border-color: #C0C0C0;
    color: var(--accent-primary);  /* Match nav button text */
}

[data-theme="light"] .toggle-btn:hover {
    background: #E8E8E8;
    border-color: #A0A0A0;
    color: var(--accent-hover);  /* Match nav button hover */
}

[data-theme="light"] .toggle-btn.active {
    background: #B1B1B1;
    color: #FFFFFF;
    border-color: #B1B1B1;
}

/* Light mode POS labels - no background, bold text */
[data-theme="light"] .pos-label,
[data-theme="light"] .pos-label-inline {
    background: none;
    color: #707070;
    font-style: normal;
    font-weight: 700;
}

/* Light mode pinyin/reading text - consistent readable grey */
[data-theme="light"] .word-reading,
[data-theme="light"] .word-reading-char,
[data-theme="light"] .char-display-reading,
[data-theme="light"] .char-detail-pinyin,
[data-theme="light"] .related-word-pinyin,
[data-theme="light"] .related-word-bopomofo {
    color: #606060;
}

/* Light mode code/example tags - no background, keep monospace */
[data-theme="light"] code {
    background: none !important;
    color: var(--text-primary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Light mode mobile tabs */
[data-theme="light"] .mobile-result-tabs {
    background: #E8E8E8;
}

[data-theme="light"] .mobile-tab-btn.active {
    background: #FFFFFF;
}

/* Script toggle (traditional/simplified) */
[data-script="traditional"] .script-simplified { display: none !important; }
[data-script="simplified"] .script-traditional { display: none !important; }
[data-script="traditional"] .char-simp { display: none !important; }
[data-script="simplified"] .char-trad { display: none !important; }
/* Default to traditional if no attribute */
:root:not([data-script]) .script-simplified { display: none !important; }
:root:not([data-script]) .char-simp { display: none !important; }

/* Reading toggle (pinyin/bopomofo) */
[data-reading="pinyin"] .reading-bopomofo { display: none !important; }
[data-reading="bopomofo"] .reading-pinyin { display: none !important; }
/* Default to pinyin if no attribute */
:root:not([data-reading]) .reading-bopomofo { display: none !important; }

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

/* Text selection - soft glow instead of block highlight */
::selection {
    background: transparent;
    color: var(--text-primary);
    text-shadow: 
        0px 0px 8px rgba(240, 235, 224, 0.6),
        0px 0px 16px rgba(240, 235, 224, 0.4);
}

::-moz-selection {
    background: transparent;
    color: var(--text-primary);
    text-shadow: 
        0px 0px 8px rgba(240, 235, 224, 0.6),
        0px 0px 16px rgba(240, 235, 224, 0.4);
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Links - red neon glow on hover */
a { 
    color: var(--accent-primary); 
    text-decoration: underline;
    transition: 
        color 0.5s ease 0.1s,
        text-shadow 0.6s ease 0.1s;
}
a:hover { 
    color: var(--accent-hover);
    text-shadow: 
        0px 0px 8px rgba(198, 79, 63, 0.5),
        0px 0px 16px rgba(198, 79, 63, 0.3);
}

/* Header - Jisho-style layout */
.site-header {
    background: var(--bg-secondary);
    padding: 16px 24px;
    transition: background 0.3s ease;
}

.header-content {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 24px;
    align-items: start;
}

/* Logo area - just the logo on top row */
.logo-area {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center toggles under logo */
    gap: 12px;
}

.logo {
    text-decoration: none;
}

/* Logo - red neon glow with subtle breathing animation */
@keyframes neon-breathe {
    0%, 100% {
        text-shadow: 
            0px 0px 10px rgba(198, 79, 63, 0.5),
            0px 0px 20px rgba(198, 79, 63, 0.3),
            0px 0px 40px rgba(198, 79, 63, 0.15);
    }
    50% {
        text-shadow: 
            0px 0px 12px rgba(198, 79, 63, 0.6),
            0px 0px 24px rgba(198, 79, 63, 0.4),
            0px 0px 48px rgba(198, 79, 63, 0.2);
    }
}

.logo-hanzi {
    font-family: var(--font-chinese);
    font-size: 4.5rem;
    font-weight: bold;
    color: var(--accent-primary);
    line-height: 1;
    text-shadow: 
        0px 0px 10px rgba(198, 79, 63, 0.5),
        0px 0px 20px rgba(198, 79, 63, 0.3),
        0px 0px 40px rgba(198, 79, 63, 0.15);
    transition: 
        color 0.3s ease,
        text-shadow 0.8s ease 0.3s;  /* Glow delayed - neon lighting up */
    animation: neon-breathe 15s ease-in-out infinite;
}



/* Toggle buttons below logo - centered under logo */
.logo-toggles {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Right side container - nav links at top, search row at bottom */
.header-right {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    gap: 8px;
}

/* Nav links - top right */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Search row - vertically centered with toggle buttons */
.search-row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Search bar - fills available space */
.header-search {
    flex: 1;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 3px solid #6E6E6E;
    border-radius: 4px;
    height: 48px;
    transition: all 0.4s ease;
}

.search-box:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 
        0px 0px 8px rgba(198, 79, 63, 0.5),
        0px 0px 16px rgba(198, 79, 63, 0.3),
        0px 0px 32px rgba(198, 79, 63, 0.15);
}

/* Search Dropdown */
.search-dropdown {
    position: relative;
}

.search-dropdown-btn {
    background: var(--bg-input);
    border: none;
    border-right: 1px solid var(--border-color);
    padding: 0 14px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 2px 0 0 2px;
    height: 100%;
    transition: all 0.4s ease;
}

.search-dropdown-btn:hover {
    color: #C9C4B8;
    text-shadow: 
        0px 0px 12px rgba(180, 175, 160, 0.6),
        0px 0px 24px rgba(180, 175, 160, 0.4);
}

.search-dropdown-btn::after {
    content: '▼';
    font-size: 0.7rem;
}

.search-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    min-width: 150px;
    z-index: 1000;
    margin-top: 4px;
}

.search-dropdown-menu.show {
    display: block;
}

.search-dropdown-item {
    display: block;
    padding: 10px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.4s ease;
}

.search-dropdown-item:hover {
    background: var(--bg-input);
    color: #C9C4B8;
    text-shadow: 
        0px 0px 12px rgba(180, 175, 160, 0.6),
        0px 0px 24px rgba(180, 175, 160, 0.4);
}

.search-dropdown-item.active {
    color: var(--accent-primary);
    text-shadow: 
        0px 0px 10px rgba(198, 79, 63, 0.5),
        0px 0px 20px rgba(198, 79, 63, 0.3);
}

.search-input {
    flex: 1;
    padding: 0 14px;  /* Remove vertical padding, let flexbox center it */
    font-size: 1.5rem;  /* Even larger text */
    border: none;
    background: transparent;
    color: var(--text-primary);
    min-width: 0;
    height: 100%;
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { outline: none; }

.search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    padding: 0 12px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.4s ease;
}

.search-clear:hover { 
    color: #C9C4B8;
    text-shadow: 
        0px 0px 12px rgba(180, 175, 160, 0.6),
        0px 0px 24px rgba(180, 175, 160, 0.4);
}

.search-button {
    background: var(--bg-button);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 0 2px 2px 0;
    height: 100%;
    transition: all 0.4s ease;
}

.search-button:hover { 
    background: var(--bg-input-ring);
    box-shadow: 
        0px 0px 10px rgba(180, 175, 160, 0.3),
        0px 0px 20px rgba(180, 175, 160, 0.15);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    transition: all 0.4s ease;
}

.search-button:hover .search-icon {
    filter: drop-shadow(0px 0px 6px rgba(180, 175, 160, 0.6));
}

/* Nav button styles - all same button style, transparent bg */
.nav-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    padding: 0 16px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    transition: 
        background 0.5s ease 0.1s,
        border-color 0.3s ease 0.1s,
        box-shadow 0.4s ease,
        text-shadow 0.6s ease 0.15s,
        color 0.6s ease 0.15s;
}

.nav-btn:hover {
    color: var(--accent-hover);
    border-color: var(--accent-primary);
    box-shadow: 
        0px 0px 8px rgba(198, 79, 63, 0.5),
        0px 0px 16px rgba(198, 79, 63, 0.3),
        0px 0px 32px rgba(198, 79, 63, 0.15);
    text-shadow:
        0px 0px 8px rgba(198, 79, 63, 0.5),
        0px 0px 16px rgba(198, 79, 63, 0.3);
}

/* Toggle buttons - consistent sizing, match search bar height */
.nav-btn.toggle-btn {
    min-width: 52px;
    height: 48px;
    padding: 0 14px;
}

/* Toggle label base transition */
.toggle-label {
    transition: all 0.4s ease;
}

/* Script toggle (繁/简) */
#script-toggle .toggle-label {
    font-family: var(--font-chinese);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
}

/* Reading toggle (ǐ/ㄧ) */
#reading-toggle .toggle-label {
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
}

/* Main Content */
.main-content {
    flex: 1;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 28px 24px;
    width: 100%;
}

/* Footer */
.site-footer {
    background: var(--bg-secondary);
    padding: 20px 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: background 0.3s ease, color 0.3s ease;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.footer-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.kofi-cup {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.3em;
}

.footer-data a,
.footer-support a {
    color: var(--accent-primary);
    text-decoration: none;
}

.footer-data a:hover,
.footer-support a:hover {
    text-decoration: underline;
}

.footer-support {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.footer-support:hover {
    color: var(--accent-primary);
}

/* Ad slot styling - blends with sidebar aesthetic */
.sidebar-ad {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.ad-container {
    color: #808080;
    font-size: 0.85rem;
    text-align: center;
}

/* Lost/Not Found Illustration (404 and no results) */
.lost-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    text-align: center;
}

.lost-content {
    max-width: 400px;
    padding: 2rem;
}

.lost-illustration {
    width: 300px;
    height: 200px;
    margin: 0 auto 1.5rem;
}

.lost-illustration svg {
    width: 100%;
    height: 100%;
}

.lost-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-family: var(--font-chinese), serif;
}

.lost-message {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Gentle floating animation for the lost character */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.lost-character {
    animation: float 3s ease-in-out infinite;
}

/* Home Page */
.home-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: left;
}

.home-page p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 1.05rem;
}

.example-list {
    list-style: disc;
    margin-left: 28px;
    color: var(--text-secondary);
}

.example-list li {
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 1.05rem;
}

/* About Page - tighter spacing */
.about-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: left;
}

.about-page h1 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.about-page h2 {
    font-size: 1.3rem;
    margin-top: 24px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.about-page p {
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 1rem;
}

.about-page ul {
    list-style: disc;
    margin-left: 28px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.about-page li {
    margin-bottom: 6px;
    line-height: 1.4;
    font-size: 1rem;
}

/* Results Layout */
.results-layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 36px;
    align-items: start;
}

/* Sidebar */
.results-sidebar {
    /* Limit height to prevent extending past main content */
    max-height: fit-content;
}

/* When main column has few results, limit sidebar items */
.sidebar-section {
    max-height: none;  /* Allow natural height but items are limited in the template */
}

@media (max-width: 900px) {
    .results-layout {
        grid-template-columns: 1fr;
    }
    .results-sidebar { order: -1; }
}

/* Section Headers - bigger, bold title, no divider */
.section-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.result-count {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 400;
}

/* Word Cards with Ruby Text */
.word-card {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}

.word-card:last-child { border-bottom: none; }

/* Side-by-side layout for short entries (4 or fewer chars) */
.word-card.layout-side {
    flex-direction: row;
}

.word-card.layout-side .word-left {
    flex-shrink: 0;
    width: 180px;
    text-align: left;
}

.word-card.layout-side .word-display {
    align-items: flex-start;
}

.word-card.layout-side .word-reading-row,
.word-card.layout-side .word-hanzi-row {
    justify-content: flex-start;
}

/* Stacked layout for long entries (5+ chars) */
.word-card.layout-stacked {
    flex-direction: column;
    gap: 0;
}

.word-card.layout-stacked .word-left {
    text-align: left;
    width: 100%;
    margin-bottom: 0;
}

.word-card.layout-stacked .word-display {
    align-items: flex-start;
}

.word-card.layout-stacked .word-reading-row,
.word-card.layout-stacked .word-hanzi-row {
    justify-content: flex-start;
}

.word-card.layout-stacked .word-right {
    padding-left: 180px;  /* Match .layout-side .word-left width for alignment */
    width: 100%;
    margin-top: 8px;
}

.word-card.layout-stacked .word-alt-script {
    margin-top: 6px;
    margin-bottom: 8px;
}

/* FIX: Ensure stacked layout definitions align with other entries */
.word-card.layout-stacked .word-definition {
    padding-left: 0;
}

.word-card.layout-stacked .word-definition ol {
    padding-left: 0;
    margin-left: 0;
}

.word-card.layout-stacked .word-definition li {
    padding-left: 0;
}

/* Stacked pinyin and hanzi for independent selection */
.word-display {
    display: flex;
    flex-direction: column;
}

.word-reading-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.word-reading-char {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #CCCCCC;
    text-align: center;
    min-width: 2.4rem;
    user-select: text;
}

/* Bopomofo-specific styling - slightly smaller due to stacked nature */
.reading-bopomofo .word-reading-char {
    font-size: 0.75rem;
    line-height: 1.1;
}

.word-hanzi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.word-hanzi-char {
    display: block;
    font-family: var(--font-chinese);
    font-size: 2.4rem;
    color: var(--text-primary);
    line-height: 1.1;
    text-align: center;
    min-width: 2.4rem;
    user-select: text;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
}

.word-hanzi-nolink {
    cursor: default;
}

.word-hanzi-char:hover {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "AR PL UKai CN", "楷体", serif;
    color: var(--accent-primary);
    text-decoration: none;
    text-shadow: 
        0px 0px 10px rgba(198, 79, 63, 0.5),
        0px 0px 20px rgba(198, 79, 63, 0.3);
}

/* Alternate script display (shows "Simplified" or "Traditional" based on toggle) */
.word-alt-script {
    margin-top: 10px;
}

.word-alt-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.word-alt-value {
    display: block;
    font-family: var(--font-chinese);
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Legacy classes for backward compatibility */
.word-simplified-label {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.word-simplified-value {
    font-family: var(--font-chinese);
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Stacked layout adjustments for alt-script */
.word-card.layout-stacked .word-alt-script {
    margin-top: 4px;
    margin-bottom: 0;
}

.word-right {
    flex: 1;
    min-width: 0;
}

.word-definition {
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.word-definition ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.word-definition li {
    margin-bottom: 8px;
}

.def-line {
    display: flex;
    gap: 8px;
    align-items: baseline;  /* Align with first line of text */
}

.def-number {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* When def-line contains a classifier, align to bottom */
.def-line:has(.cl-group) {
    align-items: flex-end;
}

.def-line:has(.cl-group) .def-number {
    line-height: 1.6;  /* Match the character height */
}

.def-content {
    flex: 1;
}

/* Latin scientific names in italics */
.latin-name {
    font-style: italic;
}

.pos-label {
    display: block;
    font-size: 0.85rem;
    color: #CCCCCC;
    font-weight: 600;
    margin-bottom: 4px;  /* Increased spacing before definition */
}

/* Inline label for sidebar (appears after number, before text) */
.pos-label-inline {
    font-size: 0.8rem;
    color: #CCCCCC;
    font-weight: 600;
}

.pos-label-inline::after {
    content: " ";
}

/* Tag-only entries (like just "(Tw)" with no definition) */
.tag-only {
    list-style: none;
}

.tag-only .pos-label {
    margin-bottom: 0;
}

/* Classifier ruby text - horizontal layout */
.cl-group {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    margin-top: 4px;
}

.cl-pair {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cl-pinyin {
    font-size: 0.75rem;
    color: #AAAAAA;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
}

.cl-chars-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cl-char {
    font-family: var(--font-chinese);
    font-size: 1.3rem;
    color: var(--text-primary);
    text-decoration: none;
}

.cl-char:hover {
    color: var(--accent-primary);
}

.cl-pipe {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 1px;
}

.cl-comma {
    color: var(--text-muted);
    align-self: flex-end;
    margin: 0 6px 0 2px;
    font-size: 1.1rem;
}

.cl-fallback {
    color: var(--text-secondary);
}

/* Legacy classifier styles (keeping for backward compatibility) */
.cl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cl-chars {
    font-family: var(--font-chinese);
    font-size: 1.3rem;
    color: var(--text-primary);
}

.cl-separator {
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
    align-self: flex-end;
}

/* Inline character references in definitions */
.inline-ref {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: bottom;
    margin: 0 2px;
}

.inline-ref-pinyin {
    display: flex;
    gap: 0;
}

.inline-ref-char-pinyin {
    font-size: 0.7rem;
    font-weight: 600;
    color: #CCCCCC;
    text-align: center;
    width: 1.3rem;
}

.inline-ref-chars {
    display: flex;
    gap: 0;
}

.inline-ref-char {
    font-family: var(--font-chinese);
    font-size: 1.1rem;
    color: var(--text-primary);
    text-align: center;
    width: 1.3rem;
    text-decoration: none;
}

.inline-ref-char:hover {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "AR PL UKai CN", "楷体", serif;
    color: var(--accent-primary);
}

.inline-ref-separator {
    color: var(--text-muted);
    margin: 0 4px;
    align-self: flex-end;
}

.sidebar-section {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 18px;
}

.sidebar-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.sidebar-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.sidebar-count {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 400;
}

/* Character Cards in Sidebar */
.char-card {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.char-card:first-child {
    padding-top: 14px;
}

.char-card:last-child { border-bottom: none; }

.char-strokes {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.char-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.char-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.char-display-pinyin {
    font-size: 0.8rem;
    color: #CCCCCC;
    font-weight: 600;
    margin-bottom: 2px;
}

/* New class for sidebar reading display with toggle support */
.char-display-reading {
    font-size: 0.8rem;
    color: #CCCCCC;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
}

.char-display-reading.reading-bopomofo {
    font-size: 0.7rem;
}

/* Related word bopomofo reading */
.related-word-bopomofo {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 10px;
}

.char-display {
    font-family: var(--font-chinese);
    font-size: 2.8rem;
    color: var(--text-primary);
    line-height: 1;
    text-decoration: none;
    transition: all 0.4s ease;
}

.char-display:hover {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "AR PL UKai CN", "楷体", serif;
    color: var(--accent-primary);
    text-shadow: 
        0px 0px 10px rgba(198, 79, 63, 0.5),
        0px 0px 20px rgba(198, 79, 63, 0.3);
}

.char-info {
    flex: 1;
    min-width: 0;
    padding-top: 0.9rem;  /* Align definitions with hanzi, not pinyin */
}

.char-meaning {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.char-meaning ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.char-meaning li {
    margin-bottom: 4px;
}

.char-meaning .def-line {
    display: flex;
    gap: 6px;
}

.char-meaning .def-number {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.char-meaning .pos-label {
    font-size: 0.75rem;
}

.char-reading {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.char-details-link {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.char-details-link:hover {
    color: var(--accent-primary);
}

/* Character Detail Page */
.char-detail-card {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 28px;
}

.char-detail-header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.char-detail-display {
    font-family: var(--font-chinese);
    font-size: 6rem;
    color: var(--text-primary);  /* White by default */
    line-height: 1;
    cursor: default;
    transition: color 0.15s ease, font-family 0.15s ease;
}

.char-detail-display:hover {
    font-family: "Kaiti SC", "KaiTi", "STKaiti", "AR PL UKai CN", "楷体", serif;
    color: var(--accent-primary);  /* Red on hover */
}

.char-detail-info {
    flex: 1;
}

.char-detail-pinyin {
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.char-detail-meta {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.char-detail-definition {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.char-detail-definition ol.char-meanings {
    margin-left: 1.5rem;
    padding-left: 0;
}

.char-detail-definition ol.char-meanings li {
    margin-bottom: 0.5rem;
}

.char-etymology {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.char-etymology h3 {
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

/* Related Words in Sidebar - using char-card style */
.char-display-word {
    font-size: 2rem;  /* Slightly smaller for multi-char words */
}

/* Alternate script display for sidebar word cards - centered under character */
.char-alt-script {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}

.char-alt-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.char-alt-value {
    display: block;
    font-family: var(--font-chinese);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Legacy related word styles - keeping for backward compatibility */
.related-word-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.related-word-item:last-child { border-bottom: none; }

.related-word-text {
    font-family: var(--font-chinese);
    font-size: 1.2rem;
    color: var(--text-primary);
    text-decoration: none;
}

.related-word-text:hover { color: var(--accent-primary); }

.related-word-simp {
    font-family: var(--font-chinese);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 8px;
}

.related-word-pinyin {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 10px;
}

.related-word-def {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* No Results */
.no-results {
    color: var(--text-secondary);
    padding: 48px 0;
    font-size: 1.05rem;
}

.no-results strong {
    color: var(--text-primary);
}

/* Pagination Controls */
.results-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;  /* Align both sides at bottom */
    margin-top: 24px;
    padding-top: 16px;
}

.controls-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.controls-support:hover {
    color: var(--accent-primary);
}

.controls-support .kofi-cup {
    height: 18px;
    width: auto;
}

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.per-page-selector select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.pagination {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.pagination-info {
    text-align: right;
}

.pagination-page {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pagination-total {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pagination-arrows {
    display: flex;
    gap: 8px;
}

.pagination-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.pagination-btn:hover {
    background: var(--bg-button);
    color: var(--text-primary);
}

/* ===========================================
   MOBILE SEGMENTED TABS (Words/Hanzi toggle)
   Only visible below 900px breakpoint
   =========================================== */

.mobile-result-tabs {
    display: none;  /* Hidden on desktop */
}

@media (max-width: 900px) {
    .mobile-result-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 12px;
        background: var(--bg-card);
        border-radius: 6px;
        padding: 4px;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    
    .mobile-tab-btn {
        flex: 1;
        padding: 10px 16px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .mobile-tab-btn:hover {
        color: var(--text-secondary);
    }
    
    .mobile-tab-btn.active {
        background: var(--bg-input);
        color: var(--text-primary);
    }
    
    .mobile-tab-count {
        font-size: 0.8rem;
        opacity: 0.7;
    }
    
    /* Hide inactive tab content on mobile */
    .results-page[data-active-tab="words"] .results-sidebar {
        display: none;
    }
    
    .results-page[data-active-tab="hanzi"] .results-main {
        display: none;
    }
    
    /* When showing hanzi tab, don't reorder */
    .results-page[data-active-tab="hanzi"] .results-sidebar {
        order: 0;
    }
    
    /* Hide section headers on mobile only when tabs are present */
    .results-page:has(.mobile-result-tabs) .section-header {
        display: none;
    }
    
    .results-page:has(.mobile-result-tabs) .sidebar-header {
        display: none;
    }
    
    /* If no tabs (only words or only hanzi), keep headers visible */
    .results-page:not(:has(.mobile-result-tabs)) .section-header,
    .results-page:not(:has(.mobile-result-tabs)) .sidebar-header {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }
}

/* Responsive - base mobile styles (overridden by later mobile section) */
@media (max-width: 768px) {
    /* Note: Header layout handled in mobile section below */
    
    .search-row {
        flex-direction: column;
    }
    
    .header-search {
        width: 100%;
    }
    
    /* Word cards stack vertically */
    .word-card { flex-direction: column; gap: 10px; }
    .word-left { text-align: left; min-width: auto; }
    .word-ruby { align-items: flex-start; }
    .char-detail-display { font-size: 4rem; }
    
    /* Reset stacked layout padding on mobile */
    .word-card.layout-stacked .word-right {
        padding-left: 0;
    }
}

/* ===========================================
   MOBILE FLOATING TOGGLES (Jisho-style)
   Hidden on desktop, fixed bottom-right on mobile
   =========================================== */

.floating-toggles {
    display: none;  /* Hidden on desktop */
}

@media (max-width: 768px) {
    /* ===== HEADER LAYOUT FIXES ===== */
    
    .site-header {
        padding: 12px 16px;
    }
    
    .header-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* First row: logo + nav buttons */
    .logo-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    /* Bigger logo (Jisho-style) */
    .logo-hanzi {
        font-size: 2.8rem;
    }
    
    /* Hide header toggles on mobile - moved to floating */
    .logo-toggles {
        display: none !important;
    }
    
    /* Nav links sit where toggles were (right of logo) */
    .header-right {
        display: contents;  /* Let children participate in parent flex */
    }
    
    .nav-links {
        position: absolute;
        top: 12px;
        right: 16px;
        display: flex;
        gap: 6px;
    }
    
    .nav-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    /* Search bar: full width below logo row */
    .search-row {
        width: 100%;
    }
    
    .header-search {
        width: 100%;
    }
    
    .search-box {
        width: 100%;
    }
    
    /* ===== FLOATING TOGGLES ===== */
    
    .floating-toggles {
        display: flex;
        position: fixed;
        bottom: 20px;
        right: 16px;
        z-index: 100;
        gap: 10px;
    }
    
    .floating-toggles .toggle-btn {
        min-width: 52px;
        height: 52px;
        padding: 0 14px;
        font-size: 1.3rem;
        border-radius: 6px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        color: var(--accent-primary);
        /* Prevent text selection on mobile */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        /* Smooth transitions */
        transition: border-color 0.2s ease, box-shadow 0.3s ease, color 0.2s ease;
    }
    
    .floating-toggles .toggle-btn:active {
        border-color: var(--accent-primary);
        color: var(--accent-hover);
        box-shadow: 
            0 0 8px rgba(198, 79, 63, 0.5),
            0 0 16px rgba(198, 79, 63, 0.3);
    }
    
    /* ===== PAGE SIZING ===== */
    
    body {
        overflow-x: hidden;
    }
    
    .site-header {
        position: relative;  /* For absolute nav-links */
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .main-content,
    .site-footer {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Bottom padding to clear floating buttons */
    .main-content {
        padding: 12px 16px 90px 16px;
    }
    
    /* ===== WORD CARDS ===== */
    
    /* Keep side-by-side layout, increase gap between char and definitions */
    .word-card,
    .word-card.layout-side {
        flex-direction: row;
        gap: 32px;
    }
    
    /* Stacked layout stays stacked */
    .word-card.layout-stacked {
        flex-direction: column;
        gap: 4px;
    }
    
    .word-left,
    .word-card.layout-side .word-left {
        text-align: left;
        min-width: 115px;
        width: auto;
        flex-shrink: 0;
    }
    
    .word-ruby {
        align-items: flex-start;
    }
    
    .char-detail-display {
        font-size: 4rem;
    }
    
    /* Align stacked layout definitions with other entries */
    .word-card.layout-stacked .word-right {
        padding-left: 140px;
    }
    
    /* ===== HANZI CARDS (sidebar) ===== */
    
    .char-row {
        align-items: flex-start;
    }
    
    /* Slightly more padding on mobile */
    .char-info {
        padding-top: 1rem;
    }
}

/* Touch device: remove sticky hover states */
@media (hover: none) {
    .floating-toggles .toggle-btn:hover {
        background: var(--bg-primary);
        border-color: var(--border-color);
    }
}

/* Light mode floating toggles */
[data-theme="light"] .floating-toggles .toggle-btn {
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .floating-toggles .toggle-btn:active {
    border-color: var(--accent-primary);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 0 10px rgba(112, 112, 112, 0.3);
}

@media (hover: none) {
    [data-theme="light"] .floating-toggles .toggle-btn:hover {
        background: var(--bg-primary);
    }
}

/* ===========================================
   MOBILE FOOTER/PAGINATION ADJUSTMENTS
   =========================================== */

/* Mobile-only support link (inside pagination row) - hidden on desktop */
.controls-support-mobile {
    display: none;
}

@media (max-width: 600px) {
    /* Smaller text on mobile for home/about pages */
    .home-page p,
    .home-page li {
        font-size: 0.95rem;
        line-height: 1.45;
    }
    
    .about-page p,
    .about-page li {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .about-page h1 {
        font-size: 1.4rem;
    }
    
    .about-page h2 {
        font-size: 1.15rem;
    }
    
    /* Let text flow full width on mobile to align with search bar */
    .home-page,
    .about-page {
        max-width: none;
    }
    
    .results-controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 16px;
    }
    
    .per-page-selector {
        order: 1;
        display: flex;
        justify-content: center;
    }
    
    /* Hide desktop support link on mobile */
    .controls-support {
        display: none;
    }
    
    /* Show mobile support link */
    .controls-support-mobile {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .controls-support-mobile:hover {
        color: var(--accent-primary);
    }
    
    .controls-support-mobile .kofi-cup {
        height: 12px;
        width: auto;
    }
    
    .pagination-row {
        order: 2;
        width: 100%;
    }
    
    .pagination {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
    }
    
    .pagination-info {
        text-align: left;
        flex-shrink: 0;
    }
    
    /* Shorter pagination text on mobile: "1 of 24" instead of "Page 1 of 24" */
    .pagination-page {
        font-size: 0.85rem;
    }
    
    .pagination-page-label {
        display: none;
    }
    
    .pagination-arrows {
        flex-shrink: 0;
    }
}