html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Yeastar Timeline Styles */
.yeastar-timeline {
    position: relative;
}

.yeastar-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 40px;
    left: 68px; /* Offset to align with icons (45px time + 23px gap center) */
    width: 1px;
    background: var(--tblr-border-color);
}

.timeline-event {
    position: relative;
    z-index: 1;
}

.timeline-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tblr-dark);
    border-radius: 50%;
}

.timeline-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.modal-full-width {
    max-width: 95vw;
}

.bg-dark-lt {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Feature Gate Styling */
.feature-gate {
    position: relative;
    overflow: hidden;
}

.feature-gate-locked {
    filter: blur(8px) grayscale(1);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

.feature-gate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(var(--tblr-body-bg-rgb, 244, 246, 250), 0.7);
    backdrop-filter: blur(4px);
}

.feature-gate-content {
    background: var(--tblr-bg-surface);
    padding: 1rem;
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-shadow-card);
    text-align: center;
    border: 1px solid var(--tblr-border-color);
    max-width: 90%;
}

.feature-gate-popover-wrapper {
    cursor: help;
}

.feature-gate-popover-wrapper .feature-gate-locked {
    display: inline-block;
}

/* Animations */
.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse { 
    animation-name: pulse; 
    animation-duration: 2s; /* Slower pulsation */
}
.infinite { animation-iteration-count: infinite; }