/* Components people mix up, part 1: overlays & feedback. Every rule is scoped under a .co-* root. */

/* shared mini-app chrome */
.co-app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--stage-ink); }
.co-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 46px 0 12px; background: var(--stage-card); border-bottom: 1px solid var(--stage-line); font-size: 12.5px; }
.co-logo { width: 14px; height: 14px; border-radius: 4px; background: var(--d-violet); }
.co-sp { flex: 1; }
.co-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--d-amber), var(--d-coral)); }
.co-body { flex: 1; padding: 12px; display: grid; gap: 8px; align-content: start; }
.co-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; background: var(--stage-card); border-radius: 8px; font-size: 12.5px; font-weight: 550; }
.co-pill { width: 46px; height: 8px; border-radius: 4px; background: var(--stage-line); }
.co-btn {
  font: 650 11.5px/1 var(--f-display); padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--stage-line); background: var(--stage-card); color: var(--stage-ink);
}
.co-btn-primary { background: #5a43e0; border-color: #5a43e0; color: #fff; }
.co-btn-danger { background: #d93d42; border-color: #d93d42; color: #fff; }
.co-scrim { position: absolute; inset: 0; background: rgb(10 12 30 / 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.co-tag { position: absolute; right: 10px; top: 10px; font: 600 10px/1 var(--f-mono); font-style: normal; padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--d-violet) 18%, transparent); color: var(--stage-ink); }
.co-sw { position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px; background: var(--stage-line); }
.co-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.co-sw.is-on { background: #5a43e0; }
.co-sw.is-on::after { transform: translateX(11px); }

/* modal */
.co-md-dialog {
  position: absolute; left: 50%; top: 50%; width: min(78%, 280px); translate: -50% -50%; scale: 0.96;
  display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: var(--stage-card); box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease-out, scale 0.18s ease-out, visibility 0.18s;
}
.co-md-dialog strong { font-size: 14.5px; padding-right: 20px; }
.co-md-dialog p { margin: 0; font-size: 12px; opacity: 0.75; }
.co-md-x { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--stage-ink); font-size: 17px; line-height: 1; cursor: pointer; }
.co-md-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.co-md-trap { font: 500 10px var(--f-mono); opacity: 0.6; }
.co-ring { outline: 2px solid var(--d-cyan); outline-offset: 2px; }
.co-modal.is-open .co-md-scrim { opacity: 1; pointer-events: auto; }
.co-modal.is-open .co-md-dialog { opacity: 1; scale: 1; visibility: visible; }

/* drawer */
.co-dr-scrim { animation: co-dr-scrim 9s ease infinite; }
.co-dr-side, .co-dr-bottom { position: absolute; display: grid; align-content: start; gap: 8px; background: var(--stage-card); box-shadow: 0 10px 40px rgb(0 0 0 / 0.3); font-size: 12.5px; }
.co-dr-side { top: 0; right: 0; bottom: 0; width: 46%; padding: 14px; animation: co-dr-side 9s cubic-bezier(0.32, 0.72, 0, 1) infinite; }
.co-dr-side b, .co-dr-bottom b { font-size: 14px; }
.co-dr-check { display: flex; align-items: center; gap: 8px; }
.co-dr-check i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--stage-line); }
.co-dr-check.is-on i { background: #5a43e0; border-color: #5a43e0; }
.co-dr-apply { margin-top: 4px; justify-self: start; padding: 6px 12px; border-radius: 7px; background: #5a43e0; color: #fff; font-weight: 650; font-size: 11.5px; }
.co-dr-bottom { left: 0; right: 0; bottom: 0; height: 52%; padding: 8px 16px 14px; border-radius: 16px 16px 0 0; animation: co-dr-bottom 9s cubic-bezier(0.32, 0.72, 0, 1) infinite; }
.co-dr-handle { justify-self: center; width: 36px; height: 4px; border-radius: 4px; background: var(--stage-line); }
.co-dr-icons { display: flex; gap: 12px; }
.co-dr-icons i { width: 34px; height: 34px; border-radius: 50%; background: var(--d-blue); }
.co-dr-icons i:nth-child(2) { background: var(--d-lime); }
.co-dr-icons i:nth-child(3) { background: var(--d-pink); }
.co-dr-icons i:nth-child(4) { background: var(--stage-line); }
@keyframes co-dr-scrim { 0%, 6% { opacity: 0; } 12%, 40% { opacity: 1; } 46%, 54% { opacity: 0; } 60%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes co-dr-side { 0%, 6% { transform: translateX(105%); } 13%, 40% { transform: none; } 47%, 100% { transform: translateX(105%); } }
@keyframes co-dr-bottom { 0%, 54% { transform: translateY(105%); } 61%, 88% { transform: none; } 95%, 100% { transform: translateY(105%); } }

/* popover */
.co-pop-doc { padding: 16px 18px; gap: 9px; }
.co-pop-doc i { height: 8px; border-radius: 4px; background: var(--stage-line); }
.co-pop-doc i:first-child { height: 14px; width: 55%; }
.co-pop-doc i:nth-child(3) { width: 88%; }
.co-pop-doc i:last-child { width: 60%; }
.co-pop-panel {
  position: absolute; right: 30px; top: 46px; width: min(72%, 250px); padding: 12px; display: grid; gap: 9px;
  background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  font-size: 12px;
}
.co-pop-panel::before { content: ""; position: absolute; right: 30px; top: -6px; width: 10px; height: 10px; rotate: 45deg; background: var(--stage-card); border-left: 1px solid var(--stage-line); border-top: 1px solid var(--stage-line); }
.co-pop.is-open .co-pop-panel { opacity: 1; visibility: visible; transform: none; }
.co-pop-field { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border: 1px solid var(--stage-line); border-radius: 8px; font: 500 11px var(--f-mono); }
.co-pop-field span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-pop-field .co-btn { padding: 5px 8px; }
.co-pop-opt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }

/* tooltip */
.co-tt { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 58px 18px 16px; }
.co-tt-bar { justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--stage-card); border: 1px solid var(--stage-line); }
.co-tt-b { position: relative; width: 34px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--stage-ink); font: 700 15px var(--f-display); cursor: pointer; }
.co-tt-b:hover, .co-tt-b.is-tip, .co-tt-b:focus-visible { background: color-mix(in srgb, var(--stage-line) 60%, transparent); }
.co-tt-b svg { width: 18px; height: 18px; }
.co-tt-i { font: italic 500 17px var(--f-body); }
.co-tt-b u { font-weight: 600; }
.co-tt-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; z-index: 2;
  padding: 5px 8px; border-radius: 6px; background: #1b1e30; color: #f1f2f8; white-space: nowrap;
  font: 600 11.5px/1.2 var(--f-display); pointer-events: none; opacity: 0; transition: opacity 0.12s, translate 0.12s;
}
.co-tt-tip::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 5px solid transparent; border-top-color: #1b1e30; }
.co-tt-tip kbd { font: 500 10.5px var(--f-mono); opacity: 0.7; margin-left: 4px; }
.co-tt-b.is-tip .co-tt-tip, .co-tt-b:hover .co-tt-tip, .co-tt-b:focus-visible .co-tt-tip { opacity: 1; translate: -50% 0; }
.co-tt-doc { display: grid; gap: 9px; align-content: start; padding: 14px; border-radius: 10px; background: var(--stage-card); }
.co-tt-doc i { height: 8px; border-radius: 4px; background: var(--stage-line); }
.co-tt-doc i:nth-child(2) { width: 82%; }
.co-tt-doc i:nth-child(3) { width: 58%; }

/* hover card */
.co-hc { position: absolute; inset: 0; padding: 16px; }
.co-hc-msg { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--stage-card); font-size: 13px; }
.co-hc-msg p { margin: 0; line-height: 1.45; }
.co-hc-who { display: flex; gap: 8px; align-items: baseline; }
.co-hc-who span { font-size: 11px; opacity: 0.6; }
.co-hc-av { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.co-hc-av-j { background: linear-gradient(135deg, var(--d-cyan), var(--d-blue)); }
.co-hc-av-m { width: 34px; height: 34px; background: linear-gradient(135deg, var(--d-pink), var(--d-amber)); }
.co-hc-link { color: color-mix(in srgb, var(--d-violet) 65%, var(--stage-ink)); font-weight: 650; cursor: pointer; border-radius: 3px; background: color-mix(in srgb, var(--d-violet) 14%, transparent); padding: 0 2px; }
.co-hc-card {
  position: absolute; left: 20%; top: 70px; width: min(70%, 260px); padding: 10px 12px; display: grid; gap: 2px;
  background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 12px; box-shadow: 0 16px 36px rgb(0 0 0 / 0.25);
  font-size: 12px; opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.98); transform-origin: 20% 0;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.co-hc.is-on .co-hc-card { opacity: 1; visibility: visible; transform: none; }
.co-hc-top { display: flex; align-items: center; gap: 9px; }
.co-hc-top > div { flex: 1; display: grid; min-width: 0; }
.co-hc-top b { font-size: 13.5px; }
.co-hc-handle { font-size: 11px; opacity: 0.6; }
.co-hc-card p { margin: 5px 0 0; line-height: 1.35; }
.co-hc-stats { display: flex; gap: 12px; opacity: 0.85; }

/* toast */
.co-field { display: grid; gap: 2px; padding: 7px 10px; border-radius: 8px; background: var(--stage-card); font-size: 12.5px; font-weight: 550; }
.co-field small { font-size: 10.5px; font-weight: 500; opacity: 0.6; }
.co-ts-save { justify-self: start; }
.co-ts-stack { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(70%, 250px); }
.co-ts {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px;
  background: #1b1e30; color: #f1f2f8; font-size: 12px; font-weight: 550; box-shadow: 0 8px 22px rgb(0 0 0 / 0.3);
  animation: co-ts-life 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.co-ts i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--d-lime); }
.co-ts span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-ts b { color: #b3a6ff; font-size: 11.5px; }
@keyframes co-ts-life { 0% { opacity: 0; transform: translateY(14px); } 6%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(24px); } }

/* banner */
.co-bn-wrap { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
.co-bn.is-shown .co-bn-wrap { grid-template-rows: 1fr; }
.co-bn-in { overflow: hidden; min-height: 0; }
.co-bn-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: #ffc94a; color: #2a1f00; font-size: 11.5px; }
.co-bn-bar span { flex: 1; min-width: 0; }
.co-bn-bar u { font-weight: 650; }
.co-bn-x { width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: #2a1f00; font-size: 16px; line-height: 1; cursor: pointer; }
.co-bn-cards { grid-template-columns: repeat(2, 1fr); }
.co-bn-cards i { height: 52px; border-radius: 8px; background: var(--stage-card); border-top: 4px solid color-mix(in srgb, var(--d-cyan) 60%, var(--stage-card)); }

/* callout */
.co-cl { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; padding: 10px 14px; }
.co-cl-h { margin: 0; font-size: 13.5px; font-weight: 750; }
.co-cl-box { --c: var(--d-blue); display: flex; gap: 9px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--stage-card)); font-size: 12px; line-height: 1.35; }
.co-cl-box svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--c); }
.co-cl-box div { display: grid; }
.co-cl-box b { font-size: 12px; }
.co-cl-tip { --c: #1f9d55; }
.co-cl-warn { --c: #d98a00; }

/* coachmark */
.co-cm-main { flex: 1; display: grid; grid-template-columns: 30% 1fr; gap: 10px; padding: 12px; }
.co-cm-nav { display: grid; align-content: start; gap: 4px; font-size: 12px; font-weight: 550; }
.co-cm-nav span { padding: 6px 8px; border-radius: 6px; background: var(--stage-card); }
.co-cm-nav em { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 999px; background: var(--d-coral); color: #fff; margin-left: 4px; }
.co-cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.co-cm-grid i { height: 44px; border-radius: 8px; background: var(--stage-card); border-top: 4px solid color-mix(in srgb, var(--d-amber) 60%, var(--stage-card)); }
.co-cm-spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px rgb(8 10 25 / 0.58); pointer-events: none; transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.co-cm-card {
  position: absolute; width: min(62%, 210px); padding: 10px 12px; display: grid; gap: 4px;
  background: var(--stage-card); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.35); font-size: 12px;
  transition: top 0.35s cubic-bezier(0.32, 0.72, 0, 1), left 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.co-cm-step { font: 600 10px var(--f-mono); opacity: 0.6; }
.co-cm-card p { margin: 0; line-height: 1.35; font-weight: 550; }
.co-cm-card div { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; }
.co-cm-skip { border: 0; background: none; color: var(--stage-ink); opacity: 0.7; font: 600 11px var(--f-display); cursor: pointer; }

/* command palette */
.co-cp-k { font: 500 10.5px var(--f-mono); padding: 2px 6px; border: 1px solid var(--stage-line); border-radius: 5px; }
.co-cp-scrim { opacity: 1; }
.co-cp-box { position: absolute; left: 50%; top: 13%; translate: -50% 0; width: min(84%, 340px); border-radius: 12px; background: var(--stage-card); box-shadow: 0 20px 50px rgb(0 0 0 / 0.4); overflow: hidden; }
.co-cp-in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--stage-line); }
.co-cp-in svg { flex: none; width: 16px; height: 16px; opacity: 0.6; }
.co-cp-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--stage-ink); font: 500 13px var(--f-display); }
.co-cp-in input::placeholder { color: var(--stage-ink); opacity: 0.45; }
.co-cp-list { list-style: none; margin: 0; padding: 5px; display: grid; gap: 1px; min-height: 120px; align-content: start; }
.co-cp-list li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 12px; font-weight: 550; }
.co-cp-list li i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.45; }
.co-cp-list li span { flex: 1; }
.co-cp-list li kbd { font: 500 10px var(--f-mono); opacity: 0.6; }
.co-cp-list li[aria-selected="true"] { background: color-mix(in srgb, var(--d-violet) 18%, transparent); }
.co-cp-none { opacity: 0.6; }

/* context menu */
.co-cx-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; padding: 8px 12px; align-content: start; }
.co-cx-file { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border-radius: 8px; font: 500 11px var(--f-mono); }
.co-cx-file i { width: 26px; height: 31px; border-radius: 4px 10px 4px 4px; background: hsl(var(--h) 70% 60%); }
.co-cx-file.is-sel { background: color-mix(in srgb, var(--d-violet) 18%, transparent); }
.co-cx-cursor { position: absolute; left: 0; top: 0; width: 14px; height: 20px; z-index: 3; pointer-events: none; transform: translate(70%, 80%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3)); }
.co-cx.is-manual .co-cx-cursor { display: none; }
.co-cx-menu {
  position: absolute; z-index: 2; list-style: none; margin: 0; padding: 4px; width: 150px; display: grid;
  background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 9px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.28);
  opacity: 0; visibility: hidden; transform: scale(0.96); transform-origin: 0 0; transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.co-cx.is-open .co-cx-menu { opacity: 1; visibility: visible; transform: none; }
.co-cx-menu li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 5px; font-size: 12px; font-weight: 550; cursor: default; }
.co-cx-menu li kbd { font: 500 10px var(--f-mono); opacity: 0.55; }
.co-cx-menu li:hover, .co-cx-menu li.is-hi { background: color-mix(in srgb, var(--d-violet) 18%, transparent); }
.co-cx-menu li.is-danger { color: #e5484d; }
.co-cx-menu .co-cx-sep { height: 1px; padding: 0; margin: 3px 4px; background: var(--stage-line); }

/* dropdown menu vs select */
.co-dd { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 14px; }
.co-dd-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.co-dd-lab { min-height: 2.6em; font: 600 10.5px/1.3 var(--f-mono); opacity: 0.75; }
.co-dd-s .co-dd-lab { padding-right: 28px; }
.co-dd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--stage-card); border: 1px solid var(--stage-line); color: var(--stage-ink); font: 650 12px var(--f-display);
}
.co-dd-s .co-dd-btn { width: 100%; justify-content: space-between; }
.co-dd-btn svg { width: 12px; height: 12px; }
.co-dd-pop {
  list-style: none; margin: 0; padding: 4px; width: 100%; max-width: 160px; display: grid;
  background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 9px; box-shadow: 0 12px 28px rgb(0 0 0 / 0.22);
  position: absolute; top: 74px; left: 0; z-index: 2;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
}
.co-dd-col.is-open .co-dd-pop { opacity: 1; visibility: visible; transform: none; }
.co-dd-pop li { position: relative; padding: 5px 8px 5px 22px; border-radius: 6px; font-size: 12px; font-weight: 550; cursor: pointer; }
.co-dd-pop li:hover, .co-dd-pop li.is-hi { background: color-mix(in srgb, var(--d-violet) 18%, transparent); }
.co-dd-pop li.is-danger { color: #e5484d; }
.co-dd-pop li[aria-selected="true"]::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; translate: 0 -70%; rotate: -45deg; }
.co-dd-out { margin-top: 2px; font: 500 10.5px/1.35 var(--f-mono); opacity: 0.7; }

/* skeleton */
.co-sk { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; }
.co-sk-card { position: relative; width: min(78%, 300px); height: 100%; max-height: 220px; border-radius: 12px; background: var(--stage-card); border: 1px solid var(--stage-line); overflow: hidden; }
.co-sk-layer { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; padding: 12px; }
.co-sk-head { display: flex; align-items: center; gap: 10px; }
.co-sk-head > div { flex: 1; display: grid; gap: 5px; }
.co-sk-c { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.co-sk-l { display: block; height: 8px; border-radius: 4px; }
.co-sk-media { display: block; height: clamp(54px, 22cqi, 96px); border-radius: 8px; }
.co-sk-ghost .co-sk-c, .co-sk-ghost .co-sk-l, .co-sk-ghost .co-sk-media {
  background: linear-gradient(90deg, var(--stage-line) 0%, color-mix(in srgb, var(--stage-line) 40%, var(--stage-card)) 50%, var(--stage-line) 100%);
  background-size: 300% 100%; animation: co-sk-shimmer 1.4s ease-in-out infinite;
}
.co-sk-ghost { animation: co-sk-ghost 6s ease infinite; }
.co-sk-real { animation: co-sk-real 6s ease infinite; font-size: 12.5px; }
.co-sk-real b { font-size: 13px; }
.co-sk-real small { font-size: 11px; opacity: 0.6; }
.co-sk-real p { margin: 0; line-height: 1.4; }
.co-sk-av { background: linear-gradient(135deg, var(--d-lime), var(--d-cyan)); }
.co-sk-img { background: linear-gradient(170deg, #8fd3ff 0 45%, #2b6fa8 46%, #164a7a); }
@keyframes co-sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes co-sk-ghost { 0%, 48% { opacity: 1; } 54%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes co-sk-real { 0%, 48% { opacity: 0; } 54%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* empty state */
.co-es { position: absolute; inset: 12px; display: flex; flex-direction: column; border-radius: 12px; background: var(--stage-card); border: 1px solid var(--stage-line); overflow: hidden; }
.co-es-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 34px 8px 12px; border-bottom: 1px solid var(--stage-line); font-size: 13px; }
.co-es-head span { display: flex; gap: 2px; }
.co-es-head i { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; opacity: 0.65; }
.co-es-head i.is-on { opacity: 1; background: color-mix(in srgb, var(--stage-line) 60%, transparent); }
.co-es-body { flex: 1; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 14px; text-align: center; }
.co-es-art { width: clamp(44px, 14cqi, 60px); height: auto; color: var(--stage-ink); animation: co-es-float 4s ease-in-out infinite; }
.co-es-body > b { font-size: 14px; margin-top: 4px; }
.co-es-body p { margin: 0; font-size: 12px; opacity: 0.7; }
.co-es-act { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.co-es-link { border: 0; background: none; color: var(--stage-ink); font: 650 11.5px var(--f-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes co-es-float { 50% { transform: translateY(-3px); } }

/* progress indicators */
@property --co-p { syntax: "<integer>"; inherits: true; initial-value: 0; }
.co-pr { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.co-pr-cell { display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 10px; background: var(--stage-card); animation: co-pr-fill 4.5s ease-in-out infinite; }
.co-pr-cell em { grid-column: 1 / -1; font: 600 10.5px var(--f-mono); font-style: normal; opacity: 0.7; }
.co-pr-bar { grid-column: 1; height: 6px; border-radius: 999px; background: var(--stage-line); overflow: hidden; position: relative; }
.co-pr-cell:nth-child(2) .co-pr-bar { grid-column: 1 / -1; }
.co-pr-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--d-violet); }
.co-pr-det i { width: calc(var(--co-p) * 1%); }
.co-pr-ind i { width: 38%; animation: co-pr-slide 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.co-pr-num { font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.co-pr-num::after { counter-reset: co-p var(--co-p); content: counter(co-p) "%"; }
.co-pr-spin { grid-column: 1 / -1; justify-self: center; width: 34px; height: 34px; animation: co-pr-rot 0.9s linear infinite; }
.co-pr-ringwrap { grid-column: 1 / -1; justify-self: center; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.co-pr-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.co-pr-ring-fg { stroke-dashoffset: calc(100 - var(--co-p)); }
.co-pr-ringwrap .co-pr-num { position: relative; font-size: 9.5px; min-width: 0; text-align: center; }
.co-pr-cell:nth-child(3), .co-pr-cell:nth-child(4) { grid-template-columns: 1fr; justify-items: center; }
.co-pr-cell:nth-child(3) em, .co-pr-cell:nth-child(4) em { text-align: center; }
@keyframes co-pr-fill { 0% { --co-p: 0; } 75%, 100% { --co-p: 100; } }
@keyframes co-pr-slide { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@keyframes co-pr-rot { to { transform: rotate(360deg); } }