/* ---------- Прогресс-бар в стиле Windows XP ---------- */
.xp-bar {
  --xp-track: #d9d9d9;
  --xp-frame: #3c3c3c;
  position: relative;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--xp-frame);
  border-radius: 7px;
  background: var(--xp-track);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .6);
  overflow: hidden;
}
.dark .xp-bar {
  --xp-track: #3f4652;
  --xp-frame: #0b0d10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
}
.xp-fill {
  height: 100%;
  border-radius: 3px;
  /* Верхний слой — зазоры между сегментами цветом дорожки, нижний — глянцевый зелёный. */
  background-image:
    repeating-linear-gradient(to right, transparent 0 9px, var(--xp-track) 9px 12px),
    linear-gradient(to bottom, #e3fbd8 0%, #8fe170 18%, #3dbb24 45%, #2ea51a 60%, #4fcb38 82%, #b7f2a3 100%);
  transition: width .6s ease-out;
}
.xp-bar.over .xp-fill {
  background-image:
    repeating-linear-gradient(to right, transparent 0 9px, var(--xp-track) 9px 12px),
    linear-gradient(to bottom, #fff3d1 0%, #ffd36b 18%, #e8a317 45%, #d18c0b 60%, #eeb232 82%, #ffe7a6 100%);
}

/* ---------- Канбан ---------- */
.kanban-col.sortable-drag-over { outline: 2px dashed rgb(16 185 129 / .6); outline-offset: -4px; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { cursor: grabbing; }

/* ---------- Индикаторы загрузки HTMX ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }
.htmx-request .hide-on-request { display: none; }
.spinner {
  width: 1rem; height: 1rem; border-radius: 9999px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .xp-fill { transition: none; }
  .spinner { animation-duration: 2s; }
}