:root {
      --green-deep: #0B3F22;
      --green: #0E8A43;
      --orange: #C9821F;
      --amber: #F0A12E;
      --ink: #1A1A17;
      --muted: #6B6A62;
      --faint: #8C8A80;
      --placeholder: #A9A79D;
      --border: #E3E1DA;
      --field-bg: #FCFCFA;
      --page-bg: #F7F6F2;
      --warn-bg: #FBF1E6;
      --warn-text: #8A4A0B;
      --ok-bg: #F1F7F2;
    }
    html, body { margin: 0; padding: 0; background: var(--page-bg); }
    * { box-sizing: border-box; }
    body { font-family: 'DM Sans', sans-serif; color: var(--ink); }
    a { color: var(--green); text-decoration: none; }
    a:hover { color: var(--orange); text-decoration: underline; }
    input, select, textarea { font-family: 'DM Sans', sans-serif; }
    input::placeholder, textarea::placeholder { color: var(--placeholder); }
    .field {
      width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px;
      background: var(--field-bg); font-size: 15px; color: var(--ink); outline: none; appearance: none;
    }
    .field:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(14,138,67,0.12); }
    label.field-label {
      display: block; font: 500 11px/1 'DM Sans', sans-serif; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
    }
    @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    .page { min-height: 100%; background: var(--page-bg); padding: 40px 20px 72px; }
    .wrap { max-width: 760px; margin: 0 auto; }

    header.hero { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 36px; }
    header.hero .logo img { width: 150px; height: auto; }
    .eyebrow { font: 500 11px/1 'DM Sans', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
    h1.title { margin: 0; font: 400 clamp(30px,5vw,44px)/1.1 'Instrument Serif', serif; color: var(--green-deep); text-wrap: balance; }
    .intro { margin: 0; max-width: 44ch; font: 400 15px/1.6 'DM Sans', sans-serif; color: var(--muted); text-wrap: pretty; }

    .success-card {
      background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 56px 40px;
      text-align: center; animation: riseIn 0.4s ease both;
    }
    .success-check {
      width: 56px; height: 56px; border-radius: 50%; background: var(--green); margin: 0 auto 22px;
      display: flex; align-items: center; justify-content: center; color: #fff; font: 400 26px/1 'DM Sans', sans-serif;
    }
    .success-card h2 { margin: 0 0 12px; font: 400 30px/1.15 'Instrument Serif', serif; color: var(--green-deep); }
    .success-card p { margin: 0 auto 28px; max-width: 40ch; font: 400 15px/1.65 'DM Sans', sans-serif; color: var(--muted); }
    .btn-outline-green {
      padding: 13px 26px; border: 1px solid var(--green); border-radius: 999px; background: transparent;
      color: var(--green); font: 500 14px/1 'DM Sans', sans-serif; cursor: pointer;
    }
    .btn-outline-green:hover { background: var(--green); color: #fff; }

    form.record-form { display: flex; flex-direction: column; gap: 20px; }
    section.card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 32px; }
    section.card.consent { background: var(--green-deep); }
    .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; }
    .section-head.tight { margin-bottom: 8px; }
    .section-num { font: 500 12px/1 'DM Sans', sans-serif; color: var(--orange); letter-spacing: 0.1em; }
    .section-num.amber { color: var(--amber); }
    .section-head h2 { margin: 0; font: 400 24px/1.2 'Instrument Serif', serif; color: var(--green-deep); }
    .section-head.consent-head h2 { color: #fff; }
    .section-hint { margin: 0 0 24px 30px; font: 400 14px/1.6 'DM Sans', sans-serif; color: var(--muted); }
    .section-hint.tight { margin-bottom: 22px; }

    .grid-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
    .grid-grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 20px; }

    .notice { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; font: 400 13px/1.5 'DM Sans', sans-serif; }
    .notice.warn { background: var(--warn-bg); color: var(--warn-text); }
    .notice.ok { background: var(--ok-bg); color: var(--green-deep); }

    .courses-list { display: flex; flex-direction: column; gap: 14px; }
    .course-row { display: flex; flex-direction: column; gap: 10px; }
    .course-row-fields { display: grid; grid-template-columns: 1fr 130px 44px; gap: 12px; align-items: center; }
    .course-other { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); font-size: 15px; color: var(--ink); outline: none; text-transform: uppercase; }
    .course-remove {
      width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg);
      color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer;
    }
    .course-remove:hover { border-color: var(--orange); color: var(--orange); }
    .btn-add-course {
      margin-top: 16px; padding: 11px 20px; border: 1px dashed #C4C2B8; border-radius: 999px; background: transparent;
      color: var(--green); font: 500 13px/1 'DM Sans', sans-serif; cursor: pointer;
    }
    .btn-add-course:hover { border-color: var(--green); background: var(--ok-bg); }

    .photo-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
    .photo-preview {
      width: 104px; height: 130px; border-radius: 12px; border: 1px solid var(--border); background: #F1F0EB;
      overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      background-size: cover; background-position: center;
    }
    .photo-preview .placeholder-text { font: 400 10px/1.4 ui-monospace, monospace; color: var(--placeholder); text-align: center; padding: 0 10px; }
    .photo-controls { display: flex; flex-direction: column; gap: 10px; }
    .photo-choose {
      display: inline-block; padding: 12px 22px; border: 1px solid var(--green); border-radius: 999px;
      color: var(--green); font: 500 14px/1 'DM Sans', sans-serif; cursor: pointer;
    }
    .photo-choose:hover { background: var(--green); color: #fff; }
    .photo-filename { font: 400 13px/1.4 'DM Sans', sans-serif; color: var(--faint); }
    input[type="file"].visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

    .consent-fields { display: flex; flex-direction: column; gap: 16px; }
    .consent-fields label { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
    .consent-fields input[type="checkbox"] { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--amber); flex-shrink: 0; cursor: pointer; }
    .consent-fields span { font: 400 14px/1.6 'DM Sans', sans-serif; color: #E8EFE9; }
    .consent-fields em { color: #9DB6A5; font-style: normal; }

    .submit-row { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
    .btn-submit {
      padding: 17px 48px; border: none; border-radius: 999px; background: var(--green); color: #fff;
      font: 500 15px/1 'DM Sans', sans-serif; letter-spacing: 0.02em; cursor: pointer;
    }
    .btn-submit:hover:not(:disabled) { background: var(--green-deep); }
    .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }
    .submit-note { font: 400 13px/1.5 'DM Sans', sans-serif; color: var(--faint); text-align: center; }

    footer.site-footer {
      margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border);
      display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; align-items: center;
    }
    footer.site-footer a { font: 400 14px/1 'DM Sans', sans-serif; }
    footer.site-footer .handle { font: 400 14px/1 'DM Sans', sans-serif; color: var(--muted); }

    [hidden] { display: none !important; }