* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --bg: #f4f6f3;
        --surface: #ffffff;
        --panel: #f9fbf7;
        --text: #141a16;
        --muted: #667067;
        --line: #dfe6dc;
        --primary: #176b57;
        --primary-hover: #125745;
        --accent: #b9892f;
        --danger: #b42318;
        --success: #15803d;
        --shadow: 0 24px 70px rgba(24, 39, 31, 0.12);
        --motion: 420ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        font-family: "Work Sans", sans-serif;
        color: var(--text);
        background:
          linear-gradient(135deg, rgba(23, 107, 87, 0.08), transparent 42%),
          var(--bg);
      }

      .main {
        width: 100%;
        padding: 24px;
      }

      .portal {
        width: min(1040px, 100%);
        min-height: 620px;
        margin: auto;
        display: grid;
        grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 1fr);
        background: var(--surface);
        border: 1px solid rgba(223, 230, 220, 0.9);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition:
          max-width var(--motion),
          min-height var(--motion);
      }

      .portal.success-mode {
        max-width: 620px;
        min-height: 390px;
        grid-template-columns: 1fr;
      }

      .brand-panel {
        position: relative;
        min-height: 620px;
        padding: 34px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background:
          linear-gradient(
            180deg,
            rgba(249, 251, 247, 0.68),
            rgba(244, 248, 241, 0.82)
          ),
          url("../img/main.webp") center 50% / min(96%, 500px) no-repeat;
        border-right: 1px solid var(--line);
        transition:
          opacity var(--motion),
          transform var(--motion);
      }

      .portal.success-mode .brand-panel {
        display: none;
      }

      .college-mark {
        display: grid;
        grid-template-columns: 62px 1fr;
        gap: 14px;
        align-items: center;
      }

      .logo {
        width: 62px;
        height: auto;
      }

      .sanstha {
        margin-bottom: 3px;
        font-size: 12px;
        font-style: italic;
        color: var(--danger);
      }

      .college-name {
        font-family: Georgia, serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.22;
        color: #163d6b;
      }

      .college-status {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary);
      }

      .support-note {
        max-width: 330px;
        margin-top: auto;
        padding-top: 260px;
      }

      .support-note h1 {
        margin-bottom: 10px;
        font-family: "Newsreader", serif;
        font-size: 32px;
        line-height: 1.05;
        letter-spacing: 0;
      }

      .support-note p {
        font-size: 14px;
        line-height: 1.65;
        color: var(--muted);
      }

      .help-strip {
        display: grid;
        gap: 8px;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
        font-size: 13px;
        color: var(--muted);
      }

      .help-line {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .help-line strong {
        color: var(--text);
      }

      .content-panel {
        min-height: 620px;
        padding: 42px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition:
          min-height var(--motion),
          padding var(--motion);
      }

      .portal.success-mode .content-panel {
        min-height: 390px;
        padding: 52px;
      }

      .progress {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 34px;
      }

      .step {
        position: relative;
        display: grid;
        gap: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }

      .step::before {
        content: "";
        height: 4px;
        border-radius: 999px;
        background: var(--line);
        transition: background var(--motion);
      }

      .step.active,
      .step.done {
        color: var(--primary);
      }

      .step.active::before,
      .step.done::before {
        background: var(--primary);
      }

      .section {
        display: none;
        min-height: 360px;
      }

      .section.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .section-kicker {
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
      }

      .section-title {
        margin-bottom: 10px;
        font-family: "Newsreader", serif;
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: 0;
      }

      .section-copy {
        max-width: 460px;
        margin-bottom: 26px;
        font-size: 14px;
        line-height: 1.65;
        color: var(--muted);
      }

      .form {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .field {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }

      label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #3b463e;
      }

      input,
      textarea {
        width: 100%;
        min-height: 46px;
        padding: 12px 13px;
        border: 1px solid var(--line);
        border-radius: 6px;
        font: inherit;
        font-size: 14px;
        color: var(--text);
        background: #ffffff;
        outline: none;
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease;
      }

      input:focus,
      textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(23, 107, 87, 0.12);
      }

      textarea {
        min-height: 132px;
        resize: vertical;
      }

      .btn-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-top: 4px;
      }

      .btn {
        min-height: 46px;
        padding: 0 18px;
        border: 0;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        background: var(--primary);
        cursor: pointer;
        transition:
          background 180ms ease,
          transform 180ms ease,
          box-shadow 180ms ease;
      }

      .btn:hover {
        background: var(--primary-hover);
        box-shadow: 0 10px 24px rgba(23, 107, 87, 0.18);
      }

      .btn:active {
        transform: translateY(1px);
      }

      .btn-secondary {
        color: var(--primary);
        background: transparent;
        border: 1px solid var(--line);
      }

      .btn-secondary:hover {
        color: var(--primary-hover);
        background: #f6faf6;
        box-shadow: none;
      }

      .form-hint {
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
      }

      .success-container {
        max-width: 480px;
        margin: auto;
        text-align: center;
      }

      .success-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 20px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #ffffff;
        background: var(--success);
      }

      .success-icon .material-symbols-outlined {
        font-size: 34px;
      }

      .success-container h2 {
        margin-bottom: 12px;
        font-family: "Newsreader", serif;
        font-size: 34px;
        line-height: 1.08;
      }

      .success-container p {
        font-size: 15px;
        line-height: 1.7;
        color: var(--muted);
      }

      .material-symbols-outlined {
        font-size: 18px;
        font-variation-settings:
          "FILL" 0,
          "wght" 400,
          "GRAD" 0,
          "opsz" 24;
      }

      @media (max-width: 880px) {
        body {
          place-items: start center;
        }

        .main {
          padding: 14px;
        }

        .portal {
          min-height: auto;
          grid-template-columns: 1fr;
        }

        .brand-panel {
          min-height: auto;
          padding: 24px;
          background:
            linear-gradient(
              180deg,
              rgba(249, 251, 247, 0.72),
              rgba(244, 248, 241, 0.9)
            ),
            url("main.webp") right 20px center / 220px auto no-repeat;
        }

        .support-note {
          max-width: calc(100% - 140px);
          min-height: 150px;
          padding-top: 24px;
        }

        .support-note h1 {
          font-size: 28px;
        }

        .content-panel {
          min-height: 520px;
          padding: 30px 22px;
        }

        .progress {
          margin-bottom: 26px;
        }
      }

      @media (max-width: 560px) {
        .college-mark {
          grid-template-columns: 52px 1fr;
        }

        .logo {
          width: 52px;
        }

        .brand-panel {
          background: var(--panel);
        }

        .support-note {
          max-width: 100%;
          min-height: 0;
          padding-top: 22px;
        }

        .content-panel,
        .portal.success-mode .content-panel {
          padding: 28px 18px;
        }

        .section-title,
        .success-container h2 {
          font-size: 29px;
        }

        .btn-row {
          flex-direction: column;
          align-items: stretch;
        }

        .btn {
          width: 100%;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }