:root {
  --cd-r: 18px;
  --cd-r-sm: 12px;
  --cd-hair: color-mix(in oklab, var(--line) 74%, transparent);
  --cd-soft: color-mix(in oklab, var(--ink) 4%, transparent);
  --cd-sh: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --cd-sh-2: 0 18px 44px -22px color-mix(in oklab, var(--ink) 38%, transparent);
  --cd-ease: cubic-bezier(.2, .8, .3, 1);
}

.cd-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--cd-hair);
  border-radius: var(--cd-r);
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in oklab, var(--green) 16%, transparent), transparent 62%),
    radial-gradient(110% 140% at 0% 100%, color-mix(in oklab, var(--gold) 13%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--cd-sh);
}
.cd-hero-av { flex: none; display: block }
.cd-hero-av .av {
  display: grid; place-items: center; overflow: hidden;
  width: 62px; height: 62px; border-radius: 50%;
  background: color-mix(in oklab, var(--green) 16%, var(--surface2));
  color: var(--green);
  font: 900 23px var(--font);
  border: 2px solid color-mix(in oklab, var(--surface) 70%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--ink) 45%, transparent);
}
.cd-hero-av .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block }
.cd-hero-txt { flex: 1 1 220px; min-width: 0 }
.cd-hello { display: block; font: 600 11.5px var(--font); color: var(--muted) }
.cd-hero-txt h1 {
  margin: 2px 0 9px;
  font: 900 21px/1.5 var(--font);
  font-size: calc(21px * var(--fz-h1, var(--fz-base, 1)));
  color: var(--ink);
}
.cd-chips { display: flex; flex-wrap: wrap; gap: 7px }
.cd-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--cd-hair);
  background: color-mix(in oklab, var(--surface) 84%, transparent);
  font: 700 11px var(--font);
  font-size: calc(11px * var(--fz-small, 1));
  color: var(--ink);
}
.cd-chip svg, .cd-chip .nv-i { width: 14px; height: 14px; color: var(--muted) }
.cd-chip.gold { border-color: color-mix(in oklab, var(--gold) 45%, transparent); color: color-mix(in oklab, var(--gold) 72%, var(--ink)) }
.cd-chip.gold svg, .cd-chip.gold .nv-i { color: var(--gold) }
.cd-chip.green { border-color: color-mix(in oklab, var(--green) 40%, transparent); color: var(--green) }
.cd-chip.green svg, .cd-chip.green .nv-i { color: var(--green) }
.cd-hero-act { display: flex; gap: 8px; flex-wrap: wrap }

.cd-nudge {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; margin-bottom: 16px;
  border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent);
  border-radius: var(--cd-r-sm);
  background: color-mix(in oklab, var(--gold) 9%, var(--surface));
  color: var(--ink); text-decoration: none;
  transition: transform .18s var(--cd-ease), box-shadow .18s var(--cd-ease);
}
.cd-nudge:hover { transform: translateY(-2px); box-shadow: var(--cd-sh-2) }
.cd-nudge > svg:last-child, .cd-nudge > .nv-i:last-child { flex: none; color: var(--muted) }
.cd-nudge-txt { flex: 1; min-width: 0 }
.cd-nudge-txt b { display: block; font: 800 12.5px var(--font); font-size: calc(12.5px * var(--fz-base, 1)) }
.cd-nudge-txt small { display: block; margin-top: 3px; color: var(--muted); font: 500 11px/1.8 var(--font); font-size: calc(11px * var(--fz-small, 1)) }
.cd-ring {
  flex: none; position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 1%), color-mix(in oklab, var(--ink) 10%, transparent) 0);
}
.cd-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface) }
.cd-ring b { position: relative; font: 800 10.5px var(--font); color: var(--ink) }

.cd-cards {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.cd-card {
  position: relative; display: block; overflow: hidden;
  padding: 15px 15px 14px;
  border: 1px solid var(--cd-hair); border-radius: var(--cd-r-sm);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform .18s var(--cd-ease), box-shadow .18s var(--cd-ease), border-color .18s var(--cd-ease);
}
.cd-card::after {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 3px; height: 100%; background: var(--cd-tone, var(--green)); opacity: .85;
}
.cd-card:hover { transform: translateY(-3px); box-shadow: var(--cd-sh-2); border-color: color-mix(in oklab, var(--cd-tone, var(--green)) 45%, transparent) }
.cd-card[data-tone="gold"] { --cd-tone: var(--gold) }
.cd-card[data-tone="blue"] { --cd-tone: var(--blue) }
.cd-card[data-tone="green"] { --cd-tone: var(--green) }
.cd-card[data-tone="tier"] { --cd-tone: color-mix(in oklab, var(--gold) 72%, var(--red)) }
.cd-card-ic {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 11px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--cd-tone, var(--green)) 14%, transparent);
  color: var(--cd-tone, var(--green));
}
.cd-card-k { display: block; font: 600 11px var(--font); color: var(--muted); font-size: calc(11px * var(--fz-small, 1)) }
.cd-card-v {
  display: block; margin: 4px 0 3px;
  font: 900 19px/1.4 var(--font); font-size: calc(19px * var(--fz-base, 1));
  color: var(--ink); word-break: break-word;
}
.cd-card small { display: block; font: 500 10.5px var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1)) }

.cd-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-bottom: 20px }
.cd-panel {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--cd-hair); border-radius: var(--cd-r);
  background: var(--surface); box-shadow: var(--cd-sh);
}
.cd-panel-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--cd-soft); border-bottom: 1px solid var(--cd-hair) }
.cd-panel-head .ic {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in oklab, var(--green) 13%, transparent); color: var(--green);
}
.cd-panel-head b { display: block; font: 900 13px var(--font); font-size: calc(13px * var(--fz-base, 1)) }
.cd-panel-head span { display: block; margin-top: 3px; font: 500 10.5px var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1)) }
.cd-panel-body { flex: 1; padding: 16px }
.cd-panel-body .muted { margin: 9px 0 0; font: 500 11px/1.9 var(--font); color: var(--muted); font-size: calc(11px * var(--fz-small, 1)) }
.cd-panel-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: var(--cd-soft); border-top: 1px solid var(--cd-hair) }

.cd-pts { display: flex; align-items: baseline; gap: 8px }
.cd-pts b { font: 900 30px/1 var(--font); font-size: calc(30px * var(--fz-base, 1)); color: var(--green) }
.cd-pts span { font: 600 11px var(--font); color: var(--muted); font-size: calc(11px * var(--fz-small, 1)) }
.cd-bar { height: 7px; margin-top: 13px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 9%, transparent); overflow: hidden }
.cd-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--gold)) }

.cd-tiles { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.cd-tiles a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--cd-hair); border-radius: var(--cd-r-sm);
  background: color-mix(in oklab, var(--surface2) 40%, var(--surface));
  color: var(--ink); text-decoration: none;
  transition: transform .16s var(--cd-ease), border-color .16s var(--cd-ease), background .16s var(--cd-ease);
}
.cd-tiles a:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--green) 45%, transparent); background: var(--surface) }
.cd-tiles .ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--green) 12%, transparent); color: var(--green) }
.cd-tiles a > span:nth-child(2) { flex: 1; min-width: 0 }
.cd-tiles b { display: block; font: 800 12px var(--font); font-size: calc(12px * var(--fz-base, 1)) }
.cd-tiles small { display: block; margin-top: 2px; font: 500 10.5px var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1)) }
.cd-tiles a > svg:last-child, .cd-tiles a > .nv-i:last-child { flex: none; color: var(--muted) }

.cd-sec { display: flex; align-items: center; gap: 10px; margin: 0 0 12px }
.cd-sec h2 {
  display: flex; align-items: center; gap: 7px; flex: 1; margin: 0;
  font: 900 15.5px var(--font); font-size: calc(15.5px * var(--fz-h2, var(--fz-base, 1))); color: var(--ink);
}
.cd-sec h2 svg, .cd-sec h2 .nv-i { color: var(--green) }

.cd-orders { display: grid; gap: 10px }
.cd-order {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) auto;
  padding: 13px 15px;
  border: 1px solid var(--cd-hair); border-radius: var(--cd-r-sm);
  background: var(--surface);
  transition: border-color .16s var(--cd-ease), box-shadow .16s var(--cd-ease);
}
.cd-order:hover { border-color: color-mix(in oklab, var(--green) 40%, transparent); box-shadow: var(--cd-sh) }
.cd-order small { display: block; font: 600 10px var(--font); color: var(--muted); font-size: calc(10px * var(--fz-small, 1)) }
.cd-order b { display: block; margin-top: 3px; font: 800 12.5px var(--font); font-size: calc(12.5px * var(--fz-base, 1)); color: var(--ink) }
.cd-order b i { font-style: normal; font-weight: 600; font-size: .82em; color: var(--muted) }
.cd-order-code b { font-family: var(--font); letter-spacing: .3px }
.cd-order-act { display: flex; align-items: center; gap: 9px; justify-self: end }
.cd-more { display: inline-flex; align-items: center; gap: 3px; font: 800 11.5px var(--font); color: var(--green); text-decoration: none }
.cd-more:hover { text-decoration: underline }

.cd-empty {
  padding: 34px 20px; text-align: center;
  border: 1px dashed color-mix(in oklab, var(--line) 90%, transparent);
  border-radius: var(--cd-r); background: var(--cd-soft);
}
.cd-empty > span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: color-mix(in oklab, var(--green) 12%, transparent); color: var(--green) }
.cd-empty b { display: block; font: 900 13.5px var(--font); font-size: calc(13.5px * var(--fz-base, 1)) }
.cd-empty p { margin: 6px 0 14px; font: 500 11px/1.9 var(--font); color: var(--muted); font-size: calc(11px * var(--fz-small, 1)) }

.acc-pw .pw-alert {
  display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 15px;
  border-radius: var(--cd-r-sm); border: 1px solid transparent;
  font: 600 11.5px/1.9 var(--font); font-size: calc(11.5px * var(--fz-small, 1));
}
.acc-pw .pw-alert svg, .acc-pw .pw-alert .nv-i { flex: none; margin-top: 3px }
.acc-pw .pw-alert > span { flex: 1 1 200px; min-width: 0 }
.acc-pw .pw-alert ul { flex: 1 1 100%; margin: 4px 0 0; padding-inline-start: 18px }
.acc-pw .pw-alert li { margin-top: 3px; font-weight: 500 }
.acc-pw .pw-alert a { color: inherit; font-weight: 800; text-decoration: underline }
.acc-pw .pw-alert.error {
  border-color: color-mix(in oklab, var(--red) 42%, transparent);
  background: color-mix(in oklab, var(--red) 10%, var(--surface));
  color: color-mix(in oklab, var(--red) 78%, var(--ink));
}
.acc-pw .pw-alert.warn {
  border-color: color-mix(in oklab, var(--gold) 46%, transparent);
  background: color-mix(in oklab, var(--gold) 12%, var(--surface));
  color: color-mix(in oklab, var(--gold) 70%, var(--ink));
}

.acc-pw .pw-err { display: none }
.acc-pw .form-group.is-bad .pw-err {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font: 700 10.5px/1.7 var(--font); font-size: calc(10.5px * var(--fz-small, 1));
  font-style: normal; color: var(--red);
}
.acc-pw .form-group.is-bad .pw-err::before {
  content: ''; flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--red);
  mask: no-repeat center / 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.2'/%3E%3C/svg%3E");
  -webkit-mask: no-repeat center / 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.2'/%3E%3C/svg%3E");
}
.acc-pw .form-group.is-bad > small { display: none }
.acc-pw .form-group.is-bad input,
.acc-pw .form-group.is-bad .nv-pass input {
  border-color: color-mix(in oklab, var(--red) 62%, transparent) !important;
  background: color-mix(in oklab, var(--red) 6%, var(--surface)) !important;
}
.acc-pw .form-group.is-bad input:focus,
.acc-pw .form-group.is-bad .nv-pass input:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 20%, transparent) !important;
}
.acc-pw .form-group.is-ok .nv-pass input {
  border-color: color-mix(in oklab, var(--green) 55%, transparent) !important;
}
.acc-pw small[data-pw-match].ok { color: var(--green); font-weight: 700 }
.acc-pw small[data-pw-match].bad { color: var(--red); font-weight: 700 }
.acc-pw input:disabled { cursor: not-allowed }
.acc-pw .btn:disabled { opacity: .55; cursor: not-allowed }
.acc-pw:target, .acc-pw.is-flash {
  animation: cd-pop 1.5s var(--cd-ease);
}
@keyframes cd-pop {
  0%, 100% { box-shadow: 0 0 0 0 transparent }
  22%, 60% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 26%, transparent) }
}

@media (max-width: 900px) {
  .cd-split { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  .cd-order { grid-template-columns: 1fr 1fr; gap: 11px }
  .cd-order-code { grid-column: 1 / -1 }
  .cd-order-act { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between }
}
@media (max-width: 560px) {
  .cd-hero { padding: 16px; gap: 13px }
  .cd-hero-av .av { width: 52px; height: 52px; font-size: 20px }
  .cd-hero-act { width: 100%; }
  .cd-hero-act .btn { flex: 1; justify-content: center }
  .cd-cards { grid-template-columns: 1fr 1fr; gap: 10px }
  .cd-card-v { font-size: calc(16.5px * var(--fz-base, 1)) }
  .cd-tiles { grid-template-columns: 1fr }
  .cd-panel-foot .btn { flex: 1; justify-content: center }
}