.desktop-item--widget .timeweather-card {
  width: 100%;
  height: 100%;
}

.timeweather-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(160deg, #0f172a 0%, #1e3a8a 48%, #38bdf8 100%);
  color: #fff;
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeweather-card--compact {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.timeweather-card__cover,
.timeweather-card__overlay,
.timeweather-card__content {
  position: absolute;
  inset: 0;
}

.timeweather-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeweather-card__overlay {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.56)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 35%);
}

.timeweather-card__content {
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.timeweather-card--compact .timeweather-card__content {
  padding: 7px 8px;
}

.timeweather-card__main,
.timeweather-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.timeweather-card__main {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.timeweather-card__time {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.timeweather-card__weekday {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.timeweather-card__weather {
  font-size: 30px;
  line-height: 1;
}

.timeweather-card__temperature {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.timeweather-card--compact .timeweather-card__time {
  font-size: 13px;
}

.timeweather-card--compact .timeweather-card__weekday {
  font-size: 7px;
}

.timeweather-card--compact .timeweather-card__weather {
  font-size: 12px;
}

.timeweather-card--compact .timeweather-card__temperature {
  font-size: 8px;
}

.timeweather-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeweather-wrap .timeweather-card {
  min-height: 176px;
}

.timeweather-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.timeweather-option {
  min-height: 48px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #dbeafe;
  font-size: 24px;
  line-height: 1;
}

.timeweather-option--active {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(96, 165, 250, 0.2);
}

.timeweather-temperature-field {
  position: relative;
}

.timeweather-temperature-field .field {
  padding-right: 44px;
}

.timeweather-temperature-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-weight: 700;
}