/* Shikoyatlar sahifasi (G, S58 «Aurora Vision»). Radius 18, soya yo'q; rang faqat ma'no: yashil yaxshi, sariq yaqin, qizil muammo. */
.cp { display:flex; flex-direction:column; gap:16px; }
.cp-body { display:flex; flex-direction:column; gap:14px; }
.cp > .phead { margin-bottom:0; }
.cp .lead { margin:0; color:var(--gray); max-width:72ch; }

/* tablar */
.cp-tabs { align-self:flex-start; max-width:100%; overflow-x:auto; }
.cp-tabs button { white-space:nowrap; }
.cp-tabs .cnt { margin-left:6px; min-width:22px; padding:1px 7px; border-radius:999px; background:var(--panel); font-size:12px; font-weight:700; }
.cp-tabs .cnt.r { background:var(--red-t, #fcebee); color:var(--red-tx, #a11a30); }

/* qidiruv + tartib */
.cp-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.cp-tools .search { flex:1 1 260px; max-width:420px; }
.cp-tools .chips { display:flex; flex-wrap:wrap; gap:8px; }

/* ro'yxat */
.cp-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; }
.cp-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card-bg, var(--bg)); overflow:hidden; }
.cp-card::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:transparent; transition:background .18s, top .18s, bottom .18s; }
.cp-card.mine::before { background:var(--v); }
.cp-card.over::before, .cp-card.stop::before { background:var(--red); }
.cp-card.over { border-color:color-mix(in srgb, var(--red) 35%, var(--line)); }
.cp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cp-who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-who .lnk, .cp-who b { font-weight:700; font-size:16px; text-align:left; }
.cp-who small { color:var(--gray); font-size:12px; }
.cp .lnk { padding:0; border:0; background:none; color:var(--ink); cursor:pointer; background-image:linear-gradient(var(--v), var(--v)); background-size:0 2px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .18s var(--ease-out, ease), color .18s; }
.cp .lnk:hover, .cp .lnk:focus-visible { color:var(--v); background-size:100% 2px; }
.cp .pills { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.cp-text { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.cp-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; color:var(--gray); font-size:13px; }
.cp-took { color:var(--green-tx, #0f6b31); font-weight:600; }

/* SLA chizig'i */
.cp-sla { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px dashed var(--line); }
.cp-bar { position:relative; height:6px; border-radius:999px; background:var(--panel); overflow:hidden; }
.cp-fill { position:absolute; left:0; top:0; bottom:0; border-radius:inherit; background:var(--green); }
.cp-fill.y { background:var(--amber); }
.cp-fill.r { background:var(--red); }
.cp-slat { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--gray); }
.cp-sla.g .cp-slat b { color:var(--green-tx, #0f6b31); }
.cp-sla.y .cp-slat b { color:var(--amber-tx, #8a4b05); }
.cp-sla.r .cp-slat b { color:var(--red-tx, #a11a30); }

/* «Birinchi qiling» bandidan kelganda qatorni yoritish */
.cp-card.cp-hl { border-color:var(--v); background:var(--tint); }

/* zaxira (H.ui.pageHead yo'q bo'lsa) */
.cp-top .phrow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cp-help { padding:12px 16px; border-radius:18px; background:var(--tint); color:var(--ink); }
.cp-help p { margin:0; }
.cp-empty .cp-blob { display:none; }
.cp-eh { display:flex; flex-direction:column; gap:4px; margin:6px 0 0; }
.cp-skel { display:grid; gap:12px; }
.cp-sk { height:118px; border-radius:18px; }

/* harakat: hover ko'tarilish, 180 ms */
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .cp-card { transition:transform .18s var(--ease-out, ease), border-color .18s, background-color .18s; }
  html:not([data-motion="off"]) .cp-card:hover { transform:translateY(-2px); border-color:var(--soft); }
  html:not([data-motion="off"]) .cp-card:hover::before { top:8px; bottom:8px; }
  html:not([data-motion="off"]) .cp-fill { animation:cpfill .6s var(--ease-out, ease) backwards; transform-origin:left center; }
  html:not([data-motion="off"]) .cp-card.cp-hl { animation:cphl 1.6s var(--ease-out, ease); }
}
@keyframes cpfill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes cphl { 0% { outline:2px solid var(--v); outline-offset:0; } 100% { outline:2px solid transparent; outline-offset:8px; } }

@media (max-width:720px) {
  .cp-list { grid-template-columns:1fr; }
  .cp-card { padding:14px 16px; }
  .cp-head { flex-direction:column; }
  .cp .pills { justify-content:flex-start; }
  .cp-tools .chips { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:2px; scrollbar-width:none; }
  .cp-tools .chip { flex:none; }
  .cp-slat { flex-direction:column; gap:2px; }
}