.coderstation-small-box {
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--panel-border, #e5e7eb);
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow, 0 4px 6px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    color: var(--text-color, #111827);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 150px;
}

.coderstation-small-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.coderstation-small-box .inner {
    padding: 10px 20px;
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

.coderstation-small-box h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    white-space: nowrap;
    color: var(--text-heading, #062E52);
}

.coderstation-small-box p {
    font-size: 0.95rem;
    margin: 0;
    color: #6c757d;
    font-weight: 500;
}

/* Icon Container - Floating on the right */
.coderstation-small-box .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 1;
    transition: transform 0.3s ease;
}

.coderstation-small-box:hover .icon {
    transform: scale(1.1) rotate(5deg);
}

.coderstation-small-box .small-box-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    display: block;
    z-index: 10;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.coderstation-small-box .small-box-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    display: block;
    z-index: 10;
    font-size: 0.85rem;
    font-style: normal;
}

/* Professional Custom Animations */
@keyframes smooth-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.4); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(13, 202, 240, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}

@keyframes soft-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* Data Presentation Variations */
.box-style-progress h3 {
    margin-bottom: 2px;
}
.box-style-progress p {
    margin-bottom: 0px;
    line-height: 1.1;
}
.box-style-progress .progress {
    height: 4px;
    margin-top: 3px;
    background-color: #e9ecef;
    border-radius: 2px;
}
.box-style-progress .progress-bar {
    border-radius: 2px;
}
.box-style-progress .progress-description {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 1px;
}

/* Color Variations using 1px borders, custom captions and solid icons */
.border-primary-box { border: 1px solid var(--primary-color, #062E52); }
.border-primary-box h3 { color: var(--primary-color, #062E52); }
.border-primary-box p { color: #4b6e8a; }
.border-primary-box .icon { background: var(--primary-color, #062E52); color: #fff; }
.border-primary-box .small-box-footer, .border-primary-box .small-box-caption { background: var(--primary-color, #062E52); color: #fff; }
.border-primary-box .small-box-footer:hover { background: #144e85; color: #fff; }

.border-secondary-box { border: 1px solid var(--secondary-color, #FF5C0A); }
.border-secondary-box h3 { color: var(--secondary-color, #FF5C0A); }
.border-secondary-box p { color: #c45214; }
.border-secondary-box .icon { background: var(--secondary-color, #FF5C0A); color: #fff; }
.border-secondary-box .small-box-footer, .border-secondary-box .small-box-caption { background: var(--secondary-color, #FF5C0A); color: #fff; }
.border-secondary-box .small-box-footer:hover { background: #ff8a4c; color: #fff; }

.border-accent-box { border: 1px solid var(--accent-color, #6366f1); }
.border-accent-box h3 { color: var(--accent-color, #6366f1); }
.border-accent-box p { color: #4f52b8; }
.border-accent-box .icon { background: var(--accent-color, #6366f1); color: #fff; }
.border-accent-box .small-box-footer, .border-accent-box .small-box-caption { background: var(--accent-color, #6366f1); color: #fff; }
.border-accent-box .small-box-footer:hover { background: #818cf8; color: #fff; }

.border-success-box { border: 1px solid #10b981; }
.border-success-box h3 { color: #10b981; }
.border-success-box p { color: #0f855d; }
.border-success-box .icon { background: #10b981; color: #fff; }
.border-success-box .small-box-footer, .border-success-box .small-box-caption { background: #10b981; color: #fff; }
.border-success-box .small-box-footer:hover { background: #34d399; color: #fff; }

.border-warning-box { border: 1px solid var(--primary-color, #062E52); }
.border-warning-box h3 { color: var(--primary-color, #062E52); }
.border-warning-box p { color: var(--primary-color, #062E52); }
.border-warning-box .icon { background: var(--primary-color, #062E52); color: #fff; }
.border-warning-box .small-box-footer, .border-warning-box .small-box-caption { background: var(--primary-color, #062E52); color: #fff; }
.border-warning-box .small-box-footer:hover { background: #153c66; color: #fff; }

.border-danger-box { border: 1px solid #ef4444; }
.border-danger-box h3 { color: #ef4444; }
.border-danger-box p { color: #b83333; }
.border-danger-box .icon { background: #ef4444; color: #fff; }
.border-danger-box .small-box-footer, .border-danger-box .small-box-caption { background: #ef4444; color: #fff; }
.border-danger-box .small-box-footer:hover { background: #f87171; color: #fff; }

.border-info-box { border: 1px solid #0dcaf0; }
.border-info-box h3 { color: #0dcaf0; }
.border-info-box p { color: #0a9ebc; }
.border-info-box .icon { background: #0dcaf0; color: #fff; animation: soft-float 3s ease-in-out infinite; }
.border-info-box .small-box-footer, .border-info-box .small-box-caption { background: #0dcaf0; color: #fff; }
.border-info-box .small-box-footer:hover { background: #3dd5f3; color: #fff; }

.border-dark-box { border: 1px solid #212529; }
.border-dark-box h3 { color: #212529; }
.border-dark-box p { color: #495057; }
.border-dark-box .icon { background: #212529; color: #fff; animation: smooth-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.border-dark-box .small-box-footer, .border-dark-box .small-box-caption { background: #212529; color: #fff; }
.border-dark-box .small-box-footer:hover { background: #343a40; color: #fff; }