:root {
    --navy: #1a1a2e;
    --dark-navy: #16213e;
    --info: #00d2ff;
}

body {
    background-color: #f4f6f9;
    font-family: 'Inter', sans-serif;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 20px 20px;
}

.fw-800 { font-weight: 800; }
.bg-sidebar { background-color: var(--navy); }
.bg-dark { background-color: var(--dark-navy) !important; }
.text-info { color: var(--info) !important; }
.text-navy { color: var(--navy); }
.rounded-4 { border-radius: 1.25rem !important; }

/* BIG TOUCH INPUTS & GROUPS */
.input-group .btn {
    width: 55px;
    background-color: var(--dark-navy);
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    transition: 0.3s;
}

.input-group .btn:hover {
    background-color: var(--info);
    color: white !important;
}

.big-touch-input {
    height: 65px !important;
    background-color: var(--dark-navy) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    padding: 0;
}

/* Remove default arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.big-touch-input:focus {
    border-color: var(--info) !important;
    box-shadow: none !important;
    outline: none;
}

.btn-info {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    border: none;
    transition: 0.3s;
}

.btn-info:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 210, 255, 0.3); }

#bmiResult { font-family: 'JetBrains Mono', monospace; letter-spacing: -3px; }

/* Category Colors */
.cat-under { background-color: #70a1ff !important; color: white; }
.cat-normal { background-color: #2ed573 !important; color: white; }
.cat-over { background-color: #ffa502 !important; color: white; }
.cat-obese { background-color: #ff4757 !important; color: white; }

.x-small { font-size: 0.65rem; }

@media (max-width: 991px) {
    .bg-sidebar { border-radius: 0; }
    .main-card { border-radius: 0; }
    .big-touch-input { height: 75px !important; }
}