:root {
    --bg-color: #FDFBF7;
    --element-bg: #F5EFE6;
    --element-hover: #EBE0D0;
    --text-primary: #2C2420;
    --text-secondary: #5D544F;
    --text-muted: #9CA3AF;
    --text-highlight: #78350F;
    --border-color: rgba(0, 0, 0, 0.06);
    --modal-bg-glass: rgba(255, 255, 255, 0.92);
    --modal-text-main: #1A1A1A;
    --modal-text-sub: #8E8E93;
    --p-grad: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);
    --e-grad: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    --n-grad: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
    --brand-glow: linear-gradient(135deg, #00d2ff 0%, #92fe9d 100%);
    --premium-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}





* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vmin;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vmin;
    position: relative;
}

.action-btn {
    min-width: 50px;
    height: 36px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(0);
}

.blank-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-color);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

.blank-page.active {
    display: flex;
}

.blank-page-content {
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.chemistry-tools {
    align-items: flex-start;
    padding-top: 80px;
}

.tools-container {
    max-width: 1000px;
    width: 100%;
    padding: 20px;
}

/* ========================================
   Chemistry Tools Page - Modular Card Design
   ======================================== */
.chemistry-tools-page {
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.chem-tools-container {
    max-width: 900px;
    width: 100%;
    padding: 60px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chem-tools-title {
    font-size: 3.5vmin;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.8vmin;
    text-align: center;
    letter-spacing: -0.03em;
}

.chem-tools-subtitle {
    font-size: 1.1vmin;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 4vmin;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}

.chem-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5vmin;
    width: 100%;
}

/* Chemistry Tool Card - Element Button Style */
.chem-tool-card {
    background-color: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2vmin 2.5vmin;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vmin;
    position: relative;
    user-select: none;
    min-height: 10vmin;
}

.chem-tool-card:hover {
    background-color: var(--element-hover);
    transform: translateY(-4px) scale(1.02);
    z-index: 100;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18);
    border-color: rgba(0, 0, 0, 0.15);
}

.chem-tool-card:active {
    transform: translateY(-2px) scale(1.01);
}

/* Tool Icon Box - Similar to Element Box */
.chem-tool-icon-box {
    width: 8vmin;
    height: 8vmin;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.chem-tool-icon-box svg {
    width: 60%;
    height: 60%;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.chem-tool-card:hover .chem-tool-icon-box {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chem-tool-card:hover .chem-tool-icon-box svg {
    transform: scale(1.1);
}

/* Tool Number Badge */
.chem-tool-number {
    position: absolute;
    top: 0.6vmin;
    left: 0.8vmin;
    font-size: 1.2vmin;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Tool Icon Color Variations */
.balancer-icon {
    background: linear-gradient(135deg, #ffcccc 0%, #ffe5cc 100%);
}

.balancer-icon svg {
    color: #78350F;
}

.molar-icon {
    background: linear-gradient(135deg, #fff2cc 0%, #d9e2f3 100%);
}

.molar-icon svg {
    color: #5d522e;
}

.percent-icon {
    background: linear-gradient(135deg, #d1e7dd 0%, #e2f0d9 100%);
}

.percent-icon svg {
    color: #2e5d4b;
}

.empirical-icon {
    background: linear-gradient(135deg, #e0ccff 0%, #d9e2f3 100%);
}

.empirical-icon svg {
    color: #4b2e5d;
}

/* Tool Info Section */
.chem-tool-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8vmin;
    padding-right: 2vmin;
}

.chem-tool-name {
    font-size: 2vmin;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
    transition: color 0.3s ease;
}

.chem-tool-card:hover .chem-tool-name {
    color: var(--text-highlight);
}

.chem-tool-desc {
    font-size: 1.3vmin;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

/* Tool Tags */
.chem-tool-tags {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-items: center;
}

.grade-tag,
.feature-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.grade-tag {
    background: rgba(120, 53, 15, 0.1);
    color: var(--text-highlight);
    border: 1px solid rgba(120, 53, 15, 0.2);
    border-radius: 10px;
}

.feature-tag {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

/* Arrow Indicator */
.chem-tool-arrow {
    font-size: 2.5vmin;
    color: var(--text-muted);
    font-weight: 300;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.chem-tool-card:hover .chem-tool-arrow {
    opacity: 1;
    color: var(--text-highlight);
    transform: translateX(4px);
}

/* Original tool styles (for modal content) */
.tools-title {
    font-size: 3.5vmin;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.8vmin;
    text-align: center;
    letter-spacing: -0.03em;
}

.tools-subtitle {
    font-size: 1.1vmin;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 4vmin;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;

}

.tool-section {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 2vmin;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tool-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.tool-heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    letter-spacing: -0.02em;
}

.tool-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.tool-input-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.tool-input,
.tool-select {
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tool-input:focus,
.tool-select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.2);
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.tool-button {
    padding: 12px 24px;
    background: var(--text-primary);
    color: var(--bg-color);
    border: 1px solid var(--text-primary);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: 'Inter', sans-serif;
}

.tool-button:hover {
    background: var(--text-highlight);
    border-color: var(--text-highlight);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.tool-button:active {
    transform: translateY(0) scale(1);
}

.tool-result {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tool-explanation {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-highlight);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tool-explanation h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-highlight);
    letter-spacing: -0.01em;
}

.tool-explanation ol,
.tool-explanation ul {
    margin-left: 20px;
    margin-top: 8px;
}

.tool-explanation li {
    margin-bottom: 6px;
}

.tool-check {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tool-check h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.tool-check table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.tool-check td {
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: 'Courier New', monospace;
}

.tool-check td:first-child {
    font-weight: 600;
}

.tool-breakdown {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tool-breakdown table {
    width: 100%;
    border-collapse: collapse;
}

.tool-breakdown th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    opacity: 0.8;
}

.tool-breakdown td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-family: 'Inter', monospace;
    color: var(--text-primary);
}

.tool-breakdown tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
}

.formula-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.element-input-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.element-input-row label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.element-input-row input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.element-input-row input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.2);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Features Page Styles */
.features-page {
    align-items: flex-start;
    padding-top: 80px;
}

.features-container {
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

.features-title {
    font-size: 3.5vmin;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.8vmin;
    text-align: center;
    letter-spacing: -0.03em;
}

.features-subtitle {
    font-size: 1.1vmin;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 4vmin;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Standardize Element Size in Ions Page to Match Periodic Table */
.ions-table-page .element {
    /* Use synced size from periodic table (set via JS on resize) */
    width: var(--synced-element-size, 5vw);
    height: var(--synced-element-size, 5vw);
    aspect-ratio: 1;
    min-width: 45px;
    min-height: 45px;
}

.feature-card {
    background-color: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    position: relative;
    user-select: none;
    min-height: 100px;
}

.feature-card:hover {
    background-color: var(--element-hover);
    transform: translateY(-4px) scale(1.05);
    z-index: 100;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
    filter: brightness(0.95);
}

.feature-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-size: 2.2rem;
}

.feature-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.feature-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0.8;
}

.feature-modal-body {
    padding: 60px;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Tool name label - plain text in padding area */
.tool-padding-label {
    position: absolute;
    top: 20px;
    left: 60px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    pointer-events: none;
}

.feature-modal-body::-webkit-scrollbar {
    display: none;
}

/* Feature modal uses same size as element modal */
#feature-modal-content {
    background: var(--modal-bg-glass);
    width: calc(100vw - 100px);
    min-width: 800px;
    height: calc(100vh - 160px);
    max-width: 1300px;
    border-radius: 40px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

#feature-modal.active #feature-modal-content {
    transform: translateX(-50%) scale(1);
}

.feature-detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.feature-detail-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--element-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    font-size: 3rem;
    flex-shrink: 0;
}

.feature-detail-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0;
}

.feature-detail-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.feature-detail-section {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-top: 16px;
}

.feature-detail-section h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.feature-detail-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.feature-detail-section ul {
    margin-left: 24px;
    margin-top: 12px;
}

.feature-detail-section li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tool-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-modal-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Special two-column layout for Empirical Formula tool */
.tool-modal-content.empirical-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.empirical-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.empirical-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.empirical-layout .tool-result-box,
.empirical-layout .tool-explanation-box {
    grid-column: span 2;
}

.compact-tips {
    padding: 20px;
}

.compact-tips h4 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.compact-tips ol,
.compact-tips ul {
    margin-left: 20px;
    line-height: 1.6;
}

.compact-tips li {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* ========================================
   Balance Scale Balancer UI
   ======================================== */
.balancer-scale-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    overflow: hidden;
}

/* SVG Balance Scale */
.balance-scale-svg {
    width: 100%;
    max-width: 500px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

.scale-stand,
.scale-base {
    stroke: #94a3b8;
    fill: none;
}

.scale-pivot {
    fill: #475569;
    stroke: #94a3b8;
    stroke-width: 2;
}

.scale-pivot-cap {
    fill: #64748b;
}

.scale-beam-group {
    transform-origin: 250px 95px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-beam {
    stroke: #e2e8f0;
    fill: none;
}

.scale-chain {
    stroke: #94a3b8;
    stroke-width: 2;
    fill: none;
}

.scale-pan {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 2;
    color: #e2e8f0;
}

.scale-label {
    fill: #475569;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

/* Pan and suspension physics - keep pans level via Y translation */
.scale-pan,
.left-suspension,
.right-suspension {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tilting animations - entire scale tilts as one unit */
.scale-beam-group.tilt-left {
    transform: rotate(-12deg);
}

.scale-beam-group.tilt-right {
    transform: rotate(12deg);
}

.scale-beam-group.tilt-left-slight {
    transform: rotate(-6deg);
}

.scale-beam-group.tilt-right-slight {
    transform: rotate(6deg);
}

.scale-beam-group.balanced {
    transform: rotate(0deg);
}

/* Physics wobble animation when transitioning */
@keyframes pan-wobble {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(3deg);
    }

    30% {
        transform: rotate(-2deg);
    }

    45% {
        transform: rotate(1.5deg);
    }

    60% {
        transform: rotate(-1deg);
    }

    75% {
        transform: rotate(0.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.scale-beam-group.wobbling .left-pan,
.scale-beam-group.wobbling .right-pan {
    animation: pan-wobble 0.6s ease-out;
}

/* Shake animation for auto-balance */
@keyframes scale-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-5deg);
    }

    20% {
        transform: rotate(5deg);
    }

    30% {
        transform: rotate(-4deg);
    }

    40% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    60% {
        transform: rotate(3deg);
    }

    70% {
        transform: rotate(-2deg);
    }

    80% {
        transform: rotate(2deg);
    }

    90% {
        transform: rotate(-1deg);
    }
}

.scale-beam-group.shaking {
    animation: scale-shake 0.8s ease-out;
}

/* Input Areas */
.balancer-inputs {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 600px;
}

.balancer-formula-input {
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    background: white;
    color: #1e293b;
    text-align: center;
    transition: all 0.3s ease;
}

.balancer-formula-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.balancer-formula-input::placeholder {
    color: #94a3b8;
}

.balancer-arrow {
    font-size: 2rem;
    color: #94a3b8;
    font-weight: 300;
}

.atom-count-display {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    min-height: 20px;
}

/* Feedback Area */
.balancer-feedback {
    padding: 12px 24px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-text {
    color: #64748b;
    font-size: 0.95rem;
}

.balancer-feedback.balanced {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.balancer-feedback.balanced .feedback-text {
    color: #22c55e;
    font-weight: 600;
}

.balancer-feedback.unbalanced {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

.balancer-feedback.unbalanced .feedback-text {
    color: #d97706;
}

/* Auto Balance Button */
.auto-balance-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.auto-balance-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.auto-balance-btn:active {
    transform: translateY(0);
}

.auto-balance-btn svg {
    transition: transform 0.3s ease;
}

.auto-balance-btn:hover svg {
    transform: rotate(90deg);
}

/* Balanced Equation Display */
.balanced-equation-display {
    padding: 20px 32px;
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    text-align: center;
}

.balanced-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.balanced-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #22c55e;
    letter-spacing: 0.02em;
}

/* End Balance Scale Styles */

.tool-input-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-input-section label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tool-input-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

.tool-button.primary-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--text-primary) 0%, #4a3f36 100%);
    color: var(--bg-color);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    align-self: flex-start;
}

.tool-button.primary-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.tool-result-box {
    background: linear-gradient(135deg, var(--element-bg) 0%, #f9f5ef 100%);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
}

.big-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-highlight);
}

.unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 8px;
}

.tool-explanation-box,
.tool-breakdown-box,
.tool-check-box {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.tool-explanation-box h4,
.tool-breakdown-box h4,
.tool-check-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.tool-explanation-box ol,
.tool-explanation-box ul {
    margin-left: 24px;
    line-height: 1.8;
}

.tool-explanation-box li {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.tool-tips-section h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.tool-tips-section ul,
.tool-tips-section ol {
    margin-left: 24px;
    line-height: 1.7;
}

.tool-tips-section li {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tool-tips-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ============================================
   NEW IONS PAGE STYLES
   ============================================ */

/* Page Container - Fixed, no scrolling */
.ions-table-page {
    z-index: 50;
    overflow: hidden !important;
    /* No scrolling - fixed layout */
    padding-top: 170px !important;
    /* Enough space for nav to not cover first section title */
    padding-bottom: 20px;
    align-items: flex-start;
}

/* Container for the grid */
.ions-container {
    width: 90vw;
    height: 85vh;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    overflow: visible;
}

/* Polyatomic Colors */
.element.polyatomic-cation {
    background-color: #ffd9a3;
    /* Warm Orange/Yellow */
    color: #6b4312;
    border-color: rgba(107, 67, 18, 0.1);
}

.element.polyatomic-anion {
    background-color: #cceeff;
    /* Light Blue */
    color: #1a4d6e;
    border-color: rgba(26, 77, 110, 0.1);
}

/* Ion Modal Specifics */
.ion-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    background: #FAFAF9;
    /* Match element visual pane */
}

.ion-visual-placeholder {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 80%;
    text-align: center;
}

.coming-soon-badge {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    padding: 8px 24px;
    background: rgba(0, 0, 0, 0.05);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ion-visual-hint {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-weight: 500;
}

/* Modal Headline adjustments */
.headline-charge {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 4px;
}

/* Ion Info Card Style */
.ion-info-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ion-formation-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    margin-top: 8px;
}

/* Ion Symbol - Stacked Sub/Sup Notation */
.ions-table-page .element .symbol {
    display: inline-flex;
    align-items: center;
}

.ions-table-page .element .symbol .symbol-base {
    display: inline;
}

/* Stack container for charge (top) and subscript (bottom) */
.ions-table-page .element .symbol .script-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    margin-left: 2px;
    /* More space from main symbol */
    gap: 1px;
    /* Small gap between sup and sub */
}

/* ALL ion card sub/sup - ABSOLUTE SIZE (vmin) for consistency */
.ions-table-page .element .symbol .script-sup,
.ions-table-page .element .symbol .script-sub,
.ions-table-page .element .symbol .symbol-base sub,
.ions-table-page .element .symbol sub,
.ions-table-page .element .symbol sup,
.ion-charge-sup {
    font-size: 1.3vmin;
    font-weight: 600;
    color: inherit;
}

/* Middle subscripts (like ₂ in Cr₂O₇) - inside symbol-base */
.ions-table-page .element .symbol .symbol-base sub {
    vertical-align: baseline;
    position: relative;
    top: 0.4em;
}

/* Direct subscripts (like ₃ in CH₃COO) - not in symbol-base */
.ions-table-page .element .symbol>sub {
    vertical-align: baseline;
    position: relative;
    top: 0.4em;
}

/* Stacked scripts positioning */
.ions-table-page .element .symbol .script-sup,
.ions-table-page .element .symbol .script-sub {
    display: block;
    line-height: 1;
}

/* Script-sub matches symbol-base sub position */
.ions-table-page .element .symbol .script-sub {
    position: relative;
    top: 0;
}

/* Fallback for simple ions (without subscript) - like H+, Na+, Cl- */
.ion-charge-sup {
    vertical-align: top;
    position: relative;
    top: -0.5em;
    margin-left: 2px;
}

/* Legacy corner style (kept for compatibility) */
.ion-charge-corner {
    position: absolute;
    top: 0.4vmin;
    right: 0.4vmin;
    font-size: 1.1vmin;
    font-weight: 600;
    opacity: 0.7;
}

/* Ensure ions table overrides grid from periodic table class */
#ions-table.periodic-table {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* Allow JS to control layout or enforce flex column */
}

/* ============================================
   IONS TABLE - PERIODIC TABLE STYLE
   ============================================ */

/* Quick Access Button */
.ions-quick-access {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 10px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.ions-quick-access:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
}

.ions-quick-access .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ions-quick-access span {
    font-weight: 500;
    font-size: 1.1vmin;
    color: #92400e;
}

/* Ions Table Container */
.ions-table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    overflow: hidden;
}

/* Header */
.ions-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.ions-table-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.ions-table-legend {
    display: flex;
    gap: 16px;
}

.ions-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ions-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.ions-legend-swatch.ion-cation {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.ions-legend-swatch.ion-anion {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

/* Ions Grid - Matches Periodic Table Grid */
.ions-table-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 4px;
    flex: 1;
    padding: 8px;
    overflow-y: auto;
}

/* Spacer rows */
.ion-grid-spacer {
    height: 8px;
}

/* Ion Element Card - Matches .element exactly */
.ion-element {
    background-color: var(--element-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 10px;
    position: relative;
    user-select: none;
    border: 1px solid var(--border-color);
    min-height: 60px;
}

.ion-element:hover {
    background-color: var(--element-hover);
    transform: translateY(-4px) scale(1.08);
    z-index: 100;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Cation styling */
.ion-element.ion-cation {
    background-color: #fef3c7;
    border-color: #fde68a;
}

.ion-element.ion-cation:hover {
    background-color: #fde68a;
}

/* Anion styling */
.ion-element.ion-anion {
    background-color: #dbeafe;
    border-color: #bfdbfe;
}

.ion-element.ion-anion:hover {
    background-color: #bfdbfe;
}

/* Polyatomic styling - slightly different shade */
.ion-element.ion-polyatomic.ion-cation {
    background-color: #fef9c3;
    border-color: #fef08a;
}

.ion-element.ion-polyatomic.ion-anion {
    background-color: #e0f2fe;
    border-color: #bae6fd;
}

/* Charge - like .number in periodic table */
.ion-element .ion-charge {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ion-element.ion-cation .ion-charge {
    color: #92400e;
}

.ion-element.ion-anion .ion-charge {
    color: #1e40af;
}

/* Symbol - like .symbol in periodic table */
.ion-element .ion-symbol {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.ion-element.ion-cation .ion-symbol {
    color: #78350f;
}

.ion-element.ion-anion .ion-symbol {
    color: #1e3a8a;
}

/* Name - like .name in periodic table */
.ion-element .ion-name {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 2px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hint text */
.ions-table-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   ION DETAIL MODAL - Like Element Modal
   ============================================ */

.ion-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.ion-detail-content {
    background: white;
    border-radius: 20px;
    padding: 32px;
    min-width: 320px;
    max-width: 400px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: ionModalFadeIn 0.3s ease;
}

@keyframes ionModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

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

.ion-detail-content.ion-detail-cation {
    border-top: 4px solid #f59e0b;
}

.ion-detail-content.ion-detail-anion {
    border-top: 4px solid #3b82f6;
}

.ion-detail-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.ion-detail-close:hover {
    color: #ef4444;
}

.ion-detail-header {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(249, 250, 251, 0.8));
    border-radius: 12px;
    margin-bottom: 20px;
}

.ion-detail-cation .ion-detail-header {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.ion-detail-anion .ion-detail-header {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.ion-detail-charge {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ion-detail-cation .ion-detail-charge {
    color: #92400e;
}

.ion-detail-anion .ion-detail-charge {
    color: #1e40af;
}

.ion-detail-symbol {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.ion-detail-cation .ion-detail-symbol {
    color: #78350f;
}

.ion-detail-anion .ion-detail-symbol {
    color: #1e3a8a;
}

.ion-detail-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ion-detail-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ion-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--background-color);
    border-radius: 8px;
}

.ion-detail-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.ion-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ion-detail-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 20px;
    font-style: italic;
}

/* Breakdown Table Styles */
.breakdown-table,
.check-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.breakdown-table th,
.check-table th {
    text-align: left;
    padding: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    background: var(--element-bg);
}

.breakdown-table td,
.check-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--text-primary);
}

.breakdown-table .element-cell,
.check-table .element-cell {
    font-weight: 700;
    font-size: 1.1rem;
}

.breakdown-table .total-row td {
    background: var(--element-bg);
    border-top: 2px solid var(--border-color);
    font-weight: 700;
}

.check-table .match-yes {
    color: #059669;
    font-weight: 700;
}

.check-table .match-no {
    color: #DC2626;
    font-weight: 700;
}

.balance-status {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1rem;
}

.balance-status.balanced {
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.3);
    color: #047857;
}

.balance-status.unbalanced {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #B91C1C;
}

/* Percent Bars Visualization */
.percent-bars-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.percent-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-label {
    width: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-primary);
}

.bar-track {
    flex: 1;
    height: 28px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bar-value {
    width: 70px;
    text-align: right;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.formula-display {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.note-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 8px;
}

/* Element Inputs Grid */
.element-inputs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.element-inputs-grid .element-input-row {
    display: grid;
    grid-template-columns: 140px 80px 1fr;
    gap: 12px;
    align-items: center;
}

.small-input {
    max-width: 80px;
    text-transform: uppercase;
}

/* Formula Result Display */
.formula-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0;
}

.formula-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.formula-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.formula-value.highlight {
    color: var(--text-highlight);
    font-size: 2rem;
}

/* Error Message */
.error-message {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #B91C1C;
    padding: 16px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
}

/* Section Icon Styling */
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    color: var(--text-highlight);
}

.section-icon svg {
    width: 100%;
    height: 100%;
}

.section-icon.warning {
    color: #DC6B00;
}

/* Tool Modal Icon Theming */
.tool-modal-icon.balancer-icon {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #B91C1C;
}

.tool-modal-icon.molar-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #B45309;
}

.tool-modal-icon.percent-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}

.tool-modal-icon.empirical-icon {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338CA;
}

/* Enhanced Tool Select */
.tool-select {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235D544F' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.tool-select:focus {
    outline: none;
    border-color: var(--text-highlight);
    box-shadow: 0 0 0 3px rgba(120, 53, 15, 0.1);
}

/* Enhanced Warning Box */
.warning-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #F59E0B;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-box::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400E' stroke-width='2'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* h4 in tool sections */
.tool-tips-section h4,
.tool-explanation-box h4,
.tool-breakdown-box h4,
.tool-check-box h4 {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}


header {
    flex: 0 0 auto;
    margin-bottom: 2vmin;
    margin-top: 55px;
    text-align: center;
}

header h1 {
    font-weight: 800;
    font-size: 3.5vmin;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

header p {
    font-weight: 600;
    font-size: 1.1vmin;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 0.8vmin;
    opacity: 0.7;
}

header .action-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 1.5vmin;
    z-index: 100;
}

/* 统一所有页面的按钮位置 - 空白页面按钮位置与主页面一致（通过JS动态设置） */
.blank-page .action-buttons {
    position: fixed;
    z-index: 3000;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0.8vmin;
    transition: opacity 0.3s ease;
    width: 100%;
    height: 100%;
    max-width: 90vw;
    max-height: calc(100vh - 14vmin);
    aspect-ratio: 18 / 10;
    justify-content: center;
    margin: 0 auto;
}

.element {
    background-color: var(--element-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.2vmin;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    position: relative;
    user-select: none;
    border: 1px solid var(--border-color);
    aspect-ratio: 1;
    /* Force square shape */
}

.element:hover {
    background-color: var(--element-hover);
    transform: translateY(-4px) scale(1.1);
    z-index: 100;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
}

#table-legend {
    grid-column: 3 / 13;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.6vmin;
    padding: 0;
    pointer-events: none;
    z-index: 150;
    margin: 0 auto;
    width: 90%;
    max-width: 800px;
    align-items: stretch;
    justify-items: stretch;
    align-self: center;
    justify-self: center;
}

.legend-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8vmin;
    font-size: 1.3vmin;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.75);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 0.3vmin 1vmin;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), background 0.25s ease;
    white-space: nowrap;
    position: relative;
    z-index: 200;
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.legend-item:hover {
    transform: translateY(-2px);
    z-index: 210;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.legend-item.active {
    background: #000;
    color: #FFF;
    border-color: transparent;
    transform: scale(1.02);
    box-shadow: inset 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.12);
}

.legend-item.active .legend-swatch {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Quick Access Button for Ions Table */
.legend-item.ions-quick-access {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.legend-item.ions-quick-access:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15));
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.legend-swatch {
    width: 1.5vmin;
    height: 1.5vmin;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.legend-swatch.alkali-metal {
    background-color: #ffcccc;
}

.legend-swatch.alkaline-earth-metal {
    background-color: #ffe5cc;
}

.legend-swatch.transition-metal {
    background-color: #fff2cc;
}

.legend-swatch.post-transition-metal {
    background-color: #d9e2f3;
}

.legend-swatch.metalloid {
    background-color: #d1e7dd;
}

.legend-swatch.non-metal {
    background-color: #e2f0d9;
}

.legend-swatch.halogen {
    background-color: #ffffcc;
}

.legend-swatch.noble-gas {
    background-color: #e0ccff;
}

.legend-swatch.lanthanide {
    background-color: #fce4d6;
}

.legend-swatch.actinide {
    background-color: #fddddd;
}

.element.alkali-metal {
    background-color: #ffcccc;
    color: #5d2e2e;
}

.element.alkaline-earth,
.element.alkaline-earth-metal {
    background-color: #ffe5cc;
    color: #5d402e;
}

.element.transition-metal {
    background-color: #fff2cc;
    color: #5d522e;
}

.element.post-transition-metal {
    background-color: #d9e2f3;
    color: #2e3a5d;
}

.element.metalloid {
    background-color: #d1e7dd;
    color: #2e5d4b;
}

.element.non-metal,
.element.reactive-nonmetal,
.element.polyatomic-nonmetal,
.element.diatomic-nonmetal {
    background-color: #e2f0d9;
    color: #3a5d2e;
}

.element.halogen {
    background-color: #ffffcc;
    color: #5d5d2e;
}

.element.noble-gas {
    background-color: #e0ccff;
    color: #4b2e5d;
}

.element.lanthanide {
    background-color: #fce4d6;
    color: #5d3a2e;
}

.element.actinide {
    background-color: #fddddd;
    color: #5d2e2e;
}

.element.unknown,
.element.undefined {
    background-color: #f2f2f2;
}

.element:hover {
    filter: brightness(0.95);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#periodic-table.highlighting .element:not(.highlighted) {
    opacity: 0.5;
    filter: grayscale(0.2);
    transform: scale(0.98);
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

#periodic-table.highlighting .element.highlighted {
    transform: scale(1.05);
    z-index: 100;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.element .number {
    font-size: 1vmin;
    position: absolute;
    top: 0.5vmin;
    left: 0.6vmin;
    opacity: 0.5;
    font-weight: 600;
}

.element .symbol {
    font-size: 2.2vmin;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.element .name {
    font-size: 0.9vmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
    opacity: 0.7;
    font-weight: 500;
    margin-top: 0.2vmin;
}

.empty {
    pointer-events: none;
}

.lanthanide,
.actinide {
    background-color: #EBE5DC;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(200, 195, 190, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s steps(1, end);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease, visibility 0s steps(1, start);
}

.modal-content {
    background: var(--modal-bg-glass);
    width: calc(100vw - 100px);
    min-width: 800px;
    height: calc(100vh - 160px);
    max-width: 1300px;
    border-radius: 32px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12);
    display: flex;
    overflow: hidden;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Welcome Modal Redesign */
.modal-content.welcome-redesign {
    background: #FFFFFF;
    border: none;
    box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.15);
}

.modal-overlay.active .modal-content {
    transform: translateX(-50%) scale(1);
}

.modal-top-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 200;
}

.modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    color: #4F5D75;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.4rem;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #2D3142;
    color: #FFF;
    transform: rotate(90deg);
}

.modal-info-pane {
    flex: 0 0 480px;
    min-width: 320px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 150px;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    position: relative;
    z-index: 2;
    background: #FFFFFF;
}

.modal-info-pane.no-scroll {
    overflow: hidden;
    padding-bottom: 0;
}

.element-symbol,
.element-number,
.stock-ion,
.iso-symbol,
.not-sym,
.not-mass,
.not-num {
    font-family: 'Inter', sans-serif;
}

.overview-row {
    display: grid;
    grid-template-areas:
        "charge type"
        "charge phase"
        "charge group";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    width: 100%;
    margin-bottom: 6px;
    padding-bottom: 0px;
}

/* edu-names-list, stock-name-item, iso-table moved to line ~3830 - single definition */

.simplified-element-box {
    padding: 30px 41px 41px 41px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.cards-slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.cards-slider {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    gap: 20px;
    scrollbar-width: none;
    perspective: 1200px;
    box-sizing: border-box;
    max-width: 100%;
}

.cards-slider::-webkit-scrollbar {
    display: none;
}

.card-slide {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
    box-sizing: border-box;
    overflow: hidden;
}

.green-rectangle,
.yellow-rectangle,
.blue-rectangle,
.red-rectangle {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    background: #DBC59C;
    box-shadow: 0 3px 8px rgba(219, 197, 156, 0.4);
}

.green-rectangle {
    background: #B0BED1;
    box-shadow: 0 3px 8px rgba(176, 190, 209, 0.4);
}

.yellow-rectangle {
    background: #A7C5D9;
    box-shadow: 0 3px 8px rgba(167, 197, 217, 0.4);
}

.blue-rectangle {
    background: #9DCBC3;
    box-shadow: 0 3px 8px rgba(157, 203, 195, 0.4);
}

.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.dot.active {
    background: #000;
    transform: scale(1.2);
}

.dot.locked {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.level-lock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    color: rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    z-index: 50;
}

.level-lock-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
    transform: scale(1.05);
}

.level-lock-btn .lock-icon-unlocked {
    display: block;
}

.level-lock-btn .lock-icon-locked {
    display: none;
}

.level-lock-btn.locked {
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
}

.level-lock-btn.locked:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
}

.level-lock-btn.locked .lock-icon-unlocked {
    display: none;
}

.level-lock-btn.locked .lock-icon-locked {
    display: block;
}

.element-content {
    padding: 12px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-divider {
    margin: 12px 0 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 3px;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--modal-text-main);
    letter-spacing: -0.01em;
    margin: 0;
}

.modal-info-pane::-webkit-scrollbar {
    display: none;
}

.level-header {
    position: sticky;
    top: 0;
    background: #F9F6F0;
    backdrop-filter: blur(16px);
    z-index: 20;
    padding: 12px 20px 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 90px;
}

.modal-info-pane.scrolled .level-header {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(249, 246, 240, 0.98);
    min-height: 95px;
}

.headline-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
    padding-top: 8px;
    /* Add top padding to show superscript charges */
}

.headline-left-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.headline-name {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    margin-right: 40px;
    min-width: 0;
    max-width: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--modal-text-main);
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1.2;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.headline-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
}

.headline-mass {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--modal-text-main);
    line-height: 1;
}

.headline-atomic {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--modal-text-main);
    line-height: 1;
}

.headline-symbol {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--modal-text-main);
    line-height: 1;
}

.element-identity {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding-right: 0;
    width: 100%;
    gap: 0;
    min-height: 70px;
}

.symbol-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

.element-symbol {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--modal-text-main);
    position: relative;
    z-index: 1;
    padding-left: 0;
}

.element-number {
    display: none;
}

.element-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    container-type: inline-size;
    text-align: center;
    width: 100%;
    padding-left: 10px;
}

.element-name {
    font-size: clamp(2.8rem, 15cqi, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--modal-text-main);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.element-text[data-name-length="very-short"] .element-name {
    font-size: clamp(3.6rem, 20cqi, 4.2rem);
}

.element-text[data-name-length="very-short"] {
    padding-left: 0px;
    transform: translateX(-24px);
}

.element-text[data-name-length="short"] .element-name {
    font-size: clamp(3.2rem, 18cqi, 3.8rem);
}

.element-text[data-name-length="short"] {
    padding-left: 5px;
    transform: translateX(-12px);
}

.element-text[data-name-length="medium"] .element-name {
    font-size: clamp(2.8rem, 15cqi, 3.2rem);
}

.element-text[data-name-length="long"] .element-name {
    font-size: clamp(2.4rem, 12cqi, 2.8rem);
}

.element-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--modal-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 10px;
    border-radius: 100px;
    align-self: flex-start;
    margin-top: 4px;
    white-space: nowrap;
}

.properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 0px;
}

.full-width-card {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2vmin;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 250, 0.8));
}

.charge-main {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 0.5vmin;
    line-height: 1;
}

.charge-sub {
    font-size: 1.2rem;
    color: #86868b;
    font-weight: 500;
    margin-left: 0.3vmin;
    line-height: 1;
}

.full-width-card .prop-value {
    font-size: 1.4rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

.level-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #86868b;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.stat-data-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--modal-text-main);
    line-height: 1;
}

.stat-unit {
    display: inline-block;
    font-size: 1.4rem;
    color: #86868b;
    font-weight: 500;
    margin-left: 2px;
}

.subatomic-section {
    margin-top: 0px;
    padding-top: 0;
    border-top: none;
}

.section-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--modal-text-sub);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.6;
}

.particle-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.particle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 16px 12px;
    border-radius: 24px;
    transition: all 0.2s ease;
}

.particle-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.particle-item::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: 2px;
}

.p-item::before {
    background: #FF3B30;
}

.e-item::before {
    background: #007AFF;
}

.n-item::before {
    background: #8E8E93;
}

.p-count {
    font-weight: 700;
    color: #1d1d1f;
    margin-left: 0;
    font-size: 1.4rem;
    line-height: 1.1;
}

.p-label {
    font-weight: 500;
    color: #86868b;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.p-item .p-label::before,
.e-item .p-label::before,
.n-item .p-label::before {
    display: none;
}

.overview-row {
    display: grid;
    grid-template-areas:
        "charge charge"
        "type phase"
        "group amphoteric";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    width: 100%;
    margin-bottom: 12px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.overview-row:not(:has(.area-amphoteric[style*="flex"])) {
    grid-template-areas:
        "charge charge"
        "type phase"
        "group group";
}

.overview-item::before {
    display: none;
}

.overview-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

.overview-item:hover::before {
    opacity: 1;
}

.area-charge {
    grid-area: charge;
}

.area-type {
    grid-area: type;
}

.area-phase {
    grid-area: phase;
}

.area-group {
    grid-area: group;
}

.area-amphoteric {
    grid-area: amphoteric;
}

/* edu-names-list, stock-name-item duplicate removed - see line ~3862 */

.ov-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    opacity: 0.8;
}

.ov-value-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.ov-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.area-charge .ov-label {
    margin-bottom: 8px;
}

.area-charge .ov-value {
    font-size: 1.05rem;
    text-align: left;
}

.overview-item::before {
    display: none;
}

.overview-item {
    background: #FFFFFF;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 55px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* iso-table duplicate removed - see line ~3862 */

.exam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    margin-bottom: 12px;
}

.exam-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.exam-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #86868b;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.exam-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--modal-text-main);
}

.prop-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-height: 65px;
    position: relative;
    overflow: hidden;
}

.prop-card::before {
    display: none;
}

.prop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

.prop-card:hover::before {
    opacity: 1;
}

.prop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #1d1d1f;
    margin-bottom: 0px;
}

.prop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prop-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    word-break: break-word;
}

.prop-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.1;
}

.history-box {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.isotope-section {
    margin-top: 10px;
}

.isotope-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.isotope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.isotope-row:last-child {
    border-bottom: none;
}

.iso-info {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.iso-symbol {
    font-weight: 700;
    font-size: 1rem;
    color: var(--modal-text-main);
    width: 32px;
}

.iso-name {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--modal-text-main);
}

.iso-abundance {
    font-size: 0.85rem;
    color: var(--modal-text-muted);
}

.iso-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.05em;
}

.iso-tag.stable {
    background: rgba(52, 199, 89, 0.15);
    color: #248a3d;
}

.modal-visual-pane {
    flex: 1;
    height: 100%;
    position: relative;
    background: radial-gradient(circle at center, rgba(220, 235, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    border-left: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#atom-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 
#atom-container.visible {
    opacity: 1;
} 
*/
#modal-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.12);
    user-select: none;
    pointer-events: none;
    z-index: 0;
    font-family: 'Inter', sans-serif;
    filter: blur(16px);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: none;
    padding: 0;
}

.d-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--modal-text-sub);
    text-transform: uppercase;
}

.d-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--modal-text-main);
    text-align: left;
}

.notation-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.not-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.2;
}

.not-mass {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--modal-text-main);
}

.not-num {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--modal-text-main);
}

.not-sym {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--modal-text-main);
}

.edu-names-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    color: var(--modal-text-sub);
}

.stock-name-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    transition: all 0.2s ease;
    cursor: default;
    margin-bottom: 6px;
}

.stock-name-item:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
    transform: translateX(2px);
}

.stock-name-item:last-child {
    margin-bottom: 0;
}

.stock-ion {
    font-weight: 700;
    font-size: 1rem;
    color: #1F2937;
    font-family: 'Inter', sans-serif;
}

.stock-text {
    font-weight: 500;
    color: #6B7280;
}

.edu-isotope-container {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.6);
    margin-top: 24px;
    width: 100%;
}

.iso-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #86868b;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    opacity: 0.8;
}

.iso-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.iso-table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease;
}

.iso-table tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

.iso-table tr:last-child {
    border-bottom: none;
}

.iso-table td {
    padding: 8px 0;
    vertical-align: middle;
}

.iso-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: left;
    width: 35%;
}

.iso-detail {
    width: 35%;
    text-align: center;
}

.n-badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #1d1d1f;
    background: #F2F2F7;
    padding: 4px 10px;
    border-radius: 12px;
}

.iso-percent {
    width: 30%;
    text-align: right;
    font-weight: 600;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.iso-note {
    font-size: 0.7rem;
    color: #9CA3AF;
    font-weight: 500;
    margin-top: 10px;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 8px;
    letter-spacing: 0.01em;
}

.edu-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}

.edu-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.edu-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 6px;
}

.edu-solubility .sol-group {
    margin-bottom: 10px;
}

.sol-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.sol-label.bad {
    color: #1d1d1f;
}

.sol-label.good {
    color: #1d1d1f;
}

.sol-item {
    font-size: 0.85rem;
    line-height: 1.4;
    padding-left: 8px;
    color: #333;
}

.edu-safety {
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.edu-safety .edu-title {
    color: #1d1d1f;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.safe-row {
    margin-bottom: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.safe-row strong {
    color: #1d1d1f;
}

.subatomic-stats-container {
    position: absolute;
    top: 24px;
    left: 24px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    animation: fadeInSlide 0.8s ease-out 0.3s forwards;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
    border-radius: 16px;
}

.subatomic-stats-container h3 {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--modal-text-sub);
    margin-bottom: 8px;
    padding-left: 0;
    font-family: 'Inter', sans-serif;
    opacity: 0.7;
    text-shadow: none;
}

.subatomic-grid {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.sa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 8px 10px;
    border-radius: 12px;
    min-width: 60px;
    transition: all 0.2s ease;
    cursor: default;
    backdrop-filter: none;
}

.sa-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sa-item::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-bottom: 6px;
}

.sa-item:nth-child(1)::before {
    background: #FF3B30;
    box-shadow: none;
}

.sa-item:nth-child(2)::before {
    background: #007AFF;
    box-shadow: none;
}

.sa-item:nth-child(3)::before {
    background: #8E8E93;
    box-shadow: none;
}

.sa-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--modal-text-main);
    line-height: 1;
    font-family: 'Inter', sans-serif;
    margin-bottom: 2px;
    letter-spacing: 0;
    text-shadow: none;
}

.sa-label {
    font-size: 0.65rem;
    color: var(--modal-text-sub);
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0;
    opacity: 0.9;
    text-shadow: none;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.advanced-data-container {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.data-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.data-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #86868b;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.data-table th {
    text-align: left;
    font-size: 0.7rem;
    color: #86868b;
    padding: 0 0 8px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.data-table th:last-child {
    text-align: right;
}

.data-table td {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table .formula {
    font-weight: 600;
    color: #1d1d1f;
    font-family: 'Inter', sans-serif;
}

.data-table .meta {
    font-size: 0.75rem;
    color: #86868b;
    font-weight: 500;
}

.data-table .value {
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.data-table .value.pos {
    color: #1d1d1f;
}

.data-table .value.neg {
    color: #1d1d1f;
}

.stse-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}

.stse-section::before {
    display: none;
}

.stse-section .data-title {
    color: #1d1d1f;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stse-section .data-title::before {
    content: '🌍';
    font-size: 1.2rem;
}

.stse-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 0;
    /* Removed bottom margin */
    font-family: 'Inter', sans-serif;
}

.stse-content strong {
    color: #1F2937;
    font-weight: 600;
}

.stse-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stse-tag {
    font-size: 0.75rem;
    padding: 6px 12px;
    background: #F8F9FA;
    color: #1d1d1f;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.stse-tag:hover {
    background: #F1F3F4;
    transform: translateY(-1px);
}

.uses-hazards-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.uses-card,
.hazards-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.uses-card:hover,
.hazards-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.card-icon {
    font-size: 1.1rem;
}

.card-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

.card-content {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
}

@media (max-width: 768px) {
    .uses-hazards-container {
        grid-template-columns: 1fr;
    }
}

.card-info-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.card-info-container::-webkit-scrollbar {
    display: none;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    gap: 10px;
    flex-shrink: 0;
}

.info-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.5;
    font-weight: 600;
    flex-shrink: 0;
    flex-basis: auto;
    min-width: fit-content;
    white-space: nowrap;
}

.info-value {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: right;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}

.info-value.long-text {
    white-space: nowrap !important;
    font-size: 0.9rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.red-rectangle .info-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.red-rectangle .info-label {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

.red-rectangle .info-value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.red-rectangle .card-info-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.info-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
    margin: 24px 0;
    width: 100%;
    flex-shrink: 0;
}

.ions-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-radius: 20px;
    padding: 16px 12px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
}

.ions-section::-webkit-scrollbar {
    display: none;
}

.ions-section .info-label {
    text-align: center;
    margin-bottom: 4px;
    opacity: 0.4;
    width: 100%;
}

.ion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.ion-item:active {
    transform: scale(0.96);
}

.ion-symbol {
    font-family: "Georgia", serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    line-height: 1;
    /* Force line height to ignore sub/sup expansion */
}

/* Fix for subscripts affecting item height */
.ion-symbol sub {
    vertical-align: baseline;
    position: relative;
    top: 0.3em;
    font-size: 0.7em;
    line-height: 0;
}

.ion-symbol sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    font-size: 0.7em;
    line-height: 0;
}

.ion-name {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.7;
    font-family: -apple-system, sans-serif;
}

.ion-arrow {
    display: none;
}

.prop-grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.prop-cell {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.2s;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.prop-cell:active {
    transform: scale(0.98);
}

.prop-cell.full-width {
    grid-column: span 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
}

.red-rectangle .prop-cell.full-width {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.red-rectangle .prop-cell div[style*="font-size: 0.95rem"] {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.prop-cell-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.prop-cell-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.prop-cell-unit {
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: 500;
    margin-left: 4px;
}

.full-width .prop-cell-label {
    margin-bottom: 0;
}

.full-width .prop-cell-content {
    text-align: right;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.glass-panel-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    font-weight: 800;
    margin-bottom: 8px;
    color: #111827;
}

.panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.panel-row:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.panel-row:first-of-type {
    padding-top: 0px;
}

.panel-label {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.75;
    color: #374151;
}

.panel-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    text-align: right;
}

.panel-unit {
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: 500;
    margin-left: 2px;
}

.config-hero {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #111827;
    text-align: left;
    width: 100%;
    display: block;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

.red-rectangle .card-info-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.red-rectangle .card-info-container * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.red-rectangle .prop-grid-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.red-rectangle .prop-cell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.red-rectangle .prop-cell>div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: hidden !important;
}

.red-rectangle * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.red-rectangle .prop-cell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.red-rectangle .prop-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.red-rectangle .card-info-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* =========================================
   Level 3: Pro Dashboard Design
   ========================================= */
.l3-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
    column-gap: 12px;
    padding-top: 4px;
}

.l3-stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
    padding-left: 10px;
}

.l3-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.5;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.l3-stat-value {
    font-size: 0.95rem;
    /* Slightly smaller to fit long ion text */
    font-weight: 750;
    color: #111827;
    line-height: 1.25;
    /* Increased for better readability when wrapped */
    font-feature-settings: "tnum";
    word-break: break-word;
    /* Ensure it wraps nicely */
}

.l3-stat-unit {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.6;
    margin-left: 2px;
}

.oxidation-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ox-pill {
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ox-pill label {
    font-size: 0.6rem;
    opacity: 0.5;
    margin-right: 4px;
    text-transform: uppercase;
}

.ox-pill.faded {
    background: rgba(255, 255, 255, 0.25);
    opacity: 0.7;
    font-weight: 500;
    color: #374151;
}

.hero-config-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
}

.config-formula {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-top: 4px;
    text-align: left;
    width: 100%;
    display: block;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

/* ========================================
   Molar Mass Calculator - Electronic Scale
   倾斜3D电子秤 + 精准出票
   ======================================== */

/* 整体包裹器 - 3D透视空间 */
.electronic-scale-wrapper {
    position: relative;
    width: 360px;
    margin: 0 auto 60px;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateZ(-3deg);
    /* 不要transition，保持固定 */
}

/* Ground shadow - 桌面投影 */
.electronic-scale-wrapper::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) rotateZ(3deg);
    width: 85%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.13) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* 元素方块区域 - 固定高度 */
.scale-blocks-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 100px;
    /* 固定高度，不随内容变化 */
    padding: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

/* Individual Element Blocks */
.element-block {
    position: relative;
    border-radius: 12px;
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.3),
        inset 0 -2px 5px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    min-width: 45px;
    min-height: 45px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: blockBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes blockBounceIn {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.6);
    }

    60% {
        opacity: 1;
        transform: translateY(4px) scale(1.05);
    }

    80% {
        transform: translateY(-2px) scale(0.98);
    }

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

.element-block:hover {
    transform: scale(1.08) translateY(-8px);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Tooltip for hover */
.block-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(30, 41, 59, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
    font-family: 'Inter', sans-serif;
}

.block-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(30, 41, 59, 0.95) transparent transparent transparent;
}

.element-block:hover .block-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* The Scale itself - 秤主体 */
.electronic-scale-base {
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 16px;
    box-shadow:
        0 8px 0 #94a3b8,
        0 20px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
    position: relative;
    z-index: 10;
}

.electronic-scale-base::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
    pointer-events: none;
}

/* Metal Platform on top - 顶部称重台 */
.scale-platform-top {
    width: 280px;
    height: 12px;
    border-radius: 100px;
    margin-top: -6px;
    margin-bottom: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to right, #78909c, #b0bec5 30%, #78909c 70%, #546e7a);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.35s ease;
}

.scale-platform-top.has-weight {
    transform: translateY(2px);
    filter: brightness(0.95);
}

/* Digital Screen - 数字显示屏 */
.scale-screen {
    width: 220px;
    height: 50px;
    background: #0a0f1a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    color: #4ade80;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid #1e293b;
    letter-spacing: 2px;
}

.receipt-wrapper::before {
    /* 去掉顶部锯齿，避免漏出 */
    display: none;
}

.receipt-wrapper::after {
    /* 锯齿底边 */
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(135deg, #f9fafb 50%, transparent 50%),
        linear-gradient(-135deg, #f9fafb 50%, transparent 50%);
    background-size: 10px 8px;
    background-repeat: repeat-x;
}

.receipt-header {
    text-align: center;
    border-bottom: none;
    padding-bottom: 6px;
    margin-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    color: #374151;
}

/* 条形码样式 */
.receipt-barcode {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    letter-spacing: -1px;
    color: #1f2937;
    margin: 4px 0 8px;
    border-bottom: 1px dashed #d1d5db;
    padding-bottom: 10px;
    width: 100%;
}

.receipt-date {
    font-size: 0.7rem;
    text-align: center;
    color: #9ca3af;
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.receipt-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.receipt-item-name {
    display: flex;
    gap: 6px;
    color: #4b5563;
}

.receipt-item-qty {
    color: #9ca3af;
    font-size: 0.75rem;
}

.receipt-total-row {
    border-top: 1px dashed #d1d5db;
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
}

.receipt-footer {
    text-align: center;
    font-size: 0.65rem;
    margin-top: 14px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
}

/* ========================================
   Molar Mass Scale - Realtime Split Layout
   ======================================== */
.molar-tool-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    height: 100%;
    align-items: start;
}

/* LEFT COLUMN: Inputs & Tips */
.molar-input-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Glass float card for input section */
.molar-input-panel .tool-input-section {
    padding: 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.molar-input-panel .tool-input-section:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.molar-input-panel .tool-input-section:focus-within {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Input card label with icon */
.molar-input-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.molar-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 7px;
    color: #fff;
    flex-shrink: 0;
}

/* Options row */
.molar-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.molar-exact-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
}

.molar-exact-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
}

/* RIGHT COLUMN: The Stage */
.molar-scale-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 200px;
    position: relative;
    perspective: 800px;
}

/* Front Panel - 前面板（带出票口）*/
.scale-front-panel {
    width: 100%;
    height: 35px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 出票口 - 比小票宽一点 */
.receipt-slot {
    width: 260px;
    /* 比小票(240px)宽 */
    height: 10px;
    /* 竖向更宽 */
    background: #0a0f1a;
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* 小票动画容器 - 精准对齐出票口 */
.receipt-anim-container {
    position: absolute;
    top: 218px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 400px;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
    /* 裁剪超出部分 */
}

/* 小票本身 */
.receipt-wrapper {
    width: 240px;
    background: linear-gradient(180deg, #fefefe 0%, #f9fafb 100%);
    padding: 14px 16px 20px;
    border-radius: 0;
    box-shadow:
        4px 4px 12px rgba(0, 0, 0, 0.15),
        8px 8px 24px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #374151;
    transform: translateY(-300px);
    /* 固定值，确保完全隐藏 */
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s;
}

/* Receipt Animation States - 小票动画状态 */
.receipt-wrapper.printing {
    transform: translateY(0);
    opacity: 1;
}

.receipt-wrapper.discarding {
    transform: translateY(500px);
    /* 固定值，往下掉落 */
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.3s ease;
}

/* 移除 discarding 后瞬间回到上方，无动画 */
.receipt-wrapper.reset-position {
    transition: none !important;
}

/* Input Styles */
.realtime-input {
    font-size: 1.5rem;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.realtime-input:focus {
    border-color: var(--text-highlight);
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Responsive - Electronic Scale */
@media (max-width: 900px) {
    .molar-tool-layout {
        grid-template-columns: 1fr;
    }

    .electronic-scale-wrapper {
        transform: rotateX(8deg) rotateZ(-2deg);
        width: 320px;
    }

    .molar-scale-stage {
        padding-bottom: 250px;
    }
}

/* Highlight Enter Key hint */
.enter-hint {
    font-size: 0.8rem;
    color: #475569;
    margin-top: 8px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-weight: 500;
}

.kbd-key {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 2px 0 #94a3b8;
}

/* ========================================
   Molar Mass - Learning Mode & Tooltips
   ======================================== */

/* Show Calculation Button */
.show-calc-btn {
    width: 100%;
    padding: 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.show-calc-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Calculation Steps Container */
.calc-steps-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.calc-step-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #f1f5f9;
}

.calc-step-row:last-child {
    border-bottom: none;
    font-weight: 700;
    color: #0f172a;
    padding-top: 10px;
    margin-top: 5px;
    border-top: 2px solid #e2e8f0;
}

.calc-step-formula {
    color: #64748b;
    font-family: 'SF Mono', monospace;
    font-size: 0.85rem;
}

/* ========================================
   Unified Premium Design System
   ======================================== */

/* Modal Header Refinement */
.tool-modal-header {
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.tool-modal-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.03em;
}

.tool-modal-tags {
    display: flex;
    gap: 8px;
}

.tool-modal-tags .grade-tag,
.tool-modal-tags .feature-tag {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-modal-tags .grade-tag {
    background: #f1f5f9;
    color: #64748b;
}

.tool-modal-tags .feature-tag {
    background: #ecfdf5;
    color: #059669;
}

/* Icon Colors */
.tool-modal-icon.balancer-icon {
    background: linear-gradient(135deg, #fef3c7, #fcd34d);
}

.tool-modal-icon.balancer-icon svg {
    color: #92400e;
}

.tool-modal-icon.molar-icon {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
}

.tool-modal-icon.molar-icon svg {
    color: #1e40af;
}

.tool-modal-icon.empirical-icon {
    background: linear-gradient(135deg, #f3e8ff, #c4b5fd);
}

.tool-modal-icon.empirical-icon svg {
    color: #6b21a8;
}

.tool-modal-icon.blank-icon {
    background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
}

.tool-modal-icon.blank-icon svg {
    color: #475569;
}

/* Unified Input Style */
.tool-input,
.tool-select,
.balancer-formula-input,
.realtime-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 500;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tool-input:focus,
.tool-select:focus,
.balancer-formula-input:focus,
.realtime-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.tool-input::placeholder,
.realtime-input::placeholder {
    color: #94a3b8;
}

/* Unified Button Style */
.tool-button,
.tool-button.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tool-button:hover,
.tool-button.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.tool-button:active,
.tool-button.primary-btn:active {
    transform: translateY(0);
}

.tool-button svg {
    width: 18px;
    height: 18px;
}

/* Unified Section Labels */
.tool-input-section label,
.tool-input-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* Unified Result Box */
.tool-result-box {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.result-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.result-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
}

/* Unified Explanation Box */
.tool-explanation-box,
.tool-breakdown-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

/* Toggle Switch Enhancement */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.toggle-label:hover {
    background: #f1f5f9;
}

.toggle-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    position: relative;
    transition: all 0.2s ease;
}

.toggle-label input[type="checkbox"]:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

.toggle-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* Tips Section */
.tool-tips-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.tool-tips-section h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px 0;
}

.tool-tips-section p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 6px 0;
    line-height: 1.5;
}

/* Example Chips */
.example-box {
    margin-top: 12px;
}

.example-box strong {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

.formula-chip {
    display: inline-block;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'SF Mono', 'Monaco', monospace;
}

.formula-chip:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Balancer Specific Refinements */
.balancer-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.balancer-input-group {
    flex: 1;
}

.balancer-input-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: block;
}

.balancer-arrow {
    font-size: 1.2rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 20px;
}

.balancer-feedback {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.balancer-feedback.balanced {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.balancer-feedback.unbalanced {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

/* Empirical/Lego Tool Layout Refinements */
.lego-tool-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 700px) {
    .lego-tool-layout {
        grid-template-columns: 1fr;
    }
}

.lego-input-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lego-stage {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    min-height: 200px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lego-blocks-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.lego-empty-state {
    text-align: center;
    padding: 24px;
}

.lego-empty-state p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

/* 浮动积木动画 */
.floating-blocks-anim {
    position: relative;
    width: 160px;
    height: 100px;
    margin: 0 auto;
}

.floating-block {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: floatBlock 3s ease-in-out infinite;
}

.floating-block.fb-1 {
    background: linear-gradient(135deg, #64748b, #475569);
    left: 10px;
    top: 20px;
    animation-delay: 0s;
}

.floating-block.fb-2 {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    left: 60px;
    top: 5px;
    animation-delay: 0.4s;
}

.floating-block.fb-3 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    left: 110px;
    top: 25px;
    animation-delay: 0.8s;
}

.floating-block.fb-4 {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    left: 60px;
    top: 50px;
    animation-delay: 1.2s;
}

@keyframes floatBlock {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(3deg);
    }
}

/* Lego Block Enhancement */
.lego-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    color: white;
    box-shadow:
        inset 0 -3px 0 rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lego-block:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 -3px 0 rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        0 6px 16px rgba(0, 0, 0, 0.15);
}

.lego-block .block-symbol {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.lego-block .block-count {
    font-size: 0.7rem;
    opacity: 0.85;
    margin-top: 2px;
}

/* Lego Block Colors */
.lego-block.el-C {
    background: linear-gradient(135deg, #374151, #1f2937);
}

.lego-block.el-H {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.lego-block.el-O {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.lego-block.el-N {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

.lego-block.el-S {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.lego-block.el-P {
    background: linear-gradient(135deg, #fb923c, #f97316);
}

.lego-block.el-Cl {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.lego-block.el-default {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

/* Lego Group */
.lego-group {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    min-height: 50px;
}

.lego-group-label {
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Multiplier Section */
.multiplier-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
    font-weight: 700;
    color: #92400e;
}

.multiplier-section .times-icon {
    font-size: 1rem;
}

.multiplier-section .multiplier-value {
    font-size: 1.3rem;
    font-weight: 800;
}

.multiplier-section .multiplier-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Molecular Result */
.molecular-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-radius: 12px;
    border: 2px solid #34d399;
}

.molecular-result .result-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
}

.molecular-result .result-formula {
    font-size: 1.3rem;
    font-weight: 800;
    color: #065f46;
    font-family: 'SF Mono', monospace;
}

/* Lego Block Animation */
@keyframes blockAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

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

.lego-block.animate-in {
    animation: blockAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes multiplierPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.multiplier-section.animate-in {
    animation: multiplierPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Lego Stage States */
.lego-stage.has-result {
    border-style: solid;
    border-color: #a78bfa;
    background: linear-gradient(180deg, #faf5ff, #f5f3ff);
}

/* Calculation Steps Enhancement */
.calc-steps-container {
    margin-top: 12px;
}

.show-calc-btn {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.show-calc-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.show-calc-btn svg {
    width: 16px;
    height: 16px;
}

.calc-steps-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.calc-step-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9rem;
    color: #475569;
    border-bottom: 1px dashed #f1f5f9;
}

.calc-step-row:last-child {
    border-bottom: none;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid #e2e8f0;
    font-weight: 700;
    color: #1e293b;
}

/* Enter Hint Enhancement */
.enter-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

.kbd-key {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 1px 0 #94a3b8;
}

/* Scrollbar Styling */
.feature-modal-body::-webkit-scrollbar {
    width: 6px;
}

.feature-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.feature-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.feature-modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Global Floating About Button */
.floating-about-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #fff;
    padding: 0;
}

.floating-about-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.floating-about-btn:active {
    transform: scale(0.95);
}

.floating-about-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* Floating Pill / Segmented Control Styles */
.nav-segmented-control {
    background: rgba(220, 220, 220, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px;
    border-radius: 24px;
    gap: 0;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-segmented-control .action-btn {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 6px 20px;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.nav-segmented-control .action-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
    transform: none;
    box-shadow: none;
}

.nav-segmented-control .action-btn.active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: none;
}

/* Header Bar Styling - Preserved Original Centered Layout */
/* No override - uses original header styles from earlier in file */

/* Text-Only Header Tabs Style */
.nav-text-tabs {
    display: flex;
    gap: 24px;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

.nav-text-tabs .action-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    opacity: 0.5;
    transition: all 0.2s ease;
    min-width: auto;
    height: auto;
    display: inline-block;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-text-tabs .action-btn:hover {
    transform: none !important;
    background: transparent !important;
    color: var(--text-primary);
    opacity: 0.8;
    border: none !important;
    box-shadow: none !important;
}

.nav-text-tabs .action-btn.active {
    color: var(--text-primary);
    font-weight: 700;
    opacity: 1;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
}

/* Underline indicator for active state */
.nav-text-tabs .action-btn.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
}

/* =========================================
   Global Navigation Bar (Black Header)
   ========================================= */
/* Old black navigation bar - REMOVED (replaced by centered pill nav) */

.nav-branding {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    gap: 8px;
}

.nav-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

/* Main container - full viewport */
#main-container {
    margin-top: 0;
    height: 100vh;
    padding-bottom: 20px;
    width: 100%;
    padding-top: 90px;
}

/* Fix Worksheet Page Padding */
.worksheet-generator-page {
    padding-top: 40px;
}

/* =========================================
   Global Fixed Navigation Pill
   ========================================= */
.global-nav {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 1600px;
    height: 56px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 0 20px;
}

/* 左侧品牌区 */
.nav-brand-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Logo */
.nav-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.nav-logo-link:hover .nav-logo {
    transform: scale(1.1) rotate(-5deg);
}

.nav-brand {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d1d1f;
    text-decoration: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-brand:hover {
    opacity: 0.7;
}

/* 中间导航区 - 绝对居中 */
.global-nav-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px;
    border-radius: 22px;
}

.nav-pill-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 18px;
    background: transparent;
    color: #444;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-pill-btn:hover:not(.active) {
    color: #000;
    background: rgba(255, 255, 255, 0.6);
}

.nav-pill-btn.active {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* GitHub Link */
.nav-github-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #444;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nav-github-link:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.1);
}

.nav-github-link svg {
    width: 22px;
    height: 22px;
}

/* Navigation Hiding Logic */
body.hide-nav .global-nav {
    transform: translate(-50%, -150%) !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.hide-nav .floating-about-btn {
    transform: translateY(150%) !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FIX: Ensure Ions Page clears the nav bar (Override .blank-page !important) */
#ions-page {
    padding-top: 140px !important;
}

/* Fix Polyatomic Hover Colors */
.element.polyatomic-cation:hover {
    background-color: #ffd18a !important;
    /* Slightly darker/richer than #ffd9a3 */
    color: #52310b !important;
}

.element.polyatomic-anion:hover {
    background-color: #b3e0ff !important;
    /* Slightly darker than #cceeff */
    color: #123852 !important;
}

/* Chemical Formula Typography Fixes */
.headline-symbol sup {
    font-size: 0.5em;
    vertical-align: super;
    font-weight: 600;
}

.headline-symbol sup.ion-charge {
    font-size: 0.45em;
    vertical-align: super;
    font-weight: 700;
    margin-left: 1px;
}

.headline-symbol sub,
.element-symbol sub,
.ion-big-symbol sub {
    font-size: 0.55em;
    vertical-align: baseline;
    position: relative;
    bottom: -0.2em;
    font-weight: 600;
}

/* Stacked notation container - sub and sup vertically stacked, left-aligned */
.chem-notation {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align both sub and sup */
    vertical-align: middle;
    line-height: 0.85;
    margin-left: 1px;
    /* Slight gap from main symbol */
    transform: translateY(-0.1em);
    /* Move up to center with symbol */
}

.chem-notation sub,
.chem-notation sup {
    display: block;
    font-size: 0.5em;
    font-weight: 600;
    line-height: 1;
    position: relative;
    bottom: 0;
    /* Reset offset for stacked items to align with main text subs */
}

.chem-notation sup {
    order: 1;
    /* Superscript on top */
}

.chem-notation sub {
    order: 2;
    /* Subscript on bottom */
}

/* Ensure spacing between formula and name */
.headline-symbol {
    margin-right: 28px;
}

/* Scrolling name animation for long ion names */
.headline-name.scrolling-name {
    position: relative;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    flex: 1;
    min-width: 0;
    margin-left: 0;
    /* Let symbol margin handle spacing */
    margin-right: 20px;
    white-space: nowrap;
    justify-content: flex-start;
    text-align: left;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
}

.headline-name.scrolling-name .scrolling-text {
    display: inline-flex;
    padding-left: 0;
    /* Animation handled by JS */
}

.headline-name.scrolling-name .scrolling-text span {
    padding-right: 100px;
    /* Gap between loop items */
    flex-shrink: 0;
}

/* ==========================================
   Ion Modal Card Height Fix
   ========================================== */

/* Ion modal: make modal-info-pane a flex container so simplified-element-box fills the space */
.ion-modal-content .modal-info-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0;
    overflow: hidden;
}

/* Ion modal: level-header should not shrink */
.ion-modal-content .level-header {
    flex-shrink: 0;
}

/* Ion modal: simplified-element-box should grow to fill remaining space */
.ion-modal-content .simplified-element-box {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* =========================================
   H+ Ion Level 2 Redesign (Premium Animations)
   ========================================= */

/* Main Grid Container */
.h-plus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 100%;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* Individual Visual Card */
.visual-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.visual-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Card Label */
.card-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-top: 10px;
    text-align: center;
    z-index: 2;
}

.card-title-sm {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #888;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
    position: absolute;
    top: 10px;
    left: 12px;
}

/* --- 1. Glowing Beaker (Lab Identity) --- */
.beaker-wrapper {
    width: 60px;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.beaker {
    width: 40px;
    height: 55px;
    border: 3px solid #333;
    border-top: none;
    border-radius: 0 0 8px 8px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.beaker::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -8px;
    width: 12px;
    height: 3px;
    background: #333;
    transform: rotate(-30deg);
    /* Spout */
}

.liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, #ef4444, #991b1b);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    animation: liquidPulse 2s infinite ease-in-out;
}

.liquid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
}

@keyframes liquidPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
        height: 60%;
    }

    50% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.9);
        height: 62%;
    }
}

/* --- 2. Litmus Test (Color Swap) --- */
.litmus-wrapper {
    cursor: pointer;
}

.litmus-strip {
    width: 60px;
    height: 24px;
    background: #4cabeb;
    /* Blue */
    border-radius: 2px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-card:hover .litmus-strip {
    background: #ef4444;
    /* Red */
}

.litmus-text {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

/* --- 3. Reactivity (Rising Bubbles) --- */
.bubble-container {
    width: 60px;
    height: 60px;
    position: relative;
    border-bottom: 3px solid #ccc;
    cursor: pointer;
    overflow: hidden;
}

.stone {
    width: 40px;
    height: 16px;
    background: #aaa;
    border-radius: 50% 50% 4px 4px;
    position: absolute;
    bottom: 0;
    left: 10px;
}

.bubble {
    width: 8px;
    height: 8px;
    background: rgba(59, 130, 246, 0.5);
    /* CO2 bubbles */
    border: 1px solid rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    position: absolute;
    bottom: 16px;
    left: 50%;
    opacity: 0;
}

/* Trigger animation on card hover */
.visual-card:hover .bubble:nth-child(1) {
    animation: rise 1.5s infinite;
    animation-delay: 0s;
    left: 20px;
}

.visual-card:hover .bubble:nth-child(2) {
    animation: rise 1.8s infinite;
    animation-delay: 0.3s;
    left: 35px;
}

.visual-card:hover .bubble:nth-child(3) {
    animation: rise 1.2s infinite;
    animation-delay: 0.6s;
    left: 28px;
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) scale(1.1);
        opacity: 0;
    }
}

/* --- 4. pH Gauge (Wobble) --- */
.gauge-wrapper {
    width: 80px;
    height: 40px;
    position: relative;
    overflow: hidden;
}

.gauge-bg {
    width: 80px;
    height: 80px;
    background: conic-gradient(from 270deg, #ef4444 0deg, #eab308 90deg, #22c55e 180deg);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    /* Top half */
    transform: rotate(0deg);
}

/* Mask to make it an arc */
.gauge-bg::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background: rgba(255, 255, 255, 0.8);
    /* Match card bg */
    border-radius: 50%;
}

.gauge-needle {
    width: 2px;
    height: 35px;
    background: #333;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: rotate(-85deg);
    /* Far left (Red zone) */
    z-index: 5;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gauge-hub {
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    bottom: -4px;
    left: calc(50% - 4px);
    z-index: 6;
}

/* Wobble Effect */
.visual-card:hover .gauge-needle {
    animation: gaugeWobble 0.4s ease-in-out infinite alternate;
}

@keyframes gaugeWobble {
    from {
        transform: rotate(-88deg);
    }

    to {
        transform: rotate(-82deg);
    }
}

/* =========================================
   H+ Ion Level 2 - Enhanced Layout & Animations
   ========================================= */

/* Main Container - Match card-info-container style */
/* Main Container - Match card-info-container style */
.h-plus-l2-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Stretch to fill parent */
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    gap: 16px;
    /* Increased gap */
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* Identity Metrics Section - Compact rows */
/* Identity Metrics Section - Redesigned Minimalist Glass */
.h-plus-metrics-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Opened up space */
    background: rgba(255, 255, 255, 0.5);
    /* Semi-transparent base */
    backdrop-filter: blur(12px);
    /* Premium blur effect */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 20px 24px;
    /* More breathing room */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 4px;
    /* Space from visuals */
}

.h-plus-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: none;
    /* Removed dividers for clean look */
}

/* Highlight Row (Electrons) */
.h-plus-metric-row.highlight-row {
    background: rgba(239, 68, 68, 0.08);
    /* Subtle red tint */
    border-radius: 10px;
    padding: 8px 12px;
    margin: 4px -12px;
    /* Pull to edges of padding */
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.h-plus-metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    font-weight: 700;
    color: #4b5563;
}

.h-plus-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: right;
    letter-spacing: -0.01em;
    color: #1e293b;
}

.h-plus-metric-value.highlight-value {
    color: #DC2626;
    font-size: 1.2rem;
}

.h-plus-metric-value.small-text {
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 65%;
    text-align: right;
    white-space: nowrap;
    /* Prevent wrap per user request */
    opacity: 0.9;
}

/* Visuals Section Container */
.h-plus-visuals-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
    /* Fill remaining vertical space */
    min-height: 0;
    /* Allow grid to shrink if needed, but flex:1 pushes it */
}

/* Visual Card - Minimalist Glassmorphism */
.h-plus-visual-card {
    background: rgba(255, 255, 255, 0.5);
    /* Semi-transparent base */
    backdrop-filter: blur(12px);
    /* Premium blur effect */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    height: 100%;
    /* Fill the grid cell fully */
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.h-plus-visual-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Minimalist Title */
.visual-card-title {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    /* Muted text */
    pointer-events: none;
}

/* Description Text - Bottom */
.visual-card-desc {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.3s ease;
}

.h-plus-visual-card:hover .visual-card-desc {
    color: #0f172a;
    transform: translateY(-2px);
}

/* ========== LITMUS ANIMATION (Redesign) ========== */
.h-plus-visual-card .litmus-wrapper {
    margin-top: 8px;
    /* Offset for title */
}

/* The Strip itself */
.h-plus-visual-card .litmus-strip {
    width: 60px;
    height: 18px;
    background: #60a5fa;
    /* Blue litmus base */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Text inside strip */
.h-plus-visual-card .litmus-text {
    font-size: 0.6rem;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    opacity: 0.9;
}

/* Red Color Overlay for Animation */
.h-plus-visual-card .litmus-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    /* Start empty */
    background: #ef4444;
    /* Red acidic color */
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* Hover Action */
.h-plus-visual-card:hover .litmus-strip::before {
    width: 100%;
    /* Fill to red */
}

.h-plus-visual-card:hover .litmus-strip {
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    /* Red glow */
    transform: scale(1.05);
}

/* ========== REACTIVITY ANIMATION (Redesign) ========== */
.h-plus-visual-card .bubble-container {
    width: 48px;
    height: 56px;
    /* Beakerish shape */
    margin-top: 12px;
    position: relative;
    /* Glass Beaker Look */
    background: rgba(226, 232, 240, 0.4);
    border: 1.5px solid rgba(203, 213, 225, 0.6);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    /* Contain bubbles */
}

/* Solid Stone at bottom */
.h-plus-visual-card .stone {
    width: 24px;
    height: 8px;
    background: #94a3b8;
    border-radius: 4px 4px 2px 2px;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

/* Bubbles */
.h-plus-visual-card .bubble {
    width: 6px;
    height: 6px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    position: absolute;
    bottom: 12px;
    /* Start near stone */
    left: 50%;
    opacity: 0;
    z-index: 5;
}

@keyframes bubble-float {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5);
    }

    20% {
        opacity: 0.8;
        transform: translate(-50%, -4px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx, -50%), -35px) scale(0.9);
        /* Variable drift */
    }
}

.h-plus-visual-card:hover .bubble:nth-child(1) {
    --dx: -80%;
    /* Drift left */
    animation: bubble-float 1.2s infinite;
}

.h-plus-visual-card:hover .bubble:nth-child(2) {
    --dx: -50%;
    /* Go straight */
    animation: bubble-float 1.5s infinite 0.2s;
    width: 4px;
    height: 4px;
}

.h-plus-visual-card:hover .bubble:nth-child(3) {
    --dx: -20%;
    /* Drift right */
    animation: bubble-float 1.0s infinite 0.4s;
    width: 5px;
    height: 5px;
}

/* =========================================
   New Ion Animations (Li, Na, K, Ag)
   ========================================= */

/* --- Flame Tests --- */
.flame-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    padding-bottom: 5px;
}

.flame {
    width: 30px;
    height: 45px;
    border-radius: 50% 50% 20% 20%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    transform-origin: center bottom;
    animation: flicker 1s infinite alternate ease-in-out;
    filter: blur(8px);
    opacity: 0.9;
}

@keyframes flicker {
    0% {
        transform: scale(1) skewX(-2deg);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05) skewX(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.95) skewX(-1deg);
        opacity: 0.85;
    }
}

.flame-crimson {
    background: radial-gradient(circle at 50% 80%, #fca5a5, #dc2626);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

.flame-orange {
    background: radial-gradient(circle at 50% 80%, #fdba74, #ea580c);
    box-shadow: 0 0 20px rgba(234, 88, 12, 0.6);
}

.flame-lilac {
    background: radial-gradient(circle at 50% 80%, #e9d5ff, #9333ea);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.6);
}

/* --- Battery Flow (Li) --- */
.battery-wrapper {
    width: 60px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-icon {
    width: 40px;
    height: 24px;
    border: 2px solid #374151;
    border-radius: 4px;
    position: relative;
    padding: 2px;
}

.battery-icon::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 6px;
    width: 3px;
    height: 8px;
    background: #374151;
    border-radius: 0 2px 2px 0;
}

.batt-charge {
    height: 100%;
    width: 100%;
    background: #10b981;
    border-radius: 2px;
    animation: charge-pulse 2s infinite;
}

.ion-flow {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ion-flow::before {
    content: '•';
    color: #ffd700;
    font-size: 20px;
    position: absolute;
    top: -10px;
    left: 0;
    animation: flow-across 1.5s linear infinite;
}

@keyframes charge-pulse {
    0% {
        width: 20%;
        opacity: 0.5;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes flow-across {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* --- Solubility (Na) --- */
.solubility-wrapper {
    width: 60px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.water-beaker {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top: none;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0 0 8px 8px;
    position: relative;
    overflow: hidden;
}

.salt-cube {
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #ddd;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    animation: dissolve 2s infinite forwards;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.particles::before,
.particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    bottom: 10px;
    left: 50%;
    opacity: 0;
    animation: particle-spread 2s infinite;
}

.particles::after {
    animation-delay: 0.5s;
}

@keyframes dissolve {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    80% {
        transform: translateX(-50%) scale(0.2);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
}

@keyframes particle-spread {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--x, 10px), -20px);
        opacity: 0;
    }
}

.particles::before {
    --x: 10px;
}

.particles::after {
    --x: -10px;
}

/* --- Growth / Leaf (K) --- */
.growth-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.plant-stem {
    width: 4px;
    background: #10b981;
    height: 0;
    position: relative;
    border-radius: 4px;
    animation: stem-grow 2s infinite ease-out;
}

.plant-leaf {
    width: 15px;
    height: 15px;
    background: #10b981;
    border-radius: 0 50% 0 50%;
    position: absolute;
    top: 0;
    right: -10px;
    transform: rotate(-10deg) scale(0);
    transform-origin: bottom left;
    animation: leaf-grow 2s infinite ease-out;
}

@keyframes stem-grow {
    0% {
        height: 0;
    }

    50% {
        height: 40px;
    }

    100% {
        height: 40px;
    }
}

@keyframes leaf-grow {

    0%,
    40% {
        transform: rotate(-10deg) scale(0);
    }

    80% {
        transform: rotate(-20deg) scale(1);
    }

    100% {
        transform: rotate(-20deg) scale(1);
    }
}

/* --- Halide / Precipitate (Ag) --- */
.halide-wrapper {
    width: 40px;
    height: 60px;
    position: relative;
    margin: 0 auto;
}

.test-tube {
    width: 20px;
    height: 50px;
    border: 2px solid rgba(100, 116, 139, 0.3);
    border-radius: 0 0 10px 10px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.ppt-cloud {
    width: 100%;
    height: 60%;
    background: white;
    filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: precipitate 2s infinite;
}

@keyframes precipitate {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    40% {
        opacity: 0.8;
        transform: translateY(10px);
    }

    80% {
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(20px);
    }
}

/* --- Photosensitive (Ag) --- */
.photo-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.film-strip {
    width: 40px;
    height: 30px;
    background: #e5e7eb;
    border: 2px solid #9ca3af;
    position: relative;
    transition: background 0.3s;
    animation: darken-film 3s infinite;
}

.film-strip::before,
.film-strip::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 100%;
    border-top: 2px dashed #9ca3af;
    left: 0;
}

.film-strip::before {
    top: 2px;
}

.film-strip::after {
    bottom: 2px;
    border-bottom: 2px dashed #9ca3af;
    border-top: none;
}

.sun-ray {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 20px;
    height: 20px;
    background: #facc15;
    border-radius: 50%;
    box-shadow: 0 0 10px #facc15;
    animation: sun-shine 3s infinite;
}

@keyframes darken-film {
    0% {
        background: #e5e7eb;
    }

    /* Light grey */
    50% {
        background: #9ca3af;
    }

    100% {
        background: #1f2937;
    }

    /* Dark charcoal */
}

@keyframes sun-shine {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}


/* --- New Ion Animations (Mg to P) --- */

/* Structure/Bone (Ca) */
.bone-wrapper {
    width: 60px;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bone-shape {
    width: 40px;
    height: 12px;
    background: #e2e8f0;
    position: relative;
    border-radius: 4px;
}

.bone-shape::before,
.bone-shape::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #e2e8f0;
    border-radius: 50%;
    top: -1px;
}

.bone-shape::before {
    left: -6px;
    box-shadow: 0 10px 0 #e2e8f0;
}

/* Bottom left lob mimics box shadow? No, just create shape */
.bone-lobes-left {
    position: absolute;
    left: -8px;
    top: -4px;
    width: 14px;
    height: 20px;
}

.bone-lobes-left::before,
.bone-lobes-left::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e2e8f0;
    border-radius: 50%;
    left: 0;
}

.bone-lobes-left::before {
    top: 0;
}

.bone-lobes-left::after {
    bottom: -8px;
}

.bone-lobes-right {
    position: absolute;
    right: -8px;
    top: -4px;
    width: 14px;
    height: 20px;
}

.bone-lobes-right::before,
.bone-lobes-right::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e2e8f0;
    border-radius: 50%;
    right: 0;
}

.bone-lobes-right::before {
    top: 0;
}

.bone-lobes-right::after {
    bottom: -8px;
}

.mineral-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px white;
    opacity: 0;
    animation: sparkle 2s infinite;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* X-Ray (Ba) */
.xray-wrapper {
    width: 50px;
    height: 60px;
    background: #1f2937;
    position: relative;
    overflow: hidden;
    border: 2px solid #555;
}

.rib-cage {
    position: absolute;
    top: 10px;
    left: 5px;
    right: 5px;
    height: 40px;
    border-left: 2px solid #aaa;
    border-right: 2px solid #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.rib {
    width: 100%;
    height: 2px;
    background: #aaa;
    border-radius: 2px;
}

.xray-scan {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, rgba(34, 197, 94, 0.4), transparent);
    animation: xray-scan 3s infinite;
}

@keyframes xray-scan {
    0% {
        top: -30%;
    }

    100% {
        top: 130%;
    }
}

/* Galvanize / Shield (Zn) */
.shield-wrapper {
    width: 50px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.metal-plate {
    width: 40px;
    height: 40px;
    background: #94a3b8;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.rust-spot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #b91c1c;
    border-radius: 50%;
    filter: blur(2px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    animation: rust-heal 3s infinite;
}

.zn-coating {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(203, 213, 225, 0.6);
    opacity: 0;
    animation: coating-appear 3s infinite;
}

@keyframes rust-heal {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.5;
    }

    90% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

@keyframes coating-appear {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.8;
    }
}

/* Pool / Sanitation (Cl) */
.pool-wrapper {
    width: 60px;
    height: 50px;
    background: #bfdbfe;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    border-top: 2px solid #60a5fa;
}

.germ {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #047857;
    /* green bacteria */
    border-radius: 50%;
    animation: germ-float 4s infinite linear;
}

.shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: pool-shimmer 3s infinite;
}

@keyframes germ-float {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    50% {
        transform: translate(10px, -5px);
        opacity: 0.5;
    }

    100% {
        transform: translate(20px, 10px);
        opacity: 0;
    }
}

@keyframes pool-shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* Fire Stop (Br) */
.fire-wrapper {
    width: 50px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.small-flame {
    width: 20px;
    height: 30px;
    background: radial-gradient(#fcd34d, #ef4444);
    border-radius: 50% 50% 20% 20%;
    position: absolute;
    bottom: 5px;
    animation: flicker-die 3s infinite;
}

.foam-spray {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 4px;
    height: 0;
    background: white;
    transform: translateX(-50%);
    animation: spray-down 3s infinite;
}

.foam-pile {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 10px;
    background: white;
    border-radius: 10px 10px 0 0;
    opacity: 0;
    transform: scale(0);
    animation: pile-up 3s infinite;
}

@keyframes flicker-die {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    80% {
        transform: scale(0.2);
        opacity: 0;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes spray-down {
    0% {
        height: 0;
        opacity: 1;
    }

    30% {
        height: 40px;
        opacity: 1;
    }

    80% {
        height: 40px;
        opacity: 0;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

@keyframes pile-up {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Thyroid (I) */
.gland-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thyroid-shape {
    width: 36px;
    height: 20px;
    background: #f472b6;
    border-radius: 20px;
    position: relative;
    animation: gland-pulse 3s infinite;
}

.iodine-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #7e22ce;
    border-radius: 50%;
    top: -10px;
    animation: absorb 3s infinite;
}

.iodine-dot:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.iodine-dot:nth-child(2) {
    left: 50%;
    animation-delay: 0.5s;
}

.iodine-dot:nth-child(3) {
    right: 10%;
    animation-delay: 1s;
}

@keyframes gland-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
    }
}

@keyframes absorb {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(15px);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

/* Rusting (O/Oxide) */
.rust-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iron-bar {
    width: 40px;
    height: 12px;
    background: #64748b;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.rust-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #b45309;
    /* Rust orange */
    animation: rust-spread 4s infinite linear;
}

@keyframes rust-spread {
    0% {
        width: 0;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

/* Toxic Gas / Skull (P, S) */
.gas-wrapper {
    width: 50px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.skull-icon {
    width: 14px;
    height: 12px;
    background: #4b5563;
    border-radius: 6px 6px 4px 4px;
    position: absolute;
    bottom: 5px;
    z-index: 2;
}

.skull-icon::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 4px;
    width: 6px;
    height: 4px;
    background: #4b5563;
    border-radius: 2px;
}

.skull-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 3px;
    width: 3px;
    height: 3px;
    background: #1f2937;
    border-radius: 50%;
    box-shadow: 5px 0 0 #1f2937;
}

.gas-fume {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: #a3e635;
    /* chartreuse toxic */
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0;
    animation: fume-rise 2s infinite;
}

.gas-fume:nth-child(1) {
    left: 30%;
    animation-delay: 0s;
}

.gas-fume:nth-child(2) {
    left: 50%;
    animation-delay: 0.5s;
}

.gas-fume:nth-child(3) {
    left: 70%;
    animation-delay: 1s;
}

@keyframes fume-rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-40px) scale(2);
        opacity: 0;
    }
}

/* LED (N) */
.led-wrapper {
    width: 40px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.led-bulb {
    width: 20px;
    height: 20px;
    background: #e5e7eb;
    border-radius: 50% 50% 5px 5px;
    margin-bottom: 2px;
    animation: led-blink 2s infinite;
}

.led-legs {
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: space-between;
}

.leg {
    width: 2px;
    height: 100%;
    background: #9ca3af;
}

@keyframes led-blink {

    0%,
    100% {
        background: #e5e7eb;
        box-shadow: none;
    }

    50% {
        background: #3b82f6;
        box-shadow: 0 0 15px #3b82f6;
    }
}

/* Chip (P) */
.chip-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chip-body {
    width: 30px;
    height: 30px;
    background: #1f2937;
    border: 1px solid #4b5563;
    position: relative;
}

.chip-legs {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.chip-legs::before,
.chip-legs::after {
    content: '';
    position: absolute;
    background: #9ca3af;
}

.chip-legs::before {
    width: 34px;
    height: 20px;
    top: 5px;
    left: -2px;
    z-index: -1;
    box-shadow: 0 0 0 2px #1f2937;
}

/* Simplifying legs visual */
.data-flow {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e;
    animation: data-zip 1s infinite linear;
}

@keyframes data-zip {
    0% {
        top: 2px;
        left: 2px;
        opacity: 1;
    }

    25% {
        top: 2px;
        left: 26px;
    }

    50% {
        top: 26px;
        left: 26px;
    }

    75% {
        top: 26px;
        left: 2px;
    }

    100% {
        top: 2px;
        left: 2px;
        opacity: 0;
    }
}

/* Base Beaker (O - Hydroxide) */
.base-wrapper {
    width: 40px;
    height: 50px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-top: none;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 0 0 8px 8px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.litmus-paper {
    width: 8px;
    height: 30px;
    background: #ef4444;
    /* Start Red */
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    animation: turn-blue 3s infinite;
}

@keyframes turn-blue {
    0% {
        background: #ef4444;
        top: -10px;
    }

    40% {
        top: 10px;
        background: #ef4444;
    }

    60% {
        background: #3b82f6;
    }

    /* Turn Blue */
    80% {
        top: 10px;
        background: #3b82f6;
    }

    100% {
        top: -10px;
        background: #3b82f6;
    }
}

/* Enamel / Tooth (F) */
.tooth-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tooth-shape {
    width: 24px;
    height: 28px;
    background: white;
    border-radius: 4px 4px 10px 10px;
    position: relative;
}

.tooth-root {
    position: absolute;
    bottom: -8px;
    width: 8px;
    height: 12px;
    background: white;
    border-radius: 0 0 50% 50%;
}

.root-l {
    left: 2px;
}

.root-r {
    right: 2px;
}

.shield-glow {
    position: absolute;
    width: 40px;
    height: 44px;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    opacity: 0;
    animation: shield-pulse 3s infinite;
}

@keyframes shield-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* CSS Skull Shape to avoid Emoji */
.skull-icon {
    width: 20px;
    height: 14px;
    background: #4b5563;
    /* dark gray */
    border-radius: 6px 6px 4px 4px;
    position: absolute;
    bottom: 5px;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

.skull-icon::before,
.skull-icon::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #1f2937;
    /* darker eyes */
    border-radius: 50%;
    top: 4px;
}

.skull-icon::before {
    left: 4px;
}

.skull-icon::after {
    right: 4px;
}

/* Teeth */

/* Odor / Rotten Egg (S) */
.odor-wrapper {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.egg-shape {
    width: 30px;
    height: 40px;
    background: #fef3c7;
    /* cream */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    border: 1px solid #d1d5db;
}

.egg-crack {
    position: absolute;
    top: 15px;
    left: 5px;
    width: 20px;
    height: 10px;
    border-top: 2px solid #4b5563;
    border-radius: 50%;
    transform: rotate(-10deg);
}

.egg-crack::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-left: 2px solid #4b5563;
    transform: rotate(45deg);
}

.stink-wave {
    position: absolute;
    width: 2px;
    height: 30px;
    background: #a3e635;
    /* toxic green */
    border-radius: 2px;
    opacity: 0;
    animation: stink-rise 2s infinite ease-out;
}

.s-left {
    left: 10px;
    transform-origin: bottom;
    animation-delay: 0s;
}

.s-right {
    right: 10px;
    transform-origin: bottom;
    animation-delay: 0.5s;
}

@keyframes stink-rise {
    0% {
        transform: scaleY(0.5) translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1.5) translateX(10px);
        opacity: 0;
    }
}

/* Odor / Scent (Sulfide) */
.odor-wrapper {
    width: 50px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.odor-wave {
    position: absolute;
    width: 2px;
    height: 20px;
    background: rgba(180, 83, 9, 0.4);
    /* Brownish/Yellowish scent lines */
    border-radius: 2px;
    bottom: -20px;
    animation: odor-waft 3s infinite ease-in-out;
}

.odor-wave:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.odor-wave:nth-child(2) {
    left: 50%;
    animation-delay: 1s;
}

.odor-wave:nth-child(3) {
    left: 80%;
    animation-delay: 0.5s;
}

@keyframes odor-waft {
    0% {
        transform: translateY(0) scaleY(0.5) skewX(0);
        opacity: 0;
    }

    50% {
        transform: translateY(-30px) scaleY(1.2) skewX(10deg);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-60px) scaleY(1.5) skewX(-10deg);
        opacity: 0;
    }
}

/* Carbonate (CO3) - Effervescence */
.effervesce-wrapper {
    width: 50px;
    height: 60px;
    position: relative;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.effervesce-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    bottom: 5px;
    animation: bubble-up-fast 1s infinite ease-in;
}

@keyframes bubble-up-fast {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) scale(1.2);
        opacity: 0;
    }
}

/* Oxalate (C2O4) - Crystals */
.crystal-wrapper {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.crystal-core {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.needle {
    position: absolute;
    width: 4px;
    height: 30px;
    background: #f8fafc;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    /* Center pivot */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
    animation: needle-grow 2.5s infinite ease-out;
}

@keyframes needle-grow {
    0% {
        transform: translate(-50%, -50%) rotate(var(--r)) translateY(-4px) scaleY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) rotate(var(--r)) translateY(-15px) scaleY(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--r)) translateY(-18px) scaleY(1.1);
        opacity: 0;
    }
}

/* Nitrate (NO3) - All Pass Gate */
.gate-wrapper {
    width: 60px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gate-post {
    width: 4px;
    height: 30px;
    background: #64748b;
    margin: 0 10px;
}

.gate-bar {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #22c55e;
    left: 15px;
    top: 23px;
    transform-origin: left;
    animation: gate-open 2s infinite;
}

@keyframes gate-open {

    0%,
    100% {
        transform: rotate(0deg);
    }

    40%,
    60% {
        transform: rotate(-90deg);
    }
}

/* Nitrite (NO2) - Meat Shield */
.meat-wrapper {
    width: 50px;
    height: 40px;
    background: #fda4af;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f43f5e;
}

.meat-shield {
    position: absolute;
    inset: -5px;
    border: 2px dashed rgba(244, 63, 94, 0.4);
    border-radius: 8px;
    animation: rotate 4s infinite linear;
}

/* Sulfite (SO3) - Bleach Strip */
.bleach-wrapper {
    width: 30px;
    height: 50px;
    background: #818cf8;
    position: relative;
    overflow: hidden;
}

.bleach-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform: translateY(100%);
    animation: bleach-move 3s infinite;
}

@keyframes bleach-move {
    0% {
        transform: translateY(100%);
    }

    50%,
    100% {
        transform: translateY(0);
    }
}

/* Phosphate (PO4) - DNA */
.dna-wrapper {
    width: 40px;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: space-around;
}

.dna-strand {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    animation: dna-spin 2s infinite ease-in-out;
}

@keyframes dna-spin {

    0%,
    100% {
        transform: translateY(0) scale(1);
        z-index: 1;
    }

    50% {
        transform: translateY(50px) scale(0.6);
        z-index: 0;
        opacity: 0.5;
    }
}

/* Chlorate (ClO3) - Firework */
.firework-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fbbf24;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: spark-burst 1.5s infinite;
}

@keyframes spark-burst {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(calc(var(--dx) * 25px), calc(var(--dy) * 25px)) scale(0);
        opacity: 0;
    }
}

/* Hypochlorite (ClO) - Shirt Stain */
.shirt-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
}

.shirt-body {
    width: 40px;
    height: 45px;
    background: white;
    border: 1px solid #e2e8f0;
    clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
}

.stain {
    position: absolute;
    width: 15px;
    height: 12px;
    background: #78350f;
    border-radius: 40% 60% 50% 40%;
    top: 20px;
    animation: fade-out 3s infinite;
}

@keyframes fade-out {
    0% {
        opacity: 0.8;
    }

    40%,
    100% {
        opacity: 0;
    }
}

/* Perchlorate (ClO4) - Rocket */
.rocket-wrapper {
    width: 40px;
    height: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: shake 0.2s infinite;
}

.rocket-head {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #ef4444;
}

.rocket-body {
    width: 20px;
    height: 30px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.rocket-flame {
    width: 10px;
    height: 20px;
    background: linear-gradient(#fbbf24, transparent);
    animation: flame-pulse 0.1s infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-1px);
    }

    75% {
        transform: translateX(1px);
    }
}

@keyframes flame-pulse {

    0%,
    100% {
        height: 15px;
        opacity: 0.8;
    }

    50% {
        height: 25px;
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Chelation (C2O4) - Binding */
.binding-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.binding-center {
    width: 20px;
    height: 20px;
    background: #94a3b8;
    border-radius: 4px;
    position: relative;
    z-index: 2;
}

.metal-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    animation: bind-metal 2s infinite ease-in-out;
}

.metal-dot:nth-child(2) {
    animation-delay: 1s;
}

@keyframes bind-metal {
    0% {
        transform: scale(1) translate(25px, 0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scale(0.5) translate(0, 0);
        opacity: 0;
    }
}

/* Geometry (NO2) - Bent Shape */
.geometry-wrapper {
    width: 50px;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
}

.atom-central {
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border-radius: 50%;
    position: absolute;
    top: 5px;
}

.atom-side {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    position: absolute;
    animation: bent-slide 2s infinite ease-in-out;
}

.side-l {
    top: 25px;
    left: 10px;
}

.side-r {
    top: 25px;
    right: 10px;
}

@keyframes bent-slide {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

/* Wilting (ClO3) - Herbicide */
.wilting-wrapper {
    width: 40px;
    height: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wilting-stem {
    width: 4px;
    height: 30px;
    background: #065f46;
    transform-origin: bottom;
    animation: droop 3s infinite;
}

.wilting-leaf {
    width: 20px;
    height: 12px;
    background: #059669;
    border-radius: 50% 50% 0 50%;
    position: absolute;
    top: 5px;
    left: -15px;
    transform-origin: right bottom;
    animation: leaf-brown 3s infinite;
}

@keyframes droop {

    0%,
    20% {
        transform: rotate(0);
        background: #065f46;
    }

    80%,
    100% {
        transform: rotate(45deg);
        background: #78350f;
    }
}

@keyframes leaf-brown {

    0%,
    20% {
        background: #059669;
        transform: rotate(0);
    }

    80%,
    100% {
        background: #78350f;
        transform: rotate(30deg);
    }
}

/* Planet (ClO4) - Mars Soil */
.planet-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planet-mars {
    width: 34px;
    height: 34px;
    background: radial-gradient(circle at 30% 30%, #fca5a1, #991b1b);
    border-radius: 50%;
    position: relative;
    box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.5);
}

.crater {
    position: absolute;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 6px;
    height: 4px;
}

.planet-scanner {
    position: absolute;
    width: 40px;
    height: 2px;
    background: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 8px #22c55e;
    top: 10px;
    animation: scan-vertical 2s infinite ease-in-out;
}

@keyframes scan-vertical {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.2;
    }

    50% {
        transform: translateY(30px);
        opacity: 1;
    }
}

/* Fallback Variants */
.pulse-circle {
    width: 20px;
    height: 20px;
    background: rgba(59, 130, 246, 0.5);
    border-radius: 50%;
    animation: pulse-grow 2s infinite;
}

@keyframes pulse-grow {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.star-glow {
    width: 10px;
    height: 10px;
    background: #fbbf24;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: star-spin 4s infinite linear;
}

@keyframes star-spin {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1.2);
    }
}

/* ========================================
   NEW TRANSITION METAL ANIMATIONS
   ======================================== */

/* 1. Colorless Solution (Cu+) - Clear Water Ripple */
.colorless-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clear-drop {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(200, 220, 240, 0.3));
    border-radius: 50%;
    border: 2px solid rgba(150, 180, 200, 0.4);
    position: relative;
    animation: water-shimmer 2s infinite ease-in-out;
}

.ripple-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(100, 150, 200, 0.3);
    border-radius: 50%;
    animation: ripple-expand 2s infinite ease-out;
}

.ripple-ring:nth-child(2) {
    animation-delay: 0.5s;
}

.ripple-ring:nth-child(3) {
    animation-delay: 1s;
}

@keyframes water-shimmer {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes ripple-expand {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 2. Disproportion Reaction (Cu+) - Split Animation */
.disproportion-wrapper {
    width: 60px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-ion {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #b87333, #cd7f32);
    border-radius: 50%;
    position: absolute;
    animation: split-center 3s infinite;
}

.split-left {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    border-radius: 50%;
    position: absolute;
    left: 8px;
    opacity: 0;
    animation: split-fly-left 3s infinite;
}

.split-right {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #b87333, #8b5a00);
    border-radius: 50%;
    position: absolute;
    right: 8px;
    opacity: 0;
    animation: split-fly-right 3s infinite;
}

@keyframes split-center {

    0%,
    30% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    70%,
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes split-fly-left {

    0%,
    50% {
        transform: translateX(15px);
        opacity: 0;
    }

    70% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-5px);
        opacity: 0.8;
    }
}

@keyframes split-fly-right {

    0%,
    50% {
        transform: translateX(-15px);
        opacity: 0;
    }

    70% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(5px);
        opacity: 0.8;
    }
}

/* 3. Blue Color Solution (Cu2+) */
.blue-solution-wrapper {
    width: 45px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.blue-beaker {
    width: 35px;
    height: 40px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.2) 0%, rgba(14, 165, 233, 0.8) 100%);
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 0 0 8px 8px;
    position: relative;
    overflow: hidden;
}

.blue-liquid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    animation: liquid-wave 2s infinite ease-in-out;
}

.blue-bubble {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: bubble-rise-blue 2s infinite;
}

.blue-bubble:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.blue-bubble:nth-child(2) {
    left: 50%;
    animation-delay: 0.5s;
}

.blue-bubble:nth-child(3) {
    left: 75%;
    animation-delay: 1s;
}

@keyframes liquid-wave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes bubble-rise-blue {
    0% {
        bottom: 5px;
        opacity: 1;
    }

    100% {
        bottom: 35px;
        opacity: 0;
    }
}

/* 4. Hemoglobin O2 Binding (Fe2+) */
.hemoglobin-wrapper {
    width: 55px;
    height: 55px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.red-cell {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 50% 50%, #fecaca, #ef4444);
    border-radius: 50%;
    position: relative;
    animation: cell-pulse 2s infinite;
    box-shadow: inset 0 0 15px rgba(185, 28, 28, 0.5);
}

.red-cell::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: rgba(127, 29, 29, 0.4);
    border-radius: 50%;
}

.oxygen-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    animation: oxygen-bind 3s infinite;
}

.oxygen-dot:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.oxygen-dot:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 0.5s;
}

.oxygen-dot:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1s;
}

.oxygen-dot:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 1.5s;
}

@keyframes cell-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes oxygen-bind {

    0%,
    20% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    40%,
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* 5. Golden Rain Precipitate (Pb2+) */
.golden-rain-wrapper {
    width: 50px;
    height: 55px;
    position: relative;
    overflow: hidden;
}

.gold-drop {
    position: absolute;
    width: 6px;
    height: 10px;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: gold-fall 2s infinite;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.5);
}

.gold-drop:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.gold-drop:nth-child(2) {
    left: 30%;
    animation-delay: 0.3s;
}

.gold-drop:nth-child(3) {
    left: 50%;
    animation-delay: 0.6s;
}

.gold-drop:nth-child(4) {
    left: 70%;
    animation-delay: 0.9s;
}

.gold-drop:nth-child(5) {
    left: 85%;
    animation-delay: 0.2s;
}

.gold-pile {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 12px;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-radius: 50% 50% 0 0;
    animation: pile-glow 2s infinite;
}

@keyframes gold-fall {
    0% {
        top: -10px;
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 45px;
        opacity: 0;
    }
}

@keyframes pile-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
    }

    50% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
    }
}

/* 6. Deep Purple (MnO4-) */
.deep-purple-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.purple-core {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #a855f7, #6b21a8);
    border-radius: 50%;
    animation: purple-pulse 2s infinite;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.6);
}

.purple-wave {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(147, 51, 234, 0.4);
    border-radius: 50%;
    animation: purple-spread 2s infinite;
}

.purple-wave:nth-child(2) {
    animation-delay: 0.5s;
}

.purple-wave:nth-child(3) {
    animation-delay: 1s;
}

@keyframes purple-pulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

@keyframes purple-spread {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* 7. Oxidizer Fire (MnO4-) */
.oxidizer-wrapper {
    width: 50px;
    height: 55px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.oxidizer-base {
    width: 20px;
    height: 5px;
    background: #374151;
    border-radius: 2px;
    position: relative;
}

.oxidizer-flame {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 30px solid #f97316;
    filter: blur(1px);
    animation: flame-dance 0.3s infinite alternate;
}

.oxidizer-flame::before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid #fbbf24;
}

.spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fef08a;
    border-radius: 50%;
    animation: spark-fly 1s infinite;
}

.spark:nth-child(1) {
    left: 30%;
    animation-delay: 0s;
}

.spark:nth-child(2) {
    left: 50%;
    animation-delay: 0.3s;
}

.spark:nth-child(3) {
    left: 70%;
    animation-delay: 0.6s;
}

@keyframes flame-dance {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }

    100% {
        transform: translateX(-50%) scaleY(1.1) scaleX(0.9);
    }
}

@keyframes spark-fly {
    0% {
        bottom: 10px;
        opacity: 1;
    }

    100% {
        bottom: 50px;
        opacity: 0;
        transform: translateX(10px);
    }
}

/* 8. Pigment Swatch (CrO4) */
.pigment-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paint-blob {
    width: 35px;
    height: 30px;
    background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #eab308 100%);
    border-radius: 60% 40% 50% 50% / 50% 50% 50% 50%;
    animation: blob-morph 4s infinite;
    box-shadow: 2px 3px 8px rgba(234, 179, 8, 0.4);
}

.paint-drip {
    position: absolute;
    bottom: 5px;
    width: 6px;
    height: 12px;
    background: linear-gradient(180deg, #facc15, #ca8a04);
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    animation: drip-fall 3s infinite;
}

@keyframes blob-morph {

    0%,
    100% {
        border-radius: 60% 40% 50% 50% / 50% 50% 50% 50%;
    }

    25% {
        border-radius: 50% 60% 40% 50% / 40% 60% 50% 50%;
    }

    50% {
        border-radius: 40% 50% 60% 50% / 50% 40% 60% 50%;
    }

    75% {
        border-radius: 50% 40% 50% 60% / 60% 50% 40% 50%;
    }
}

@keyframes drip-fall {

    0%,
    50% {
        transform: translateY(0);
        opacity: 0;
    }

    60% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

/* 9. pH Color Shift (CrO4 -> Cr2O7) */
.ph-shift-wrapper {
    width: 50px;
    height: 45px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ph-tube {
    width: 20px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, transparent 20%, var(--ph-color, #facc15) 20%);
    border: 2px solid #9ca3af;
    border-radius: 0 0 10px 10px;
    position: relative;
    animation: ph-change 4s infinite;
}

@keyframes ph-change {

    0%,
    25% {
        --ph-color: #facc15;
    }

    50%,
    75% {
        --ph-color: #f97316;
    }

    100% {
        --ph-color: #facc15;
    }
}

.acid-drop {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: #ef4444;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    animation: acid-drip 4s infinite;
}

@keyframes acid-drip {

    0%,
    40% {
        top: -8px;
        opacity: 1;
    }

    50% {
        top: 5px;
        opacity: 0;
    }

    100% {
        top: -8px;
        opacity: 0;
    }
}

/* 10. Volcano Reaction (Cr2O7) */
.volcano-wrapper {
    width: 55px;
    height: 55px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.volcano-cone {
    width: 40px;
    height: 35px;
    background: linear-gradient(180deg, #f97316 0%, #78350f 60%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: relative;
}

.volcano-ash {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #166534;
    border-radius: 50%;
    animation: ash-erupt 2s infinite;
}

.volcano-ash:nth-child(1) {
    left: 40%;
    animation-delay: 0s;
}

.volcano-ash:nth-child(2) {
    left: 55%;
    animation-delay: 0.3s;
}

.volcano-ash:nth-child(3) {
    left: 45%;
    animation-delay: 0.6s;
}

.volcano-smoke {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: rgba(22, 101, 52, 0.6);
    border-radius: 50%;
    animation: smoke-rise 2s infinite;
}

@keyframes ash-erupt {
    0% {
        top: 5px;
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        top: -25px;
        opacity: 0;
        transform: translateX(var(--ash-x, 10px));
    }
}

.volcano-ash:nth-child(1) {
    --ash-x: -15px;
}

.volcano-ash:nth-child(2) {
    --ash-x: 15px;
}

.volcano-ash:nth-child(3) {
    --ash-x: 5px;
}

@keyframes smoke-rise {
    0% {
        top: 5px;
        opacity: 0.8;
        transform: translateX(-50%) scale(0.5);
    }

    100% {
        top: -20px;
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
    }
}

/* 11. Titration Color Change (Cr2O7) */
.titration-wrapper {
    width: 50px;
    height: 55px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.burette-tip {
    width: 4px;
    height: 10px;
    background: #6b7280;
    position: relative;
}

.titrant-drop {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: titrant-fall 2s infinite;
}

.flask-body {
    width: 30px;
    height: 25px;
    background: linear-gradient(180deg, transparent 0%, transparent 30%);
    border: 2px solid #9ca3af;
    border-radius: 0 0 15px 15px;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
}

.flask-liquid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    animation: color-transition 4s infinite;
}

@keyframes titrant-fall {

    0%,
    80% {
        bottom: -5px;
        opacity: 1;
    }

    90% {
        bottom: -20px;
        opacity: 1;
    }

    100% {
        bottom: -20px;
        opacity: 0;
    }
}

@keyframes color-transition {

    0%,
    30% {
        background: linear-gradient(180deg, #fb923c, #ea580c);
    }

    50%,
    80% {
        background: linear-gradient(180deg, #4ade80, #16a34a);
    }

    100% {
        background: linear-gradient(180deg, #fb923c, #ea580c);
    }
}

/* 12. Ammonia Smell (NH4+) */
.ammonia-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nose-icon {
    width: 20px;
    height: 25px;
    background: #fcd34d;
    border-radius: 50% 50% 40% 40%;
    position: relative;
}

.ammonia-wave {
    position: absolute;
    width: 30px;
    height: 8px;
    border: 2px solid rgba(34, 197, 94, 0.5);
    border-radius: 50%;
    animation: wave-approach 2s infinite;
}

.ammonia-wave:nth-child(1) {
    right: -25px;
    animation-delay: 0s;
}

.ammonia-wave:nth-child(2) {
    right: -35px;
    animation-delay: 0.4s;
}

.ammonia-wave:nth-child(3) {
    right: -45px;
    animation-delay: 0.8s;
}

@keyframes wave-approach {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

/* 13. Slippery/Saponification (OH-) */
.soap-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.soap-bar {
    width: 30px;
    height: 20px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 4px;
    position: relative;
    animation: soap-slide 3s infinite;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.soap-bubble {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(200, 220, 255, 0.3));
    border-radius: 50%;
    animation: bubble-pop 2s infinite;
}

.soap-bubble:nth-child(1) {
    width: 8px;
    height: 8px;
    top: -10px;
    left: 5px;
    animation-delay: 0s;
}

.soap-bubble:nth-child(2) {
    width: 6px;
    height: 6px;
    top: -8px;
    right: 5px;
    animation-delay: 0.5s;
}

.soap-bubble:nth-child(3) {
    width: 5px;
    height: 5px;
    top: -12px;
    left: 15px;
    animation-delay: 1s;
}

@keyframes soap-slide {

    0%,
    100% {
        transform: translateX(0) rotate(0);
    }

    50% {
        transform: translateX(5px) rotate(5deg);
    }
}

@keyframes bubble-pop {

    0%,
    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 14. Buffer Equilibrium (HCO3-) */
.buffer-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.balance-beam {
    width: 40px;
    height: 4px;
    background: #6b7280;
    border-radius: 2px;
    animation: balance-tilt 3s infinite ease-in-out;
    transform-origin: center;
}

.balance-ball {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -8px;
}

.ball-acid {
    left: 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ball-base {
    right: 5px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.pivot-point {
    position: absolute;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #374151;
}

@keyframes balance-tilt {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }
}

/* 15. Hot Ice Crystallization (CH3COO-) */
.hot-ice-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.crystal-seed {
    width: 8px;
    height: 8px;
    background: #e5e7eb;
    transform: rotate(45deg);
    position: absolute;
    animation: crystal-grow 3s infinite;
}

.crystal-branch {
    position: absolute;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #f3f4f6, #d1d5db);
    animation: branch-grow 3s infinite;
}

.crystal-branch:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: 0.2s;
}

.crystal-branch:nth-child(2) {
    transform: rotate(60deg);
    animation-delay: 0.4s;
}

.crystal-branch:nth-child(3) {
    transform: rotate(120deg);
    animation-delay: 0.6s;
}

.crystal-branch:nth-child(4) {
    transform: rotate(180deg);
    animation-delay: 0.8s;
}

.crystal-branch:nth-child(5) {
    transform: rotate(240deg);
    animation-delay: 1s;
}

.crystal-branch:nth-child(6) {
    transform: rotate(300deg);
    animation-delay: 1.2s;
}

.heat-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    animation: heat-pulse 1.5s infinite;
}

@keyframes crystal-grow {
    0% {
        transform: rotate(45deg) scale(0.5);
    }

    50% {
        transform: rotate(45deg) scale(1.5);
    }

    100% {
        transform: rotate(45deg) scale(0.5);
    }
}

@keyframes branch-grow {

    0%,
    20% {
        height: 0;
    }

    60% {
        height: 18px;
    }

    100% {
        height: 0;
    }
}

@keyframes heat-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* 16. Cyanide Toxicity (CN-) */
.cyanide-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skull-shape {
    width: 28px;
    height: 30px;
    background: #fef3c7;
    border-radius: 50% 50% 40% 40%;
    position: relative;
    animation: skull-throb 2s infinite;
}

.skull-shape::before,
.skull-shape::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 10px;
    background: #1f2937;
    border-radius: 50%;
    top: 10px;
}

.skull-shape::before {
    left: 5px;
}

.skull-shape::after {
    right: 5px;
}

.crossbones {
    position: absolute;
    bottom: 2px;
    width: 35px;
    height: 8px;
}

.bone {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #fef3c7;
    border-radius: 4px;
    top: 50%;
    left: 50%;
}

.bone:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.bone:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.danger-pulse {
    position: absolute;
    width: 45px;
    height: 45px;
    border: 3px solid rgba(239, 68, 68, 0.5);
    border-radius: 50%;
    animation: danger-ring 1.5s infinite;
}

@keyframes skull-throb {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes danger-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   Molar Mass Calculator - Apple Style Tips
   ============================================ */
.formula-live-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(248, 250, 252, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    margin-top: 8px;
    min-height: 44px;
}

.formula-live-preview .preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.formula-live-preview .preview-formula {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.02em;
}

.formula-live-preview .preview-formula sub {
    font-size: 0.9em;
    vertical-align: sub;
}

.formula-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 10px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.formula-suggestion.has-message {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.formula-suggestion.has-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.formula-suggestion.has-error .suggestion-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.formula-suggestion .suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(234, 179, 8, 0.15);
    border-radius: 50%;
    color: #b45309;
    flex-shrink: 0;
}

.formula-suggestion .suggestion-icon svg {
    display: block;
}

.formula-suggestion .suggestion-text {
    line-height: 1.4;
}

/* Tips Section - Neutral glass float card */
.molar-tips-apple {
    background: rgba(248, 250, 252, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 16px 20px;
    margin-top: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    flex-grow: 1;
    transition: all 0.2s ease;
}

/* Tips header with icon */
.molar-tips-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.molar-tips-header svg {
    color: #94a3b8;
}

.molar-tips-apple .tips-item {
    display: block;
    padding: 5px 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
}

.molar-tips-apple .tips-item::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #94a3b8;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.molar-tips-apple .tips-examples {
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
}

.molar-tips-apple .example-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.8rem;
}

.molar-tips-apple .example-row code {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.8rem;
    color: #475569;
    background: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    min-width: 90px;
}

.molar-tips-apple .example-row span {
    color: #94a3b8;
}

.molar-tips-apple .example-row .result {
    font-weight: 600;
    color: #1e293b;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

.molar-tips-apple .example-row .result sub {
    font-size: 0.7em;
    vertical-align: baseline;
    position: relative;
    top: 0.25em;
}

/* =========================================
   About / Welcome Modal Styling - Clean Minimal Design
   ========================================= */

/* Animated gradient background keyframes */
@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(10px, -15px) scale(1.05);
    }

    50% {
        transform: translate(-5px, 10px) scale(0.95);
    }

    75% {
        transform: translate(-15px, -5px) scale(1.02);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.about-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    gap: 0;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
}

/* Left Column: Apple-Style Minimal Design */
.about-left {
    flex: 1.15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    background: #FAFAFA;
    border-radius: 32px 0 0 32px;
    padding: 60px 55px;
    overflow: visible;
}

/* Hero 3D Atom Container - Positioned Top Right of Left Panel */
.hero-atom-container {
    position: absolute;
    top: -40px;
    right: -80px;
    width: 520px;
    height: 360px;
    z-index: 10;
    pointer-events: none;
    opacity: 0.95;
}

.about-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-width: 400px;
}

/* Apple Style Typography */
.welcome-eyebrow {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6366f1;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.welcome-title {
    font-size: 4rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 20px 0;
}

.welcome-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.welcome-subtitle span {
    color: #86868b;
}

.welcome-description {
    font-size: 1.05rem;
    font-weight: 400;
    color: #86868b;
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 340px;
}

/* Feature Pills - Text Only, No Icons */
.welcome-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.feature-pill {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6366f1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(8px);
}

.feature-pill:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* CTA Button - Glassmorphism Style */
.welcome-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    padding: 16px 40px;
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 180px;
    box-shadow:
        0 4px 24px rgba(99, 102, 241, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.welcome-cta:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(99, 102, 241, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.welcome-cta:active {
    transform: translateY(0) scale(0.98);
}

/* Footer Text */
.welcome-footer {
    margin-top: 40px;
    font-size: 0.75rem;
    font-weight: 400;
    color: #86868b;
    letter-spacing: 0.01em;
}

.time-point {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1rem;
    color: #6B7280;
    font-weight: 500;
}

.time-point .tp-dot {
    width: 12px;
    height: 12px;
    background: #E5E7EB;
    border-radius: 50%;
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #FAFBFC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.time-point.passed .tp-dot {
    background: #22c55e;
}

.time-point.active {
    font-weight: 700;
    color: #1a1a2e;
}

.time-point.active .tp-dot {
    background: #6366f1;
    width: 14px;
    height: 14px;
    left: -36px;
}

/* Right Column: Clean Profile Card */
.about-right {
    flex: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #F5F5F7;
    border-radius: 0 32px 32px 0;
    padding: 50px 45px;
    overflow: hidden;
}

/* Decorative gradient orbs for right side */
.about-right::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: floatOrb 12s ease-in-out infinite;
}

.about-right::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: floatOrb 15s ease-in-out infinite reverse;
}

/* Author Card - Clean Floating Design */
.author-card {
    background: #FFFFFF;
    padding: 44px 36px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.08);
    text-align: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.author-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.12);
}

.logos-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 28px;
}

.logo-circle {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-circle.z-logo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 16px;
    padding: 10px;
}

.logo-circle.z-logo:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
}

.logo-circle.z-logo img {
    width: 44px;
    height: 44px;
}

.logo-circle.school-logo img {
    width: 110px;
    height: 110px;
    transform: translate(13px, -6px);
    transition: all 0.3s ease;
}

.logo-circle.school-logo:hover img {
    transform: translate(13px, -6px) scale(1.05);
}

.logo-circle img {
    object-fit: contain;
    border-radius: 0;
}

.connector-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
    position: relative;
    border-radius: 2px;
}

.connector-line::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    padding: 0 6px;
    color: #a5b4fc;
    font-size: 14px;
    font-weight: 300;
}

.author-details h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.author-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.15);
    padding: 8px 14px;
    border-radius: 100px;
    margin-bottom: 24px;
}

.author-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(99, 102, 241, 0.06);
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: #4B5563;
    font-weight: 500;
}

/* Email Contact Section */
.meta-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
    margin: 8px 0 12px 0;
}

.email-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.email-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    color: #4B5563;
}

.email-row:hover {
    background: #fff;
    transform: translateX(4px);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.1);
}

.email-row:active {
    transform: translateX(2px);
}

.email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
    border-radius: 8px;
    color: #6366f1;
}

.email-icon svg {
    width: 14px;
    height: 14px;
}

.email-text {
    flex: 1;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: visible;
    color: #374151;
}

.copy-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #a5b4fc;
    opacity: 0;
    transition: all 0.2s ease;
}

.email-row:hover .copy-feedback {
    opacity: 1;
    color: #6366f1;
}

.meta-row svg {
    color: #6366f1;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Animations */
.about-left>* {
    opacity: 0;
    animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.about-left .hero-bg-visual {
    animation-delay: 0.05s;
}

.about-left .about-brand {
    animation-delay: 0.15s;
}

.about-left .value-prop {
    animation-delay: 0.2s;
}

.about-left .about-description {
    animation-delay: 0.25s;
}

.about-left .features-grid {
    animation-delay: 0.3s;
}

.about-left .cta-wrapper {
    animation-delay: 0.35s;
}

.about-left .ai-badge {
    animation-delay: 0.4s;
}

.author-card {
    opacity: 0;
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
    transform: scale(0.96);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        padding: 0;
        overflow-y: auto;
    }

    .about-left {
        flex: none;
        padding: 40px 24px;
        border-radius: 32px 32px 0 0;
        text-align: center;
    }

    .about-right {
        flex: none;
        padding: 40px 24px;
        border-radius: 0 0 32px 32px;
    }

    .about-content-wrapper {
        align-items: center;
    }

    .about-brand {
        justify-content: center;
    }

    .features-grid {
        justify-content: center;
    }

    .about-brand h1 {
        font-size: 2.2rem;
    }

    .value-prop {
        font-size: 1.5rem;
    }

    .hero-bg-visual {
        width: 220px;
        height: 220px;
    }

    .about-description {
        margin: 0 auto 24px auto;
        text-align: center;
    }
}

/* ========================================
   Copyright Notice - Bottom Left
   ======================================== */
.copyright-notice {
    position: fixed;
    bottom: 20px;
    left: 82px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.45;
    z-index: 9998;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
}

/* Hide copyright when modals are active */
body.hide-nav .copyright-notice {
    opacity: 0;
}