@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

.phys-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;
}

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

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

/* TABS */
.phys-tabs { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.phys-tab {
    flex: 1; text-align: center; padding: 15px; 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;
}
.phys-tab.active { background: #b5ead7; box-shadow: 1px 1px 0px #000; transform: translate(2px, 2px); }

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

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

/* CARDS KHỐI LƯỢNG */
.phys-card {
    border: 3px solid #000; border-radius: 8px; background: #f9f9f9;
    padding: 20px; box-shadow: 4px 4px 0px #000; display: flex; flex-direction: column; gap: 15px;
}
.phys-card-header {
    font-weight: 900; font-size: 1.2rem; background: #ffb7b2; padding: 8px 15px;
    border: 3px solid #000; border-radius: 6px; display: inline-block; align-self: flex-start;
    box-shadow: 2px 2px 0px #000; text-transform: uppercase; margin-bottom: 5px;
}

/* INPUTS */
.phys-group { display: flex; flex-direction: column; gap: 8px; }
.phys-group label { font-weight: 900; font-size: 1.05rem; color: #000; }

.phys-input, .phys-select {
    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 2px 2px 0px rgba(0,0,0,0.05); transition: 0.1s; font-family: monospace;
}
.phys-input:focus { border-color: #ff595e; }
.phys-select { box-shadow: 2px 2px 0px #000; cursor: pointer; font-family: system-ui, sans-serif; }

/* SCIENTIFIC NOTATION INPUT */
.sci-input-group { display: flex; align-items: center; gap: 10px; }
.sci-input-group .phys-input { flex: 2; }
.sci-input-group .sci-exp { flex: 1; min-width: 80px; }
.sci-text { font-weight: 900; font-size: 1.3rem; }

.input-with-select { display: flex; align-items: stretch; border-radius: 8px; }
.input-with-select .sci-input-group { border-right: none; }

/* ENERGY GRID */
.energy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }

/* BUTTONS */
.action-row { display: flex; gap: 15px; margin-top: 10px; }
.phys-btn-primary {
    width: 100%; cursor: pointer; font-size: 1.3rem; 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: 0.1s;
}
.phys-btn-primary:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }

/* RESULTS */
.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; }

.energy-res-grid { display: grid; grid-template-columns: 1fr 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; text-align: center;
}
.res-card.highlight { background: #b5ead7; } 
.res-label { font-weight: 900; font-size: 1.1rem; color: #555; text-transform: uppercase;}
.res-value { font-family: 'Bungee', monospace; font-size: 2rem; color: #000; text-shadow: 1px 1px 0px #fff; word-break: break-all; line-height: 1.2; margin-top: 10px;}

@media (max-width: 600px) {
    .sci-input-group { flex-direction: column; align-items: stretch; }
    .sci-text { text-align: center; }
    .input-with-select { flex-direction: column; }
    .input-with-select select { border-radius: 8px !important; margin-top: 10px; border-left: 3px solid #000 !important; }
    .energy-res-grid { grid-template-columns: 1fr; }
}