#results{ display:grid; gap:20px; grid-template-columns:repeat(12,1fr); padding:20px 0 10px; }
.card{ grid-column:span 4; max-width:100%; height:460px; border-radius:16px; position:relative; }
@media (max-width:1100px){ .card{ grid-column:span 6; } }
@media (max-width:700px){ .card{ grid-column:span 12; } }

.card-inner{
  position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-1); background:var(--card);
  transition: box-shadow .3s, transform .25s, background .35s;
}
.card:hover .card-inner{ transform: translateY(-2px) rotateX(0.5deg) rotateY(0.6deg); box-shadow:var(--shadow-2); }
.card .glow{
  position:absolute; inset:-1px; pointer-events:none; border-radius:16px;
  background: radial-gradient(120px 80px at var(--mx,50%) 0%, rgba(250,188,68,.35), transparent 70%);
  transition: opacity .25s; opacity:.0; mix-blend-mode: screen;
}
.card:hover .glow{ opacity:.7; }

.tap-hint{
  position:absolute; top:10px; right:10px; z-index:2; background: rgba(255,255,255,.12); color:var(--text);
  border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; display:flex; align-items:center; gap:6px; backdrop-filter: blur(6px); animation: pulse 1.6s infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(250,188,68,.35);} 70%{ transform:scale(1.03); box-shadow:0 0 0 10px rgba(250,188,68,0);} 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(250,188,68,0);} }

.face{ position:absolute; inset:0; padding:16px 16px 60px; display:flex; flex-direction:column; }
.front{ opacity:1; transition: opacity .25s; }
.back{ opacity:0; transition: opacity .25s; pointer-events:none; }
.card.active .front{ opacity:0; }
.card.active .back{ opacity:1; pointer-events:auto; }

.card.active .card-inner{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 26%, transparent), transparent 50%) , var(--card);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
}

.title{ margin:0 0 8px; font-size:18px; line-height:1.25; font-weight:800; color:var(--text); }
.meta{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; margin-bottom:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.tag{ padding:4px 10px; font-size:12px; border-radius:999px; background:rgba(250,188,68,.18); color:var(--text); border:1px dashed rgba(250,188,68,.5); }

.details{ margin:6px 0 0; padding:0; list-style:none; color:var(--text); font-size:14px; }
/* прибираємо "крапки" перед елементами списку (мета/пріоритети) */
.details li{ display:flex; gap:6px; margin:6px 0; }
.details li::before{ content:none; }

/* Дедлайни */
.deadline-badge{ margin-left:auto; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid var(--border); }
.deadline-soon{ background: rgba(240,68,56,.15); color:var(--danger); border-color: rgba(240,68,56,.4); }
.deadline-mid{  background: rgba(255,176,32,.15); color:var(--warn);  border-color: rgba(255,176,32,.45); }
.deadline-ok{   background: rgba(25,195,125,.15); color:var(--ok);   border-color: rgba(25,195,125,.45); }
.deadline-open{ background: rgba(130,170,255,.15); color:var(--link); border-color: rgba(130,170,255,.45); }

.scroll-area{ overflow:auto; margin-bottom:62px; padding-right:6px; }
.scroll-area h3{ margin:10px 0 6px; font-size:15px; color:var(--brand); }

/* === Кнопки внизу картки — надійне вирівнювання праворуч === */
.card-actions{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  height: fit-content;   /* висота рівна висоті кнопок */
  padding: 10px;            /* без додаткових відступів */




/*  flex-wrap:wrap;           /* якщо не поміщаються — переносяться рядком нижче */
  overflow:hidden;          /* запобігає "випиранню" візуальних ефектів */
}
.card-actions > *{ min-width:0; } /* усуває min-content переповнення у flex-контейнері */
.card-actions .btn{
  padding: 6px 12px;   /* менший внутрішній відступ */
  font-size: 13px;
  line-height: 1.2;    /* щоб текст не створював зайву висоту */
  border-radius: 8px;
}

.btn.heart[aria-pressed="true"]{ background: rgba(255,92,92,.16); border-color: rgba(255,92,92,.5); color:#ff7b7b; }

/* Ripple */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.35);
  transform:scale(0); animation: ripple .6s ease-out forwards;
}
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }

/* Скелетони */
.skeleton{ background: linear-gradient(90deg,#c9cede 25%,#dfe3ef 37%,#c9cede 63%); background-size:400% 100%; animation: shimmer 1.2s infinite; border-radius:10px; }
[data-theme="dark"] .skeleton{ background: linear-gradient(90deg,#394064 25%,#434a73 37%,#394064 63%); }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.card-skel{ height:460px; border-radius:16px; box-shadow:var(--shadow-1); border:1px solid var(--border); }

button.apply, #load-more{ width:100%; margin:12px 0 20px; background:var(--brand); color:#2b2b2b; border:none; }
#load-more{ background:var(--input); color:var(--text); border:1px solid var(--border); }
#load-more:hover{ border-color:var(--brand); }