* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    min-height:100vh; padding:20px;
}
.container { max-width:960px; margin:0 auto; }
header { text-align:center; color:white; margin-bottom:16px; }
header h1 { font-size:2.2em; text-shadow:2px 2px 4px rgba(0,0,0,0.2); }
.subtitle { font-size:1em; opacity:0.9; margin-top:2px; }

/* ========== 运算模式按钮 ========== */
.mode-selector { display:flex; justify-content:center; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.mode-btn {
    padding:8px 16px; font-size:1em; border:none; border-radius:50px; cursor:pointer;
    background:rgba(255,255,255,0.25); color:white; transition:all 0.3s ease; font-weight:bold;
}
.mode-btn:hover { background:rgba(255,255,255,0.4); transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.mode-btn.active { background:white; color:#764ba2; box-shadow:0 4px 20px rgba(0,0,0,0.3); transform:scale(1.05); }
.mode-btn.active[data-mode="addition"] { border-bottom:4px solid #ff6b6b; }
.mode-btn.active[data-mode="subtraction"] { border-bottom:4px solid #ffa502; }
.mode-btn.active[data-mode="multiplication"] { border-bottom:4px solid #26de81; }
.mode-btn.active[data-mode="division"] { border-bottom:4px solid #45aaf2; }
.mode-btn-special { background:rgba(255,255,255,0.15); font-size:0.9em; padding:8px 14px; }
.mode-btn-special.active[data-mode="decimal"] { border-bottom:4px solid #a55eea; }
.mode-btn-special.active[data-mode="negative"] { border-bottom:4px solid #fc5c65; }
.mode-btn-special.active[data-mode="relation"] { border-bottom:4px solid #f0a500; }

/* ========== 输入区域 ========== */
.input-area {
    background:white; border-radius:20px; padding:14px 22px; margin-bottom:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
.input-top-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.top-right-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ========== 视图模式选择器 ========== */
.view-mode-selector { display:flex; gap:3px; background:#f0edf5; border-radius:50px; padding:3px; }
.view-btn {
    padding:6px 12px; border:none; border-radius:50px; cursor:pointer; font-size:0.85em;
    font-weight:bold; background:transparent; color:#888; transition:all 0.3s ease;
}
.view-btn.active { background:white; color:#764ba2; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

/* ========== 动画控制 ========== */
.anim-controls { display:flex; align-items:center; gap:5px; }
.auto-toggle-label { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
.auto-toggle-label input { display:none; }
.toggle-track { width:36px; height:20px; background:#ccc; border-radius:10px; position:relative; transition:background 0.3s; }
.auto-toggle-label input:checked+.toggle-track { background:#26de81; }
.toggle-thumb {
    width:16px; height:16px; background:white; border-radius:50%; position:absolute; top:2px; left:2px;
    transition:left 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.auto-toggle-label input:checked+.toggle-track .toggle-thumb { left:18px; }
.toggle-text { font-size:0.8em; font-weight:bold; color:#666; }
.anim-btn { padding:5px 10px; border:none; border-radius:50px; cursor:pointer; font-size:0.8em; font-weight:bold; transition:all 0.3s ease; }
.play-btn { background:#26de81; color:white; }
.play-btn:hover { background:#20bf6b; transform:scale(1.05); }
.replay-btn { background:#45aaf2; color:white; }
.replay-btn:hover { background:#2d98da; transform:scale(1.05); }
.play-btn.hidden { opacity:0.4; pointer-events:none; }

/* ========== 颜色/数字切换 ========== */
.color-toggle, .number-toggle {
    padding:6px 12px; border:2px solid #ddd; border-radius:50px; cursor:pointer;
    font-size:0.85em; background:white; color:#555; transition:all 0.3s ease; font-weight:bold;
}
.color-toggle:hover, .number-toggle:hover { border-color:#764ba2; color:#764ba2; }
.color-toggle.no-color, .number-toggle.off { border-color:#bbb; color:#999; }

/* ========== 数字输入 ========== */
.number-inputs { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.input-group { text-align:center; }
.input-group label { display:block; font-size:0.85em; color:#666; margin-bottom:4px; font-weight:bold; transition:color 0.3s; }
.input-group.swapped label { color:#f0a500; }
.number-control { display:flex; align-items:center; gap:8px; }
.number-display { font-size:1.9em; font-weight:bold; color:#333; min-width:50px; text-align:center; user-select:none; }
.num-btn {
    width:32px; height:32px; border-radius:50%; border:none; font-size:1.2em; cursor:pointer;
    background:#764ba2; color:white; transition:all 0.2s; display:flex; align-items:center; justify-content:center; font-weight:bold; line-height:1;
}
.num-btn:hover { background:#5a3a80; transform:scale(1.1); }
.num-btn:active { transform:scale(0.95); }
.operator-symbol { font-size:1.9em; font-weight:bold; color:#764ba2; }
.equals-symbol { font-size:1.9em; font-weight:bold; color:#764ba2; }
.result-box { background:linear-gradient(135deg,#667eea,#764ba2); border-radius:16px; padding:5px 18px; min-width:65px; text-align:center; }
.result-number { font-size:1.9em; font-weight:bold; color:white; }

/* ========== 可视化区域 ========== */
.visualization-area {
    display:flex; align-items:flex-start; justify-content:center; gap:12px; margin-bottom:12px;
    flex-wrap:wrap; transition:all 0.4s ease; min-height:60px;
}
.visualization-area.compare-layout { gap:8px; }
.visualization-area.story-layout { flex-direction:column; align-items:center; }

/* ========== 方块模式 ========== */
.viz-section {
    background:white; border-radius:18px; padding:12px; min-width:130px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1); text-align:center; flex:1; max-width:280px; transition:all 0.5s ease;
}
.viz-section h3 { margin-bottom:8px; font-size:0.95em; color:#555; }
.result-section { border:3px solid #ffd700; }
.result-section h3 { color:#f0a500; }
.viz-operator {
    font-size:1.8em; font-weight:bold; color:white; align-self:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.3); min-width:28px; text-align:center;
}
.blocks-container { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:4px; min-height:44px; }

.block {
    width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-weight:bold; font-size:1em; color:white; box-shadow:0 3px 8px rgba(0,0,0,0.15); transition:all 0.3s ease;
}
.block.no-number { font-size:0; }
.block.animating { animation:popIn 0.4s ease-out; }
.block.color1 { background:#ff6b6b; }
.block.color2 { background:#45aaf2; }
.block.color3 { background:#26de81; }
.block.color4 { background:#ffa502; }
.block.color5 { background:#a55eea; }
.block.color6 { background:#fc5c65; }
.block.color7 { background:#fed330; }
.block.color8 { background:#2bcbba; }
.block.color-result { background:linear-gradient(135deg,#f093fb,#f5576c); }
.block.no-color { background:#8e8e8e; color:white; }
.block.no-color-soft { background:#b0b0b0; color:#444; }
.block.small { width:26px; height:26px; font-size:0.7em; border-radius:8px; }
.block.tiny { width:19px; height:19px; font-size:0.55em; border-radius:5px; }

/* ========== 对比模式 ========== */
.compare-panel {
    background:white; border-radius:18px; padding:12px; box-shadow:0 8px 32px rgba(0,0,0,0.1);
    text-align:center; flex:1; min-width:220px; max-width:400px;
}
.compare-panel h3 { margin-bottom:8px; font-size:1.05em; color:#555; }
.compare-blocks { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; padding:4px; min-height:44px; }
.compare-equal {
    font-size:2.2em; font-weight:bold; color:white; align-self:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.3); animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
.compare-explanation { text-align:center; width:100%; color:white; font-size:1.05em; padding:2px; font-weight:bold; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
.compare-result { font-size:1em; color:#888; margin-bottom:6px; }

/* array-cell must have color rules too */
.array-grid { display:inline-grid; gap:3px; justify-content:center; }
.array-cell {
    width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-weight:bold; font-size:0.7em; color:white; box-shadow:0 2px 5px rgba(0,0,0,0.12);
}
.array-cell.no-number { font-size:0; }
.array-cell.animating { animation:popIn 0.3s ease-out; }
.array-cell.color1 { background:#ff6b6b; }
.array-cell.color2 { background:#45aaf2; }
.array-cell.color3 { background:#26de81; }
.array-cell.color4 { background:#ffa502; }
.array-cell.color5 { background:#a55eea; }
.array-cell.color6 { background:#fc5c65; }
.array-cell.color7 { background:#fed330; }
.array-cell.color8 { background:#2bcbba; }
.array-cell.no-color { background:#888; }
.array-cell.no-color-soft { background:#b0b0b0; color:#444; }

/* ========== 故事模式 ========== */
.story-scene {
    background:white; border-radius:18px; padding:14px; box-shadow:0 8px 32px rgba(0,0,0,0.1); width:100%; max-width:800px;
}
.story-scene h3 { text-align:center; margin-bottom:12px; font-size:1.05em; color:#764ba2; }
.story-characters { display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; }
.story-character {
    text-align:center; background:#f8f6fc; border-radius:14px; padding:12px 14px; min-width:110px;
    transition:all 0.5s ease; position:relative; flex-shrink:0;
}
.story-character .char-emoji { font-size:2.3em; display:block; margin-bottom:2px; }
.story-character .char-name { font-size:0.75em; color:#888; margin-bottom:4px; font-weight:bold; }
.story-character .char-items { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; min-height:28px; }
.story-character .char-item { font-size:1.3em; transition:all 0.5s ease; }
.story-character .char-item.animating { animation:popIn 0.3s ease-out; }
.story-character .char-count { font-size:0.95em; font-weight:bold; color:#764ba2; margin-top:4px; }
.story-arrow { display:flex; align-items:center; font-size:2em; color:#764ba2; align-self:center; }
.story-arrow.bouncing { animation:bounceRight 0.6s ease-in-out infinite; }
.story-arrow.minus { color:#ffa502; }
@keyframes bounceRight { 0%,100%{transform:translateX(0);} 50%{transform:translateX(8px);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.story-character.receiver { border:3px solid #ffd700; background:#fffef5; }
.story-character.giver { border:2px dashed #ff6b6b; }
.story-character.taker { border:2px dashed #ffa502; }
.story-transfer-animation { position:absolute; font-size:1.2em; pointer-events:none; z-index:10; animation:flyToTarget 0.8s ease-in forwards; }
@keyframes flyToTarget { 0%{transform:translate(0,0) scale(1);opacity:1;} 100%{transform:translate(var(--fly-x),var(--fly-y)) scale(0.4);opacity:0;} }
.story-character .char-item.removed { text-decoration:line-through; opacity:0.3; }

/* ========== 关系模式 ========== */
.relation-container {
    background:white; border-radius:18px; padding:18px; box-shadow:0 8px 32px rgba(0,0,0,0.1); width:100%; max-width:800px; text-align:center;
}
.relation-container h3 { font-size:1.1em; color:#764ba2; margin-bottom:12px; }
.relation-formula { font-size:1.4em; font-weight:bold; color:#764ba2; margin-bottom:10px; }
.relation-formula .hl-add { color:#ff6b6b; }
.relation-formula .hl-mul { color:#26de81; }
.relation-arrow { font-size:1.8em; color:#f0a500; margin:0 8px; }
.relation-add-row {
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:8px; padding:8px;
    background:#fff5f5; border-radius:12px; min-height:50px; align-items:center;
}
.relation-add-row .block { opacity:0.85; }
.relation-plus { font-size:1.3em; font-weight:bold; color:#888; margin:0 2px; }
.relation-mul-row {
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px;
    background:#f0fff4; border-radius:12px; margin-bottom:8px;
}
.relation-mul-group {
    display:flex; gap:3px; padding:4px; border:2px dashed #26de81; border-radius:8px;
}
.relation-mul-group .block { opacity:0.85; }

/* ========== 动画 ========== */
@keyframes popIn { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.2);} 100%{transform:scale(1);opacity:1;} }
@keyframes flyAway { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(0) translateY(-40px);opacity:0;} }
.block.removing { animation:flyAway 0.4s ease-in forwards; }

/* ========== 解释 ========== */
.explanation-box {
    background:rgba(255,255,255,0.9); border-radius:16px; padding:12px 20px; margin-bottom:12px;
    text-align:center; font-size:1.1em; color:#333; box-shadow:0 4px 16px rgba(0,0,0,0.1);
}

/* ========== 数轴 ========== */
.number-line-container {
    background:white; border-radius:18px; padding:14px 18px; box-shadow:0 8px 32px rgba(0,0,0,0.1); margin-bottom:12px;
}
.nl-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.nl-header h3 { font-size:1em; color:#555; }
.nl-range-controls { display:flex; gap:3px; background:#f0edf5; border-radius:50px; padding:2px; }
.nl-range-btn {
    padding:4px 8px; border:none; border-radius:50px; cursor:pointer; font-size:0.7em;
    font-weight:bold; background:transparent; color:#888; transition:all 0.2s ease;
}
.nl-range-btn.active { background:white; color:#764ba2; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.number-line { display:flex; align-items:flex-end; gap:0; overflow-x:auto; padding:6px 0; }
.number-line-tick { display:flex; flex-direction:column; align-items:center; min-width:28px; position:relative; flex-shrink:0; }
.number-line-tick::before { content:''; width:2px; height:10px; background:#ccc; margin-bottom:2px; }
.number-line-tick.major::before { height:14px; background:#999; }
.number-line-tick.zero::before { height:18px; background:#333; width:3px; }
.number-line-tick span { font-size:0.65em; color:#888; font-weight:bold; }
.number-line-tick.major span { color:#555; font-size:0.7em; }
.number-line-tick.zero span { color:#333; font-size:0.75em; }
.number-line-tick.highlight::before { background:#764ba2; height:14px; }
.number-line-tick.highlight span { color:#764ba2; font-size:0.75em; }
.number-line-tick.start::before { background:#ff6b6b; height:18px; width:3px; }
.number-line-tick.start span { color:#ff6b6b; font-size:0.85em; font-weight:bold; }
.number-line-tick.end::before { background:#26de81; height:18px; width:3px; }
.number-line-tick.end span { color:#26de81; font-size:0.85em; font-weight:bold; }

/* ========== 笛卡尔坐标系 ========== */
.cartesian-container { background:white; border-radius:18px; padding:14px 18px; box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.cart-header h3 { font-size:1em; color:#555; }
.cart-info { font-size:0.85em; font-weight:bold; color:#764ba2; background:#f0edf5; padding:3px 10px; border-radius:50px; }
.cartesian-grid-wrapper { display:flex; justify-content:center; overflow:auto; }
.cartesian-grid-wrapper canvas { max-width:100%; height:auto; border-radius:6px; }

/* ========== 响应式 ========== */
@media (max-width:700px) {
    header h1 { font-size:1.4em; }
    .mode-btn { padding:7px 12px; font-size:0.85em; }
    .number-display { font-size:1.4em; min-width:38px; }
    .operator-symbol,.equals-symbol { font-size:1.4em; }
    .result-number { font-size:1.4em; }
    .viz-section { min-width:100px; }
    .story-characters { flex-direction:column; align-items:center; }
    .compare-equal { font-size:1.6em; }
    .number-line-tick { min-width:22px; }
}