:root {
    --primary: #ff8c00; 
    --bg: #121212;
    --card-bg: #1e1e1e;
    --text: #e0e0e0;
    --border: #333;
}

body { background-color: var(--bg); color: var(--text); font-family: 'Segoe UI', Tahoma, sans-serif; margin: 0; display: flex; justify-content: center; }
.container { width: 100%; max-width: 900px; padding: 20px; }
header { text-align: center; margin-bottom: 30px; }
header h1 { margin: 0; letter-spacing: 2px; }
header h1 span { color: var(--primary); font-size: 0.5em; vertical-align: top; border: 1px solid var(--primary); padding: 2px 5px; border-radius: 4px; }

.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
.form-group { margin-bottom: 15px; }
label { display: block; font-size: 0.85em; margin-bottom: 5px; color: #888; }
input, select {
    width: 100%;
    padding: 10px;
    background: #2a2a2a; /* สีพื้นหลังกล่อง */
    border: 1px solid var(--border); /* เส้นขอบปกติ */
    color: white;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* เพิ่มความนุ่มนวลเวลาเปลี่ยนสี */
    outline: none; /* เอาเส้นขอบสีฟ้าๆ เริ่มต้นของเบราว์เซอร์ออก */
}
/* เพิ่มส่วนนี้: เอฟเฟกต์ตอนคลิกเข้ามาพิมพ์ (Focus) */
input:focus, select:focus {
    border-color: var(--primary); /* เปลี่ยนเส้นขอบเป็นสีส้ม Spark */
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.3); /* เรืองแสงสีส้มบางๆ */
    background: #111; /* ดรอปสีพื้นหลังให้เข้มขึ้นเพื่อให้ตัวเลขเด่น */
}

.btn-primary { width: 100%; padding: 15px; background: var(--primary); border: none; color: black; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 20px; transition: 0.3s; }
.btn-primary:hover { background: #ffa533; transform: translateY(-2px); }
.btn-secondary { background: transparent; border: 1px solid #666; color: #ccc; padding: 10px 20px; border-radius: 6px; cursor: pointer; }

/* Axis Generation Area */
.axis-config-row { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-end; }
.axis-input-grid { display: flex; flex-wrap: wrap; gap: 5px; max-height: 120px; overflow-y: auto; background: #111; padding: 10px; border-radius: 4px; }
.axis-input-grid input {
    width: 50px;
    padding: 5px;
    font-size: 11px;
    text-align: center;
    background: #222; /* สีพื้นหลังกล่องเล็ก */
    border: 1px solid #444; /* เส้นขอบกล่องเล็ก */
    border-radius: 3px;
    color: var(--primary); /* ให้ตัวเลขเป็นสีส้ม */
}

/* เอฟเฟกต์ตอนคลิกพิมพ์ช่องเล็ก */
.axis-input-grid input:focus {
    background: #000;
    border-color: var(--primary);
}

/* Table Map Area */
.result-card { margin-top: 30px; text-align: center; background: linear-gradient(145deg, #1e1e1e, #252525); padding: 20px; border-radius: 15px; border: 2px solid var(--primary); }
.table-container { margin-top: 20px; max-height: 500px; overflow: auto; border-radius: 8px; border: 1px solid #444; background-color: #000; }

.tuning-table { width: 100%; border-collapse: collapse; font-family: 'Courier New', monospace; font-size: 11px; }
.tuning-table th, .tuning-table td { border: 1px solid #222; padding: 6px 10px; text-align: center; min-width: 45px; transition: transform 0.1s; }
.tuning-table td:hover { transform: scale(1.1); z-index: 5; outline: 1px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }

.header-rpm { background: #ffffff; color: #000000; position: sticky; left: 0; z-index: 10; font-weight: bold; }
.header-tps { background: #1a1a1a; color: var(--primary); position: sticky; top: 0; z-index: 20; font-size: 10px; }
.header-corner { background: #222; color: #fff; position: sticky; top: 0; left: 0; z-index: 30; }
.cell-value { color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000; }
.hidden { display: none !important; }

/* --- ซ่อนลูกศรในช่อง input type="number" --- */

/* สำหรับ Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* สำหรับ Firefox */
input[type="number"] {
    appearance: none;
    -moz-appearance: textfield;
}

/* --- Auto Target Peak Pressure UI --- */
.btn-auto {
    background: var(--primary); /* สีส้ม */
    color: black;
    border: none;
    border-radius: 6px;
    padding: 0 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-auto:hover {
    background: #ffa533;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4);
}

/* คลาสสำหรับ Highlight ช่องกรอกเวลาคำนวณ Auto เสร็จ */
.input-auto-highlight {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: #1a1005 !important; /* พื้นหลังเหลือบส้มเข้มๆ */
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.3) !important;
    font-weight: bold;
}

/* --- Modal & Popups --- */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}
.modal-content {
    max-width: 1100px;
    background: var(--card-bg);
    padding: 20px; border-radius: 12px;
    width: 95%; max-width: 900px;
    position: relative;
    border: 1px solid var(--primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.close-btn {
    position: absolute; top: 15px; right: 20px;
    font-size: 28px; font-weight: bold; color: white;
    cursor: pointer; transition: 0.2s;
}
.close-btn:hover { color: var(--primary); }

/* --- A4 Paper Style --- */
.a4-container {
    overflow-x: auto;
    padding: 20px;
}

.a4-paper {
    background: white;
    color: black;
    width: 1122px;  /* ขนาดพิกเซลตายตัว ห้ามแก้! */
    height: 794px;  /* ขนาดพิกเซลตายตัว ห้ามแก้! */
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    
    /* 🎯 จุดสำคัญ: ตั้งจุดหมุน/ย่อ ให้อยู่ที่ กึ่งกลางด้านบน */
    transform-origin: top center; 
    
    /* เติมเงาให้ดูเหมือนกระดาษวางอยู่จริงๆ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    -webkit-font-smoothing: antialiased;
    margin: 0; /* ปล่อยให้ Wrapper จัดการตำแหน่ง */
}

.a4-header { text-align: center; border-bottom: 2px solid #ccc; padding-bottom: 10px; margin-bottom: 20px; }
.a4-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; margin-bottom: 20px; background: #fafafa; padding: 10px; border: 1px solid #eee; }
.a4-table-wrapper table {
    width: 100%;
    font-size: 7px; /* ลดลงเหลือ 7px หรือ 8px เพื่อให้ไม่ล้นขอบ */
    table-layout: fixed; /* บังคับให้ขนาดคอลัมน์เท่ากันเป๊ะๆ */
    word-wrap: break-word; /* ป้องกันตัวเลขล้นช่อง */
}
.a4-table-wrapper th, .a4-table-wrapper td { border: 1px solid #ccc !important; padding: 3px; }
.a4-table-wrapper td { color: black !important; text-shadow: none !important; }


/* --- ปรับปรุงส่วน Modal Container --- */
.modal-content.a4-container {
    max-width: 95%; /* ไม่ให้ Modal กว้างเกิน 95% ของจอ */
    width: auto;     /* ปล่อยให้กว้างตามเนื้อหา (แต่โดน max-width คุม) */
    background: #f0f0f0;
    overflow: hidden; /* ซ่อนส่วนที่เกินจากการ scale (เดี๋ยวเราใช้ JS จัดการ) */
    display: flex;
    flex-direction: column;
    align-items: center; /* จัดกระดาษให้อยู่กลาง */
}

/* Container ย่อยที่หุ้มกระดาษไว้อีกที เพื่อจัดการเรื่องพื้นที่หลัง Scale */
#a4ScaleWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0;
    /* เราจะใช้ JS ปรับ min-height ของตัวนี้ เพื่อให้ scroll modal ได้ปกติ */
}