#text-length-counter { color:#182b45; }
.length-counter { overflow:hidden; border:1px solid #dfe6ef; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(31,55,88,.06); }
.length-counter-layout { display:grid; }
.length-counter-dashboard { min-width:0; }
.length-counter-editor { padding:22px; background:#f6f9fd; }
.length-counter-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.length-counter-editor-heading>label { color:#43536a; font-size:13px; font-weight:750; }
.length-counter-actions { display:flex; gap:7px; }
.length-counter-actions button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; gap:5px; padding:7px 11px; border:1px solid #cbd6e3; border-radius:8px; background:#fff; color:#43536a; font-weight:700; }
.length-counter-actions button:hover:not(:disabled) { border-color:#8ab0f8; color:#2563eb; }
.length-counter-actions button:disabled { cursor:not-allowed; opacity:.45; }
.length-counter-actions .material-icons { font-size:17px; }
#length-counter-input { display:block; width:100%; min-height:280px; resize:vertical; padding:15px 16px; border:1px solid #cbd6e3; border-radius:10px; background:#fff; color:#172033; font:15px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif; }
#length-counter-input:focus,.length-counter-actions button:focus-visible,.length-counter-number-input input:focus { border-color:#2563eb; outline:3px solid rgba(37,99,235,.18); outline-offset:2px; }
.length-counter-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:26px; margin-top:7px; }
.length-counter-editor-footer p { margin:0; color:#64748b; font-size:12px; }
.length-counter-editor-footer p:first-child { display:flex; align-items:center; gap:5px; }
.length-counter-editor-footer .material-icons { font-size:15px; }
#length-counter-status { color:#087f5b; font-weight:700; }
#length-counter-status.is-error { color:#b42332; }
.length-counter-targets { display:grid; grid-template-columns:minmax(180px,1fr) repeat(2,minmax(190px,.8fr)); gap:14px; align-items:end; padding:18px 22px; border-block:1px solid #e3e9f0; }
.length-counter-targets h2 { margin:1px 0 0; font-size:18px; }
.length-counter-targets>label>span:first-child { display:block; margin-bottom:6px; color:#52657d; font-size:12px; font-weight:700; }
.length-counter-number-input { display:flex; min-height:42px; align-items:center; overflow:hidden; border:1px solid #cbd6e3; border-radius:8px; background:#fff; }
.length-counter-number-input input { width:100%; min-width:0; padding:8px 10px; border:0; background:transparent; color:#172033; font:700 1rem/1.3 Consolas,Monaco,'Courier New',monospace; }
.length-counter-number-input small { padding:0 10px; color:#64748b; font-size:11px; white-space:nowrap; }
.length-counter-eyebrow { margin:0; color:#2563eb; font-size:10px; font-weight:800; letter-spacing:.12em; }
.length-counter-results,.length-counter-goals { padding:22px; }
.length-counter-goals { border-top:1px solid #e3e9f0; }
.length-counter-section-heading { margin-bottom:13px; }
.length-counter-section-heading h2 { margin:1px 0 0; font-size:20px; }
.length-counter-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.length-counter-result-card { min-width:0; padding:14px 15px; border:1px solid #dfe6ef; border-radius:10px; background:#fff; }
.length-counter-result-card h3,.length-counter-progress-card h3,.length-counter-byte-card h3 { margin:0; color:#52657d; font-size:12px; }
.length-counter-result-card p,.length-counter-byte-card p { margin:8px 0 0; }
.length-counter-result-card output,.length-counter-byte-card output { color:#123d73; font:750 1.45rem/1.25 Consolas,Monaco,'Courier New',monospace; }
.length-counter-result-card small,.length-counter-byte-card small,.length-counter-progress-card small { color:#7a8798; font-size:11px; }
.length-counter-progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(150px,.6fr); gap:10px; }
.length-counter-progress-card,.length-counter-byte-card { min-width:0; padding:15px; border:1px solid #dfe6ef; border-radius:10px; background:#f8faff; }
.length-counter-progress-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.length-counter-progress-heading p { margin:0; color:#123d73; font:700 1rem/1.3 Consolas,Monaco,'Courier New',monospace; }
.length-counter-progress-track { height:8px; overflow:hidden; margin:13px 0 8px; border-radius:999px; background:#dce6f3; }
.length-counter-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#0891b2); transition:width .15s ease; }
.length-counter-progress-percentage { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; color:#52657d; font-size:11px; }
.length-counter-progress-percentage strong { color:#123d73; font-size:12px; }
.length-counter-progress-percentage output { font:inherit; }
.length-counter-byte-card { display:flex; flex-direction:column; justify-content:center; }
.length-counter-help { margin-top:42px; }
.length-counter-help h2 { margin-bottom:5px; font-size:21px; }
.length-counter-help>p { color:#52657d; }
.length-counter-help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 24px; }
.length-counter-help-grid dl { margin:0; padding:12px 0; border-bottom:1px solid #e4eaf1; }
.length-counter-help-grid dt { font-weight:750; }
.length-counter-help-grid dd { margin:4px 0 0; color:#64748b; font-size:13px; }
.length-counter-description2 { margin-top:20px; }

@media (min-width:900px) {
  .length-counter-layout { grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr); align-items:stretch; }
  .length-counter-editor { display:flex; min-width:0; flex-direction:column; padding:16px; border-inline-end:1px solid #e3e9f0; }
  #length-counter-input { min-height:340px; flex:1; padding:12px 13px; }
  .length-counter-editor-footer { align-items:flex-start; flex-direction:column; gap:3px; }
  .length-counter-targets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px 12px; border-top:0; }
  .length-counter-targets>div { grid-column:1/-1; }
  .length-counter-targets h2 { font-size:15px; }
  .length-counter-targets>label>span:first-child { margin-bottom:3px; font-size:10px; }
  .length-counter-number-input { min-height:35px; }
  .length-counter-number-input input { padding:6px 8px; font-size:.9rem; }
  .length-counter-number-input small { padding:0 7px; font-size:9px; }
  .length-counter-results,.length-counter-goals { padding:10px 12px; }
  .length-counter-section-heading { margin-bottom:7px; }
  .length-counter-section-heading h2 { font-size:15px; }
  .length-counter-result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .length-counter-result-card { padding:8px 9px; }
  .length-counter-result-card h3,.length-counter-progress-card h3,.length-counter-byte-card h3 { font-size:10px; line-height:1.3; }
  .length-counter-result-card p,.length-counter-byte-card p { margin-top:4px; }
  .length-counter-result-card output,.length-counter-byte-card output { font-size:1.1rem; }
  .length-counter-result-card small,.length-counter-byte-card small,.length-counter-progress-card small { font-size:9px; }
  .length-counter-progress-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .length-counter-progress-card,.length-counter-byte-card { padding:8px 9px; }
  .length-counter-progress-track { height:6px; margin:7px 0 5px; }
  .length-counter-progress-heading p { font-size:.82rem; }
  .length-counter-progress-percentage { font-size:9px; }
  .length-counter-byte-card { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; }
}

@media (max-width:760px) {
  .length-counter-editor { padding:18px; }
  #length-counter-input { min-height:240px; }
  .length-counter-editor-footer { align-items:flex-start; flex-direction:column; }
  .length-counter-targets { grid-template-columns:1fr 1fr; padding:18px; }
  .length-counter-targets>div { grid-column:1/-1; }
  .length-counter-results,.length-counter-goals { padding:18px; }
  .length-counter-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .length-counter-progress-grid { grid-template-columns:1fr; }
  .length-counter-help-grid { grid-template-columns:1fr; }
}

@media (max-width:460px) {
  .length-counter-editor-heading { align-items:flex-start; flex-direction:column; }
  .length-counter-actions { width:100%; }
  .length-counter-actions button { flex:1; }
  .length-counter-targets,.length-counter-result-grid { grid-template-columns:1fr; }
  .length-counter-targets>div { grid-column:auto; }
}

/* Keep labels and values on one compact row at every viewport size. */
.length-counter-editor { padding:14px; }
#length-counter-input { min-height:180px; padding:11px 12px; font-size:14px; line-height:1.55; }
.length-counter-targets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:11px 12px; }
.length-counter-targets>div { grid-column:1/-1; }
.length-counter-targets h2 { margin:0; font-size:15px; }
.length-counter-targets>label { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:7px; }
.length-counter-targets>label>span:first-child { min-width:0; margin:0; color:#52657d; font-size:11px; font-weight:700; line-height:1.3; }
.length-counter-number-input { width:122px; min-height:36px; flex:0 0 122px; }
.length-counter-number-input input { padding:6px 7px; font-size:.9rem; line-height:1.2; }
.length-counter-number-input small { padding:0 6px; font-size:9px; }
.length-counter-results,.length-counter-goals { padding:11px 12px; }
.length-counter-section-heading { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.length-counter-section-heading { margin-bottom:8px; }
.length-counter-section-heading h2 { margin:0; font-size:15px; }
.length-counter-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.length-counter-result-card { display:flex; min-height:40px; align-items:center; justify-content:space-between; gap:7px; padding:7px 9px; border-radius:8px; }
.length-counter-result-card h3,.length-counter-progress-card h3,.length-counter-byte-card h3 { min-width:0; overflow:hidden; font-size:12px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.length-counter-result-card p,.length-counter-byte-card p { display:grid; width:88px; flex:0 0 88px; grid-template-columns:48px 40px; align-items:baseline; margin:0; white-space:nowrap; }
.length-counter-result-card output,.length-counter-byte-card output { text-align:end; }
.length-counter-result-card small,.length-counter-byte-card small { padding-inline-start:4px; text-align:end; }
.length-counter-result-card output,.length-counter-byte-card output { font-size:1.05rem; line-height:1.2; }
.length-counter-result-card small,.length-counter-byte-card small,.length-counter-progress-card small { font-size:9px; }
.length-counter-progress-grid { grid-auto-rows:max-content; align-items:start; }
.length-counter-progress-card,.length-counter-byte-card { min-height:40px; align-self:start; padding:8px 9px; border-radius:8px; }
.length-counter-progress-heading p { flex:0 0 auto; font-size:.9rem; line-height:1.2; white-space:nowrap; }
.length-counter-progress-heading>p { display:grid; width:92px; grid-template-columns:52px 40px; align-items:baseline; }
.length-counter-progress-heading output { text-align:end; }
.length-counter-progress-heading small { padding-inline-start:4px; text-align:end; }
.length-counter-progress-track { height:6px; margin:7px 0 5px; }
.length-counter-progress-percentage { font-size:10px; }
.length-counter-progress-percentage strong { font-size:11px; }
.length-counter-byte-card { flex-direction:row; align-items:center; justify-content:space-between; }
#length-counter-status { margin:4px 0 0; font-size:11px; text-align:end; }

@media (min-width:900px) {
  .length-counter-layout { grid-template-columns:minmax(0,1.05fr) minmax(450px,.95fr); }
  .length-counter-editor { padding:14px; }
  #length-counter-input { min-height:330px; padding:12px 13px; }
  .length-counter-targets { gap:8px 12px; padding:11px 12px; }
  .length-counter-targets h2,.length-counter-section-heading h2 { font-size:15px; }
  .length-counter-targets>label>span:first-child { margin:0; }
  .length-counter-number-input { min-height:36px; }
  .length-counter-number-input input { padding:6px 7px; font-size:.9rem; }
  .length-counter-number-input small { padding:0 6px; font-size:9px; }
  .length-counter-targets,.length-counter-results,.length-counter-goals { padding-block:11px; }
  .length-counter-section-heading { margin-bottom:8px; }
  .length-counter-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .length-counter-result-card { min-height:40px; padding:7px 9px; }
  .length-counter-result-card p,.length-counter-byte-card p { margin:0; }
  .length-counter-result-card h3 { font-size:12px; }
  .length-counter-result-card output,.length-counter-byte-card output { font-size:1.05rem; }
  .length-counter-progress-card,.length-counter-byte-card { padding:8px 9px; }
  .length-counter-progress-track { height:6px; margin:7px 0 5px; }
}

@media (max-width:760px) {
  .length-counter-editor { padding:10px; }
  #length-counter-input { min-height:150px; max-height:34vh; }
  .length-counter-targets { grid-template-columns:1fr; padding:9px 10px; }
  .length-counter-targets>div { grid-column:auto; }
  .length-counter-results,.length-counter-goals { padding:9px 10px; }
  .length-counter-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .length-counter-progress-grid { grid-auto-rows:max-content; align-items:start; }
  .length-counter-progress-track { display:none; }
}

@media (max-width:460px) {
  .length-counter-editor-heading { align-items:center; flex-direction:row; gap:6px; }
  .length-counter-actions { width:auto; }
  .length-counter-actions button { flex:0 0 auto; padding:6px 8px; font-size:11px; }
  .length-counter-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .length-counter-result-card { padding-inline:7px; }
  .length-counter-number-input { width:126px; flex-basis:126px; }
}