/*!
 * tt-theme.css — ชั้นธีม "โทน teacher-timesheet" สำหรับระบบออกข้อสอบบาลี
 * ---------------------------------------------------------------------------
 * ที่มา: ผู้ใช้ต้องการให้เว็บออกข้อสอบใช้สไตล์/โทนสีเดียวกับโปรแกรม
 *        teacher-timesheet (โทนกลาง: D:\teacher-timesheet\src\index.css → @theme)
 *
 * หลักการ (อ่านก่อนแก้)
 *  1) ❌ ห้ามกระทบ "งานพิมพ์" — ทั้งไฟล์ครอบด้วย @media screen
 *     → กฎใน @media print ของหน้าหลักยังชนะเสมอ (กระดาษข้อสอบหน้าตาไม่เปลี่ยน)
 *  2) ❌ ห้ามแตะคลาสกระดาษข้อสอบ: .paper*, .print-*, #printMirrorPaper, .page-marker
 *  3) ⚠️ ห้ามตั้งค่าที่บล็อก responsive ของหน้าหลักกำหนดไว้แล้ว
 *     (margin/radius/shadow ของ .container · padding/font-size/radius ของ .btn
 *      ใน @media (pointer: coarse) · padding ของ .section ในจอเล็ก)
 *     เงาของ .container ให้ใส่เฉพาะ min-width: 1025px
 *  4) ถอยกลับได้ทันที = ลบบรรทัด <link href="./css/tt-theme.css"> (ไม่แก้ไฟล์เดิมเลย)
 *  5) ตรวจออฟไลน์อัตโนมัติ: node verify/offline-check.mjs
 */

:root {
    /* โทนกลาง (คัดจาก teacher-timesheet/src/index.css) */
    --tt-brand-50:  #eff6ff;
    --tt-brand-100: #dbeafe;
    --tt-brand-200: #bfdbfe;
    --tt-brand-300: #93c5fd;
    --tt-brand-600: #2563eb;
    --tt-brand-700: #1d4ed8;

    --tt-gray-50:  #f9fafb;
    --tt-gray-100: #f3f4f6;
    --tt-gray-200: #e5e7eb;
    --tt-gray-300: #d1d5db;
    --tt-gray-400: #9ca3af;
    --tt-gray-500: #6b7280;
    --tt-gray-600: #4b5563;
    --tt-gray-700: #374151;
    --tt-gray-800: #1f2937;

    --tt-emerald-50:  #ecfdf5;
    --tt-emerald-100: #d1fae5;
    --tt-emerald-200: #a7f3d0;
    --tt-emerald-700: #047857;
    --tt-emerald-800: #065f46;

    --tt-amber-50:  #fffbeb;
    --tt-amber-100: #fef3c7;
    --tt-amber-200: #fde68a;
    --tt-amber-300: #fcd34d;
    --tt-amber-700: #b45309;
    --tt-amber-800: #92400e;

    --tt-red-50:  #fef2f2;
    --tt-red-100: #fee2e2;
    --tt-red-200: #fecaca;
    --tt-red-300: #fca5a5;
    --tt-red-700: #b91c1c;

    --tt-canvas: #f3f4f6;
    --tt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media screen {
    /* ── พื้นฐาน ─────────────────────────────────────────────────────────── */
    body {
        background-color: var(--tt-canvas);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .header {
        background: #fff;
        border-bottom-color: var(--tt-gray-100);
    }

    .header h1 {
        color: var(--tt-gray-800);
    }

    label {
        color: var(--tt-gray-600);
    }

    /* ── การ์ด/ส่วนเนื้อหา (เทียบเท่า .ui-card) ─────────────────────────── */
    .section {
        background: #fff;
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
        box-shadow: var(--tt-shadow-card);
    }

    .section h2 {
        color: var(--tt-gray-700);
        border-bottom: 1px solid var(--tt-gray-100);
        font-weight: 700;
    }

    /* ── ช่องกรอก/ตัวเลือก (เทียบเท่า .ui-input / .ui-select) ───────────── */
    select,
    input[type="text"],
    input[type="number"],
    input[type="date"] {
        border: 1px solid var(--tt-gray-300);
        border-radius: 8px;
        background: #fff;
        color: var(--tt-gray-800);
    }

    select:focus,
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus {
        border-color: var(--tt-brand-300);
        outline: none;
        box-shadow: 0 0 0 3px var(--tt-brand-100);
    }

    /* ── ปุ่ม (เทียบเท่า .ui-btn--primary / --secondary) ────────────────── */
    /* ⚠️ ไม่แตะ padding/font-size/border-radius เพราะ @media (pointer: coarse) กำหนดไว้ */
    .btn {
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .btn:focus-visible {
        outline: 2px solid var(--tt-brand-200);
        outline-offset: 2px;
    }

    .btn.primary,
    .primary {
        background: var(--tt-brand-600);
        color: #fff;
    }

    .btn.primary:hover,
    .primary:hover {
        background: var(--tt-brand-700);
    }

    .btn.primary:disabled,
    .primary:disabled {
        background: var(--tt-brand-300);
        cursor: not-allowed;
    }

    .btn.secondary,
    .secondary {
        background: #fff;
        color: var(--tt-gray-700);
        border: 1px solid var(--tt-gray-300);
    }

    .btn.secondary:hover,
    .secondary:hover {
        background: var(--tt-gray-50);
    }

    /* ── ป้าย/ชิป (เทียบเท่า .ui-badge) — ไม่แตะ display/margin ของมือถือ ── */
    .badge {
        background: var(--tt-gray-50);
        border: 1px solid var(--tt-gray-200);
        color: var(--tt-gray-600);
        border-radius: 9999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ── แถบเครื่องมือ ──────────────────────────────────────────────────── */
    .toolbar {
        background: #fff;
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
        box-shadow: var(--tt-shadow-sm);
    }

    .toolbar-group {
        background: var(--tt-gray-50);
        border: 1px solid var(--tt-gray-200);
        border-radius: 8px;
    }

    .tool-btn {
        color: var(--tt-gray-600);
        border-radius: 6px;
    }

    .tool-btn:hover {
        background: var(--tt-gray-100);
        color: var(--tt-gray-800);
    }

    .tool-btn.active {
        background: var(--tt-brand-100);
        color: var(--tt-brand-700);
        font-weight: 700;
    }

    .tool-select {
        color: var(--tt-gray-600);
    }

    .toolbox-head {
        border: 1px solid var(--tt-gray-200);
        color: var(--tt-gray-700);
        box-shadow: var(--tt-shadow-sm);
    }

    .toolbox-head i {
        color: var(--tt-brand-600);
    }

    .tool-row-label,
    .bottom-left .tool-row-label,
    .bottom-left .tool-row-label i,
    .margin-inline-label,
    .margin-inline .unit-label {
        color: var(--tt-gray-500);
    }

    /* ── รายการ/การ์ดย่อย ──────────────────────────────────────────────── */
    .item {
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
        box-shadow: var(--tt-shadow-sm);
    }

    .actions {
        background: var(--tt-gray-50);
        border-top: 1px solid var(--tt-gray-200);
    }

    /* ── ข้อความแจ้งสถานะ ─────────────────────────────────────────────── */
    .draft-status {
        border: 1px solid var(--tt-brand-200);
        background: var(--tt-brand-50);
        color: #1e40af;
        border-radius: 8px;
    }

    .editor-warning {
        border: 1px solid var(--tt-amber-300);
        background: var(--tt-amber-50);
        color: var(--tt-amber-800);
        border-radius: 8px;
        box-shadow: none;
    }

    .internal-note {
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
    }

    .internal-note .title {
        color: var(--tt-gray-700);
    }

    .internal-note .auto {
        background: var(--tt-gray-50);
        border: 1px solid var(--tt-gray-200);
        color: var(--tt-gray-600);
    }

    .internal-note textarea {
        border: 1px solid var(--tt-gray-300);
        border-radius: 8px;
    }

    #editHintPanel {
        border: 1px solid var(--tt-gray-200);
        box-shadow: var(--tt-shadow-card);
    }

    .stats-panel-warning {
        background: var(--tt-amber-50);
        border: 1px solid var(--tt-amber-300);
        border-radius: 12px;
    }

    /* ── ขั้นตอน 1-2-3 (แดง = ต้องกรอก · เขียว = ครบแล้ว) ─────────────── */
    .step-required {
        background-color: #fff !important;
        border: 2px solid var(--tt-red-300) !important;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(185, 28, 28, 0.12) !important;
    }

    .step-completed {
        background-color: #f0fdf4 !important;
        border: 2px solid #6ee7b7 !important;
        border-radius: 12px;
        box-shadow: none !important;
    }

    .step-locked {
        opacity: 0.55;
    }

    /* ── แบนเนอร์ข้อสอบสนามหลวง (เทียบเท่า .ui-alert--warn) ────────────── */
    .sl-match-banner {
        background: var(--tt-amber-50);
        border: 1px solid var(--tt-amber-300);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(180, 83, 9, 0.1);
    }

    .sl-match-head h4 {
        color: var(--tt-amber-700);
    }

    .sl-match-item strong,
    .sl-link {
        color: var(--tt-amber-700);
    }

    .sl-match-sub {
        color: #78350f;
    }

    .sl-match-chip {
        border-radius: 9999px;
        font-weight: 600;
    }

    .sl-match-chip.green {
        background: var(--tt-emerald-100);
        color: var(--tt-emerald-800);
    }

    .sl-match-chip.blue {
        background: var(--tt-brand-100);
        color: #1e40af;
    }

    .sl-match-chip.purple {
        background: #ede9fe;
        color: #5b21b6;
    }

    /* ── โมดัล ─────────────────────────────────────────────────────────── */
    .modal-overlay {
        background: rgba(17, 24, 39, 0.5);
    }

    .modal-content {
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    }

    .modal-header {
        border-bottom: 1px solid var(--tt-gray-100);
    }

    .modal-title {
        color: var(--tt-gray-800);
        font-weight: 700;
    }

    .modal-close-btn {
        color: var(--tt-gray-400);
    }

    .about-project-card {
        border: 1px solid var(--tt-gray-200);
        background: var(--tt-gray-50);
        border-radius: 12px;
    }

    .about-project-card h4 {
        color: var(--tt-gray-800);
    }

    .about-project-card p,
    .about-project-list {
        color: var(--tt-gray-600);
    }

    /* ── คลาสช่วยเหลือต่าง ๆ ───────────────────────────────────────────── */
    .text-gray-666 {
        color: var(--tt-gray-500);
    }

    .error-msg {
        color: var(--tt-red-700);
    }

    .search-hl {
        background: #fef08a;
    }

    .page-marker {
        color: var(--tt-gray-400);
        border-bottom: 1px dashed var(--tt-gray-100);
    }
}

/* ── เงาการ์ดหลัก — เฉพาะจอใหญ่ เพื่อไม่ทับกฎของแท็บเล็ต/มือถือ ────────── */
@media only screen and (min-width: 1025px) {
    .container {
        border: 1px solid var(--tt-gray-200);
        box-shadow: var(--tt-shadow-card);
    }
}

/* ── ระยะที่ 2: หัวการ์ด · ปุ่มโหมด · แถบล่างแบบแท็บเล็ต ─────────────────── */
@media screen {
    /* ปุ่มสลับโหมด ป.ธ./บ.ศ. (คลาสนี้เดิมประกาศ !important ไว้ จึงต้องทับด้วย !important) */
    .btn-active-bs {
        background-color: var(--tt-brand-100) !important;
        color: var(--tt-brand-700) !important;
        border-color: var(--tt-brand-300) !important;
    }

    /* แถบล่างแบบแท็บเล็ต (ย่อ/ขยาย · พิมพ์ PDF) — ไม่แตะ padding/radius เดิม */
    .tablet-action-bar {
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--tt-gray-200);
    }

    .tablet-action-bar .bar-btn.primary {
        background: var(--tt-brand-600);
        color: #fff;
    }

    .tablet-action-bar .bar-btn.primary:hover {
        background: var(--tt-brand-700);
    }

    .tablet-action-bar .bar-btn.secondary {
        background: #fff;
        color: var(--tt-gray-700);
        border: 1px solid var(--tt-gray-300);
    }

    .tablet-action-bar .bar-btn.secondary:hover {
        background: var(--tt-gray-50);
    }
}

/* ── หัวการ์ด (.section h2) = แถบหัวสีอ่อนกว้างเต็มการ์ด (เฉพาะจอใหญ่) ─────
 * ใช้ margin ติดลบเท่าค่า padding ของ .section บนเดสก์ท็อป (24px) เท่านั้น
 * → จอเล็ก (≤768px ที่ padding เป็น 16px) จะไม่ถูกแตะเลย */
@media screen and (min-width: 769px) {
    .section h2 {
        margin: -24px -24px 16px -24px;
        padding: 14px 24px;
        background: var(--tt-gray-50);
        border-bottom: 1px solid var(--tt-gray-200);
        border-radius: 12px 12px 0 0;
    }
}

/* ── หัวการ์ด "แบบมีปุ่มอยู่ด้านขวา" (.flex-between เช่น ขั้นตอนที่ ๒) ──────────
 * ✍️ ปัญหาที่ผู้ใช้เห็น (2026-09-20): หัวข้อกับปุ่มดูเป็นคนละส่วน ไม่เป็นหัวเดียวกัน
 *    วัดได้: แถบเทาคลุมแค่ 328px ของการ์ด 914px · ปุ่มมี padding 16px + เส้นขอบบน 0.8px
 *    เป็นกล่องที่สอง · แนวตั้งต่างกัน 29px (ปุ่มลอยต่ำกว่า)
 * สาเหตุ: กฎ .section h2 ใส่แถบหัวให้ "ตัว h2" (กว้างเท่าข้อความ) แต่ปุ่มอยู่นอกแถบ
 *          และ .actions มี padding/เส้นขอบของตัวเอง
 * แก้: ย้ายแถบหัวไปที่ "แถวหัว" ทั้งแถว (กว้างเต็มการ์ด) + ตัดของประดับของ h2/.actions
 *      ในแถวนี้ → หัวข้อ (ซ้าย) กับปุ่ม (ขวา) เป็นแถบเดียวกัน แนวเดียวกัน
 * ⚠️ CSS-only · ไม่แตะ HTML · อยู่ใต้ @media screen (งานพิมพ์ไม่กระทบ)
 */
@media screen and (min-width: 769px) {
    .section > .flex-between {
        margin: -24px -24px 16px -24px;
        padding: 10px 24px;
        background: var(--tt-gray-50);
        border-bottom: 1px solid var(--tt-gray-200);
        border-radius: 12px 12px 0 0;
        gap: 8px 12px;
        flex-wrap: wrap;
    }

    /* h2 ในแถวหัวนี้: อยู่ในแถบเดียวกับปุ่มแล้ว → ไม่ต้องมีแถบ/เส้นใต้/ระยะขอบของตัวเอง */
    .section > .flex-between > h2 {
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        border-radius: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ปุ่มในแถวหัว: ตัด padding/เส้นขอบของ .actions ให้เป็นแถวเดียวกัน (ทุกขนาดจอ)
 * (เดิม .actions { padding:16px 24px; border-top:1px } ทำให้เกิดกล่องที่สองในหัวการ์ด) */
@media screen {
    .section > .flex-between > .actions {
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        flex: 0 0 auto;
        justify-content: flex-end;
        width: auto;
    }

    /* จอเล็ก: ให้ปุ่มตัดลงบรรทัดใหม่ได้ ไม่บีบหัวข้อ */
    .section > .flex-between {
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: center;
    }

    .section > .flex-between > h2 {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* จอเล็ก (≤768px): ยังคง "หัวเดียว" เหมือนจอใหญ่ แต่ไม่มีที่พอให้ปุ่มอยู่แถวเดียว
 * → แถบหัวเต็มการ์ด + หัวข้ออยู่บน ปุ่มตัดลงมาอยู่ล่าง (ปุ่มไม่ยืดเต็มความกว้าง)
 * ใช้ margin ติดลบเท่าค่า padding ของ .section บนจอเล็ก (16px) */
@media screen and (max-width: 768px) {
    .section > .flex-between {
        margin: -16px -16px 12px -16px;
        padding: 10px 16px;
        background: var(--tt-gray-50);
        border-bottom: 1px solid var(--tt-gray-200);
        border-radius: 10px 10px 0 0;
    }

    .section > .flex-between > h2 {
        margin: 0;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        border-radius: 0;
    }

    /* ปุ่มในหัวการ์ด: ให้พอดีกับข้อความ ไม่ยืดเต็มความกว้างแบบปุ่มท้ายการ์ด */
    .section > .flex-between > .actions .btn {
        flex: 0 0 auto;
        width: auto;
        text-align: center;
    }

    .section > .flex-between > .actions {
        justify-content: flex-start;
    }
}

/* ── ระยะที่ 3: จัดระเบียบ "แผงเครื่องมือ" (.bottom-left) ───────────────────
 * ✍️ คำขอผู้ใช้ (2026-09-20): แผงเครื่องมือดูรก — อยากให้เป็นระเบียบขึ้น
 * เป้าหมาย (CSS-only · ไม่แตะ HTML เลย)
 *   1) การ์ดเดียว + เส้นคั่นบาง แทนกล่องรายแถว 11 ใบ (ลบกล่องซ้อน 2 ชั้น)
 *   2) คอลัมน์ป้าย/ไอคอนตรงแนวทุกแถว → คอนโทรลเริ่มที่ตำแหน่งเดียวกัน
 *   3) ตัวเลือก (select) ยืดเต็มความกว้างที่เหลือ → ขอบขวาเสมอกันทุกแถว (ไม่เป็นฟันปลา)
 *   4) แถว "ระยะขอบ" จัดใหม่: ปุ่มพับชิดขวา + ช่องตัวเลข 2×2 กว้างเท่ากัน
 *   ⚠️ ไม่แตะคลาสของกระดาษข้อสอบ และไม่แตะ @media print (ทั้งหมดอยู่ใต้ @media screen)
 */
@media screen {
    /* 1) การ์ดเดียว จัดชิดซ้าย (เดิม base ตั้ง justify-content: center ทำให้เยื้องกลาง)
     *    flex-wrap: nowrap จำเป็น — CSS ฐานตั้ง wrap ไว้ พอเป็น column+wrap จะเกิด
     *    ช่องว่างว่างเปล่าเหนือแถวสูง ๆ (เช่น แถวระยะขอบ) ~74px */
    .bottom-left .toolbar {
        background: #fff;
        border: 1px solid var(--tt-gray-200);
        border-radius: 12px;
        box-shadow: var(--tt-shadow-sm);
        padding: 6px 12px;
        gap: 0;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    /* แถว = รายการในบัญชีเดียวกัน (เส้นคั่นบาง) ไม่ใช่การ์ดซ้อนการ์ด */
    .bottom-left .tool-row,
    .layout-root.step3-stacked .bottom-left .tool-row {
        display: flex;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--tt-gray-100);
        border-radius: 0;
        box-shadow: none;
        padding: 9px 0;
        gap: 10px;
        align-items: center;
        flex-wrap: nowrap;
    }

    .bottom-left .tool-row:first-child {
        border-top: 0;
    }

    /* 2) คอลัมน์ป้าย: กว้างคงที่ (ยาวเกินให้ขึ้นบรรทัดใหม่เอง) + ไอคอนกว้างเท่ากัน */
    .bottom-left .tool-row-label {
        flex: 0 0 112px;
        min-width: 0;
        padding-top: 0;
        font-size: 0.8rem;
        line-height: 1.3;
        white-space: normal;
        color: var(--tt-gray-500);
        font-weight: 700;
    }

    .bottom-left .tool-row-label i {
        flex: 0 0 21px;
        width: 21px;
        text-align: center;
        color: var(--tt-gray-400);
        font-size: 0.95rem;
    }

    /* 3) คอนโทรล: เต็มคอลัมน์ที่เหลือ */
    .bottom-left .tool-row-controls {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        align-items: center;
    }

    /* ตัวเลือก: ยืดเต็มความกว้างที่เหลือ → ขอบขวาเสมอกันทุกแถว */
    .bottom-left .tool-select {
        flex: 1 1 auto;
        min-width: 84px;
        max-width: 100%;
        background: #fff;
        border: 1px solid var(--tt-gray-300);
        border-radius: 8px;
        padding: 6px 8px;
        color: var(--tt-gray-700);
    }

    .bottom-left .tool-select:focus {
        border-color: var(--tt-brand-300);
        outline: none;
        box-shadow: 0 0 0 3px var(--tt-brand-100);
    }

    /* กลุ่มคอนโทรล: ไม่มีกล่องพื้น/ขอบ (ลดความรก) · แถวที่มีตัวเลือกให้กลุ่มยืดเต็ม */
    .bottom-left .toolbar-group {
        flex: 0 1 auto;
        min-width: 0;
        gap: 6px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .bottom-left .toolbar-group:has(select) {
        flex: 1 1 auto;
    }

    /* ปุ่ม: ขอบเดียวพอ อ่านง่าย */
    .bottom-left .tool-btn {
        background: #fff;
        border: 1px solid var(--tt-gray-300);
        border-radius: 8px;
        padding: 6px 9px;
        color: var(--tt-gray-600);
        white-space: nowrap;
    }

    .bottom-left .tool-btn:hover {
        background: var(--tt-gray-50);
        border-color: var(--tt-gray-400);
        color: var(--tt-gray-800);
    }

    .bottom-left .tool-btn.active {
        background: var(--tt-brand-50);
        border-color: var(--tt-brand-300);
        color: var(--tt-brand-700);
    }

    /* 4) แถว "ระยะขอบ": ปุ่มพับเป็นชิปชิดขวา + ช่องตัวเลข 2×2 กว้างเท่ากัน */
    .bottom-left .collapsible-panel {
        flex: 1 1 100%;
        min-width: 0;
    }

    .bottom-left .collapsible-panel > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-left: auto;
        width: fit-content;
        padding: 5px 10px;
        border: 1px solid var(--tt-gray-300);
        border-radius: 9999px;
        background: #fff;
        color: var(--tt-gray-600);
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .bottom-left .collapsible-panel > summary:hover {
        background: var(--tt-gray-50);
    }

    .bottom-left .collapsible-panel[open] > summary {
        background: var(--tt-brand-50);
        border-color: var(--tt-brand-200);
        color: var(--tt-brand-700);
    }

    .bottom-left .collapsible-panel .collapsible-body {
        margin-top: 8px;
        width: 100%;
    }

    .bottom-left .margin-inline {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .bottom-left .margin-inline-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 6px 10px;
        width: 100%;
    }

    .bottom-left .margin-inline-item {
        min-width: 0;
        gap: 6px;
    }

    .bottom-left .margin-inline-label {
        flex: 0 0 auto;
        min-width: 24px;
        text-align: left;
        color: var(--tt-gray-500);
        font-weight: 600;
        font-size: 0.8rem;
    }

    .bottom-left .margin-inline-item input[type="number"] {
        width: 100%;
        min-width: 0;
        padding: 6px 8px;
        border-radius: 8px;
        text-align: right;
    }

    .bottom-left .margin-inline .unit-label {
        flex: 0 0 auto;
        color: var(--tt-gray-400);
    }

    .bottom-left .margin-inline > .btn {
        align-self: flex-end;
    }
}

/* ── แผงเครื่องมือบนจอ ≤1024px ───────────────────────────────────────────────
 * เดิม: แถวเรียงแนวนอนแบบการ์ดเยื้อง + ความกว้างไม่เท่ากัน
 * ใหม่: "ตารางการ์ด 2 คอลัมน์" ที่จัดชิดซ้ายสม่ำเสมอ (แถวระยะขอบกินเต็มบรรทัด)
 * หมายเหตุ: ต้องมี .layout-root.step3-stacked นำหน้า เพราะ CSS ในตัวเพจใช้
 *          selector นี้ (specificity สูงกว่า) กำหนด flex ของแถวไว้ */
@media only screen and (max-width: 1024px) {
    .bottom-left .toolbar,
    .layout-root.step3-stacked .bottom-left .toolbar {
        display: grid;                                                  /* ตารางที่คุมจำนวนคอลัมน์ได้แน่นอน */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    /* จอแคบ → ยุบเป็นคอลัมน์เดียวเอง */
        gap: 8px;
        align-items: stretch;
        padding: 10px;
        overflow: visible;
    }

    .bottom-left .tool-row,
    .layout-root.step3-stacked .bottom-left .tool-row {
        min-width: 0;
        border: 1px solid var(--tt-gray-200);
        border-radius: 10px;
        background: var(--tt-gray-50);
        padding: 8px 10px;
        gap: 8px;
        align-items: center;
    }

    /* แถวที่มีกลุ่มย่อย (ระยะขอบ) กินเต็มความกว้างทุกคอลัมน์ */
    .bottom-left .tool-row:has(.collapsible-panel),
    .layout-root.step3-stacked .bottom-left .tool-row:has(.collapsible-panel) {
        grid-column: 1 / -1;
        background: #fff;
    }

    /* ป้ายกว้างคงที่เท่ากันทุกแถว (ยาวเกินให้ขึ้นบรรทัดใหม่ ไม่ตัดคำ) */
    .bottom-left .tool-row-label,
    .layout-root.step3-stacked .bottom-left .tool-row-label {
        flex: 0 0 112px;
        min-width: 0;
        white-space: normal;
        overflow: visible;
    }

    .bottom-left .tool-row-controls,
    .layout-root.step3-stacked .bottom-left .tool-row-controls {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
 * หมายเหตุท้ายไฟล์
 *  · งานพิมพ์ไม่ถูกแตะเลย (ทุกกฎอยู่ใต้ @media screen)
 *  · คลาส .paper / .paper-* / .print-* / #printMirrorPaper ไม่ถูกแก้
 *  · ตรวจความถูกต้องอัตโนมัติ: node verify/offline-check.mjs
 * ------------------------------------------------------------------------- */