/* Generation controls, states, payment sheet and reusable content surfaces. */
.settings-block,
.toggle-row,
.cost-card,
.task-card,
.points-stat,
.points-product,
.stat-cell,
.acct-item,
.log-item {
  border-color: var(--jr-line) !important;
  background: var(--jr-surface) !important;
  color: var(--jr-text);
  box-shadow: var(--jr-shadow-1) !important;
}

.prompt-count,
.prompt-draft,
.material-head span,
.submit-sub,
.tc-vmeta,
.tc-elapsed,
.points-refresh,
.m-sub,
.stat-lbl,
.log-empty {
  color: var(--jr-text-tertiary) !important;
}

.prompt-draft .saved-dot {
  background: var(--jr-positive) !important;
}

.upload-card {
  border-color: var(--jr-line-strong) !important;
  background: var(--jr-surface-soft) !important;
}

.upload-card:hover,
.upload-card.dragover {
  border-color: rgba(var(--jr-brand-rgb), .5) !important;
  background: var(--jr-brand-50) !important;
}

.upload-plus {
  background: var(--jr-brand-50) !important;
  color: var(--jr-brand-600) !important;
}

.toggle-row {
  min-height: 48px;
  box-shadow: none !important;
}

.toggle-slider {
  background: color-mix(in srgb, var(--jr-text-tertiary) 30%, transparent) !important;
}

.toggle input:checked + .toggle-slider {
  background: var(--jr-brand-500) !important;
}

.cost-icon {
  background: var(--jr-brand-50) !important;
  color: var(--jr-brand-600) !important;
}

.cost-copy b,
.cost-balance {
  color: var(--jr-brand-600) !important;
}

.cost-copy span {
  color: var(--jr-text-tertiary) !important;
}

.task-card {
  overflow: hidden;
  border-radius: var(--jr-radius-lg) !important;
  box-shadow: var(--jr-shadow-1) !important;
  animation: jr-task-in var(--jr-duration-sheet) var(--jr-ease-spring) both !important;
  transition: transform var(--jr-duration-base) var(--jr-ease-standard),
              box-shadow var(--jr-duration-base) var(--jr-ease-standard) !important;
}

.task-card::before {
  border-radius: var(--jr-radius-lg) !important;
  background: linear-gradient(145deg, rgba(var(--jr-brand-rgb), .38), rgba(255, 255, 255, .02) 46%, rgba(79, 158, 168, .22)) !important;
  opacity: .38 !important;
}

.task-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--jr-shadow-2) !important;
}

.tc-running {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px !important;
  padding: 22px !important;
}

.ring-wrap {
  filter: none !important;
}

.ring-bg {
  stroke: color-mix(in srgb, var(--jr-text-tertiary) 16%, transparent) !important;
}

.ring-fill {
  stroke: var(--jr-brand-500) !important;
}

.ring-num,
.tc-stage,
.tc-vtitle,
.tc-error h3 {
  color: var(--jr-text) !important;
}

.ring-unit,
.tc-prompt,
.tc-count .cl,
.tc-count .cd,
.tc-error p {
  color: var(--jr-text-secondary) !important;
}

.generation-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 15px;
}

.generation-step {
  min-width: 0;
}

.generation-step-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--jr-radius-pill);
  background: color-mix(in srgb, var(--jr-text-tertiary) 16%, transparent);
}

.generation-step-bar::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--jr-brand-500);
  transition: width var(--jr-duration-sheet) var(--jr-ease-standard);
}

.generation-step.complete .generation-step-bar::after,
.generation-step.active .generation-step-bar::after {
  width: 100%;
}

.generation-step.active .generation-step-bar::after {
  animation: jr-progress-pulse 1.3s ease-in-out infinite;
}

.generation-step-label {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--jr-text-tertiary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-step.active .generation-step-label {
  color: var(--jr-brand-600);
  font-weight: 700;
}

.tc-taskbar {
  gap: 10px;
  padding: 10px 12px !important;
  border-color: var(--jr-line) !important;
  background: var(--jr-surface-soft) !important;
}

.tc-tag {
  border: 1px solid rgba(var(--jr-brand-rgb), .09);
  background: var(--jr-brand-50) !important;
  color: var(--jr-brand-600) !important;
}

.tc-action,
.dl-btn,
.m-cancel,
.admin-settle-btn,
.acct-mini-btn {
  min-height: 36px;
  border-color: var(--jr-line) !important;
  border-radius: var(--jr-radius-sm) !important;
  background: var(--jr-bg-elevated) !important;
  color: var(--jr-text-secondary) !important;
  box-shadow: none !important;
}

.tc-action:hover,
.dl-btn:hover,
.m-cancel:hover,
.acct-mini-btn:hover {
  border-color: rgba(var(--jr-brand-rgb), .3) !important;
  color: var(--jr-brand-600) !important;
}

.tc-action.primary,
.dl-btn,
.admin-settle-btn {
  border-color: transparent !important;
  background: var(--jr-brand-600) !important;
  color: #fff !important;
}

.tc-action.danger:hover {
  border-color: color-mix(in srgb, var(--jr-danger) 40%, transparent) !important;
  color: var(--jr-danger) !important;
}

.tc-actions-more {
  position: relative;
}

.tc-more-menu {
  position: absolute;
  z-index: 25;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-radius-md);
  background: var(--jr-glass-high);
  box-shadow: var(--jr-shadow-2), var(--jr-inner-highlight);
  backdrop-filter: blur(var(--jr-blur-md));
  -webkit-backdrop-filter: blur(var(--jr-blur-md));
}

.tc-more-menu[hidden] {
  display: none;
}

.tc-more-menu button {
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--jr-text-secondary);
  text-align: left;
  cursor: pointer;
}

.tc-more-menu button:hover {
  background: var(--jr-surface-soft);
  color: var(--jr-text);
}

.tc-more-menu button.danger {
  color: var(--jr-danger);
}

.tc-error .ei {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--jr-danger) 12%, transparent);
}

.modal-overlay {
  background: rgba(20, 25, 34, .32) !important;
  backdrop-filter: blur(10px) saturate(.94) !important;
  -webkit-backdrop-filter: blur(10px) saturate(.94) !important;
}

.modal {
  border-radius: var(--jr-radius-xl) !important;
  color: var(--jr-text);
}

.points-modal {
  max-width: 720px !important;
}

.points-head h2,
.points-section-title,
.payment-alipay b,
.order-status b {
  color: var(--jr-text) !important;
}

.points-close {
  width: 42px !important;
  height: 42px !important;
  border-color: var(--jr-line) !important;
  border-radius: var(--jr-radius-pill) !important;
  background: var(--jr-bg-elevated) !important;
  color: var(--jr-text-secondary) !important;
}

.points-summary {
  gap: 10px !important;
}

.points-stat {
  min-height: 94px;
  padding: 15px !important;
  border-radius: var(--jr-radius-md) !important;
  box-shadow: none !important;
}

.points-stat:first-child {
  border-color: rgba(var(--jr-brand-rgb), .18) !important;
  background: var(--jr-brand-50) !important;
}

.points-stat span,
.points-product span {
  color: var(--jr-text-tertiary) !important;
}

.points-stat b,
.points-product b {
  color: var(--jr-text) !important;
}

.pay-channel {
  min-height: 48px;
  border-color: var(--jr-line) !important;
  border-radius: var(--jr-radius-md) !important;
  background: var(--jr-surface-soft) !important;
  color: var(--jr-text-secondary) !important;
}

.pay-channel.active {
  border-color: rgba(22, 119, 200, .24) !important;
  background: rgba(22, 119, 200, .08) !important;
  color: #1767aa !important;
}

.points-products {
  gap: 10px !important;
}

.points-product {
  min-height: 118px !important;
  padding: 16px 12px !important;
  border-radius: var(--jr-radius-md) !important;
  box-shadow: none !important;
}

.points-product:hover:not(:disabled),
.points-product.active {
  border-color: rgba(var(--jr-brand-rgb), .32) !important;
  background: var(--jr-brand-50) !important;
  box-shadow: var(--jr-shadow-1) !important;
}

.points-product em,
.points-link {
  color: var(--jr-brand-600) !important;
}

.order-status,
.payment-alipay {
  border-color: var(--jr-line) !important;
  border-radius: var(--jr-radius-md) !important;
  background: var(--jr-surface-soft) !important;
}

.payment-alipay button {
  min-height: 42px !important;
  border-radius: var(--jr-radius-sm) !important;
}

.points-actions {
  border-color: var(--jr-line) !important;
  background: transparent !important;
}

.stat-grid {
  gap: 10px !important;
}

.stat-cell {
  border-radius: var(--jr-radius-md) !important;
  box-shadow: none !important;
}

.stat-num {
  color: var(--jr-brand-600) !important;
}

.trend-chart,
.admin-order-list {
  border-color: var(--jr-line) !important;
  background: var(--jr-surface-soft) !important;
}

@keyframes jr-task-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes jr-progress-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@media (max-width: 600px) {
  .tc-running {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .ring-wrap {
    margin: 0 auto;
  }

  .generation-steps {
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    overflow-x: auto;
  }

  .tc-taskbar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .tc-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .tc-action {
    min-height: 44px;
  }

  .points-modal {
    padding: 28px 16px 18px !important;
  }

  .points-summary {
    grid-template-columns: 1fr 1fr !important;
  }

  .points-stat:first-child {
    grid-column: 1 / -1 !important;
  }

  .points-products {
    grid-template-columns: 1fr !important;
  }

  .points-product {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 72px !important;
    text-align: left !important;
  }

  .points-product b,
  .points-product span,
  .points-product em {
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-card,
  .generation-step.active .generation-step-bar::after {
    animation: none !important;
  }
}