body {
      margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
      font-family: var(--font); color: var(--gray-800);
      background: var(--green-700);
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(82,183,136,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(45,106,79,.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(216,243,220,.15) 0%, transparent 50%);
      padding: 20px;
    }
    .register-container {
      width: min(820px, 100%);
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1);
      overflow: hidden;
    }
    .register-header {
      background: linear-gradient(135deg, var(--green-800), var(--green-600));
      padding: 32px 36px 28px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .register-header::before {
      content:''; position:absolute; inset:0;
      background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .register-header .logo {
      display: flex; align-items: center; gap: 10px;
      font-size: 18px; font-weight: 700; margin-bottom: 12px; position: relative;
    }
    .register-header .logo svg { width: 28px; height: 28px; }
    .register-header h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; position: relative; }
    .register-header .muted { color: rgba(255,255,255,.8); font-size: 14px; margin: 0; position: relative; }
    .register-body { padding: 32px 36px; }
    .section-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
      color: var(--gray-600); margin: 0 0 12px; padding-bottom: 8px;
      border-bottom: 2px solid var(--green-100);
    }
    .grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    }
    .full { grid-column: 1 / -1; }
    label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; color: var(--gray-800); }
    label .optional { font-weight: 400; color: var(--gray-600); font-size: 12px; }
    input, select {
      width: 100%; padding: 11px 14px;
      border: 1px solid var(--gray-200); border-radius: var(--radius);
      font-size: 14px; font-family: var(--font); background: var(--gray-50);
      transition: border-color .15s, box-shadow .15s, background .15s;
    }
    input:focus, select:focus {
      outline: none; border-color: var(--green-500);
      box-shadow: 0 0 0 3px rgba(82,183,136,.15); background: #fff;
    }
    .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
    button, .btn-link {
      padding: 12px 20px; border-radius: var(--radius); border: 1px solid transparent;
      cursor: pointer; font-size: 14px; font-weight: 600; font-family: var(--font);
      transition: all .2s; text-decoration: none; text-align: center;
    }
    .btn-link { background: #fff; border-color: var(--gray-200); color: var(--gray-800); display: inline-flex; align-items: center; gap: 6px; }
    .btn-link:hover { background: var(--gray-50); }
    .btn-link svg { width: 16px; height: 16px; }
    #msg { margin-top: 16px; padding: 12px 16px; font-size: 14px; border-radius: var(--radius); display: none; }
    #msg:not(:empty) { display: block; }
    #msg.err { color: #b00020; background: #fdecea; border: 1px solid #f5c6cb; }
    #msg.ok { color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); }
    .section-divider { margin: 24px 0 20px; }
    @media (max-width: 760px) {
      .grid { grid-template-columns: 1fr; }
      .register-body { padding: 24px 20px; }
      .register-header { padding: 24px 20px 20px; }
    }