:root {
      color-scheme: light;
      --ink: #202d31;
      --muted: #748185;
      --paper: #f6f5f0;
      --card: #fff;
      --green: #21594b;
      --green-dark: #173f36;
      --mint: #e3f1e9;
      --line: #e8e9e2;
      --orange: #edaa62;
      --red: #b84f49;
      --shadow: 0 16px 50px #273c3210;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    .shell { width: min(1060px, calc(100% - 40px)); margin: 0 auto; }
    header { padding: 23px 0; }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .brand { display: flex; align-items: center; gap: 11px; font-weight: 850; letter-spacing: -.04em; font-size: 1.2rem; }
    .brand-icon {
      display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px;
      color: white; background: var(--green); font-size: 1.1rem;
    }
    .tagline { color: var(--muted); font-size: .9rem; }
    .stats { display: flex; gap: 10px; }
    .top-actions { display: flex; align-items: center; gap: 12px; }
    .language-button { border: 1px solid var(--line); border-radius: 11px; background: white; padding: 8px 11px; color: var(--green-dark); font-weight: 800; }
    .stat {
      background: white; border: 1px solid var(--line); border-radius: 13px;
      padding: 8px 13px; min-width: 84px; text-align: center;
    }
    .stat strong { display: block; font-size: 1rem; line-height: 1.2; }
    .stat span { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
    main { padding: 31px 0 70px; }
    .intro { margin-bottom: 25px; }
    .eyebrow { color: var(--green); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
    h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.07; letter-spacing: -.055em; margin: 8px 0 9px; }
    .intro p { max-width: 610px; color: var(--muted); margin: 0; }
    .controls {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px;
      margin: 24px 0 15px;
    }
    .tabs { display: flex; gap: 5px; background: #eaece5; border-radius: 12px; padding: 4px; }
    .tab { border: 0; padding: 8px 14px; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 750; }
    .tab.active { background: white; color: var(--green-dark); box-shadow: 0 2px 7px #1f34200c; }
    .part-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .88rem; }
    select { color: var(--ink); border: 1px solid var(--line); background: white; border-radius: 10px; padding: 9px 30px 9px 11px; }
    .lesson-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
    .lesson-name { font-size: .86rem; font-weight: 750; }
    .lesson-count { color: var(--muted); font-size: .8rem; }
    .progress-track { height: 7px; background: #e4e7df; border-radius: 10px; overflow: hidden; margin-top: 8px; }
    .progress-fill { width: 0; height: 100%; background: var(--green); border-radius: inherit; transition: width .25s ease; }
    .game-card, .list-card { background: var(--card); border: 1px solid var(--line); border-radius: 21px; box-shadow: var(--shadow); }
    .game-card { padding: clamp(22px, 5vw, 42px); }
    .question-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .question-label { color: var(--muted); font-size: .8rem; font-weight: 700; }
    .column-pill { color: var(--green); background: var(--mint); border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: .78rem; }
    .meaning { margin: 27px 0 5px; color: var(--muted); font-size: .88rem; }
    .prompt { margin: 0 0 23px; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -.045em; line-height: 1.15; font-weight: 850; }
    .prompt em { color: var(--green); font-style: normal; }
    .word-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .word-cell { background: #f7f8f4; border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; min-height: 71px; }
    .word-cell span { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
    .word-cell strong { font-size: 1rem; overflow-wrap: anywhere; }
    .answer-row { display: flex; gap: 9px; margin-top: 20px; }
    .answer-input {
      min-width: 0; flex: 1; border: 1px solid #dfe3dc; border-radius: 12px; padding: 13px 15px;
      outline: none; transition: border-color .15s, box-shadow .15s;
    }
    .answer-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #21594b18; }
    .primary, .secondary {
      border: 0; border-radius: 12px; padding: 12px 19px; font-weight: 800; transition: transform .15s, background .15s;
    }
    .primary { background: var(--green); color: white; }
    .primary:hover { background: var(--green-dark); transform: translateY(-1px); }
    .secondary { color: var(--green-dark); background: var(--mint); }
    .secondary:hover { background: #d5e9dd; }
    .feedback { min-height: 28px; padding-top: 10px; font-size: .9rem; font-weight: 700; }
    .feedback.good { color: var(--green); }
    .feedback.bad { color: var(--red); }
    .bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
    .hint { color: var(--muted); font-size: .76rem; }
    .hidden { display: none !important; }
    .list-card { overflow: hidden; }
    .list-heading { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
    .list-heading h2 { margin: 0; font-size: 1.05rem; }
    .list-tools { display: flex; align-items: center; gap: 12px; }
    .list-search { width: min(260px, 48vw); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
    .table-scroll { overflow-x: auto; }
    .pagination { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
    .pagination button { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; background: white; color: var(--green-dark); font-weight: 750; }
    .pagination button:disabled { cursor: not-allowed; opacity: .45; }
    .pagination span { color: var(--muted); font-size: .85rem; font-weight: 700; }
    table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
    th { background: #f8f9f6; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
    th, td { padding: 12px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
    tbody tr:last-child td { border-bottom: 0; }
    .spanish { color: var(--muted); white-space: normal; }
    .study-content { padding: clamp(20px, 4vw, 34px); }
    .study-content h2 { margin: 0 0 8px; letter-spacing: -.025em; }
    .study-content p { color: var(--muted); }
    .tense-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
    .explanation { padding: 21px; background: #f7f8f4; border: 1px solid var(--line); border-radius: 15px; }
    .explanation h3 { margin: 0 0 10px; }
    .explanation p { margin: 8px 0; }
    .formula { color: var(--green-dark) !important; background: var(--mint); padding: 10px 12px; border-radius: 10px; font-weight: 750; }
    .example { padding-left: 13px; border-left: 3px solid var(--orange); }
    .practice-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 18px 0; }
    .practice-tools label { display: grid; gap: 5px; color: var(--muted); font-size: .8rem; font-weight: 700; }
    .practice-tools select { min-width: 205px; }
    .practice-prompt { border: 1px solid var(--line); border-radius: 13px; padding: 17px; background: #fbfcf9; margin: 14px 0; }
    .practice-prompt strong { color: var(--green-dark); }
    .free-write { display: block; width: 100%; min-height: 110px; resize: vertical; border: 1px solid #dfe3dc; border-radius: 12px; padding: 13px 15px; outline: none; font: inherit; }
    .free-write:focus { border-color: var(--green); box-shadow: 0 0 0 3px #21594b18; }
    .feedback-box { padding: 12px 14px; border-radius: 11px; background: #f4f6f1; color: var(--ink); margin-top: 12px; }
    .feedback-box.good { color: var(--green-dark); background: var(--mint); }
    .feedback-box.bad { color: #873b36; background: #fbeae7; }
    .regular-practice { max-width: 700px; margin: 0 auto 22px; }
    .regular-answer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; flex: 1; }
    .regular-answer-fields label { display: grid; gap: 6px; }
    .regular-options { display: flex; gap: 9px; flex-wrap: wrap; }
    .small-label { color: var(--muted); font-size: .8rem; font-weight: 700; }
    .empty-row { padding: 22px; text-align: center; color: var(--muted); }
    .seo-guide { margin: 28px 0 0; padding: clamp(22px, 5vw, 42px); background: var(--card); border: 1px solid var(--line); border-radius: 21px; box-shadow: var(--shadow); }
    .seo-guide h2 { margin: 8px 0 12px; font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.035em; }
    .seo-guide h3 { margin: 22px 0 7px; font-size: 1.05rem; }
    .seo-guide p { max-width: 760px; margin: 8px 0; color: var(--muted); }
    .guide-example { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 14px; background: #f7f8f4; border: 1px solid var(--line); border-radius: 12px; }
    .guide-example span { color: var(--muted); font-size: .72rem; font-weight: 750; }
    .guide-example strong { overflow-wrap: anywhere; }
    footer { max-width: 850px; padding: 0 0 30px; margin: 0 auto; text-align: center; color: var(--muted); font-size: .78rem; }
    footer p { margin: 0 0 8px; }
    .footer-link { color: var(--green-dark); }
    .privacy-page { max-width: 820px; padding-top: 40px; padding-bottom: 64px; }
    .privacy-page h1 { margin-bottom: 18px; }
    .privacy-page h2 { margin: 30px 0 8px; font-size: 1.2rem; }
    .privacy-page p, .privacy-page li { color: var(--muted); }
    .privacy-page a { color: var(--green-dark); }
    @media (max-width: 600px) {
      .shell { width: min(100% - 26px, 1060px); }
      header { padding: 16px 0; }
      .topbar { align-items: flex-start; flex-wrap: wrap; }
      .top-actions { width: 100%; justify-content: space-between; }
      .tagline { display: none; }
      .stat { min-width: 68px; padding: 7px 9px; }
      main { padding-top: 24px; }
      .controls { align-items: flex-start; flex-direction: column; }
      .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
      .tab { padding: 8px 5px; font-size: .78rem; }
      .part-control { width: 100%; justify-content: space-between; }
      .part-control select { flex: 1; max-width: 230px; }
      .word-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
      .word-cell { padding: 9px 8px; min-height: 66px; }
      .word-cell strong { font-size: .86rem; }
      .word-cell span { font-size: .59rem; }
      .answer-row { flex-direction: column; }
      .answer-row .primary { width: 100%; }
      .regular-answer-fields { grid-template-columns: 1fr; }
      .bottom-row { align-items: flex-start; flex-direction: column; }
      .tense-layout { grid-template-columns: 1fr; }
      .list-heading, .list-tools { align-items: flex-start; flex-direction: column; }
      .list-tools, .list-search { width: 100%; }
      .guide-example { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      th, td { padding: 11px 13px; }
    }
    .regular-options-compact { margin-top: 12px; }