/* Compact lab workbench: fit the panels, keep text at its native size. */
.mcu-project-tabs, .mcu-compact-code-title { display: none; }
@media (min-width: 901px) and (max-width: 1799px) {
    html:not(.phone-view) { height: 100%; overflow: hidden; }
    body:has(.main-layout), body:has(.main-container) {
        height: 100dvh; min-height: 0; display: flex; flex-direction: column;
        padding: 4px; overflow: hidden; color: #17253d;
        font: 14px/1.45 "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
    }
    .container:has(> .main-layout) {
        flex: 1; min-height: 0; height: 100%; padding: 8px;
        overflow: hidden; border-radius: 8px;
    }
    .top-banner {
        flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto; gap: 4px 8px; padding: 6px 8px; margin: 0;
    }
    .top-banner-title {
        grid-column: 1 / -1; grid-row: 1; position: static; transform: none;
        width: auto; font-size: 18px; line-height: 22px; text-align: left; white-space: normal;
    }
    .top-banner-left {
        grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap;
        align-items: center; gap: 4px; min-width: 0; font-size: 12px;
    }
    .top-banner-left button {
        margin-left: 0 !important; padding: 4px 7px !important;
        min-height: 26px; font-size: 12px !important; white-space: nowrap;
    }
    .top-banner-right { grid-column: 2; grid-row: 2; font-size: 12px; }
    .top-banner-right .experiment-counter { padding: 4px 8px; }
    .na-panel { flex: none; display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 6px; }
    .na-title { margin: 0; font-size: 12px; line-height: 18px; color: #24314b; }
    .na-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px 4px; height: auto; padding: 0; min-width: 0; }
    .na-item { display: flex; justify-content: center; align-items: center; gap: 2px; min-width: 0; min-height: 20px; }
    .na-led { width: 10px; height: 10px; flex: 0 0 10px; }
    .na-num { font-size: 12px; line-height: 18px; color: #24314b; }
    .na-radio { width: 11px; height: 11px; flex: 0 0 11px; margin: 0; }
    .main-layout {
        display: grid; grid-template-columns: minmax(300px, 32fr) minmax(230px, 25fr) minmax(0, 43fr);
        grid-template-areas: "hardware assistance code"; grid-template-rows: minmax(0, 1fr);
        flex: 1; min-height: 0; height: auto; max-height: none; align-items: stretch;
        overflow: hidden; gap: 6px; margin-top: 5px;
    }
    .main-left, .main-right, .main-third { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; height: 100%; overflow: hidden; gap: 6px; }
    .main-left { grid-area: hardware; }
    .main-right { grid-area: assistance; }
    .main-third { grid-area: code; }
    .container, .main-layout .board-panel, .main-layout .led-panel, .na-info-panel, .chat-panel, .learning-analysis-panel, .experiment-group {
        transform: none; text-shadow: none;
    }
    .na-info-title, .chat-title, .learning-analysis-title, .experiment-item, .experiment-group > label {
        color: #17253d; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
    }
    .main-layout .board-panel { flex: 0 0 auto; height: clamp(256px, 51vh, 320px); min-height: 0; padding: 4px; overflow: hidden; border-radius: 8px; }
    .main-layout .board-components, .main-layout .board-grid::before, .main-layout .board-grid::after { display: none; }
    .main-layout .board-grid { display: grid; height: 100%; min-width: 0; min-height: 0; padding: 2px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); gap: 4px; }
    .main-layout .board-left, .main-layout .board-right, .main-layout .board-bottom-left, .main-layout .board-bottom-right { min-width: 0; min-height: 0; }
    .main-layout .board-left { gap: 0; }
    .main-layout .board-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .main-layout .board-bottom-left, .main-layout .board-bottom-right { display: flex; flex-direction: column; gap: 4px; }
    .main-layout .led-panel { padding: 2px; height: 48px; box-shadow: none; border: 0; }
    .main-layout .led-title, .main-layout .segment-title, .main-layout .keypad-title, .main-layout .ultrasonic-title, .main-layout .dotmatrix-title, .main-layout .buzzer-title, .main-layout .stepper-title, .main-layout .board-label {
        font: 500 12px/16px "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: #24314b; margin: 0 0 2px;
    }
    .main-layout .led-row { width: 100%; height: 24px; padding: 0; gap: 5px; justify-content: space-around; }
    .main-layout .led { flex: 0 0 24px; width: 24px; height: 24px; border-width: 2px; }
    .main-layout .segment-panel, .main-layout .keypad-panel, .main-layout .ultrasonic-panel, .main-layout .dotmatrix-panel, .main-layout .buzzer-panel, .main-layout .stepper-panel { display: flex; flex-direction: column; align-items: center; flex: none; min-height: 0; margin: 0 !important; }
    .main-layout .board-grid .panel-divider { display: none; }
    .main-layout .segment-display, .main-layout .keypad-grid, .main-layout .ultrasonic-module, .main-layout .dotmatrix-display, .main-layout .buzzer-display, .main-layout .stepper-display { flex-shrink: 0; vertical-align: top; }
    .main-layout .segment-display { max-width: 100%; padding: 4px; gap: 3px; border-width: 2px; border-radius: 6px; }
    .main-layout .segment-digit { width: 22px; height: 32px; font-size: 22px; line-height: 32px; }
    .main-layout .keypad-grid { padding: 4px; gap: 3px; grid-template-columns: repeat(4, 25px); grid-template-rows: repeat(2, 24px); border-width: 2px; border-radius: 8px; }
    .main-layout .keypad-key { width: 25px; height: 24px; font-size: 14px; }
    .main-layout .ultrasonic-module { transform: scale(.65); transform-origin: center; margin: -12px -25px -18px; }
    .main-layout .dotmatrix-display { padding: 4px; border-width: 2px; border-radius: 6px; }
    .main-layout .dotmatrix-grid { gap: 2px; }
    .main-layout .dotmatrix-dot { width: 7px; height: 7px; }
    .main-layout .buzzer-display, .main-layout .stepper-display { min-height: 0; max-width: 100%; width: 100%; padding: 2px; gap: 3px; flex-wrap: nowrap; justify-content: center; }
    .main-layout .buzzer-display { height: 44px; }
    .main-layout .buzzer-indicator { width: 80px; height: 80px; flex: 0 0 80px; transform: scale(.45); margin: -22px; }
    .main-layout .buzzer-label { min-width: 22px; font-size: 12px; padding: 2px; }
    .main-layout .stepper-display { height: 64px; }
    .main-layout .stepper-indicator { width: 142px; height: 110px; flex: 0 0 142px; transform: scale(.45); margin: -30.25px -39.05px; }
    .main-layout .stepper-label { min-width: 0; font-size: 12px; padding: 2px; }
    .main-left #sendForm { flex: 1; display: flex; flex-direction: column; min-height: 0; max-height: none; overflow: hidden; padding: 0; gap: 4px; }
    .mcu-project-tabs { flex: none; display: flex; gap: 4px; }
    .mcu-project-tab { flex: 1; min-width: 0; min-height: 30px; padding: 3px; border: 1px solid #c9c7e9; border-radius: 5px; color: #26334b; background: #f5f4fc; font: 13px/20px "Microsoft YaHei", Arial, sans-serif; cursor: pointer; }
    .mcu-project-tab[aria-selected="true"] { background: #534ab7; border-color: #534ab7; color: #fff; font-weight: 700; }
    .mcu-project-tab:focus-visible { outline: 2px solid #1a5eaf; outline-offset: 1px; }
    .main-left .mcu-project-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; }
    .main-left .mcu-project-inactive { display: none; }
    .mcu-project-panel > label:first-child { display: none; }
    .experiment-options { display: grid; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; padding-right: 3px; }
    .mcu-project-panel:not(.mcu-project-panel--free) .experiment-options { grid-template-columns: minmax(0, 1fr); }
    .experiment-options > div { min-width: 0; }
    .experiment-item { min-height: 27px; font-size: 14px; line-height: 20px; gap: 4px; }
    .experiment-options .experiment-item { margin: 0; }
    .experiment-item input[type="radio"] { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; }
    .main-left .form-group:last-child { flex: none; position: static; padding: 0; margin: 0; box-shadow: none; }
    .main-left .form-group:has(#statusMsg:empty):has(#fileInfo:empty) { display: none; }
    .learning-analysis-panel { flex: 1; height: 100% !important; min-height: 0; padding: 8px; margin: 0; overflow: hidden; }
    .learning-analysis-title { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; margin-bottom: 5px; }
    .learning-analysis-title-main { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 4px; }
    .mcu-long-code-title { display: none; }
    .mcu-compact-code-title { display: inline; font-weight: 700; }
    .learning-analysis-history-actions { display: inline-flex; align-items: center; }
    .code-font-size-controls { margin-left: 0; }
    .code-font-size-btn { min-height: 25px; padding: 3px 5px; font-size: 12px; }
    .learning-analysis-title a { font-size: 12px !important; margin-left: 0 !important; }
    .code-merged-box { flex: 1 1 0; min-height: 0; margin-bottom: 4px; }
    .code-editor-wrap { min-height: 0; font-size: 15px; line-height: 1.5; }
    .code-gutter, .code-highlight, .code-input { font-family: Consolas, "Cascadia Code", "Microsoft YaHei", monospace; font-size: inherit; line-height: 1.5; }
    .code-gutter { min-width: 30px; width: 30px; padding: 6px 3px; }
    .code-highlight, .code-input { padding: 6px; }
    .code-input::placeholder { color: #43516b; opacity: 1; }
    .code-editor-actions { flex: none; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
    .code-primary-actions, .code-learning-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; margin-left: 0; justify-content: flex-start; }
    .code-primary-actions { flex-basis: 100%; }
    .code-learning-actions { flex-basis: 100%; }
    .code-btn, .learning-analysis-btn { min-height: 30px; padding: 4px 8px; font-size: 13px; }
    .na-info-panel { flex: 0 0 31%; min-height: 140px; max-height: 200px; height: auto; padding: 7px; overflow: hidden; }
    .na-info-header, .na-info-title { display: flex; flex-wrap: wrap; gap: 3px; }
    .na-info-title, .chat-title { font-size: 14px; line-height: 20px; }
    .debug-btns { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 0; }
    .debug-btn { min-width: 19px; min-height: 22px; padding: 1px 3px; font-size: 12px; }
    .na-info-desc { font-size: 14px; line-height: 20px; }
    .na-result-content { min-height: 0; padding: 5px; gap: 5px; }
    .na-info-body { min-height: 0; max-height: none; overflow-y: auto; font-size: 14px; line-height: 1.5; color: #17253d; }
    .na-score-box { flex: 0 0 45px; height: auto; padding: 4px; gap: 3px; box-shadow: none; border-radius: 5px; }
    .na-score-value { font: 30px/1 Consolas, monospace; color: #40368b; text-shadow: none; }
    .chat-panel { flex: 1; min-height: 0; height: auto; padding: 7px; overflow: hidden; }
    .chat-messages { flex: 1; height: auto; min-height: 0 !important; max-height: none; padding: 7px; overflow-y: auto; font-size: 14px; line-height: 1.5; color: #17253d; }
    .chat-message { font-size: 14px; line-height: 1.5; color: #17253d; }
    .chat-input-row { flex: none; min-height: 46px; gap: 5px; }
    .chat-input { min-height: 46px; max-height: 88px; padding: 5px; font-size: 14px; line-height: 1.5; }
    .chat-send-btn { min-height: 36px; padding: 5px 8px; font-size: 13px; }
    .ai-report-panel { min-height: 0; }
    #guestTrialTip { display: none !important; }
    /* Simple edition uses the same fixed workbench and native text sizes. */
    .upgrade-banner { flex: none; min-height: 0; padding: 4px 8px; font-size: 12px; gap: 8px; }
    .upgrade-banner a { padding: 3px 8px; }
    .top-nav { flex: none; flex-wrap: wrap; padding: 6px 8px; gap: 6px; }
    .nav-logo { font-size: 18px; }
    .nav-stats { gap: 6px; flex-wrap: wrap; }
    .stat-item { padding: 4px 7px; }
    .nav-btn { padding: 5px 10px; font-size: 13px; }
    .main-container { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 6px 0 0; gap: 6px; overflow: hidden; grid-template-columns: minmax(210px, 25fr) minmax(0, 47fr) minmax(230px, 28fr); }
    .exp-sidebar, .ai-sidebar { display: flex; min-width: 0; min-height: 0; height: 100%; overflow-y: auto; }
    .hardware-panel { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; }
    .main-container .card { transform: none; transform-style: flat; border-width: 1px; border-radius: 7px; box-shadow: none; flex-shrink: 0; }
    .main-container .card-header { padding: 7px; font-size: 14px; }
    .main-container .card-body { min-width: 0; padding: 7px; }
    .exp-item { padding: 6px; gap: 5px; }
    .exp-item-name { font-size: 14px; }
    .exp-item-desc { font-size: 12px; }
    .hardware-panel .device-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
    .hardware-panel .card:last-child .card-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; align-content: start; }
    .hardware-panel .card-body > * { min-width: 0; max-width: 100%; }
    .hardware-panel .led-row { flex-wrap: wrap; justify-content: center; gap: 6px; height: auto; padding: 8px; }
    .hardware-panel > .card:nth-child(2) > .card-body { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; flex: none !important; height: auto; }
    .hardware-panel > .card:nth-child(2) > div[style*="display:flex"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hardware-panel #keysPanel, .hardware-panel #scorePanel { grid-column: 1 / -1; }
    .hardware-panel .keys-row { justify-content: center; flex-wrap: wrap; }
    .hardware-panel .led-panel, .hardware-panel .segment-panel, .hardware-panel .keys-panel, .hardware-panel .serial-panel, .hardware-panel .matrix-panel, .hardware-panel .buzzer-panel, .hardware-panel .stepper-panel { transform: none; }
    .hardware-panel .stepper-display { max-width: 100%; flex-wrap: wrap; padding: 6px; }
}

/* At 1024px, six hardware modules use two rows so all nine free projects fit. */
@media (min-width: 901px) and (max-width: 1100px) {
    .main-layout .board-panel { height: 260px; }
    .main-layout .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
    .main-layout .board-left { grid-column: 1 / -1; grid-row: 1; }
    .main-layout .board-right, .main-layout .board-bottom-left, .main-layout .board-bottom-right { display: contents; }
    .main-layout .segment-panel { grid-column: 1; grid-row: 2; }
    .main-layout .keypad-panel { grid-column: 2; grid-row: 2; }
    .main-layout .ultrasonic-panel { grid-column: 3; grid-row: 2; }
    .main-layout .dotmatrix-panel { grid-column: 1; grid-row: 3; }
    .main-layout .buzzer-panel { grid-column: 2; grid-row: 3; }
    .main-layout .stepper-panel { grid-column: 3; grid-row: 3; }
    .main-layout .segment-title { font-size: 12px; line-height: 16px; }
    .main-layout .segment-display { padding: 3px; gap: 2px; }
    .main-layout .segment-digit { width: 18px; height: 30px; font-size: 21px; }
    .main-layout .keypad-grid { grid-template-columns: repeat(4, 20px); grid-template-rows: repeat(2, 24px); padding: 2px; gap: 2px; }
    .main-layout .keypad-key { width: 20px; height: 24px; }
    .main-layout .ultrasonic-module { transform: scale(.46); margin: -18px -55px -25px; }
    .main-layout .stepper-indicator { transform: scale(.42); margin: -31.9px -41.18px; }
    .main-layout .stepper-label { font-size: 11px; padding: 1px; }
}