*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --gd: #0D3E26; --gm: #145334; --gl: #1B6A43; --gp: #F1F9F4;
      --ac: #FAB818; --wh: #ffffff; --td: #092617; --tm: #244C36; --tl: #527A63;
    }
    body { font-family: 'Outfit', sans-serif; color: var(--td); background: #FAFDFB; min-height: 100vh; }
    a { text-decoration: none; color: inherit; }

    nav {
      background: var(--gd); display: flex; align-items: center; justify-content: space-between;
      padding: 0 40px; height: 90px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    .logo-img-wrap { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .logo-img { width: 100%; height: 100%; object-fit: contain; }
    .nav-right { display: flex; align-items: center; gap: 20px; }
    .nav-right a { color: #D1EBE0; font-weight: 600; font-size: 14px; }
    .nav-right a:hover { color: var(--ac); }

    .header-banner {
      background: linear-gradient(135deg, var(--gd) 0%, var(--gm) 100%);
      padding: 50px 20px; text-align: center;
    }
    .header-banner h1 { color: #fff; font-size: 32px; font-weight: 800; margin-bottom: 8px; }
    .header-banner p { color: #BCE2CE; font-size: 15px; }

    .container { max-width: 800px; margin: -30px auto 50px; padding: 0 20px; position: relative; z-index: 10; }
    .card {
      background: #fff; border-radius: 16px; padding: 30px; margin-bottom: 20px;
      box-shadow: 0 10px 30px rgba(13,62,38,0.06); border: 1px solid rgba(13,62,38,0.05);
    }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--gd); margin-bottom: 6px; }
    .form-control { width: 100%; padding: 12px 16px; border: 1px solid #E2F0E8; border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; }
    .form-control:focus { border-color: var(--gl); }

    .btn-submit {
      background: var(--gd); color: #fff; border: none; padding: 12px 24px; border-radius: 8px;
      font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.2s;
    }
    .btn-submit:hover { background: var(--gl); }

    .error-msg { background: #FEE2E2; color: #991B1B; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }

    /* TIMELINE */
    .timeline { display: flex; justify-content: space-between; position: relative; margin: 40px 0; }
    .timeline::before {
      content: ''; position: absolute; top: 17px; left: 0; right: 0; height: 3px; background: #E2F0E8; z-index: 1;
    }
    .progress-line {
      position: absolute; top: 17px; left: 0; height: 3px; background: var(--gd); z-index: 2;
      transition: width 0.5s ease;
    }
    .timeline-step { position: relative; z-index: 3; text-align: center; flex: 1; }
    .step-icon {
      width: 36px; height: 36px; border-radius: 50%; background: #E2F0E8; color: #527A63;
      display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
      font-weight: 700; font-size: 14px; border: 3px solid #fff; transition: all 0.3s;
    }
    .step-label { font-size: 12px; font-weight: 600; color: #527A63; }
    .timeline-step.active .step-icon { background: var(--gd); color: #fff; box-shadow: 0 4px 12px rgba(13,62,38,0.3); }
    .timeline-step.active .step-label { color: var(--gd); font-weight: 700; }

    .order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; border-top: 1px solid #E2F0E8; padding-top: 24px; }
    .info-block h4 { font-size: 12px; color: var(--tl); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .info-block p { font-size: 14px; color: var(--gd); font-weight: 500; line-height: 1.6; }

    .items-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
    .items-table th, .items-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #E2F0E8; font-size: 14px; }
    .items-table th { color: var(--tl); font-weight: 600; }
    .items-table td { color: var(--td); font-weight: 500; }

    .btn-invoice-lg {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--ac); color: var(--gd); padding: 12px 24px; border-radius: 8px;
      font-weight: 700; font-size: 14px; margin-top: 20px; transition: background .2s;
    }
    .btn-invoice-lg:hover { background: #E09E0B; }

    @media (max-width: 600px) {
      .order-info-grid { grid-template-columns: 1fr; }
      nav { padding: 0 16px; }
    }