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

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

.fw-800 { font-weight: 800; }
.fw-600 { font-weight: 600; }
.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 SELECTORS */
.big-touch-select {
    height: 65px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    background-color: var(--dark-navy) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding-left: 12px !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300d2ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 10px !important;
}

.big-touch-select-date {
    height: 55px !important;
    background-color: var(--dark-navy) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

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

#mainAge { font-family: 'JetBrains Mono', monospace; letter-spacing: -4px; }
.x-small { font-size: 0.65rem; letter-spacing: 0.5px; }

.hover-link:hover { color: var(--navy) !important; text-decoration: underline !important; }

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