:root {
  --container_main_width: 1120px;
  --stage_side_width: 340px;
}

.c-panel_title {
  font-size: 15px;
  font-weight: bold;
  color: var(--gray_text);
  margin-bottom: 14px;
}

.c-editor_textarea {
  display: block;
  font-size: 17px;
  line-height: 1.8;
  background: var(--green_bg-l);
  border: 2px solid var(--green_border);
  border-radius: var(--radius-10);
  width: 100%;
  min-height: 360px;
  padding: 14px 18px;
  resize: vertical;
  transition: border-color 0.2s, background-color 0.2s, outline 0.2s;
}
@media (max-width: 767.9px) {
  .c-editor_textarea {
    min-height: 260px;
  }
}
.c-editor_textarea::-moz-placeholder {
  font-size: 16px;
}
.c-editor_textarea::placeholder {
  font-size: 16px;
}
.c-editor_textarea:focus-visible {
  outline: 4px solid var(--green_focus);
}

.c-editor_result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.c-editor_result__summary {
  flex: 1;
}
.c-editor_result__total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.c-editor_result__total__num {
  font-size: 44px;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: normal;
  font-family: var(--font_mono);
  color: var(--green);
}
.c-editor_result__total__unit {
  font-size: 15px;
  font-weight: bold;
  color: var(--green_text-l);
}
.c-editor_result__basis {
  font-size: 12px;
  color: var(--gray_text-l);
  margin-top: 4px;
}
.c-editor_result__basis:empty {
  display: none;
}
.c-editor_result__btns {
  flex: none;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.c-editor_message {
  font-size: 14px;
  color: var(--text_danger);
  margin-top: 10px;
  display: none;
}
.c-editor_message.is-visible {
  display: block;
}

.c-btn {
  font-size: 15px;
  font-weight: bold;
  border-radius: var(--radius-7);
  padding: 9px 18px;
  transition: background-color 0.2s, transform 0.1s;
}
.c-btn:disabled {
  cursor: default;
  transform: none;
}

.c-btn_copy {
  background: var(--yellow);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--yellow), black 40%);
  transition: var(--btn_transition);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--yellow), black 50%);
  transition: var(--btn_transition);
}
.c-btn_copy:not(:disabled):hover {
  box-shadow: 0 3px 0 color-mix(in srgb, var(--yellow), black 50%);
  transform: translateY(2px);
}
.c-btn_copy:not(:disabled):active {
  box-shadow: none;
  transform: translateY(5px);
}
.c-btn_copy.is-copied {
  color: #fff;
  background: var(--gray-800);
  pointer-events: none;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--gray-800), black 40%);
}

.c-btn_clear {
  color: var(--green);
  border: 2px solid var(--green);
}
.c-btn_clear:active {
  transform: translateY(1px);
}

.c-goal {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 2px dashed var(--green_border);
}
.c-goal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-goal__head .c-panel_title {
  margin-bottom: 0;
}
.c-goal__field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-goal__field__input {
  font-size: 16px;
  background: var(--green_bg-l);
  border: 2px solid var(--green_border);
  border-radius: var(--radius-7);
  padding: 8px 12px;
  width: 180px;
  transition: background-color 0.2s, border-color 0.2s, outline 0.2s;
}
.c-goal__field__input:focus-visible {
  outline: 4px solid var(--green_focus);
}
.c-goal__field__unit {
  font-size: 14px;
}
.c-goal__bar {
  background: var(--green_bg);
  border-radius: 99px;
  height: 10px;
  margin-top: 16px;
  overflow: hidden;
}
.c-goal__bar__fill {
  background: #8ed395;
  border-radius: 99px;
  width: 0;
  height: 100%;
  transition: width 0.25s ease, background-color 0.25s;
}
.c-goal__bar.is-near .c-goal__bar__fill {
  background: #f2c76a;
}
.c-goal__bar.is-over .c-goal__bar__fill {
  background: #f0968c;
}
.c-goal__bar.is-done .c-goal__bar__fill {
  background: #66bd72;
}
.c-goal__status {
  font-size: 14px;
  color: var(--green_text-l);
  margin-top: 12px;
}
.c-goal__bar.is-near ~ .c-goal__status {
  color: #8a6410;
}
.c-goal__bar.is-over ~ .c-goal__status {
  color: #b0392d;
}
.c-goal__bar.is-done ~ .c-goal__status {
  color: var(--green);
}

.c-options_group + .c-options_group {
  margin-top: 14px;
}
.c-options_group__title {
  font-size: 13.5px;
  font-weight: bold;
  color: var(--gray_text);
  margin-bottom: 6px;
}

.c-options_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--green_bg-l);
  border: solid 2px var(--green_border);
  border-radius: var(--radius-10);
  padding: 10px 12px;
  transition: background-color 0.2s;
  cursor: pointer;
}
.c-check:hover:not(:has(:checked, :disabled)) {
  background: var(--green_bg);
}
.c-check:has(:checked) {
  background: var(--green_bg-d);
  border-color: var(--green);
}
.c-check:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-check__input {
  flex: none;
  background: #fff;
  border: 2px solid var(--green_border);
  border-radius: var(--radius-5);
  width: 22px;
  height: 22px;
  margin-top: 1.5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.c-check__input[type=checkbox]:checked {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  border-color: var(--green);
}
.c-check__label {
  font-size: 15px;
  font-weight: bold;
}
.c-check__note {
  display: block;
  font-size: 12px;
  font-weight: var(--body_font_weight);
  line-height: 1.6;
  margin-top: 2px;
  color: var(--green_text-l);
}

.c-options_note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray_text-l);
  margin-top: 10px;
}
.c-options_note:empty {
  display: none;
}

.c-stats_hint {
  font-size: 12.5px;
  color: var(--green_text-l);
  margin-top: 10px;
}

.c-stats_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.c-stats {
  cursor: pointer;
}
input:not(:checked) + .c-stats__body:hover {
  background: var(--green_bg);
}
input:checked + .c-stats__body {
  background: var(--green_bg-d);
  border-color: var(--green);
}
.c-stats__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: #f3f3f3;
  border: 2px solid transparent;
  border-radius: var(--radius-10);
  padding-block: 8px;
  padding-inline: 12px 15px;
  transition: background-color 0.2s, border-color 0.2s;
}
.c-stats__label {
  font-size: 15px;
  font-weight: bold;
}
.c-stats__note {
  display: block;
  font-size: 12px;
  font-weight: var(--body_font_weight);
  line-height: 1.6;
  margin-top: 2px;
  color: #a1a1a1;
}
.c-stats__val {
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  letter-spacing: normal;
  font-family: var(--font_mono);
  color: var(--green);
  word-break: break-all;
}
.c-stats__val__limit {
  font-size: 13.5px;
  font-weight: var(--body_font_weight);
}
.c-stats__val__limit::before {
  content: "/";
  margin-inline: 0.4em;
}