:root {
      --bg:        #0d0d0f;
      --surface:   #17171b;
      --border:    #2a2a32;
      --accent:    #c8f04b;
      --accent2:   #7b61ff;
      --danger:    #ff4d6a;
      --muted:     #6b6b7a;
      --text:      #e8e8ed;
      --radius:    14px;
    }
  * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 40px 20px;
    }
    
    /* ── PAGE LAYOUT ── */
    .page {
      width: 100%;
      max-width: 860px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

  /* ── SHARED CARD ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px 28px;
    }


 .card-tag {
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(200,240,75,.08);
      border: 1px solid rgba(200,240,75,.18);
      border-radius: 6px;
      padding: 3px 10px;
      display: inline-block;
      margin-bottom: 14px;
    }
  
    .card-tag.purple {
      color: var(--accent2);
      background: rgba(123,97,255,.1);
      border-color: rgba(123,97,255,.25);
    }

    .card h2 {
      font-family: 'Syne', sans-serif;
      font-size: 1.45rem;
      font-weight: 800;
      margin-bottom: 6px;
      line-height: 1.25;
    }

     .card p.sub {
      font-size: .85rem;
      color: var(--muted);
      margin-bottom: 28px;
    }

  /* ── FORM FIELDS ── */
    .field { margin-bottom: 20px; }

    label {
      display: block;
      font-size: .78rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
      width: 100%;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      padding: 11px 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    input:focus, textarea:focus {
      border-color: var(--accent2);
      box-shadow: 0 0 0 3px rgba(123,97,255,.18);
    }
    input.valid   { border-color: var(--accent) !important; }
    input.invalid { border-color: var(--danger) !important; }

    .err-msg {
      font-size: .78rem;
      color: var(--danger);
      margin-top: 5px;
      min-height: 16px;
      display: flex;
      align-items: center;
      gap: 5px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity .2s, transform .2s;
    }
    .err-msg.show {
      opacity: 1;
      transform: translateY(0);
    }

 /* ── SUBMIT BTN ── */
    .btn-submit {
      width: 100%;
      margin-top: 6px;
      padding: 13px;
      background: var(--accent);
      color: #0d0d0f;
      font-family: 'Syne', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .04em;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: opacity .2s, transform .15s, box-shadow .2s;
    }
    .btn-submit:not(:disabled):hover {
      opacity: .9;
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(200,240,75,.28);
    }
    .btn-submit:disabled {
      opacity: .3;
      cursor: not-allowed;
    }


   
    /* success state */
    .success-msg {
      display: none;
      margin-top: 14px;
      background: rgba(200,240,75,.08);
      border: 1px solid rgba(200,240,75,.22);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: .88rem;
      color: var(--accent);
      text-align: center;
    }

 .success-msg.show { display: block; }

    /* ── TEXTAREA CARD ── */
    textarea {
      resize: vertical;
      min-height: 120px;
      font-size: .93rem;
    }

    .counter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      font-size: .82rem;
    }
    .counter-text { color: var(--muted); }
    .counter-num  {
      font-family: 'Syne', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      color: var(--accent2);
      transition: color .2s;
    }
    .counter-num.warning { color: #ff9a3c; }
    .counter-num.over    { color: var(--danger); }

    .warn-msg {
      margin-top: 10px;
      font-size: .82rem;
      color: var(--danger);
      background: rgba(255,77,106,.08);
      border: 1px solid rgba(255,77,106,.2);
      border-radius: 8px;
      padding: 8px 12px;
      display: none;
    }
    .warn-msg.show { display: block; }

    .progress-bar {
      height: 3px;
      background: var(--border);
      border-radius: 99px;
      margin-top: 10px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 99px;
      background: var(--accent2);
      transition: width .15s, background .3s;
      width: 0%;
    }


     @media (max-width: 640px) {
      .page { grid-template-columns: 1fr; }
    }