:root{ --accent:#2aa6b8; --muted:#f4f6f8; --labels:#333; --gap:18px; }
    html,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:#fafafa;color:#222; font-size: 14px;}
    .page{max-width:1100px;margin:18px auto;padding:0 18px}
    header.topbar{background:#fff;border:1px solid #e6e6e6;border-radius:3px;padding:14px 18px;display:flex;align-items:center;gap:18px;box-shadow:0 1px 0 rgba(0,0,0,0.03)}
    header.topbar img.logo{height:44px}
    header.topbar h1{font-size:20px;margin:0;color:var(--accent);letter-spacing:0.6px}
    header.topbar p.sub{margin:0;font-size:12px;color:#666}

    .card{background:#fff;border:1px solid #e6e6e6;margin-top:18px;border-radius:3px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
    .card h2{font-size:14px;margin:0 0 14px;color:#333}

    form.form-grid{display:grid;grid-template-columns:260px 1fr;gap:25px 28px;align-items:center}
    label.field-label{font-size:15px;color:var(--labels);padding-right:6px;text-align:left; font-weight: bold; padding-top: 5px;}
    .field-note{font-size:12px;color:#777777;margin-bottom:6px}

    /* inputs styled to look like underlined fields */
    .control{display:block;width:100%;box-sizing:border-box;padding:8px 6px;border:0;border-bottom:2px solid transparent;outline:none}
    .control[type=text], .control[type=number], .control[type=email], select{border:1px solid #dcdcdc;border-radius:3px;padding:6px 8px}

    .underline{border:none;border-bottom:2px solid rgba(42,166,184,0.15);padding:8px 6px}
    /*.control{box-shadow:0 1px 0 rgba(42,166,184,0.12) inset;border-color:var(--accent)}*/

    .control {
    border: none !important;
    border-bottom: 2px solid rgb(143 211 231) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.email-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.error-text {
  font-size: 13px;
  color: #d9534f; /* red */
  white-space: nowrap;
}

.control.invalid {
  border-bottom: 2px solid #d9534f;
}


select.control {
    border-top: 1px solid #ccc !important;
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    border-bottom: 2px solid rgb(143 211 231) !important;
    border-radius: 3px;
    background-color: #fff;
    padding: 6px 8px;
}




    select{appearance:none;background-image:linear-gradient(45deg,transparent 50%, #888 50%),linear-gradient(135deg,#888 50%,transparent 50%);background-position:calc(100% - 16px) calc(1.25em), calc(100% - 11px) calc(1.25em);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}

    .asterisk{color:#d9534f;margin-left:4px}

    textarea{min-height:70px;resize:vertical}

    /* full width row (label spanning both cols) */
    .full-row{grid-column:1 / -1}

    /* responsive */
    @media (max-width:700px){
      form.form-grid{grid-template-columns:1fr;}
      label.field-label{text-align:left;padding-bottom:6px}
    }

    .actions{display:flex;gap:12px;margin-top:14px}
    .btn{padding:9px 14px;border-radius:4px;border:1px solid transparent;cursor:pointer}
    .btn.primary{background:var(--accent);color:#fff;border-color:transparent}
    .btn.secondary{background:#fff;border-color:#dcdcdc}

    /* small helper to visually match left-aligned inputs in the image */
    .input-inline{border-bottom:2px solid rgba(42,166,184,0.25);padding:6px}