.neis-character-counter.neis-byte-tool,
.neis-character-counter.neis-byte-tool * {
  box-sizing: border-box;
}

.neis-character-counter.neis-byte-tool {
  --neis-shell: #faf2e8;
  --neis-paper: #fff7e8;
  --neis-panel: #fffdf7;
  --neis-soft: #faecd4;
  --neis-line: #6b5745;
  --neis-ink: #2b2119;
  --neis-muted: #6f5b49;
  --neis-title-end: #f2dfbd;
  --neis-result: #e3efd2;
  --neis-result-strong: #d3e7bb;
  --neis-info: #dfeef8;
  --neis-warning: #f4dfba;
  --neis-danger: #f5cdbd;
  --neis-safe-bg: #e2f2d0;
  --neis-watch-bg: #f8e8b9;
  --neis-near-bg: #f8d4a5;
  --neis-over-bg: #f4b9aa;
  --neis-safe-row: #fbfff4;
  --neis-watch-row: #fff8e4;
  --neis-near-row: #fff0de;
  --neis-over-row: #ffe8e2;
  --neis-safe-fill: #8fbf63;
  --neis-watch-fill: #d7ad35;
  --neis-near-fill: #d6843b;
  --neis-over-fill: #b9533f;
  --neis-shadow: rgba(67, 45, 26, 0.18);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  width: min(1120px, calc(100% - 32px));
  margin: clamp(18px, 3vw, 32px) auto;
  border: 2px solid var(--neis-line);
  border-radius: 0;
  background:
    linear-gradient(rgba(107, 87, 69, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 87, 69, 0.055) 1px, transparent 1px),
    var(--neis-shell);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 4px 4px 0 var(--neis-shadow);
  overflow: hidden;
  font-family: inherit;
}

body[data-scheme="dark"] .neis-character-counter.neis-byte-tool,
body[data-scheme="inverse"] .neis-character-counter.neis-byte-tool,
html[data-scheme="dark"] body .neis-character-counter.neis-byte-tool,
html[data-theme="dark"] body .neis-character-counter.neis-byte-tool,
html.theme-dark .neis-character-counter.neis-byte-tool {
  --neis-shell: #201811;
  --neis-paper: #2b2119;
  --neis-panel: #33271d;
  --neis-soft: #3b2d22;
  --neis-line: #b99564;
  --neis-ink: #f7ead7;
  --neis-muted: #ddc8aa;
  --neis-title-end: #4a3827;
  --neis-result: #344a32;
  --neis-result-strong: #405b39;
  --neis-info: #263f4a;
  --neis-warning: #5a4427;
  --neis-danger: #623525;
  --neis-safe-bg: #334b2e;
  --neis-watch-bg: #5a4828;
  --neis-near-bg: #5c3924;
  --neis-over-bg: #633226;
  --neis-safe-row: #25351f;
  --neis-watch-row: #352b1d;
  --neis-near-row: #39261d;
  --neis-over-row: #3c201b;
  --neis-safe-fill: #87b864;
  --neis-watch-fill: #d0a94d;
  --neis-near-fill: #cf7b3e;
  --neis-over-fill: #c05d4d;
  --neis-shadow: rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
  body:not([data-scheme="light"]) .neis-character-counter.neis-byte-tool {
    --neis-shell: #201811;
    --neis-paper: #2b2119;
    --neis-panel: #33271d;
    --neis-soft: #3b2d22;
    --neis-line: #b99564;
    --neis-ink: #f7ead7;
    --neis-muted: #ddc8aa;
    --neis-title-end: #4a3827;
    --neis-result: #344a32;
    --neis-result-strong: #405b39;
    --neis-info: #263f4a;
    --neis-warning: #5a4427;
    --neis-danger: #623525;
    --neis-safe-bg: #334b2e;
    --neis-watch-bg: #5a4828;
    --neis-near-bg: #5c3924;
    --neis-over-bg: #633226;
    --neis-safe-row: #25351f;
    --neis-watch-row: #352b1d;
    --neis-near-row: #39261d;
    --neis-over-row: #3c201b;
    --neis-safe-fill: #87b864;
    --neis-watch-fill: #d0a94d;
    --neis-near-fill: #cf7b3e;
    --neis-over-fill: #c05d4d;
    --neis-shadow: rgba(0, 0, 0, 0.38);
  }
}

.neis-byte-tool__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  background:
    linear-gradient(135deg, rgba(255, 250, 236, 0.98), rgba(245, 224, 190, 0.98)),
    var(--neis-paper);
}

body[data-scheme="dark"] .neis-byte-tool__title,
body[data-scheme="inverse"] .neis-byte-tool__title,
html[data-scheme="dark"] body .neis-byte-tool__title,
html[data-theme="dark"] body .neis-byte-tool__title,
html.theme-dark .neis-byte-tool__title {
  background:
    linear-gradient(135deg, rgba(55, 42, 31, 0.98), rgba(42, 32, 24, 0.98)),
    var(--neis-paper);
}

.neis-byte-tool__title-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.neis-byte-tool__kicker,
.neis-byte-tool__title h2,
.neis-byte-tool__title p {
  margin: 0 !important;
}

.neis-byte-tool__kicker {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(107, 87, 69, 0.48);
  background: rgba(250, 236, 212, 0.72);
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}
body[data-scheme="dark"] .neis-byte-tool__kicker,
body[data-scheme="inverse"] .neis-byte-tool__kicker,
html[data-scheme="dark"] body .neis-byte-tool__kicker,
html[data-theme="dark"] body .neis-byte-tool__kicker,
html.theme-dark .neis-byte-tool__kicker {
  border-color: rgba(185, 149, 100, 0.78);
  background: rgba(83, 64, 45, 0.94);
  color: #f7ead7;
  -webkit-text-fill-color: #f7ead7;
}


.neis-byte-tool__title h2 {
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.neis-byte-tool__title p:not(.neis-byte-tool__kicker) {
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 760;
  line-height: 1.5;
  word-break: keep-all;
}

.neis-byte-tool__rule {
  display: grid;
  gap: 4px;
  min-width: 188px;
  padding: 12px 14px;
  border: 2px solid var(--neis-line);
  background: var(--neis-result);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  text-align: center;
  box-shadow: 3px 3px 0 rgba(107, 87, 69, 0.16);
}

.neis-byte-tool__rule strong {
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
}

.neis-byte-tool__rule span {
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.neis-byte-tool__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  border-top: 2px solid var(--neis-line);
  background: rgba(255, 247, 232, 0.72);
}

body[data-scheme="dark"] .neis-byte-tool__body,
body[data-scheme="inverse"] .neis-byte-tool__body,
html[data-scheme="dark"] body .neis-byte-tool__body,
html[data-theme="dark"] body .neis-byte-tool__body,
html.theme-dark .neis-byte-tool__body {
  background: rgba(30, 23, 17, 0.68);
}

.neis-byte-tool__panel {
  min-width: 0;
  border: 2px solid var(--neis-line);
  border-radius: 0;
  background: var(--neis-panel);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  box-shadow: 3px 3px 0 rgba(107, 87, 69, 0.14);
}

.neis-byte-tool__panel--input,
.neis-byte-tool__panel--result {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.neis-byte-tool__panel--input {
  width: 100%;
}

.neis-byte-tool__panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.neis-byte-tool__panel-head h3,
.neis-byte-tool__panel-head p {
  margin: 0 !important;
}

.neis-byte-tool__panel-head h3 {
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.neis-byte-tool__panel-head p {
  margin-top: 5px !important;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.42;
  word-break: keep-all;
}

.neis-byte-tool__count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--neis-line);
  background: var(--neis-soft);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.neis-byte-tool__count-pill strong {
  font-weight: 950;
}

.neis-byte-tool__textarea-label,
.neis-byte-tool__label {
  display: block;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.neis-byte-tool__textarea {
  display: block;
  width: 100%;
  min-height: 322px;
  resize: vertical;
  border: 2px solid var(--neis-line) !important;
  border-radius: 0 !important;
  outline: none;
  background: var(--neis-paper) !important;
  color: var(--neis-ink) !important;
  -webkit-text-fill-color: var(--neis-ink) !important;
  padding: 13px 14px;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.62 !important;
  box-shadow: inset 2px 2px 0 rgba(107, 87, 69, 0.08) !important;
}

.neis-byte-tool__textarea::placeholder,
.neis-byte-tool__limit-input::placeholder {
  color: rgba(111, 91, 73, 0.68) !important;
  -webkit-text-fill-color: rgba(111, 91, 73, 0.68) !important;
  font-weight: 650 !important;
}

body[data-scheme="dark"] .neis-byte-tool__textarea::placeholder,
body[data-scheme="inverse"] .neis-byte-tool__textarea::placeholder,
html[data-scheme="dark"] body .neis-byte-tool__textarea::placeholder,
html[data-theme="dark"] body .neis-byte-tool__textarea::placeholder,
html.theme-dark .neis-byte-tool__textarea::placeholder,
body[data-scheme="dark"] .neis-byte-tool__limit-input::placeholder,
body[data-scheme="inverse"] .neis-byte-tool__limit-input::placeholder,
html[data-scheme="dark"] body .neis-byte-tool__limit-input::placeholder,
html[data-theme="dark"] body .neis-byte-tool__limit-input::placeholder,
html.theme-dark .neis-byte-tool__limit-input::placeholder {
  color: rgba(247, 234, 215, 0.62) !important;
  -webkit-text-fill-color: rgba(247, 234, 215, 0.62) !important;
}

.neis-byte-tool__textarea:focus,
.neis-byte-tool__select:focus,
.neis-byte-tool__limit-input:focus,
.neis-byte-tool__action:focus-visible {
  outline: 3px solid rgba(210, 170, 85, 0.55) !important;
  outline-offset: 2px;
}

.neis-byte-tool__help {
  margin: -2px 0 0 !important;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
  word-break: keep-all;
}

.neis-byte-tool__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.neis-byte-tool__action,
.neis-byte-tool button.neis-byte-tool__action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 2px solid var(--neis-line) !important;
  border-radius: 0 !important;
  background: var(--neis-soft) !important;
  color: var(--neis-ink) !important;
  -webkit-text-fill-color: var(--neis-ink) !important;
  box-shadow: 2px 2px 0 rgba(107, 87, 69, 0.16) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  appearance: none;
}

.neis-byte-tool__action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(107, 87, 69, 0.18) !important;
}

.neis-byte-tool__action--primary,
.neis-byte-tool button.neis-byte-tool__action--primary {
  background: #f2e3d3 !important;
}

body[data-scheme="dark"] .neis-byte-tool__action,
body[data-scheme="inverse"] .neis-byte-tool__action,
html[data-scheme="dark"] body .neis-byte-tool__action,
html[data-theme="dark"] body .neis-byte-tool__action,
html.theme-dark .neis-byte-tool__action {
  background: #3b2d22 !important;
  color: #f7ead7 !important;
  -webkit-text-fill-color: #f7ead7 !important;
}

body[data-scheme="dark"] .neis-byte-tool__action--primary,
body[data-scheme="inverse"] .neis-byte-tool__action--primary,
html[data-scheme="dark"] body .neis-byte-tool__action--primary,
html[data-theme="dark"] body .neis-byte-tool__action--primary,
html.theme-dark .neis-byte-tool__action--primary {
  background: #5c442b !important;
}

.neis-byte-tool__limit-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(118px, 0.78fr) minmax(104px, 0.72fr);
  gap: 8px;
  align-items: end;
}

.neis-byte-tool__field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.neis-byte-tool__select,
.neis-byte-tool__limit-input,
.neis-byte-tool__status-box,
.neis-byte-tool__input-wrap {
  height: 42px !important;
  min-height: 42px !important;
}

.neis-byte-tool__select,
.neis-byte-tool__limit-input {
  width: 100% !important;
  border: 2px solid var(--neis-line) !important;
  border-radius: 0 !important;
  background: var(--neis-paper) !important;
  color: var(--neis-ink) !important;
  -webkit-text-fill-color: var(--neis-ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  appearance: none;
}

.neis-byte-tool__select {
  padding: 0 28px 0 10px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--neis-line) 50%), linear-gradient(135deg, var(--neis-line) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) 17px, calc(100% - 9px) 17px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.neis-byte-tool__input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
}

.neis-byte-tool__limit-input {
  padding: 0 10px !important;
  border-right: 0 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 950 !important;
}

.neis-byte-tool__unit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-height: 42px;
  border: 2px solid var(--neis-line);
  border-left: 0;
  background: #faecd4;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

body[data-scheme="dark"] .neis-byte-tool__unit-chip,
body[data-scheme="inverse"] .neis-byte-tool__unit-chip,
html[data-scheme="dark"] body .neis-byte-tool__unit-chip,
html[data-theme="dark"] body .neis-byte-tool__unit-chip,
html.theme-dark .neis-byte-tool__unit-chip {
  background: #493723;
  color: #f0dec2;
  -webkit-text-fill-color: #f0dec2;
}

.neis-byte-tool__status-box {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 0 10px;
  border: 2px solid var(--neis-line);
  background: var(--neis-info);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  overflow: hidden;
}

.neis-byte-tool__status-box span {
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.neis-byte-tool__status-box strong {
  display: block;
  overflow: hidden;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neis-byte-tool[data-state="safe"] .neis-byte-tool__status-box,
.neis-byte-tool[data-state="safe"] .neis-byte-tool__result-card {
  background: var(--neis-safe-bg);
}

.neis-byte-tool[data-state="watch"] .neis-byte-tool__status-box,
.neis-byte-tool[data-state="watch"] .neis-byte-tool__result-card {
  background: var(--neis-watch-bg);
}

.neis-byte-tool[data-state="near"] .neis-byte-tool__status-box,
.neis-byte-tool[data-state="near"] .neis-byte-tool__result-card {
  background: var(--neis-near-bg);
}

.neis-byte-tool[data-state="over"] .neis-byte-tool__status-box,
.neis-byte-tool[data-state="over"] .neis-byte-tool__result-card {
  background: var(--neis-over-bg);
}

.neis-byte-tool__result-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 2px solid var(--neis-line);
  background: var(--neis-result);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  text-align: center;
}


.neis-byte-tool__result-card span,
.neis-byte-tool__result-card em {
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 850;
  font-style: normal;
  line-height: 1.2;
}

.neis-byte-tool__result-card strong {
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.neis-byte-tool__progress {
  height: 12px;
  border: 2px solid var(--neis-line);
  background: var(--neis-paper);
  overflow: hidden;
}

.neis-byte-tool__progress span {
  display: block;
  height: 100%;
  background: var(--neis-safe-fill);
  transition: width 0.18s ease;
}

.neis-byte-tool[data-state="watch"] .neis-byte-tool__progress span {
  background: var(--neis-watch-fill);
}

.neis-byte-tool[data-state="near"] .neis-byte-tool__progress span {
  background: var(--neis-near-fill);
}

.neis-byte-tool[data-state="over"] .neis-byte-tool__progress span {
  background: var(--neis-over-fill);
}

.neis-byte-tool__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.neis-byte-tool__metric,
.neis-byte-tool__breakdown > div {
  min-width: 0;
  border: 1px solid rgba(107, 87, 69, 0.58);
  background: var(--neis-paper);
  padding: 9px 10px;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
}

.neis-byte-tool__metric span,
.neis-byte-tool__breakdown span {
  display: block;
  overflow: hidden;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neis-byte-tool__metric strong,
.neis-byte-tool__breakdown strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.neis-byte-tool__breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.neis-byte-tool__breakdown > div {
  padding: 8px 7px;
}

@media (min-width: 921px) {
  .neis-byte-tool__panel--result {
    width: 100%;
    grid-template-columns: minmax(180px, 0.86fr) minmax(260px, 1fr) minmax(168px, 0.64fr) minmax(300px, 1.22fr);
    grid-template-areas:
      "result-head focus-card current-byte compact-metrics"
      "compact-progress focus-card compact-breakdown compact-metrics";
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__panel-head {
    grid-area: result-head;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__panel-head p {
    max-height: 4.1em;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.34;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__status-box {
    width: 100%;
    height: 38px !important;
    min-height: 38px !important;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-card {
    grid-area: focus-card;
    gap: 6px;
    padding: 10px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-card > strong {
    font-size: 14px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-card > p {
    font-size: 11px;
    line-height: 1.35;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-metrics {
    gap: 5px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-metrics > div {
    padding: 6px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-metrics span {
    font-size: 9px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__focus-metrics strong {
    margin-top: 3px;
    font-size: 12px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__result-card {
    grid-area: current-byte;
    align-content: center;
    padding: 10px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__result-card strong {
    font-size: clamp(28px, 3vw, 40px);
  }

  .neis-byte-tool__panel--result .neis-byte-tool__progress {
    grid-area: compact-progress;
    align-self: center;
    height: 10px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__metrics {
    grid-area: compact-metrics;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__breakdown {
    grid-area: compact-breakdown;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__metric,
  .neis-byte-tool__panel--result .neis-byte-tool__breakdown > div {
    padding: 6px 7px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__metric span,
  .neis-byte-tool__panel--result .neis-byte-tool__breakdown span {
    font-size: 10px;
  }

  .neis-byte-tool__panel--result .neis-byte-tool__metric strong,
  .neis-byte-tool__panel--result .neis-byte-tool__breakdown strong {
    margin-top: 2px;
    font-size: 13px;
  }
}

@media (min-width: 921px) and (max-width: 1080px) {
  .neis-byte-tool__panel--result {
    grid-template-columns: minmax(210px, 0.9fr) minmax(280px, 1.15fr) minmax(170px, 0.7fr);
    grid-template-areas:
      "result-head focus-card current-byte"
      "compact-progress compact-progress compact-progress"
      "compact-metrics compact-metrics compact-breakdown";
  }
}

.neis-byte-tool__breakdown strong {
  font-size: 13px;
}

.neis-byte-tool__toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 36px));
  padding: 10px 12px;
  border: 2px solid var(--neis-line);
  background: var(--neis-panel);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.neis-byte-tool__toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.neis-byte-tool__toast--warning {
  background: var(--neis-warning);
}

.neis-byte-tool__toast--error {
  background: var(--neis-danger);
}

@media (max-width: 920px) {
  .neis-byte-tool__body {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__textarea {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .neis-character-counter.neis-byte-tool {
    width: min(100% - 20px, 100%);
    margin: 14px auto;
    box-shadow: 3px 3px 0 var(--neis-shadow);
  }

  .neis-byte-tool__title {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .neis-byte-tool__rule {
    min-width: 0;
    width: 100%;
  }

  .neis-byte-tool__body {
    padding: 12px;
    gap: 12px;
  }

  .neis-byte-tool__panel--input,
  .neis-byte-tool__panel--result {
    padding: 12px;
  }

  .neis-byte-tool__panel-head {
    display: grid;
  }

  .neis-byte-tool__count-pill {
    justify-self: start;
  }

  .neis-byte-tool__textarea {
    min-height: 222px;
    font-size: 14px !important;
    line-height: 1.56 !important;
  }

  .neis-byte-tool__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .neis-byte-tool__limit-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .neis-byte-tool__status-box {
    height: 42px;
  }

  .neis-byte-tool__metrics {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 374px) {
  .neis-byte-tool__actions,
  .neis-byte-tool__breakdown {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__action,
  .neis-byte-tool button.neis-byte-tool__action {
    white-space: normal !important;
  }
}

/* neis-character-counter limit tracker expansion 20260623 start */
.neis-byte-tool__preset-box {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(220px, 1fr) minmax(132px, 0.62fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 2px solid var(--neis-line);
  background: rgba(250, 236, 212, 0.54);
}

body[data-scheme="dark"] .neis-byte-tool__preset-box,
body[data-scheme="inverse"] .neis-byte-tool__preset-box,
html[data-scheme="dark"] body .neis-byte-tool__preset-box,
html[data-theme="dark"] body .neis-byte-tool__preset-box,
html.theme-dark .neis-byte-tool__preset-box {
  background: rgba(59, 45, 34, 0.58);
}

.neis-byte-tool__school-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.neis-byte-tool__school-tab,
.neis-byte-tool button.neis-byte-tool__school-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 8px !important;
  border: 2px solid var(--neis-line) !important;
  border-radius: 0 !important;
  background: var(--neis-paper) !important;
  color: var(--neis-ink) !important;
  -webkit-text-fill-color: var(--neis-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  appearance: none;
}

.neis-byte-tool__school-tab.is-active,
.neis-byte-tool button.neis-byte-tool__school-tab.is-active {
  background: var(--neis-result) !important;
  box-shadow: inset 0 0 0 2px rgba(107, 87, 69, 0.14) !important;
}

.neis-byte-tool__school-tab:focus-visible {
  outline: 3px solid rgba(210, 170, 85, 0.55) !important;
  outline-offset: 2px;
}

.neis-byte-tool__focus-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 2px solid var(--neis-line);
  background: var(--neis-soft);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
}

.neis-byte-tool__focus-kicker {
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(107, 87, 69, 0.48);
  background: var(--neis-paper);
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.neis-byte-tool__focus-card > strong {
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
  word-break: keep-all;
}

.neis-byte-tool__focus-card > p {
  margin: 0 !important;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
  word-break: keep-all;
}

.neis-byte-tool__focus-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.neis-byte-tool__focus-metrics > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(107, 87, 69, 0.58);
  background: var(--neis-paper);
}

.neis-byte-tool__focus-metrics span {
  display: block;
  overflow: hidden;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neis-byte-tool__focus-metrics strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


.neis-byte-tool[data-state="unlimited"] .neis-byte-tool__status-box,
.neis-byte-tool[data-state="unlimited"] .neis-byte-tool__result-card {
  background: var(--neis-info);
}


.neis-byte-tool[data-state="unlimited"] .neis-byte-tool__progress span {
  background: #78a9c8;
}

.neis-byte-tool__limit-panel {
  display: grid;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  padding: 14px;
  border-top: 2px solid var(--neis-line);
  box-shadow: none;
}

.neis-byte-tool__limit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}

.neis-byte-tool__limit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "bar bar"
    "foot foot";
  gap: 8px 10px;
  min-width: 0;
  min-height: 118px;
  height: 100%;
  padding: 10px;
  border: 1px solid rgba(107, 87, 69, 0.62);
  border-radius: 12px;
  background: var(--neis-paper);
  box-shadow: 2px 2px 0 rgba(107, 87, 69, 0.16);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
}

.neis-byte-tool__limit-row.is-focus {
  border-width: 2px;
  background: var(--neis-soft);
}
.neis-byte-tool__limit-row.is-safe {
  background: var(--neis-safe-row);
}

.neis-byte-tool__limit-row.is-watch {
  background: var(--neis-watch-row);
}

.neis-byte-tool__limit-row.is-near {
  background: var(--neis-near-row);
}

.neis-byte-tool__limit-row.is-over {
  background: var(--neis-over-row);
}


.neis-byte-tool__limit-row-main {
  grid-area: main;
  min-width: 0;
}

.neis-byte-tool__limit-row-main strong {
  display: block;
  overflow: hidden;
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neis-byte-tool__limit-row-main span,
.neis-byte-tool__limit-row-foot span {
  display: block;
  overflow: hidden;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neis-byte-tool__limit-row-status {
  grid-area: status;
  align-self: start;
  padding: 5px 7px;
  border: 1px solid rgba(107, 87, 69, 0.5);
  background: var(--neis-result);
  color: var(--neis-ink);
  -webkit-text-fill-color: var(--neis-ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.neis-byte-tool__limit-row-progress {
  grid-area: bar;
  height: 8px;
  border: 1px solid rgba(107, 87, 69, 0.58);
  background: var(--neis-panel);
  overflow: hidden;
}

.neis-byte-tool__limit-row-progress span {
  display: block;
  height: 100%;
  background: var(--neis-safe-fill);
}

.neis-byte-tool__limit-row-foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.neis-byte-tool__limit-row-foot span:last-child {
  text-align: right;
}

.neis-byte-tool__limit-row.is-safe .neis-byte-tool__limit-row-status,
.neis-byte-tool__limit-row.is-safe .neis-byte-tool__limit-row-progress span {
  background: var(--neis-safe-fill);
}

.neis-byte-tool__limit-row.is-watch .neis-byte-tool__limit-row-status,
.neis-byte-tool__limit-row.is-watch .neis-byte-tool__limit-row-progress span {
  background: var(--neis-watch-fill);
}

.neis-byte-tool__limit-row.is-near .neis-byte-tool__limit-row-status,
.neis-byte-tool__limit-row.is-near .neis-byte-tool__limit-row-progress span {
  background: var(--neis-near-fill);
}

.neis-byte-tool__limit-row.is-over .neis-byte-tool__limit-row-status,
.neis-byte-tool__limit-row.is-over .neis-byte-tool__limit-row-progress span {
  background: var(--neis-over-fill);
}

.neis-byte-tool__limit-row.is-unlimited .neis-byte-tool__limit-row-status,
.neis-byte-tool__limit-row.is-unlimited .neis-byte-tool__limit-row-progress span {
  background: #78a9c8;
}

.neis-byte-tool__empty-note,
.neis-byte-tool__source-note {
  margin: 0 !important;
  color: var(--neis-muted);
  -webkit-text-fill-color: var(--neis-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
  word-break: keep-all;
}

.neis-byte-tool__source-note {
  padding-top: 2px;
}

@media (max-width: 920px) {
  .neis-byte-tool__preset-box {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .neis-byte-tool__limit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .neis-byte-tool__focus-metrics {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__limit-panel {
    width: calc(100% - 24px);
    padding: 12px;
  }
  .neis-byte-tool__limit-list {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__limit-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "status"
      "bar"
      "foot";
  }

  .neis-byte-tool__limit-row-status {
    justify-self: start;
  }

  .neis-byte-tool__limit-row-foot {
    display: grid;
  }

  .neis-byte-tool__limit-row-foot span:last-child {
    text-align: left;
  }
}

@media (max-width: 374px) {
  .neis-byte-tool__school-tabs {
    grid-template-columns: 1fr;
  }

  .neis-byte-tool__school-tab,
  .neis-byte-tool button.neis-byte-tool__school-tab {
    white-space: normal !important;
  }
}
/* neis-character-counter limit tracker expansion 20260623 end */