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

.hidden { display: none !important; }

.eq-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 800px; margin: 30px auto; background: #fff;
    border: 4px solid #000; border-radius: 16px;
    box-shadow: 10px 10px 0px #000; padding: 25px; box-sizing: border-box;
}
.eq-neo-wrapper * { box-sizing: border-box; }

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

/* TABS */
.eq-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; justify-content: center;}
.eq-tab {
    flex: 1; min-width: 120px; padding: 12px; font-size: 1.1rem; font-weight: 900; text-transform: uppercase;
    background: #f4f4f4; border: 3px solid #000; border-radius: 8px;
    box-shadow: 4px 4px 0px #000; cursor: pointer; transition: 0.1s; text-align: center;
}
.eq-tab:hover { background: #e0e0e0; transform: translateY(-2px); }
.eq-tab:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }
.eq-tab.active { background: #b5ead7; color: #000; }

/* INPUT AREA */
.eq-input-area {
    background: #e2f0cb; border: 3px solid #000; border-radius: 12px; padding: 25px;
    box-shadow: inset 4px 4px 0px rgba(0,0,0,0.05); margin-bottom: 20px;
    font-family: monospace; font-size: 1.5rem; font-weight: 900; text-align: center;
}
.eq-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;}
.eq-row:last-child { margin-bottom: 0; }
.eq-input {
    width: 80px; height: 50px; font-size: 1.3rem; font-weight: 900; text-align: center;
    border: 3px dashed #000; background: transparent; border-radius: 6px; outline: none; transition: 0.1s; font-family: monospace;
}
.eq-input:focus { border-style: solid; background: #fff; box-shadow: 4px 4px 0px #ff595e; transform: translateY(-2px); }
.eq-label { color: #ff595e; }

/* BÀN PHÍM ẢO (NUMPAD) */
.eq-numpad {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
    background: #f9f9f9; padding: 15px; border: 3px solid #000; border-radius: 12px; box-shadow: inset 2px 2px 0px rgba(0,0,0,0.05);
}
.np-btn {
    font-family: system-ui, sans-serif; font-size: 1.4rem; font-weight: 900;
    background: #fff; color: #000; border: 2px solid #000; border-radius: 8px;
    box-shadow: 3px 3px 0px #000; cursor: pointer; transition: 0.1s; padding: 15px 0;
}
.np-btn:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #000; }
.np-op { background: #e0e0e0; }
.np-del { background: #ff595e; color: #fff; font-size: 1.1rem; }
.np-next { background: #1982c4; color: #fff; font-size: 1.1rem; }
.np-solve { background: #ffca3a; font-size: 1.6rem;}

/* RESULT AREA */
.eq-result {
    background: #fff; border: 3px solid #000; border-radius: 12px; padding: 25px;
    box-shadow: 4px 4px 0px #000; font-family: 'Courier New', monospace; font-size: 1.3rem; font-weight: 800; line-height: 1.6;
    animation: fadeUp 0.3s ease-out; overflow-x: auto;
}
.res-title { font-family: 'Bungee', cursive; color: #ff595e; font-size: 1.4rem; margin-bottom: 10px; border-bottom: 2px dashed #000; padding-bottom: 5px;}
.res-step { color: #555; font-size: 1.1rem; margin-bottom: 10px; }
.res-ans { color: #000; font-size: 1.4rem; padding-left: 15px; border-left: 4px solid #b5ead7; margin-bottom: 10px;}
.exact-math { font-size: 1.6rem; color: #1982c4; }
.frac { display: inline-block; text-align: center; vertical-align: middle; margin: 0 5px; font-size: 1.4rem;}
.frac > span { display: block; padding: 2px; }
.frac span.fdn { border-top: 2px solid #000; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
    .eq-tab { min-width: 45%; }
    .eq-input { width: 65px; height: 45px; font-size: 1.2rem; }
    .eq-input-area { padding: 15px; }
    .np-btn { padding: 10px 0; font-size: 1.2rem; }
}