* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background: #f5f7fb;
      padding: 40px;
    }

    .container {
      max-width: 1300px;
      margin: auto;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      overflow: visible;
    }

    .header {
      padding: 35px;
      border-bottom: 1px solid #e8e8e8;
    }

    .step {
      color: #0a6ecb;
      font-size: 14px;
      font-weight: bold;
    }

    h1 {
      margin: 12px 0;
      font-size: 38px;
    }

    .desc {
      color: #666;
    }

    .section {
      padding: 35px;
    }

    .card {
      display: flex;
      align-items: center;
      gap: 18px;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 16px;
      cursor: pointer;
      transition: 0.25s;
    }

    .card:hover {
      border-color: #0a6ecb;
      box-shadow: 0 6px 18px rgba(10, 110, 203, 0.15);
    }

    .card.active {
      background: #eef6ff;
      border-color: #0a6ecb;
    }

    .card input {
      display: none;
    }

    .circle {
      width: 22px;
      height: 22px;
      border: 2px solid #888;
      border-radius: 50%;
      position: relative;
    }

    .card.active .circle {
      border-color: #0a6ecb;
    }

    .card.active .circle:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0a6ecb;
      left: 4px;
      top: 4px;
    }

    .title {
      flex: 1;
      font-size: 18px;
      font-weight: 600;
    }

    .arrow {
      font-size: 26px;
      color: #999;
    }

    .footer {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 12px;
      padding: 25px 35px;
      border-top: 1px solid #e8e8e8;
    }

    .btn {
      background: #0a6ecb;
      color: #fff;
      border: none;
      padding: 14px 34px;
      border-radius: 6px;
      font-size: 16px;
      opacity: 0.45;
      cursor: not-allowed;
    }

    .btn.enabled {
      opacity: 1;
      cursor: pointer;
    }

    /* =====================================
   STEP 2
=====================================*/

    .upload-wrapper {
      display: flex;
      gap: 50px;
      align-items: flex-start;
    }

    .left-panel {
      width: 58%;
    }

    .right-panel {
      width: 42%;
      padding-left: 20px;
    }

    .help-text {
      color: #666;
      margin: 15px 0 25px;
      line-height: 28px;
    }

    .required-files {
      list-style: none;
      padding: 0;
      margin: 25px 0;
    }

    .required-files li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #fff;
    }

    .required-files li span:last-child {
      color: #1b8e3f;
      font-weight: 600;
    }

    .confirm-area {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin: 25px 0;
      line-height: 28px;
    }

    .confirm-area input {
      margin-top: 7px;
    }

    .left-panel label,
    .optional-section label {
      display: block;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .left-panel select,
    .optional-section select {
      width: 50%;
      height: 48px;
      padding: 0 15px;
      border: 1px solid #d8d8d8;
      border-radius: 6px;
      background: #fff;
      font-size: 16px;
      margin-bottom: 18px;
    }

    #uploadRequired,
    #uploadOptional {
      background: #0070c9;
      color: #fff;
      border: none;
      padding: 13px 28px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: 0.25s;
    }

    #uploadRequired:hover,
    #uploadOptional:hover {
      background: #005fa8;
    }

    #uploadRequired:disabled,
    #uploadOptional:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    #requiredUploadList,
    #optionalUploadList {
      margin-top: 15px;
      min-height: 0;
      padding: 0;
    }

    .file-card {
      width: 50%;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 10px;
      background: #fff;
    }

    .file-title {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .file-name {
      color: #666;
      margin-bottom: 12px;
    }

    .file-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .file-download {
      color: #0070c9;
      text-decoration: none;
      font-weight: 600;
    }

    .file-delete {
      font-size: 22px;
      cursor: pointer;
      color: #c62828;
    }

    .right-panel h2 {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .right-panel h3 {
      margin: 28px 0 12px;
      font-size: 22px;
    }

    .right-panel p {
      line-height: 30px;
      color: #444;
    }

    .right-panel a {
      color: #0070c9;
      text-decoration: none;
      font-weight: 600;
    }

    .right-panel hr {
      border: none;
      border-top: 1px solid #ececec;
      margin: 25px 0;
    }

    .optional-section {
      margin-top: 25px;
      padding-top: 25px;
      border-top: 1px solid #e6e6e6;
    }

    .optional-section h2 {
      margin-bottom: 10px;
    }

    #back2 {
      background: #666;
      color: #fff;
      border: none;
      padding: 14px 30px;
      border-radius: 6px;
      cursor: pointer;
      order: 1;
    }

    #next2 {
      background: #0a6ecb;
      color: #fff;
      border: none;
      padding: 14px 30px;
      border-radius: 6px;
      cursor: pointer;
      order: 2;
    }

    #next2:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* =========================
   STEP 3
========================= */

    #step3 .upload-wrapper {
      display: flex;
      gap: 60px;
      align-items: flex-start;
    }

    #step3 .left-panel {
      width: 68%;
    }

    #step3 .right-panel {
      width: 32%;
    }

    #step3 textarea {
      width: 100%;
      border: 1px solid #cfcfcf;
      border-radius: 0;
      padding: 14px;
      font-size: 16px;
      line-height: 1.6;
      resize: vertical;
      margin-top: 10px;
      margin-bottom: 30px;
      font-family: Arial, sans-serif;
    }

    #step3 textarea:focus {
      outline: none;
      border-color: #0070c9;
    }

    #step3 h2 {
      font-size: 22px;
      margin-bottom: 8px;
    }

    #step3 .help-text {
      color: #666;
      margin-bottom: 10px;
    }

    #step3 .footer {
      display: flex;
      gap: 12px;
      justify-content: flex-start;
    }

    .task-panel h3 {
      margin-bottom: 25px;
    }

    .task-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .task-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      position: relative;
      padding-bottom: 22px;
      font-size: 17px;
      line-height: 1.5;
    }

    .task-list li:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 17px;
      top: 38px;
      width: 2px;
      height: 28px;
      background: #d6d6d6;
    }

    .task-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid #9b9b9b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
    }

    .task-list .done .task-circle {
      background: #0070c9;
      border-color: #0070c9;
      color: #fff;
    }

    .task-list .active .task-circle {
      border-color: #0070c9;
      color: #0070c9;
    }

    #articleTitle,
    #articleKeywords {

      width: 100%;
      height: 54px;
      padding: 0 15px;
      border: 1px solid #cfcfcf;
      font-size: 17px;

    }

    /* =========================
   STEP 3 End
========================= */
    /*==================================================
STEP 4
AUTHOR DETAILS
==================================================*/

    #step4 .upload-wrapper {

      display: flex;

      gap: 60px;

      align-items: flex-start;

    }

    #step4 .left-panel {

      width: 68%;

    }

    #step4 .right-panel {

      width: 32%;

    }

    /*==============================
AUTHOR CONTAINER
==============================*/

    #authorContainer {

      display: flex;

      flex-direction: column;

      gap: 25px;

    }

    /*==============================
AUTHOR CARD
==============================*/

    .author-card {

      background: #fff;

      border: 1px solid #d9d9d9;

      border-radius: 10px;

      overflow: hidden;

      transition: .25s;

    }

    .author-card:hover {

      box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

    }

    /*==============================
SUMMARY
==============================*/

    .author-summary {

      padding: 25px;

    }

    .author-summary-top {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 20px;

    }

    .author-status {

      display: flex;

      align-items: center;

      gap: 10px;

    }

    .author-icon {

      font-size: 22px;

    }

    .author-number {

      font-size: 18px;

      font-weight: 700;

      color: #111;

    }

    .edit-author {

      font-size: 15px;

      font-weight: 600;

      text-decoration: none;

      color: #0a6ecb;

    }

    .edit-author:hover {

      text-decoration: underline;

    }

    .summary-name {

      font-size: 28px;

      font-weight: 700;

      margin-bottom: 15px;

      color: #111;

    }

    .summary-affiliation {

      font-size: 16px;

      line-height: 28px;

      margin-bottom: 8px;

      color: #555;

    }

    .summary-email {

      font-size: 16px;

      margin-bottom: 10px;

      color: #555;

    }

    .summary-role {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

    }

    /*==============================
ROLE BADGE
==============================*/

    .summary-role span {

      background: #eef6ff;

      padding: 8px 14px;

      border-radius: 25px;

      font-size: 14px;

      color: #0a6ecb;

      font-weight: 600;

    }

    /*==============================
AUTHOR FORM
==============================*/

    .author-form {

      padding: 30px;

      border-top: 1px solid #e6e6e6;

      background: #fafafa;

    }

    .author-form h2 {

      font-size: 28px;

      margin-bottom: 25px;

    }

    .author-row {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 20px;

      margin-bottom: 20px;

    }

    .author-col {

      display: flex;

      flex-direction: column;

    }

    .author-group {

      display: flex;

      flex-direction: column;

      margin-bottom: 20px;

    }

    .author-form label {

      font-weight: 600;

      margin-bottom: 8px;

      font-size: 15px;

    }

    .author-form input,

    .author-form select {

      height: 48px;

      padding: 0 15px;

      font-size: 16px;

      border: 1px solid #d3d3d3;

      border-radius: 6px;

      background: #fff;

    }

    .author-form input:focus,

    .author-form select:focus {

      outline: none;

      border-color: #0a6ecb;

    }

    .author-checkbox {

      margin: 20px 0;

      font-size: 16px;

    }

    /*==============================
BUTTONS
==============================*/

    .author-buttons {

      display: flex;

      gap: 15px;

      margin-top: 25px;

      flex-wrap: wrap;

    }

    .confirmAuthor {

      background: #0a6ecb;

      color: #fff;

      border: none;

      padding: 13px 28px;

      font-size: 16px;

      border-radius: 6px;

      cursor: pointer;

    }

    .confirmAuthor:hover {

      background: #005db5;

    }

    .cancelAuthor {

      background: #777;

      color: #fff;

      border: none;

      padding: 13px 28px;

      font-size: 16px;

      border-radius: 6px;

      cursor: pointer;

    }

    .cancelAuthor:hover {

      background: #555;

    }

    .removeAuthor {

      background: #d32f2f;

      color: #fff;

      border: none;

      padding: 13px 28px;

      font-size: 16px;

      border-radius: 6px;

      cursor: pointer;

    }

    .removeAuthor:hover {

      background: #b71c1c;

    }

    #addAuthor {

      margin-top: 20px;

      background: #0a6ecb;

      color: #fff;

      border: none;

      padding: 15px 28px;

      font-size: 16px;

      border-radius: 6px;

      cursor: pointer;

    }

    #addAuthor:hover {

      background: #005db5;

    }

    #next4:disabled {

      opacity: .45;

      cursor: not-allowed;

    }

    /*==========================
ROLE TAG
==========================*/

    .roleTags {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      margin-top: 15px;

    }

    .role-tag {

      display: flex;

      align-items: center;

      gap: 8px;

      padding: 7px 14px;

      border: 1px solid #bfc8d2;

      border-radius: 25px;

      background: #fff;

      font-size: 14px;

    }

    .role-remove {

      cursor: pointer;

      font-weight: bold;

      color: #0a6ecb;

    }

    /*==============================
RESPONSIVE
==============================*/

    @media(max-width:991px) {

      #step4 .upload-wrapper {

        flex-direction: column;

      }

      #step4 .left-panel,

      #step4 .right-panel {

        width: 100%;

      }

      .author-row {

        grid-template-columns: 1fr;

      }

      .author-buttons {

        flex-direction: column;

      }

    }

    .author-actions {
      display: flex;
      align-items: center;
      gap: 8px;

    }

    .moveUp,

    .moveDown {
      width: 34px;
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #d7d7d7;
      border-radius: 6px;
      background: #0070c9;
      cursor: pointer;
      font-size: 18px;
      transition: .2s;

    }

    .moveUp:hover,
    .moveDown:hover {
      background: #0A6ECB;
      color: #fff;
      border-color: #0A6ECB;

    }

    .moveUp:disabled,
    .moveDown:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .email:invalid {
      border-color: #dc3545;
    }

    .email:valid {
      border-color: #28a745;
    }

    /*==================================================
STEP 5
CLASSIFICATIONS
==================================================*/

    .classification-search {

      margin-bottom: 25px;

    }

    .classification-search input {

      width: 100%;

      height: 48px;

      padding: 0 18px;

      font-size: 16px;

      border: 1px solid #d6d6d6;

      border-radius: 6px;

      outline: none;

      transition: .25s;

    }

    .classification-search input:focus {

      border-color: #0A6ECB;

      box-shadow: 0 0 0 3px rgba(10, 110, 203, .12);

    }

    #classificationList {

      display: flex;

      flex-direction: column;

      gap: 12px;

      margin-bottom: 35px;

    }

    .classification-item {

      display: flex;

      align-items: center;

      gap: 12px;

      padding: 14px 18px;

      border: 1px solid #e2e2e2;

      border-radius: 8px;

      cursor: pointer;

      transition: .2s;

      background: #fff;

    }

    .classification-item:hover {

      background: #f8fbff;

      border-color: #0A6ECB;

    }

    .classification-item input {

      width: 18px;

      height: 18px;

      cursor: pointer;

    }

    .classificationText {

      font-size: 16px;

      font-weight: 500;

      color: #222;

    }

    .selected-box {

      margin-top: 35px;

    }

    .selected-box h3 {

      font-size: 24px;

      margin-bottom: 20px;

    }

    #selectedClassificationList {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

    }

    .classification-tag {

      display: flex;

      align-items: center;

      gap: 8px;

      padding: 9px 16px;

      background: #eef6ff;

      border-radius: 25px;

      font-size: 15px;

      font-weight: 600;

      color: #0A6ECB;

    }

    .classification-remove {

      cursor: pointer;

      font-size: 16px;

      font-weight: bold;

    }

    .classification-remove:hover {

      color: #dc3545;

    }

    #next5:disabled {

      opacity: .45;

      cursor: not-allowed;

    }

    @media(max-width:991px) {

      #classificationList {

        gap: 10px;

      }

      .classification-item {

        padding: 12px;

      }

    }

    /*==================================================
STEP 6
PROVIDE ADDITIONAL INFORMATION
==================================================*/

    .additional-card {

      background: #fff;

      border: 1px solid #dcdcdc;

      border-radius: 8px;

      padding: 30px;

      margin-bottom: 30px;

    }

    .additional-card h3 {

      font-size: 26px;

      font-weight: 700;

      margin-bottom: 15px;

      color: #1c2b4a;

    }

    .additional-card p {

      font-size: 16px;

      line-height: 1.7;

      color: #555;

      margin-bottom: 25px;

    }

    .radio-option {

      display: flex;

      align-items: flex-start;

      gap: 15px;

      padding: 18px;

      margin-bottom: 15px;

      border: 1px solid #d9d9d9;

      border-radius: 8px;

      cursor: pointer;

      transition: .25s;

      background: #fff;

    }

    .radio-option:hover {

      border-color: #0A6ECB;

      background: #f8fbff;

    }

    .radio-option input[type="radio"] {

      width: 22px;

      height: 22px;

      margin-top: 2px;

      cursor: pointer;

      accent-color: #0A6ECB;

    }

    .radio-option span {

      font-size: 16px;

      line-height: 1.6;

      color: #222;

      font-weight: 500;

    }

    .radio-option.active {

      border-color: #0A6ECB;

      background: #eef6ff;

    }

    #next6:disabled {

      opacity: .45;

      cursor: not-allowed;

    }

    @media(max-width:768px) {

      .additional-card {

        padding: 20px;

      }

      .radio-option {

        padding: 15px;

      }

      .radio-option span {

        font-size: 15px;

      }

    }

    /*==================================================
STEP 7
REVIEW & SUBMIT
==================================================*/

    .review-intro {

      margin-bottom: 35px;

    }

    .review-intro h2 {

      font-size: 34px;

      font-weight: 700;

      color: #1b1b1b;

      margin-bottom: 15px;

    }

    .review-intro p {

      font-size: 17px;

      line-height: 1.8;

      color: #555;

      margin-bottom: 10px;

    }


    /*---------------------------------
Review Summary
---------------------------------*/

    #reviewSummary {

      margin-bottom: 40px;

    }

    .review-item {

      display: flex;

      justify-content: space-between;

      align-items: flex-start;

      gap: 20px;

      padding: 28px 0;

      border-top: 1px solid #e3e3e3;

      cursor: pointer;

      transition: .25s;

    }

    .review-item:last-child {

      border-bottom: 1px solid #e3e3e3;

    }

    .review-item:hover {

      background: #fafcff;

    }

    .review-left {

      flex: 1;

    }

    .review-title {

      font-size: 22px;

      font-weight: 600;

      color: #0A6ECB;

      margin-bottom: 10px;

    }

    .review-description {

      font-size: 16px;

      line-height: 1.7;

      color: #666;

    }

    .review-right {

      min-width: 110px;

      display: flex;

      justify-content: flex-end;

    }


    /*---------------------------------
Complete Badge
---------------------------------*/

    .review-complete {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      padding: 8px 18px;

      border-radius: 6px;

      background: #eaf8eb;

      border: 1px solid #2e9b45;

      color: #17792d;

      font-weight: 700;

      font-size: 15px;

    }


    /*---------------------------------
Review Block
---------------------------------*/

    .review-block {

      margin-top: 40px;

      padding-top: 30px;

      border-top: 1px solid #e3e3e3;

    }

    .review-block h3 {

      font-size: 30px;

      font-weight: 700;

      margin-bottom: 20px;

      color: #1d1d1d;

    }

    .review-block p {

      font-size: 16px;

      line-height: 1.8;

      color: #555;

      margin-bottom: 16px;

    }

    .review-block ul {

      margin-left: 25px;

      margin-top: 10px;

    }

    .review-block li {

      font-size: 16px;

      line-height: 1.9;

      margin-bottom: 10px;

    }

    .review-link {

      display: inline-block;

      margin-bottom: 20px;

      font-size: 16px;

      color: #0A6ECB;

      text-decoration: none;

    }

    .review-link:hover {

      text-decoration: underline;

    }


    /*---------------------------------
Checkbox
---------------------------------*/

    .review-check {

      display: flex;

      align-items: flex-start;

      gap: 12px;

      margin-top: 15px;

      cursor: pointer;

    }

    .review-check input {

      width: 20px;

      height: 20px;

      margin-top: 2px;

      cursor: pointer;

      accent-color: #0A6ECB;

    }

    .review-check span {

      font-size: 16px;

      line-height: 1.7;

      color: #333;

    }


    /*---------------------------------
Submit Button
---------------------------------*/

    #submitManuscript {

      background: #0A6ECB;

      color: #fff;

      padding: 14px 28px;

      border: none;

      border-radius: 6px;

      font-size: 17px;

      font-weight: 600;

      cursor: pointer;

      transition: .25s;

    }

    #submitManuscript:hover:not(:disabled) {

      background: #0958a8;

    }

    #submitManuscript:disabled {

      opacity: .45;

      cursor: not-allowed;

    }


    /*---------------------------------
Responsive
---------------------------------*/

    @media(max-width:768px) {

      .review-item {

        flex-direction: column;

      }

      .review-right {

        justify-content: flex-start;

      }

      .review-title {

        font-size: 20px;

      }

      .review-block h3 {

        font-size: 24px;

      }

    }

    .task-link {

      cursor: pointer;

      transition: .2s;

    }

    .task-link:hover {

      color: #0d6efd;

    }

    .task-link:hover .task-circle {

      transform: scale(1.08);

    }

    .task-link:hover {

      text-decoration: underline;

    }

    /*==========================
RESPONSIVE
==========================*/


    @media (max-width: 991px) {
      .upload-wrapper {
        flex-direction: column;
      }

      .left-panel,
      .right-panel {
        width: 100%;
        padding-left: 0;
      }
    }

    @media (max-width: 768px) {
      .file-card {
        width: 100%;
      }
    }

    @media(max-width:991px) {
      #step3 .upload-wrapper {

        flex-direction: column;

      }

      #step3 .left-panel,
      #step3 .right-panel {

        width: 100%;

      }

    }