.overbtn{
	  display:inline-block; /* ensures links behave like buttons */
	  text-decoration:none; /* remove underline */
	  appearance:none;
	  border:0; 
	  cursor:pointer;
	  padding:12px 18px; 
	  border-radius:12px; 
	  font-weight:700;
	  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
	}

    .overbtn-primary{
      background: var(--accent);
      color:#ffffff;
      box-shadow: 0 6px 18px rgba(37,99,235,.25);
    }
    .overbtn-primary:hover{ 
      transform: translateY(-4px);
      background:green;
	}
	
	.overbtn-ghost{
      background: transparent; color: var(--text);
      border:1px solid black;
    }

	
 /* ====== Form styles (light additions) ====== */
    form{ margin-top: 12px; }
    .gridder{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 640px){ .gridder{ grid-template-columns: 1fr; } }

    .field{
      display:flex; flex-direction:column; gap:8px;
    }
    .label{
      font-weight:600; font-size:.95rem;
    }
    .input, .select, .password-wrap input{
      width:90%;
      padding:12px 14px;
      border:2px solid #cbd5e1;
      border-radius:12px;
      font: inherit;
      background:#fff;
      color: var(--text);
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .input:focus, .password-wrap input:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }

    .password-wrap{
      position:relative; display:flex; align-items:center;
    }
    .toggle-pass{
      position:absolute; right:8px; top:8px;
      padding:8px 10px; border-radius:8px;
      border:1px solid var(--border); background:#fff; cursor:pointer;
      font-size:.85rem; color: var(--muted);
    }
    .requirements{
      margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size:.92rem;
    }
    .status{
      font-size:.9rem; margin-top:6px;
    }
    .status.error{ color: var(--error); }
    .status.ok{ color: var(--success); }

    .terms{
      display:flex; align-items:flex-start; gap:10px; margin-top:4px;
      font-size:.95rem; color: var(--muted);
    }
    .actions{
      margin-top: 18px; display:flex; gap:72px; justify-content:center; flex-wrap:wrap;
    }
    .small{
      font-size:.92rem; color: var(--muted);
      text-align:center; margin-top: 8px;
    }
    .small a{ color: var(--accent); text-decoration: none; }
    .small a:hover{ text-decoration: underline; }
	

	
	.hint{font-size:14px; color:var(--muted); margin-top:4px}