.essay-home-card { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin: 0 0 40px; padding: 25px 29px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.essay-home-card h2 { max-width: 690px; margin: 0 0 8px; font: 600 clamp(23px, 3vw, 31px)/1.1 Georgia, serif; }
.essay-home-card p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.essay-home-card .eyebrow { margin-bottom: 7px; }
.essay-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.essay-year-card { display: flex; min-height: 170px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.essay-year-card:hover, .essay-year-card:focus-visible { border-color: var(--green); box-shadow: 0 7px 22px rgba(19, 61, 52, .10); outline: none; transform: translateY(-1px); }
.essay-year { color: var(--green); font: 600 21px/1 Georgia, serif; }
.essay-year-card > strong { flex: 1; font: 600 17px/1.2 Georgia, serif; }
.essay-year-status { display: flex; width: 100%; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 11px; }
.essay-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 24px; }
.essay-heading h1 { margin: 0 0 10px; font-size: clamp(32px, 4.5vw, 52px); }
.essay-heading p { max-width: 760px; margin: 0; color: var(--ink-soft); }
.essay-heading > .button { flex: 0 0 auto; }
.essay-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: 22px; align-items: start; }
.essay-layout .question-panel { min-width: 0; }
.essay-layout .pdf-toolbar > span { font-size: 12px; }
.essay-pdf-stage { min-height: 470px; max-height: 80vh; }
.essay-pdf-stage canvas { max-width: none; margin: 0 auto; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.essay-writing-panel { position: sticky; top: 92px; padding: 23px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.essay-writing-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.essay-writing-heading .eyebrow { margin-bottom: 4px; }
.essay-writing-heading h2 { margin: 0; font: 600 25px/1.08 Georgia, serif; }
.essay-save-status { color: var(--ink-soft); font-size: 11px; text-align: right; }
.essay-save-status[data-state="saved"] { color: var(--green); }
.essay-save-status[data-state="error"] { color: var(--red); }
.essay-writing-hint, .essay-sync-note { color: var(--ink-soft); font-size: 12px; }
.essay-writing-panel textarea { display: block; width: 100%; min-height: min(56vh, 680px); resize: vertical; padding: 15px; color: var(--ink); background: #fff; border: 1px solid #c9c5bb; border-radius: 11px; font: 16px/1.65 ui-serif, Georgia, serif; }
.essay-writing-panel textarea:focus { border-color: var(--green); outline: 3px solid rgba(23, 107, 87, .12); }
.essay-counts { display: flex; justify-content: flex-end; gap: 18px; padding: 9px 2px; color: var(--ink-soft); font-size: 11px; }
.essay-counts strong { color: var(--ink); }
.essay-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 0 11px; }
.essay-actions .button { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.essay-sync-note { margin: 0; font-size: 11px; }
.offline-essay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.offline-essay-controls .button { margin: 0; }
.offline-essay-list { margin-top: 28px; }
.offline-essay-list h2 { margin-bottom: 14px; font: 600 26px/1.1 Georgia, serif; }
.offline-essay-list .essay-year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offline-essay-list .essay-year-card { cursor: pointer; }
.offline-essay-editor { margin-top: 30px; }
.offline-essay-editor .essay-heading { margin-bottom: 20px; }

@media (max-width: 1080px) {
  .essay-year-grid, .offline-essay-list .essay-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .essay-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); }
}
@media (max-width: 760px) {
  .essay-home-card, .essay-heading { align-items: flex-start; flex-direction: column; }
  .essay-home-card { padding: 21px; }
  .essay-year-grid, .offline-essay-list .essay-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .essay-year-card { min-height: 155px; padding: 14px; }
  .essay-layout { grid-template-columns: 1fr; }
  .essay-writing-panel { position: static; padding: 18px; }
  .essay-pdf-stage { max-height: none; min-height: 390px; padding: 8px; }
  .essay-writing-panel textarea { min-height: 50vh; }
  .essay-heading > .button { align-self: flex-start; }
}
@media (max-width: 380px) {
  .essay-year-grid, .offline-essay-list .essay-year-grid { grid-template-columns: 1fr; }
  .essay-year-card { min-height: 125px; }
  .essay-writing-heading { align-items: flex-start; flex-direction: column; }
  .essay-save-status { text-align: left; }
}