/* TypeFlow v6.4.3 — Daily task CTA fix */

.daily-card .daily-cta,
.premium-side-card .daily-cta {
  width: calc(100% - 40px);
  min-height: 46px;
  height: 46px;
  margin: 18px 20px 12px;
  padding: 0 18px;
  box-sizing: border-box;

  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--line));
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 12%, var(--surface)),
    color-mix(in srgb, var(--primary) 5%, var(--surface))
  );

  color: var(--primary) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: 0 7px 20px color-mix(in srgb, var(--primary) 10%, transparent);
  transition: transform .16s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}

.daily-card .daily-cta span,
.premium-side-card .daily-cta span {
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  text-decoration: none !important;
}

.daily-card .daily-cta:hover,
.premium-side-card .daily-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 78%, var(--line));
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.daily-card .daily-cta:active,
.premium-side-card .daily-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
}

.daily-card .daily-cta:focus-visible,
.premium-side-card .daily-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
  outline-offset: 2px;
}

html[data-theme="dark"] .daily-card .daily-cta,
html[data-theme="dark"] .premium-side-card .daily-cta {
  background: linear-gradient(
    135deg,
    rgba(116, 91, 255, .18),
    rgba(116, 91, 255, .08)
  );
  border-color: rgba(132, 112, 255, .46);
  color: #a99cff !important;
}

html[data-theme="dark"] .daily-card .daily-cta:hover,
html[data-theme="dark"] .premium-side-card .daily-cta:hover {
  background: rgba(116, 91, 255, .20);
  border-color: rgba(150, 132, 255, .68);
}

@media (max-width: 720px) {
  .daily-card .daily-cta,
  .premium-side-card .daily-cta {
    width: calc(100% - 28px);
    margin: 14px 14px 10px;
    min-height: 44px;
    height: 44px;
    font-size: 13.5px !important;
  }
}