/* ===== 具象化食物教具舞台与平板分屏布局 (Tablet Split Layout) ===== */

  /* 学习模式专属全宽沉浸布局：在学习时隐藏常驻的右侧340px宠物栏，把整个屏幕空间还给探索舞台与对话 */
  .app-shell.learn-mode-active .desktop-pet-card{
    display: none !important;
  }
  .app-shell.learn-mode-active #page-learn{
    padding: 14px max(16px, calc((100% - 1240px) / 2)) 28px;
  }
  @media (max-width: 940px) {
    .app-shell.learn-mode-active #page-learn{
      padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(var(--mobile-tabbar-total-height) + 20px) max(16px, env(safe-area-inset-left, 0px));
    }
  }

  .learn-split-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 6px;
    align-items: start;
  }
  @media (min-width: 941px) {
    .app-shell.learn-mode-active #page-learn{
      display: flex !important;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding: 14px max(16px, calc((100% - 1240px) / 2)) 16px;
    }
    .learn-split-layout{
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(340px, 1fr) minmax(410px, 1.22fr);
      gap: 20px;
      align-items: stretch;
      overflow: hidden;
    }
    .learn-dialog-col{
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .learn-stage-col{
      height: 100%;
      min-height: 0;
      position: static;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #CCAFA0 rgba(0, 0, 0, 0.04);
      padding-right: 4px;
    }
    .learn-stage-col::-webkit-scrollbar{
      width: 7px;
    }
    .learn-stage-col::-webkit-scrollbar-thumb{
      background: #CCAFA0;
      border-radius: 999px;
    }
    .learn-stage-col::-webkit-scrollbar-thumb:hover{
      background: #B49583;
    }
    .learn-stage-col::-webkit-scrollbar-track{
      background: rgba(0, 0, 0, 0.03);
      border-radius: 999px;
    }
  }
  @media (min-width: 800px) and (max-width: 940px) {
    .app-shell.learn-mode-active #page-learn{
      display: flex !important;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(var(--mobile-tabbar-total-height) + 14px) max(14px, env(safe-area-inset-left, 0px));
    }
    .learn-split-layout{
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(340px, 1fr) minmax(410px, 1.22fr);
      gap: 16px;
      align-items: stretch;
      overflow: hidden;
    }
    .learn-dialog-col{
      height: 100%;
      min-height: 0;
      overflow: hidden;
      padding-bottom: 0;
    }
    .learn-stage-col{
      height: 100%;
      min-height: 0;
      overflow-y: auto;
    }
  }
  @media (min-width: 800px) and (max-width: 940px) and (max-height: 720px) {
    .learn-dialog-col .learn-companion-bar,
    .learn-dialog-col .chat-toolbar,
    .learn-dialog-col .scaffold-wrap,
    .learn-dialog-col .voice-wave-panel{
      display: none !important;
    }
    .learn-dialog-col .chat-chips{
      flex-shrink: 0;
      margin-bottom: 2px;
      padding-bottom: 2px;
    }
    .learn-dialog-col .answer-compose{
      flex-shrink: 0;
      padding-top: 4px;
      padding-bottom: 4px;
    }
  }
  @media (min-width: 800px) and (max-width: 940px) and (max-height: 720px) {
    .app-shell.learn-mode-active .mastery-header-card{
      padding: 6px 10px;
      margin-bottom: 4px;
    }
    .app-shell.learn-mode-active .mastery-row{
      flex-wrap: nowrap;
    }
    .app-shell.learn-mode-active .mastery-meta-row,
    .app-shell.learn-mode-active .quest-step-track{
      display: none;
    }
    .app-shell.learn-mode-active .learn-unit-title{
      font-size: 16px;
    }
  }
  @media (max-width: 799px) {
    .learn-split-layout{
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .learn-stage-col{
      order: 2;
      position: static;
    }
    .learn-dialog-col{
      order: 1;
      margin-bottom: 20px;
    }
  }

  .learn-dialog-col{
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .learn-stage-col{
    min-width: 0;
  }
  @media (min-width: 800px) {
    .learn-stage-col{
      position: static;
    }
  }

  .food-stage-card{
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF9 100%);
    border-radius: 24px;
    padding: 16px 18px;
    box-shadow: 0 8px 28px rgba(184, 66, 18, 0.06), 0 2px 8px rgba(61, 50, 41, 0.03);
    border: 1.5px solid #FFDFCA;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }

  .stage-top-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1.5px dashed #F2E3D5;
    padding-bottom: 10px;
  }
  .stage-title{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 850;
    color: var(--ink);
  }
  .stage-title-badge{
    font-size: 11px;
    font-weight: 850;
    background: linear-gradient(135deg, #FF7A45, #FA541C);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px rgba(250, 84, 28, 0.22);
  }
  .stage-tool-tabs{
    display: flex;
    background: #F7EDE1;
    padding: 3px;
    border-radius: 999px;
    gap: 2px;
  }
  .stage-tool-tab{
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink-light);
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
  }
  .stage-tool-tab.active{
    background: #FFFFFF;
    color: var(--orange);
    box-shadow: 0 2px 8px rgba(61,50,41,.12);
  }

  /* 披萨盘与 SVG 画布 */
  .pizza-viewport{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2px 0;
  }
  .plate-container{
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #FFFFFF 0%, #F8F1E7 65%, #E8DCBE 100%);
    box-shadow: 0 10px 24px rgba(61,50,41,.12), inset 0 2px 6px rgba(255,255,255,.9), inset 0 -4px 10px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    touch-action: manipulation;
  }
  .plate-rim{
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.5px dashed #D6C7B2;
    pointer-events: none;
  }
  .pizza-svg{
    width: 230px;
    height: 230px;
    overflow: visible;
    cursor: pointer;
  }
  .pizza-slice-path{
    fill: #FFB84D;
    stroke: #8B4513;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: transform .25s cubic-bezier(.16,1,.3,1), fill .2s ease, filter .2s ease;
    transform-origin: 121px 121px;
    cursor: pointer;
  }
  .pizza-slice-path:hover{
    filter: drop-shadow(0 4px 10px rgba(184,66,18,0.35));
  }
  .pizza-slice-path.selected{
    fill: #FFA126;
    stroke: #B84212;
    stroke-width: 3.5;
    filter: drop-shadow(0 6px 14px rgba(184,66,18,0.45));
  }
  .pizza-crust{
    stroke: #C97D2C;
    stroke-width: 9;
    stroke-linecap: round;
    fill: none;
  }
  .topping-dot{
    pointer-events: none;
  }

  /* 控制按钮行 */
  .stage-controls-bar{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #FFF9F3;
    border-radius: 16px;
    padding: 10px 12px;
    border: 1px solid #FFE7D6;
  }
  .control-group{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .control-label{
    font-size: 12.5px;
    font-weight: 850;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .control-btn-pills{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ctrl-pill{
    border: 1.5px solid #FFD4BC;
    background: #FFFFFF;
    color: #943309;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    min-height: 44px;
    box-shadow: 0 2px 6px rgba(184, 66, 18, 0.05);
  }
  .ctrl-pill:hover{
    background: #FFE8D6;
    border-color: var(--orange);
    transform: translateY(-1px);
  }
  .ctrl-pill.active{
    background: linear-gradient(135deg, #FF7A45 0%, #FA541C 100%);
    color: #FFFFFF;
    border-color: #FA541C;
    box-shadow: 0 3px 10px rgba(250,84,28,.35);
  }
  .ctrl-pill.unfair{
    border-color: #FFA39E;
    color: #CF1322;
  }
  .ctrl-pill.unfair.active{
    background: #CF1322;
    color: #FFFFFF;
    border-color: #CF1322;
    box-shadow: 0 3px 8px rgba(207,19,34,.3);
  }

  /* 🌟 紧凑一体化分数卡片与动手表达栏 */
  .fraction-board{
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FFF8F1 0%, #FFF0E2 100%);
    border-radius: 16px;
    padding: 10px 14px;
    border: 1.5px solid #FFDAC0;
    box-shadow: 0 3px 10px rgba(184, 66, 18, 0.05);
  }
  .frac-badge-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 4px 12px;
    box-shadow: 0 4px 10px rgba(184,66,18,0.12);
    border: 1.5px solid #FFA366;
    min-width: 52px;
  }
  .frac-num{
    font-size: 17px;
    font-weight: 900;
    color: #B84212;
    line-height: 1.1;
  }
  .frac-divider{
    width: 100%;
    height: 2.5px;
    background: #B84212;
    border-radius: 2px;
    margin: 2px 0;
  }
  .frac-deno{
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.1;
  }
  .frac-desc-box{
    flex: 1;
    min-width: 0;
  }
  .frac-desc-title{
    font-size: 13.5px;
    font-weight: 850;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .frac-desc-sub{
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.4;
    font-weight: 600;
  }

  /* 🌟 一键自然语言填入按钮（紧贴教具可视区，所见即所讲） */
  .teach-express-box{
    background: linear-gradient(135deg, #F6FBF2 0%, #EEF9E8 100%);
    border: 1.5px dashed #8CD867;
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(46, 111, 18, 0.05);
  }
  .express-tip{
    font-size: 11px;
    font-weight: 850;
    color: #265B0E;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .express-action-btn{
    background: #FFFFFF;
    border: 1.5px solid #85D65E;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 850;
    color: #237804;
    text-align: left;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 8px rgba(46,111,18,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    min-height: 44px;
  }
  .express-action-btn:hover{
    background: #E8F7DF;
    border-color: #52C41A;
    transform: translateY(-1.5px);
    box-shadow: 0 5px 14px rgba(46,111,18,0.2);
  }
  .express-action-btn:active{
    transform: scale(0.97);
  }

  /* 偏心切警告框 */
  .unfair-alert-banner{
    display: none;
    background: #FFF1F0;
    border: 1.5px solid #FFA39E;
    border-radius: 14px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: #CF1322;
    font-weight: 750;
    line-height: 1.45;
    animation: shake .4s ease;
  }
  @keyframes shake{
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  /* 巧克力组件样式 */
  .choco-board-wrap{
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
  }
  .choco-bar{
    background: #5D331C;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 12px 28px rgba(61,30,10,0.22), inset 0 3px 6px rgba(255,255,255,0.2);
    display: grid;
    gap: 10px;
    user-select: none;
  }
  .choco-chunk{
    width: 60px;
    height: 60px;
    background: #7F4728;
    border-radius: 10px;
    border: 2.5px solid #48230F;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all .2s cubic-bezier(.16,1,.3,1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E2A784;
    font-size: 13px;
    font-weight: 800;
  }
  .choco-chunk:hover{
    transform: scale(1.06);
  }
  .choco-chunk.active{
    background: #E89038;
    border-color: #FFD591;
    color: #FFFFFF;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.6), 0 5px 14px rgba(216,137,57,0.45);
    transform: translateY(-3px) scale(1.04);
  }

  /* ===== 📏 长度、面积与综合算理舞台样式 ===== */
  .interactive-stage-svg{
    width: 100%;
    max-width: 360px;
    height: auto;
    max-height: 220px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 6px 16px rgba(61,50,41,0.06));
    user-select: none;
  }
  .length-ruler-viewport,
  .length-track-viewport,
  .area-grid-viewport,
  .mixed-block-viewport,
  .time-clock-viewport,
  .symmetry-viewport,
  .set-fraction-viewport{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    gap: 8px;
  }

  /* 几何变换专属动效与图层 */
  .sym-half-wing{
    transition: transform 0.65s cubic-bezier(.16,1,.3,1), opacity 0.4s ease;
    transform-origin: 170px 110px;
  }
  .sym-half-wing.folded{
    transform: scaleX(-1);
    opacity: 0.88;
  }
  .sym-rot-group{
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
    transform-origin: 170px 105px;
  }
  .sym-trans-obj{
    transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  }

  /* 离散集合盘子与桃子样式 */
  .peach-basket-group{
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease;
  }
  .peach-basket-group:hover{
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 10px rgba(255, 140, 0, 0.35));
  }
  .peach-basket-group.selected .basket-bg{
    fill: #FFF4E5;
    stroke: #FF7D00;
    stroke-width: 2.5;
    filter: drop-shadow(0 4px 12px rgba(255, 125, 0, 0.3));
  }
  .peach-basket-group.selected .basket-badge{
    fill: #FF7D00;
  }
  .stage-sub-hint{
    font-size: 11.5px;
    color: var(--ink-light);
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
  }
  .dim-badge{
    font-size: 12px;
    font-weight: 800;
    color: var(--orange-dark);
    background: #FFF0E6;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #FFD8BF;
  }
  .concept-card-viewport{
    padding: 16px;
    background: linear-gradient(135deg, #FFFDF8, #FFF5EB);
    border-radius: 16px;
    border: 1.5px dashed #FFD8BF;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .concept-card-header{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
  }
  .concept-keypoint-item{
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }
  .concept-keypoint-item::before{
    content: "⭐";
    font-size: 12px;
  }

  @keyframes pulseGlow{
    0%, 100% { filter: drop-shadow(0 0 4px rgba(245,158,11,0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(245,158,11,0.85)); }
  }
  .pulse-glow{
    animation: pulseGlow 1.8s ease-in-out infinite;
  }

  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }
  @media (max-width:520px){ body{ padding:0; background:var(--cream); } .phone{ max-width:none; height:100%; max-height:none; border:0; border-radius:0; box-shadow:none; } }

/* .food-stage-mobile-rules */
  @media (max-width: 540px) {
    .food-stage-card{
      padding: 16px 14px;
      border-radius: 20px;
    }
    .stage-top-bar{
      flex-wrap: wrap;
      gap: 8px;
    }
    .stage-controls-bar{
      gap: 6px;
    }
  }