/* Themes - Consistent UI */
.theme-white { --bg: #ffffff; --s1: #d1d1d1; --s2: #ffffff; --t: #333; --acc: #4caf50; --bar: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e74c3c); }
.theme-dark { --bg: #222222; --s1: #111111; --s2: #333333; --t: #eeeeee; --acc: #81c784; --bar: linear-gradient(to right, #2980b9, #27ae60, #f39c12, #c0392b); }
.theme-blue { --bg: #e1f5fe; --s1: #b3e5fc; --s2: #ffffff; --t: #01579b; --acc: #0288d1; --bar: linear-gradient(to right, #64b5f6, #81c784, #ffd54f, #e57373); }
.theme-rose { --bg: #fff1f3; --s1: #fbc2cc; --s2: #ffffff; --t: #880e4f; --acc: #e91e63; --bar: linear-gradient(to right, #f06292, #81c784, #dce775, #ef5350); }

.bmi-master-wrapper { background: #fff; padding: 20px; font-family: 'Segoe UI', Tahoma, sans-serif; }

#bmi-app-box {
    max-width: 380px; margin: 0 auto 50px auto; background: var(--bg);
    padding: 30px; border-radius: 40px; position: relative; transition: 0.3s;
    box-shadow: 15px 15px 30px var(--s1), -15px -15px 30px var(--s2);
    overflow: hidden;
}

.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.theme-dots { display: flex; gap: 8px; }
.t-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 1px solid #ddd; }
.dot-white { background: #fff; } .dot-dark { background: #333; } .dot-blue { background: #0288d1; } .dot-rose { background: #d81b60; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--t); }

.voice-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#bmi-mic-btn { width: 38px; height: 38px; border-radius: 12px; border: none; background: var(--bg); color: var(--t); cursor: pointer; box-shadow: 4px 4px 8px var(--s1), -4px -4px 8px var(--s2); }
#bmi-mic-btn.active { background: #f44336; color: #fff; }
#bmi-mic-status { font-size: 11px; color: #888; }

.unit-switcher { display: flex; background: var(--s1); border-radius: 12px; padding: 5px; margin-bottom: 25px; }
.unit-switcher button { flex: 1; border: none; padding: 10px; border-radius: 10px; cursor: pointer; background: none; color: var(--t); font-weight: 600; font-size: 12px; transition: 0.3s; }
.active-tab { background: var(--bg) !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }

.result-screen { text-align: center; margin-bottom: 25px; }
#bmi-value { font-size: 54px; font-weight: 800; color: var(--t); line-height: 1; }
#bmi-category { font-size: 16px; font-weight: 700; color: var(--acc); margin: 10px 0 20px; text-transform: uppercase; }

.meter-container { margin: 0 10px; }
.bmi-gradient-bar { height: 12px; background: var(--bar); border-radius: 10px; position: relative; }
#bmi-pointer { width: 4px; height: 20px; background: var(--t); position: absolute; top: -4px; left: 0%; transition: 0.5s; border-radius: 2px; }
.meter-labels { display: flex; justify-content: space-between; font-size: 10px; color: #999; margin-top: 5px; font-weight: bold; }

.input-container label { display: block; font-size: 11px; font-weight: 800; color: #999; text-transform: uppercase; margin-bottom: 5px; }
.input-container input { width: 100%; padding: 14px; border-radius: 15px; border: none; background: var(--bg); color: var(--t); font-size: 16px; box-shadow: inset 4px 4px 8px var(--s1), inset -4px -4px 8px var(--s2); margin-bottom: 15px; }
.dual-fields { display: flex; gap: 10px; }
.hidden { display: none; }

.info-card { background: var(--bg); padding: 15px; border-radius: 15px; box-shadow: 5px 5px 10px var(--s1), -5px -5px 10px var(--s2); border-left: 5px solid var(--acc); }
#ideal-weight { font-size: 13px; font-weight: bold; margin-bottom: 5px; color: var(--t); }
#ideal-weight span { color: var(--acc); }
#health-tips { font-size: 12px; color: #777; line-height: 1.4; }

#bmi-hist-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 100; border-radius: 40px; padding: 25px; transition: 0.4s; }
.overlay-hidden { transform: translateX(100%); opacity: 0; }
.overlay-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--s1); padding-bottom: 15px; margin-bottom: 15px; color: var(--t); font-weight: bold; }
.back-btn { background: var(--acc); color: #fff; border: none; padding: 6px 15px; border-radius: 10px; cursor: pointer; font-size: 12px; }
.clear-txt { font-size: 12px; color: #f44336; cursor: pointer; }
.log-item { padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 13px; color: var(--t); cursor: pointer; }

.bmi-article { max-width: 850px; margin: 0 auto; color: #444; line-height: 1.8; }
.bmi-article h1 { border-left: 6px solid var(--acc); padding-left: 15px; }

@media (max-width: 480px) { #bmi-app-box { padding: 20px; } #bmi-value { font-size: 44px; } }