.kinematics-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1000px;
    margin: 20px auto;
    border: 3px solid #000000;
    border-radius: 12px;
    box-shadow: 8px 8px 0px #000000;
    padding: 25px;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

.kinematics-neo-wrapper * { box-sizing: border-box; }

.kinematics-header {
    background: #ffdac1; padding: 15px 20px; border-radius: 12px;
    border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; margin-bottom: 25px; text-align: center;
}
.kinematics-header h2 { margin: 0 0 5px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; color: #000; }
.kinematics-header p { margin: 0; font-weight: 800; font-size: 0.95rem; }

/* TABS */
.kinematics-tabs { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.kinematics-tab {
    flex: 1; text-align: center; padding: 12px; font-weight: 900; font-size: 1.1rem;
    border: 3px solid #000; border-radius: 8px; background: #e9ecef; color: #000;
    cursor: pointer; box-shadow: 3px 3px 0px #000; transition: all 0.1s; text-transform: uppercase;
}
.kinematics-tab.active { background: #b5ead7; box-shadow: 1px 1px 0px #000; transform: translate(2px, 2px); }

/* CONTENT & BANNERS */
.kinematics-content { display: none; flex-direction: column; gap: 20px; }
.kinematics-content.active { display: flex; animation: kineFadeIn 0.3s; }
@keyframes kineFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.info-banner {
    background: #e2f0cb; padding: 15px 20px; border: 3px dashed #000; border-radius: 8px;
    font-weight: 800; font-size: 1.05rem; color: #000;
}

/* INPUT GRIDS */
.input-grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.input-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.kine-group { display: flex; flex-direction: column; gap: 8px; }
.kine-group label { font-weight: 900; font-size: 1.05rem; color: #000; }
.kine-neo-input {
    width: 100%; padding: 12px; font-size: 1.1rem; font-weight: 900; border-radius: 8px; 
    border: 3px solid #000; background: #fff; color: #000; outline: none; box-shadow: inset 3px 3px 0px rgba(0,0,0,0.05); transition: 0.1s; font-family: monospace;
}
.kine-neo-input:focus { border-color: #ff595e; }

/* BUTTONS */
.action-row { display: flex; gap: 15px; margin-top: 10px; }
.kine-btn-primary {
    flex: 3; cursor: pointer; font-size: 1.2rem; font-weight: 900; padding: 15px;
    background-color: #ffca3a; border: 3px solid #000; border-radius: 8px; box-shadow: 4px 4px 0px #000;
    text-transform: uppercase; color: #000; transition: transform 0.1s, box-shadow 0.1s;
}
.kine-btn-primary:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }
.kine-btn-secondary {
    flex: 1; cursor: pointer; font-size: 1.1rem; font-weight: 900; padding: 15px;
    background-color: #ffffff; border: 3px solid #000; border-radius: 8px; box-shadow: 3px 3px 0px #000;
    text-transform: uppercase; color: #000; transition: transform 0.1s, box-shadow 0.1s;
}
.kine-btn-secondary:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }

/* RESULT BOX */
.result-box {
    background-color: #fdfd96; border: 3px solid #000; border-radius: 8px; padding: 25px; margin-top: 10px;
}
.result-box.hidden { display: none; }
.result-box h3 { margin: 0 0 15px 0; font-size: 1.4rem; font-weight: 900; color: #000; border-bottom: 3px dashed #000; padding-bottom: 10px; }

.alert-box { background: #ffb7b2; padding: 12px; border: 3px solid #000; border-radius: 6px; font-weight: 900; margin-bottom: 15px; color: #000; }
.alert-box.hidden { display: none; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.res-card {
    background: #fff; border: 3px solid #000; border-radius: 8px; padding: 15px;
    box-shadow: 3px 3px 0px #000; display: flex; flex-direction: column; gap: 5px;
}
.res-card.highlight { background: #b5ead7; } /* Màu xanh lá cho dữ kiện vừa được tính ra */
.res-label { font-weight: 900; font-size: 1.05rem; color: #555; }
.res-value { font-family: 'Bungee', monospace; font-size: 1.6rem; color: #000; text-shadow: 1px 1px 0px #fff; word-break: break-all; line-height: 1.2; }

@media (max-width: 600px) {
    .action-row { flex-direction: column; }
    .res-value { font-size: 1.3rem; }
}