.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.dcw-overview { display: grid; grid-template-columns: 68% 1fr; gap: 20px; margin-top: 24px; align-items: start; }
.dcw-overview-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dcw-overview-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dcw-deck { margin-top:24px; }
.dcw-view-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin:16px 0; }
.dcw-view-controls label { display:grid; gap:6px; font-size:12px; color:var(--muted,#9a978f); }
.dcw-view-controls select { min-height:44px; padding:0 32px 0 12px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:6px; background:var(--surface,#111115); color:var(--text,#e8e8ea); }
.dcw-view-status { font-size:13px; color:var(--muted,#9a978f); }
.dcw-view-status:empty { display:none; }
.dcw-card-group { margin-top:20px; }
.dcw-card-group h3 { margin:0 0 12px; font-size:14px; }
.dcw-card-group h3 small { margin-left:8px; color:var(--muted,#9a978f); font-weight:400; }
.dcw-visual-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px 8px; list-style:none; padding:0; margin:0; }
.dcw-visual-card { min-width:0; }
.dcw-visual-card button { display:block; position:relative; width:100%; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text,#e8e8ea); cursor:pointer; aspect-ratio:63/88; }
.dcw-visual-card img { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; }
.dcw-visual-card button:focus-visible,.dcw-view-controls select:focus-visible { outline:2px solid var(--accent,#c9a84c); outline-offset:3px; }
.dcw-image-fallback { display:flex; flex-direction:column; gap:12px; justify-content:center; height:100%; padding:12px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:8px; font-size:13px; overflow-wrap:anywhere; }
.dcw-image-fallback small,.dcw-printing-note { color:var(--muted,#9a978f); }
.dcw-card-name { display:block; margin-top:6px; font-size:12px; overflow-wrap:anywhere; }
.dcw-card-quantity { position:absolute; top:8px; right:8px; padding:3px 7px; background:rgba(0,0,0,.85); color:#fff; border-radius:4px; font-size:12px; }
.dcw-card-preview { width:min(440px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:12px; background:var(--surface,#111115); color:var(--text,#e8e8ea); }
.dcw-card-preview::backdrop { background:rgba(0,0,0,.75); }
.dcw-card-preview > button { float:right; display:flex; justify-content:center; align-items:center; width:44px; height:44px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.dcw-card-preview h2 { font-size:18px; padding-right:52px; margin:8px 0 16px; }
.dcw-card-preview img { display:block; width:100%; max-height:55dvh; object-fit:contain; }
.dcw-oracle-text { white-space:pre-line; font-size:14px; }
@media(max-width:767px) { .dcw-view-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; } .dcw-view-controls label { min-width:0; } .dcw-view-controls label:first-child { grid-column:1 / -1; } .dcw-view-controls select { width:100%; min-width:0; } .dcw-visual-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.dcw-deck h1 { margin:0 0 8px; font-size:24px; }
.dcw-deck-count { margin:0 0 24px; color:var(--muted,#9a978f); }
.dcw-deck-section { margin-top:28px; }
.dcw-deck-section h2 { margin:0 0 12px; font-size:17px; }
.dcw-deck-section h2 small { margin-left:8px; color:var(--muted,#9a978f); font-weight:400; }
.dcw-deck-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
.dcw-deck-table th,.dcw-deck-table td { padding:12px 8px; text-align:left; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); overflow-wrap:anywhere; }
.dcw-deck-table thead th { color:var(--muted,#9a978f); font-size:12px; font-weight:500; }
.dcw-deck-table th:first-child { width:48px; }
.dcw-deck-table thead th:last-child { width:130px; }
.dcw-deck-table tbody th { font-weight:500; }
@media(max-width:767px) { .dcw-deck-table thead th:last-child { width:88px; } .dcw-deck-table th,.dcw-deck-table td { padding:12px 4px; } }

.dcw-card { padding: 20px; border: 1px solid var(--border-strong, rgba(255,255,255,0.08)); border-radius: var(--radius-md, 14px); background: var(--surface, #111115); }
.dcw-card h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.dcw-card-compact { padding: 16px 20px; }

.dcw-empty { text-align: left; }
.dcw-empty p { margin: 0 0 4px; color: var(--muted, #9a978f); line-height: 1.5; }
.dcw-empty p:first-child { color: var(--text, #e8e8ea); }
.dcw-empty-inline { padding: 0; }
.dcw-empty-page { max-width: 480px; margin: 60px auto; text-align: center; }
.dcw-empty-page h1 { margin: 0 0 8px; font-size: 24px; }
.dcw-empty-page p { color: var(--muted, #9a978f); margin: 0 0 20px; }

.dcw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px; margin-top: 10px;
  border-radius: var(--radius-pill, 999px); border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
  color: var(--text, #e8e8ea); font-size: 13.5px; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.dcw-btn:hover { border-color: var(--accent, #c9a84c); }
.dcw-btn-primary { background: var(--accent, #c9a84c); border-color: var(--accent, #c9a84c); color: #14140f; }
.dcw-btn-primary:hover { background: var(--accent-soft, #efd58b); border-color: var(--accent-soft, #efd58b); }

/* --- Health --------------------------------------------------------------- */

.dcw-health-state { margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--muted, #9a978f); }
.dcw-health-critical .dcw-health-state { color: #ff9a9a; }
.dcw-health-warning .dcw-health-state { color: #efd58b; }
.dcw-health-positive .dcw-health-state { color: #7ef0c8; }
.dcw-health-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.05); }
.dcw-health-seg { display: block; }
.dcw-seg-pass { background: #64c691; }
.dcw-seg-warn { background: #e9b25a; }
.dcw-seg-info { background: #6f9fe0; }
.dcw-health-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted, #9a978f); }
.dcw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dcw-dot-pass { background: #64c691; }
.dcw-dot-warn { background: #e9b25a; }
.dcw-dot-info { background: #6f9fe0; }

/* --- Recommendations -------------------------------------------------------- */

.dcw-recs { display: flex; flex-direction: column; gap: 12px; }
.dcw-rec { display: flex; align-items: flex-start; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
.dcw-rec:first-child { padding-top: 0; border-top: none; }
.dcw-rec-icon { flex: none; color: #e9b25a; margin-top: 1px; }
.dcw-rec-body { flex: 1 1 auto; min-width: 0; }
.dcw-rec-title { margin: 0; font-size: 14px; font-weight: 650; }
.dcw-rec-explanation { margin: 3px 0 0; font-size: 13px; color: var(--muted, #9a978f); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcw-rec-action { flex: none; align-self: center; font-size: 12.5px; font-weight: 650; color: var(--accent, #c9a84c); text-decoration: none; }
.dcw-rec-action:hover { text-decoration: underline; }

/* --- Recent audit / version ------------------------------------------------ */

.dcw-audit-summary { display: flex; gap: 24px; margin-bottom: 4px; }
.dcw-audit-summary > div { display: flex; flex-direction: column; gap: 4px; }
.dcw-audit-summary strong { font-size: 18px; }
.dcw-audit-summary span { font-size: 11px; color: var(--muted, #9a978f); text-transform: uppercase; letter-spacing: .04em; }

.dcw-version-line { margin: 0; font-size: 13px; color: var(--muted, #9a978f); }
.dcw-link-btn { margin-top: 8px; padding: 0; border: none; background: none; color: var(--accent, #c9a84c); font-size: 12.5px; font-weight: 650; cursor: pointer; }
.dcw-link-btn:hover { text-decoration: underline; }
.dcw-version-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dcw-version-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted, #9a978f); padding: 6px 0; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
.dcw-version-row:first-child { border-top: none; }

/* --- Quick actions ---------------------------------------------------------- */

.dcw-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dcw-quick-actions .dcw-btn { margin-top: 0; flex: 1 1 auto; }

/* --- Relevant tools --------------------------------------------------------- */

.dcw-tools { display: flex; flex-direction: column; gap: 4px; }
.dcw-tool { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; }
.dcw-tool:hover { background: rgba(255,255,255,0.03); }
.dcw-tool-icon { flex: none; color: var(--accent, #c9a84c); }
.dcw-tool-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dcw-tool-name { font-size: 13.5px; font-weight: 650; color: var(--text, #e8e8ea); }
.dcw-tool-value { font-size: 12px; color: var(--muted, #9a978f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcw-tool-arrow { flex: none; color: var(--muted, #9a978f); }

/* --- Compare ---------------------------------------------------------------- */

#dcw-compare-select {
  width: 100%; max-width: 360px; height: 40px; padding: 0 12px; margin-bottom: 16px;
  border-radius: 9px; border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
  background: var(--panel, #18181d); color: var(--text, #e8e8ea);
}
.dcw-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dcw-compare-grid > div { padding: 14px; border: 1px solid var(--border, rgba(255,255,255,0.06)); border-radius: 10px; }
.dcw-compare-grid h3 { margin: 0 0 6px; font-size: 14px; }
.dcw-compare-grid p { margin: 2px 0; color: var(--muted, #9a978f); font-size: 13px; }

/* --- Since your last audit -------------------------------------------------- */
/* One surface, no nested cards: heading -> hero improvement -> compact rows ->
   summary -> optional detail disclosure. Color is a supporting cue (arrow +
   label), never the only signal. */

.dcw-progress-hero { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }
.dcw-progress-hero-icon { flex: none; margin-top: 2px; color: #64c691; }
.dcw-progress-hero-body { min-width: 0; }
.dcw-progress-hero-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #9a978f); }
.dcw-progress-hero-value { margin: 0; font-size: 20px; font-weight: 700; color: var(--text, #e8e8ea); }
.dcw-progress-hero-note { margin: 8px 0 0; font-size: 14px; color: var(--muted, #9a978f); line-height: 1.5; }

.dcw-progress-rows { display: flex; flex-direction: column; }
.dcw-progress-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
.dcw-progress-row:first-child { border-top: none; padding-top: 0; }
.dcw-progress-row-label { font-size: 13.5px; font-weight: 650; color: var(--text, #e8e8ea); }
.dcw-progress-row-value { font-size: 13.5px; color: var(--muted, #9a978f); white-space: nowrap; }
.dcw-progress-row-note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted, #9a978f); }
.dcw-progress-delta { font-weight: 650; font-style: normal; }
.dcw-progress-delta.is-up { color: #64c691; }
.dcw-progress-delta.is-down { color: #e9b25a; }
.dcw-progress-row.is-regressed .dcw-progress-delta { color: #ff9a9a; }

.dcw-progress-summary { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); font-size: 14px; color: var(--text, #e8e8ea); line-height: 1.5; }

.dcw-progress-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, rgba(255,255,255,0.06)); display: flex; flex-direction: column; gap: 20px; }
.dcw-progress-detail[hidden] { display: none; }
.dcw-progress-detail-group h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #9a978f); }
.dcw-progress-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--muted, #9a978f); }
.dcw-progress-detail-row strong { font-weight: 650; color: var(--text, #e8e8ea); }

.dcw-progress-quiet { padding: 16px 20px; }
.dcw-progress-quiet p { margin: 0; font-size: 13.5px; color: var(--muted, #9a978f); }

.dcw-progress-enter { animation: dcw-progress-fade 220ms ease-out; }
@keyframes dcw-progress-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Level 3 (major structural improvement) gets a slightly stronger, still
   subtle, one-time emphasis on the hero row -- never a banner or confetti. */
.dcw-progress-level-3 .dcw-progress-hero.dcw-progress-enter { animation: dcw-progress-fade-strong 260ms ease-out; }
@keyframes dcw-progress-fade-strong { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* --- Skeleton ---------------------------------------------------------------- */

.dcw-skeleton { display: grid; grid-template-columns: 68% 1fr; gap: 20px; }
.dcw-skeleton-card { height: 220px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03)); background-size: 200% 100%; animation: dcw-shimmer 1.4s ease-in-out infinite; }

@keyframes dcw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 1023px) {
  .dcw-overview, .dcw-skeleton { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .dcw-overview { gap: 16px; margin-top: 20px; }
  .dcw-card { padding: 16px; }
  .dcw-audit-summary { flex-wrap: wrap; gap: 16px; }
  .dcw-compare-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dcw-skeleton-card { animation: none; }
  .dcw-progress-enter, .dcw-progress-level-3 .dcw-progress-hero.dcw-progress-enter { animation: none; }
}