/* Card */
.wpts-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); padding:18px; }

/* Header */
.wpts-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.wpts-title { margin:0; font-size:20px; font-weight:700; letter-spacing:.2px; }
.wpts-badges { display:flex; gap:8px; }
.wpts-badge { display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:700; font-variant-numeric:tabular-nums; }
.wpts-badge[data-badge="words"] { background:#ecfeff; color:#155e75; }
.wpts-badge[data-badge="lines"] { background:#fef9c3; color:#854d0e; }

/* Toolbar */
.wpts-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.wpts-controls { display:flex; gap:14px; flex-wrap:wrap; }
.wpts-switch { display:flex; align-items:center; gap:6px; font-size:13px; color:#374151; }
.wpts-actions { display:flex; gap:8px; }
.wpts-btn { appearance:none; border:1px solid #d1d5db; background:#fff; border-radius:8px; padding:8px 12px; font-weight:600; cursor:pointer; transition:transform .04s ease, background .15s; }
.wpts-btn:hover { background:#f9fafb; }
.wpts-btn:active { transform:translateY(1px); }

/* Grid */
.wpts-grid { display:grid; grid-template-columns: 1fr 320px; gap:16px; }
@media (max-width: 900px) { .wpts-grid { grid-template-columns: 1fr; } }

/* Editor */
.wpts-label { display:block; margin:0 0 8px; font-weight:600; }
.wpts-textarea { width:100%; min-height:220px; padding:12px; border:1px solid #d1d5db; border-radius:10px; font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.wpts-textarea:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.wpts-stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 16px; margin-top:10px; font-size:14px; }

/* Density */
.wpts-density { padding:8px; border:1px dashed #e5e7eb; border-radius:10px; background:#fafafa; }
.wpts-density-title { margin:0 0 8px; font-size:15px; font-weight:700; }
.tool-density-list { display:grid; gap:6px; }
.tool-density-row { display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:8px; }
.tool-density-label { font-weight:700; text-align:center; }
.tool-density-bar { height:14px; background:#e9eef3; border-radius:7px; overflow:hidden; }
.tool-density-fill { display:block; height:100%; background: linear-gradient(90deg,#4b8afa,#6fd3ff); }
.tool-density-meta { font-variant-numeric: tabular-nums; font-size:13px; color:#334155; }
.tool-density-pct { color:#64748b; }

/* Labeled badges */
.wpts-badges { display:flex; gap:10px; }
.wpts-badge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:12px; min-width:64px;
  background:#eef2ff; color:#3730a3;
}
.wpts-badge[data-kind="words"] { background:#ecfeff; color:#155e75; }
.wpts-badge[data-kind="lines"] { background:#fef9c3; color:#854d0e; }
.wpts-badge .num { font-weight:800; font-variant-numeric: tabular-nums; font-size:16px; line-height:1; }
.wpts-badge small { opacity:.75; margin-top:3px; font-size:11px; }