:root{
    --primary:#3b82f6; 
    --secondary:#8b5cf6;
    --radius-sm:4px;
    --radius:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-2xl:24px;
    --radius-3xl:32px;
    --radius-button:8px;
    --tw-bg-opacity: 1;
}

body{ font-family: 'Inter', sans-serif; background-color:#f9fafb; }


.app-header{ background:#fff; border-bottom:1px solid #f3f4f6; }


.counter-card{
    transition: all .3s ease;
    border:1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-lg);
    padding:1rem;
}
.counter-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
}
.counter-value{ transition: all .2s ease; }


.text-input.form-control:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem rgba(59,130,246,.15);
}


.btn-primary-custom{
    background: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius-button);
}
.btn-primary-custom:hover{ 
    filter: brightness(.95); 
    box-shadow: 0 4px 12px rgba(59,130,246,.3); 
}

.btn-secondary-custom{
    background: var(--secondary);
    border-color: var(--secondary);
    border-radius: var(--radius-button);
}
.btn-secondary-custom:hover{ filter: brightness(.95); box-shadow: 0 4px 12px rgba(139,92,246,.3); background-color: var(--secondary)!important; }


.grad-blue   { background: linear-gradient(135deg,#eff6ff,#dbeafe); border:1px solid #bfdbfe; }
.grad-green  { background: linear-gradient(135deg,#ecfdf5,#d1fae5); border:1px solid #a7f3d0; }
.grad-purple { background: linear-gradient(135deg,#eef2ff,#e0e7ff); border:1px solid #c7d2fe; }
.grad-orange { background: linear-gradient(135deg,#fff7ed,#ffedd5); border:1px solid #fed7aa; }
.grad-pink   { background: linear-gradient(135deg,#fdf2f8,#fce7f3); border:1px solid #fbcfe8; }
.grad-indigo { background: linear-gradient(135deg,#eef2ff,#e0e7ff); border:1px solid #c7d2fe; }
.grad-teal   { background: linear-gradient(135deg,#f0fdfa,#ccfbf1); border:1px solid #99f6e4; }
.grad-cyan   { background: linear-gradient(135deg,#ecfeff,#cffafe); border:1px solid #a5f3fc; }

.badge-tile{
    width:2rem; height:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.bg-blue-500{ background:#3b82f6; }
.bg-green-500{ background:#10b981; }
.bg-purple-500{ background:#8b5cf6; }
.bg-orange-500{ background:#f59e0b; }
.bg-pink-500{ background:#ec4899; }
.bg-indigo-500{ background:#6366f1; }
.bg-teal-500{ background:#14b8a6; }
.bg-cyan-500{ background:#06b6d4; }
.text-blue-600{ color:#2563eb!important; }
.text-green-600{ color:#16a34a!important; }
.text-purple-600{ color:#7c3aed!important; }
.text-orange-600{ color:#ea580c!important; }
.text-pink-600{ color:#db2777!important; }
.text-indigo-600{ color:#4f46e5!important; }
.text-teal-600{ color:#0d9488!important; }
.text-cyan-600{ color:#0891b2!important; }


.rounded-lg{ border-radius: var(--radius-lg)!important; }
.rounded-button{ border-radius: var(--radius-button)!important; }


.mini-icon{ width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; margin-right:.5rem; border-radius: 50%; padding: 10px; }

.bg-purple-100 {
    background: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.counter-card {
    height: 100%;
}

#textInput{ height:28rem; }

.result {
    position: fixed;
    top: 100px;
    right: 5%;
    z-index: 999;
    background: #49b5e7;
    color: #fff;
    border: none;
    transition: all ease 1s;
    box-shadow: 0 4px 15px rgba(73, 181, 231, 0.3);
}

.result:hover {
    background: #0f394c;
}