/* Görevler sayfası: filtre çubuğu + görev tablosu (telefonda kart). Renkler ve temel bileşenler app.css'ten. */
.gq-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; }
.gq-filters .search-field { flex: 1 1 260px; min-width: 0; }
.gq-filters select { height: 34px; font-size: 13px; }
.gq-filters .seg button { height: 32px; }
.gq-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.gq-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.gq-table th.gq-lv, .gq-table td.gq-lv { width: 64px; text-align: center; }
.gq-lv b { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--gold-soft); color: var(--gold2); font-weight: 800; font-variant-numeric: tabular-nums; }
.gq-do { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.gq-task { display: flex; align-items: center; gap: 12px; }
.gq-mob {
  --h: 40; position: relative; flex: none; width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(230, 180, 80, .14), rgba(17, 21, 28, .0) 70%), var(--bg2);
  border: 1px solid var(--line2); overflow: hidden;
}
.gq-mob img { width: 64px; height: 64px; object-fit: contain; transition: transform .2s; }
.gq-task:hover .gq-mob img { transform: scale(1.12); }
.gq-mob.none { color: hsl(var(--h) 70% 80%); background: linear-gradient(145deg, hsl(var(--h) 35% 22%), hsl(var(--h) 30% 12%)); border-color: hsl(var(--h) 35% 30%); font-weight: 800; font-size: 15px; }
.gq-task .ico { width: 40px; height: 40px; }
.gq-txt { min-width: 0; line-height: 1.35; }
.gq-txt b { font-size: 14.5px; }
.gq-txt b .n { color: var(--gold2); font-variant-numeric: tabular-nums; }
.gq-txt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.gq-verb { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin-right: 6px; }

.gq-npc b { display: block; font-weight: 700; }
.gq-npc small { color: var(--muted); font-size: 12px; }
.gq-side { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.gq-side.k { color: #ff8c7a; background: rgba(255, 107, 107, .12); }
.gq-side.e { color: #7fb6ff; background: var(--buy-soft); }
.gq-side.b { color: var(--text2); background: rgba(255, 255, 255, .06); }
.gq-cls { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--gold2); }

.gq-rw { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.gq-pts { display: flex; flex-wrap: wrap; gap: 6px; }
.gq-pt { display: inline-flex; align-items: baseline; gap: 4px; border-radius: 7px; padding: 3px 8px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .05); }
.gq-pt.exp { color: var(--t1); }
.gq-pt.noah { color: var(--gold2); }
.gq-pt.np { color: var(--t3); }
.gq-items { display: flex; flex-direction: column; gap: 4px; }
.gq-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.gq-item .ico { width: 26px; height: 26px; border-radius: 6px; font-size: 9px; }
.gq-item .ico img { border-radius: 5px; }
.gq-item em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.gq-sub { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.gq-more { display: flex; justify-content: center; padding: 16px; border-top: 1px solid var(--line); }
.gq-empty { text-align: center; color: var(--muted); padding: 48px 14px; }

.gq-note { font-size: 11.5px; color: var(--muted); }

@media (max-width: 860px) {
  .gq-filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .gq-filters .seg::-webkit-scrollbar { display: none; }
  .gq-filters .seg button { white-space: nowrap; flex: none; }
  .gq-table thead { display: none; }
  .gq-table, .gq-table tbody, .gq-table tr, .gq-table td { display: block; width: 100%; }
  .gq-table tr { position: relative; padding: 14px 14px 12px 66px; border-bottom: 1px solid var(--line); }
  .gq-table td { border: 0; padding: 0; }
  .gq-table td.gq-lv { position: absolute; left: 12px; top: 14px; width: auto; }
  .gq-table td + td { margin-top: 10px; }
  .gq-do, .gq-rw { min-width: 0; }
  .gq-mob { width: 52px; height: 52px; }
  .gq-mob img { width: 56px; height: 56px; }
}