.wc-wrap { max-width: 760px; margin: 0 auto; }
.wc-text { width: 100%; min-height: 220px; padding: 1rem; font-size: 1rem; line-height: 1.6; border: 1px solid #cbd5e1; border-radius: 12px; resize: vertical; font-family: inherit; box-sizing: border-box; }
.wc-text:focus { outline: 2px solid #93c5fd; border-color: #60a5fa; }
.wc-actions { display: flex; gap: .6rem; margin: .8rem 0 1.25rem; }
.wc-btn { padding: .55rem 1.1rem; border-radius: 8px; font-weight: 600; cursor: pointer; border: 1px solid #cbd5e1; background: #fff; }
.wc-btn:hover { background: #f1f5f9; }
.wc-sample { background: #2563eb; border-color: #2563eb; color: #fff; }
.wc-sample:hover { background: #1d4ed8; }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.wc-stat { border: 1px solid #e2e8f0; border-radius: 10px; padding: .9rem .8rem; background: #fff; display: grid; gap: .15rem; }
.wc-num { font-size: 1.35rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.wc-lbl { font-size: .85rem; color: #64748b; }
.wc-density { margin-top: 1.5rem; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.1rem 1.25rem; background: #f8fafc; }
.wc-density h3 { margin: 0 0 .6rem; font-size: 1rem; }
.wc-density ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.wc-density li { display: flex; justify-content: space-between; font-size: .95rem; }
.wc-density li span { color: #64748b; }