:root {
   --bg: #080f1d;
   --card: #101c30;
   --input-bg: #0b1627;
   --border: #293b54;
   --text: #edf3ff;
   --muted: #93a5c0;
   --green: #46e6ad;
}

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

body {
   min-height: 100vh;
   font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      sans-serif;
   background:
      radial-gradient(ellipse at 50% 0%, #15352f 0%, transparent 45%), var(--bg);
   color: var(--text);
}

.page-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 32px 18px;
}

.form-card {
   width: 100%;
   max-width: 450px;
   padding: 34px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 22px;
   box-shadow: 0 24px 70px rgb(0 0 0 / 25%);
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 17px;
   font-weight: 750;
   letter-spacing: -0.5px;
}

.brand-icon {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: var(--green);
   color: #07201b;
   font-size: 21px;
}

.accent {
   color: var(--green);
}

.form-header {
   text-align: center;
   margin: 34px 0 30px;
}

.welcome-icon {
   width: 54px;
   height: 54px;
   margin: 0 auto 20px;
   display: grid;
   place-items: center;
   border: 1px solid #286451;
   border-radius: 17px;
   background: #15372f;
   color: var(--green);
   font-size: 26px;
}

.eyebrow {
   color: var(--green);
   font-size: 11px;
   font-weight: 750;
   letter-spacing: 2px;
   margin-bottom: 10px;
}

h1 {
   font-size: clamp(24px, 5vw, 29px);
   line-height: 1.3;
   letter-spacing: -1px;
   margin-bottom: 12px;
}

.subtitle {
   max-width: 320px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.7;
}

#income-form {
   display: flex;
   flex-direction: column;
   gap: 23px;
}

.input-group {
   display: flex;
   flex-direction: column;
   gap: 9px;
}

.input-group label {
   color: #dce6f5;
   font-size: 13px;
   font-weight: 650;
}

.input-wrapper {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 52px;
   padding: 0 15px;
   border: 1px solid var(--border);
   border-radius: 11px;
   background: var(--input-bg);
   transition:
      border-color 0.2s,
      box-shadow 0.2s;
}

.input-wrapper:focus-within {
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgb(70 230 173 / 10%);
}

.input-icon,
.currency-symbol {
   flex-shrink: 0;
   color: var(--green);
   font-size: 19px;
}

.currency-symbol {
   font-weight: 700;
}

.input-wrapper input {
   width: 100%;
   min-width: 0;
   border: none;
   outline: none;
   background: transparent;
   color: var(--text);
   font: inherit;
   font-size: 14px;
}

.input-wrapper input::placeholder {
   color: #71839d;
}

.input-wrapper input::-webkit-inner-spin-button,
.input-wrapper input::-webkit-outer-spin-button {
   opacity: 1;
}

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

.submit-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   width: 100%;
   min-height: 51px;
   margin-top: 3px;
   border: none;
   border-radius: 11px;
   background: var(--green);
   color: #06231c;
   font-size: 14px;
   font-weight: 750;
   cursor: pointer;
   transition:
      transform 0.2s,
      filter 0.2s;
}

.submit-btn span {
   font-size: 19px;
   transition: transform 0.2s;
}

.submit-btn:hover {
   filter: brightness(1.08);
   transform: translateY(-2px);
}

.submit-btn:hover span {
   transform: translateX(4px);
}

.submit-btn:active {
   transform: translateY(0);
}

.submit-btn:focus-visible {
   outline: 2px solid var(--green);
   outline-offset: 4px;
}

.privacy-note {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 25px;
   padding-top: 20px;
   border-top: 1px solid var(--border);
   color: var(--muted);
   font-size: 11px;
}

.privacy-note span {
   color: var(--green);
   font-size: 16px;
}

.page-footer {
   margin-top: 22px;
   color: #71839d;
   font-size: 12px;
   text-align: center;
}

@media (max-width: 480px) {
   .page-container {
      padding: 20px 14px;
   }

   .form-card {
      padding: 25px 20px;
      border-radius: 18px;
   }

   .form-header {
      margin: 28px 0;
   }
}

.success-card {
   width: min(90%, 420px);
   margin: 60px auto;
   padding: 35px 25px;
   text-align: center;
   background: #171c2b;
   border: 1px solid #2a3448;
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
   animation: fadeIn 0.4s ease;
}

.success-icon {
   width: 68px;
   height: 68px;
   margin: 0 auto 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(34, 197, 94, 0.12);
   border: 1px solid rgba(34, 197, 94, 0.4);
   color: #4ade80;
   font-size: 36px;
   font-weight: bold;
}

.success-card h1 {
   margin-bottom: 12px;
   color: #f8fafc;
   font-size: 27px;
}

.success-card p {
   margin-bottom: 28px;
   color: #a6b0c3;
   font-size: 15px;
   line-height: 1.7;
}

.home-btn {
   display: inline-block;
   padding: 13px 22px;
   border-radius: 10px;
   background: #6366f1;
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   transition:
      background 0.2s ease,
      transform 0.2s ease;
}

.home-btn:hover {
   background: #4f46e5;
   transform: translateY(-2px);
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      transition: none !important;
   }
}