:root {
  --chIron: #6f7f84; --chIronInk: #dfe6e6;
  --chEmber: #b4562a; --chEmberInk: #ffd9bf;
  --chGilt: #c9a052; --chGiltInk: #1c1408;
  --chFace: #161d20; --chFace2: #0d1316; --chEdge: #3c4a4e; --chParch: #e8dfcc; --chDim: #a99f8c; --chInk: #f1d79c;
  --chCut: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  --chCut4: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

 
.chal-pane { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 12px; box-sizing: border-box; }
.chGroup { margin: 0 0 14px; }
.chGh { margin: 2px 0 8px; font: 700 13px/1.1 var(--title, Georgia, serif); letter-spacing: .18em; text-transform: uppercase;
  color: var(--chDim); }
.chRow { position: relative; margin: 0 0 8px; padding: 10px 12px; background: var(--chEdge); clip-path: var(--chCut);
  border-radius: 0; box-shadow: none; isolation: isolate; }
.chRow::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--chFace); clip-path: var(--chCut); }
.chHead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chFace { width: 32px; height: 32px; object-fit: cover; object-position: 50% 20%; clip-path: var(--chCut4); border-radius: 0; flex: 0 0 auto; }
.chWho { font: 600 12px/1 var(--ui, system-ui, sans-serif); color: var(--chDim); letter-spacing: .06em; }
.chName { flex: 1 1 auto; margin: 0; min-width: 0; font: 700 16px/1.15 var(--title, Georgia, serif); color: var(--chParch);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chCount { flex: 0 0 auto; font: 700 13px/1 var(--ui, system-ui, sans-serif); color: var(--chDim); letter-spacing: .08em; }
.chGoal { margin: 4px 0 8px; font: 400 13px/1.3 var(--ui, system-ui, sans-serif); color: var(--chDim); }
.chSteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chStep { position: relative; display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content; align-items: center;
  column-gap: 6px; row-gap: 4px; padding: 7px 8px; background: var(--chFace2); clip-path: var(--chCut4); min-width: 0; }
.chStep .chTxt { font: 600 12px/1.2 var(--ui, system-ui, sans-serif); color: var(--chParch); min-width: 0; }
.chStep .chBar { grid-column: 1 / -1; position: relative; height: 6px; background: #05080a; clip-path: var(--chCut4); overflow: hidden; }
.chStep .chBar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chIron); }
.chStep.chT-ember .chBar i { background: var(--chEmber); }
.chStep.chT-gilt .chBar i { background: var(--chGilt); }
.chStep .chNum { grid-column: 1 / -1; font: 600 11px/1 var(--ui, system-ui, sans-serif); color: var(--chDim); letter-spacing: .06em; }
.chStep .chDone { grid-column: 1 / -1; font: 800 11px/1 var(--ui, system-ui, sans-serif); letter-spacing: .16em; color: var(--chInk); }
.chStep.done { background: #1d262a; }
.chRw { grid-column: 1 / -1; display: block; font: 500 11px/1.25 var(--ui, system-ui, sans-serif); color: var(--chDim); min-width: 0; }
.chRw b { font-weight: 800; letter-spacing: .08em; color: var(--chParch); text-transform: uppercase; font-size: 10px; }
.chStep.done .chRw { color: var(--chParch); }
 
.chPays { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; min-width: 0; }
.chPay { font: 700 11px/1.25 var(--ui, system-ui, sans-serif); letter-spacing: .04em; color: var(--chInk); white-space: nowrap; }
.chPay-dust { color: #cfd8dc; }
.chPopRow .chPays { grid-column: 2; }
.chPopRow .chPay { font-size: 12px; }

 
.chTier { display: inline-block; padding: 3px 7px; font: 800 10px/1 var(--ui, system-ui, sans-serif); letter-spacing: .16em;
  clip-path: var(--chCut4); border-radius: 0; background: var(--chIron); color: var(--chIronInk); white-space: nowrap; }
.chT-ember .chTier { background: var(--chEmber); color: var(--chEmberInk); }
.chT-gilt .chTier { background: var(--chGilt); color: var(--chGiltInk); }

 


.chLayer { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; }
.chLayer[hidden] { display: none; }
.chVeil { position: absolute; inset: 0; background: #030506; opacity: .9; }
.chPop { position: relative; z-index: 1; box-sizing: border-box; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: #12181b; border-radius: 0; box-shadow: none; }
.chPopH { margin: 0; text-align: center; font: 700 20px/1.1 var(--title, Georgia, serif); letter-spacing: .16em; color: var(--chInk); }
.chPopList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chPopRow { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 3px; padding: 8px 10px;
  background: var(--chFace); clip-path: var(--chCut4); }
.chPopName { font: 700 16px/1.15 var(--title, Georgia, serif); color: var(--chParch); min-width: 0; }
.chPopName small { font: 600 11px/1 var(--ui, system-ui, sans-serif); color: var(--chDim); letter-spacing: .06em; }
.chPopRow .chRw { grid-column: 2; font-size: 12px; color: var(--chParch); }
.chOk { align-self: center; margin-top: 2px; min-width: 120px; }

@media (max-height: 360px) {
  .chPop { padding: 10px 12px 12px; gap: 6px; }
  .chPopH { font-size: 17px; }
  .chPopRow { padding: 6px 8px; }
  .chPopName { font-size: 14px; }
}
@media (max-width: 700px) {
  .chSteps { grid-template-columns: 1fr; }
}

 
.chPop { overflow: hidden; }
.chPopList { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.chOk { flex: 0 0 auto; }
 
@media (max-height: 420px) {
  .chPop { width: min(720px, calc(100vw - 24px)); }
  .chPopRow { grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .chPopRow .chPopName { grid-column: 2; }
  .chPopRow .chRw { grid-column: 3; }
  .chPopRow .chPays { grid-column: 4; grid-row: 1; align-self: center; }
}