.tv100-app {
  min-height: 100vh;
  background: #f6faf7;
  color: #20352d;
  font-family: "Be Vietnam Pro", sans-serif;
}

.tv100-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.tv100-shell--focus {
  width: min(900px, calc(100% - 32px));
}

.tv100-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  margin-bottom: 24px;
  border-bottom: 1px solid #dfe9e2;
}

.tv100-topbar button {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #326650;
  font: 700 14px/1.4 "Be Vietnam Pro", sans-serif;
  cursor: pointer;
}

.tv100-topbar strong {
  font-size: 15px;
}

.tv100-topbar > span {
  justify-self: end;
  color: #64766e;
  font-size: 12px;
  font-weight: 700;
}

.tv100-entry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  border: 2px solid #96c8ad;
  border-radius: 24px;
  background: #eef8f2;
  box-shadow: 0 12px 32px rgba(32, 77, 57, 0.08);
}

.tv100-entry-card.is-ready {
  border-color: #d7a727;
  background: #fff9e8;
}

.tv100-entry-copy > span,
.tv100-hero > div > span,
.tv100-mock-intro > span,
.tv100-writing-brief > span,
.tv100-self-review > span,
.tv100-user-answer > span,
.tv100-model-answer > span {
  color: #2c7657;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tv100-entry-copy h2 {
  margin: 6px 0 8px;
  color: #173e30;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.2;
}

.tv100-entry-copy p {
  max-width: 720px;
  margin: 0;
  color: #496159;
  font-size: 14px;
  line-height: 1.65;
}

.tv100-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.tv100-entry-tags span {
  padding: 7px 10px;
  border: 1px solid #c8ded1;
  border-radius: 999px;
  background: #fff;
  color: #365b4b;
  font-size: 12px;
  font-weight: 700;
}

.tv100-entry-action {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.tv100-progress-ring {
  display: grid;
  place-content: center;
  width: 106px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #eef8f2 78%, transparent 80% 99%), conic-gradient(#2f855e calc(var(--value) * 1%), #d5e5da 0);
  text-align: center;
}

.is-ready .tv100-progress-ring {
  background: radial-gradient(circle closest-side, #fff9e8 78%, transparent 80% 99%), conic-gradient(#d09a12 calc(var(--value) * 1%), #eee1bd 0);
}

.tv100-progress-ring strong {
  color: #1e6045;
  font-size: 25px;
}

.tv100-progress-ring span {
  color: #65756d;
  font-size: 10px;
  font-weight: 700;
}

.tv100-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 32px;
  border: 1px solid #cfe3d6;
  border-radius: 28px;
  background: #eaf6ee;
}

.tv100-hero.is-ready {
  border-color: #ecd58f;
  background: #fff8e3;
}

.tv100-hero h1 {
  max-width: 760px;
  margin: 8px 0 10px;
  color: #173e30;
  font-size: clamp(29px, 5vw, 48px);
  line-height: 1.13;
}

.tv100-hero p {
  max-width: 720px;
  margin: 0;
  color: #4d645b;
  line-height: 1.7;
}

.tv100-score {
  display: grid;
  justify-items: center;
  min-width: 160px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(35, 75, 57, 0.08);
}

.tv100-score strong {
  color: #25704f;
  font-size: 42px;
  line-height: 1;
}

.tv100-score span {
  margin-top: 7px;
  color: #687970;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.tv100-proof-note,
.tv100-lock-note {
  margin: 16px 0 24px;
  padding: 13px 16px;
  border-left: 4px solid #e4ad30;
  border-radius: 10px;
  background: #fff8e5;
  color: #685426;
  font-size: 13px;
  line-height: 1.6;
}

.tv100-stage-list {
  display: grid;
  gap: 12px;
}

.tv100-stage-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid #dbe7df;
  border-radius: 20px;
  background: #fff;
}

.tv100-stage-card.is-current {
  border: 2px solid #4a9a73;
  box-shadow: 0 10px 26px rgba(40, 103, 73, 0.09);
}

.tv100-stage-card.is-done {
  background: #f2faf5;
}

.tv100-stage-card.is-locked {
  background: #f3f5f4;
  color: #7c8882;
}

.tv100-stage-number {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2f2e8;
  color: #286d4d;
  font-weight: 900;
}

.is-locked .tv100-stage-number {
  background: #e5e9e7;
  color: #7a8680;
}

.tv100-stage-card small {
  color: #408363;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.tv100-stage-card h3 {
  margin: 4px 0;
  font-size: 18px;
}

.tv100-stage-card p {
  margin: 0 0 7px;
  color: #66776f;
  font-size: 13px;
}

.tv100-stage-card div > strong {
  color: #3b574b;
  font-size: 12px;
}

.tv100-stage-card > button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #25704f;
  color: #fff;
  font: 800 13px/1 "Be Vietnam Pro", sans-serif;
  cursor: pointer;
}

.tv100-stage-card > button:disabled {
  background: #d4dcd7;
  color: #75817b;
  cursor: not-allowed;
}

.tv100-rubric-guide {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) 1fr;
  gap: 28px;
  margin-top: 24px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
}

.tv100-rubric-guide span {
  color: #c06a33;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tv100-rubric-guide h2 {
  margin: 6px 0 0;
  font-size: 21px;
}

.tv100-rubric-guide ul,
.tv100-writing-brief ul,
.tv100-mock-intro ul {
  margin: 0;
  padding-left: 20px;
  color: #52685e;
  font-size: 13px;
  line-height: 1.85;
}

.tv100-focus-card,
.tv100-open-card,
.tv100-writing-card,
.tv100-mock-intro,
.tv100-result {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid #dbe7df;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(30, 71, 52, 0.07);
}

.tv100-step-progress {
  margin-bottom: 24px;
}

.tv100-step-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  color: #5a6e64;
  font-size: 12px;
}

.tv100-step-progress i,
.tv100-mock-progress {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e9e4;
}

.tv100-step-progress b,
.tv100-mock-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3b8d67;
}

.tv100-skill-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf6ee;
  color: #2a7654;
  font-size: 11px;
  font-weight: 800;
}

.tv100-focus-card h1,
.tv100-open-card h1,
.tv100-writing-brief h1,
.tv100-mock-question h1 {
  margin: 14px 0 22px;
  color: #1d342b;
  font-size: clamp(21px, 4vw, 30px);
  line-height: 1.45;
}

.tv100-options {
  display: grid;
  gap: 10px;
}

.tv100-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 9px 14px;
  border: 2px solid #dce7e0;
  border-radius: 15px;
  background: #fff;
  color: #2b4037;
  font: 600 14px/1.5 "Be Vietnam Pro", sans-serif;
  text-align: left;
  cursor: pointer;
}

.tv100-option span {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #edf3ef;
  color: #3d5b4d;
  font-weight: 900;
}

.tv100-option.is-selected {
  border-color: #35825f;
  background: #eff9f3;
}

.tv100-option.is-selected span {
  background: #35825f;
  color: #fff;
}

.tv100-feedback {
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 14px;
  background: #edf8f1;
  color: #315746;
}

.tv100-feedback.is-wrong {
  background: #fff5e7;
  color: #6c532d;
}

.tv100-feedback p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.tv100-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.tv100-actions .button {
  min-height: 46px;
}

.tv100-actions .button.primary,
.tv100-result-actions .button.primary,
.tv100-mock-intro > .button.primary {
  border-color: #25704f;
  background: #25704f;
  color: #fff;
}

.tv100-actions .button:disabled {
  border-color: #d6dfd9;
  background: #d6dfd9;
  color: #738078;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.tv100-reading-layout,
.tv100-writing-page,
.tv100-mock-question {
  display: grid;
  gap: 16px;
}

.tv100-passage,
.tv100-writing-brief {
  padding: 22px;
  border: 1px solid #d4e3da;
  border-radius: 20px;
  background: #eef7f1;
}

.tv100-passage > span {
  color: #387c5c;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.tv100-passage h2 {
  margin: 5px 0 10px;
  font-size: 20px;
}

.tv100-passage p {
  margin: 0;
  color: #334a40;
  font-size: 15px;
  line-height: 1.9;
}

.tv100-open-card label,
.tv100-writing-card label {
  display: grid;
  gap: 8px;
  color: #344f42;
  font-size: 13px;
  font-weight: 800;
}

.tv100-open-card textarea,
.tv100-writing-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  resize: vertical;
  border: 2px solid #cfddd4;
  border-radius: 14px;
  background: #fff;
  color: #263d33;
  font: 500 15px/1.75 "Be Vietnam Pro", sans-serif;
}

.tv100-open-card textarea:focus,
.tv100-writing-card textarea:focus {
  border-color: #438d69;
  outline: 3px solid rgba(67, 141, 105, 0.14);
}

.tv100-open-card textarea:disabled,
.tv100-writing-card textarea:disabled {
  background: #f4f7f5;
}

.tv100-self-review,
.tv100-user-answer,
.tv100-model-answer {
  margin-top: 20px;
  padding: 18px;
  border-radius: 16px;
  background: #fff8e7;
}

.tv100-self-review h2 {
  margin: 6px 0 12px;
  font-size: 18px;
}

.tv100-self-review > p,
.tv100-user-answer p,
.tv100-model-answer p {
  margin: 7px 0 0;
  color: #465e53;
  font-size: 14px;
  line-height: 1.75;
}

.tv100-self-review > small {
  display: block;
  margin-top: 12px;
  color: #756640;
  line-height: 1.55;
}

.tv100-rubric-selects {
  display: grid;
  gap: 10px;
}

.tv100-rubric-selects label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 14px;
  align-items: center;
  padding: 11px;
  border: 1px solid #ead9aa;
  border-radius: 12px;
  background: #fff;
  color: #354d42;
  font-size: 13px;
  font-weight: 600;
}

.tv100-rubric-selects select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c9d6cf;
  border-radius: 9px;
  background: #fff;
  color: #2c4438;
  font: 700 12px/1 "Be Vietnam Pro", sans-serif;
}

.tv100-writing-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tv100-writing-signals span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #f0f3f1;
  color: #6a7670;
  font-size: 11px;
  font-weight: 700;
}

.tv100-writing-signals span.is-ok {
  background: #e8f6ed;
  color: #28724f;
}

.tv100-mock-intro {
  max-width: 760px;
  margin: 0 auto;
}

.tv100-mock-intro h1 {
  margin: 7px 0 10px;
  font-size: clamp(30px, 5vw, 44px);
}

.tv100-mock-intro > p {
  color: #52675d;
  line-height: 1.7;
}

.tv100-mock-intro > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.tv100-mock-intro article,
.tv100-result-breakdown article {
  display: grid;
  justify-items: center;
  padding: 16px;
  border: 1px solid #d8e4dc;
  border-radius: 14px;
  background: #f7faf8;
}

.tv100-mock-intro article strong,
.tv100-result-breakdown strong {
  color: #277451;
  font-size: 23px;
}

.tv100-mock-intro article span,
.tv100-result-breakdown span {
  color: #67776f;
  font-size: 11px;
  font-weight: 700;
}

.tv100-mock-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #435e51;
  font-size: 13px;
  font-weight: 800;
}

.tv100-mock-bar strong {
  color: #a3483b;
  font-size: 18px;
}

.tv100-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: #fff5e8;
}

.tv100-result.is-perfect {
  background: #eaf7ef;
}

.tv100-result-score {
  display: flex;
  align-items: baseline;
  min-width: 130px;
  color: #9b5b23;
}

.is-perfect .tv100-result-score {
  color: #23724e;
}

.tv100-result-score strong {
  font-size: 58px;
  line-height: 1;
}

.tv100-result h1 {
  margin: 5px 0 8px;
  font-size: clamp(24px, 4vw, 36px);
}

.tv100-result p {
  margin: 0;
  color: #586c62;
  line-height: 1.65;
}

.tv100-result-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.tv100-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.tv100-error {
  padding: 28px;
  border-radius: 20px;
  background: #fff1ed;
}

@media (max-width: 760px) {
  .tv100-shell,
  .tv100-shell--focus {
    width: min(100% - 20px, 900px);
    padding-top: 12px;
  }

  .tv100-topbar {
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 14px;
  }

  .tv100-topbar strong {
    text-align: right;
  }

  .tv100-topbar > span {
    display: none;
  }

  .tv100-entry-card,
  .tv100-hero,
  .tv100-result {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .tv100-entry-action {
    grid-template-columns: auto 1fr;
    justify-items: stretch;
  }

  .tv100-progress-ring {
    width: 78px;
  }

  .tv100-stage-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tv100-stage-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .tv100-rubric-guide {
    grid-template-columns: 1fr;
  }

  .tv100-rubric-selects label {
    grid-template-columns: 1fr;
  }

  .tv100-actions {
    display: grid;
  }

  .tv100-actions .button,
  .tv100-result-actions .button {
    width: 100%;
  }

  .tv100-mock-intro > div,
  .tv100-result-breakdown {
    grid-template-columns: 1fr;
  }

  .tv100-result-actions {
    display: grid;
  }

  .tv100-passage p,
  .tv100-open-card textarea,
  .tv100-writing-card textarea {
    font-size: 14px;
  }
}