/* registar.php — CSS extraído */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --gold:        #f9d423;
      --orange:      #ff4e50;
      --accent:      #f97316;
      --footer-h:    44px;
      --scene-h:     115px;
      --body-bottom: calc(var(--footer-h) + var(--scene-h) + 16px);
    }

    body {
      font-family: 'Rubik', sans-serif;
      background: #fdf8f0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;
      padding: 10px 16px var(--body-bottom);
    }

    /* ── Card principal ── */
    .card {
      position: relative;
      z-index: 10;
      display: flex;
      width: min(920px, 100%);
      height: clamp(460px, calc(100dvh - 223px), 700px);
      min-height: 440px;
      border-radius: clamp(16px, 2vw, 28px);
      overflow: hidden;
      box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
      animation: cardIn 0.85s cubic-bezier(.22,.68,0,1.15) both;
    }
    @keyframes cardIn {
      from { opacity:0; transform:translateY(24px) scale(.97); }
      to   { opacity:1; transform:none; }
    }

    /* ── LEFT ── */
    .left {
      flex: 0 0 42%;
      background: linear-gradient(145deg,#f9d423 0%,#ff7043 55%,#ff4e50 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(14px,3vh,40px) clamp(14px,3vw,32px);
      position: relative;
      overflow: hidden;
    }
    .left::before {
      content:'';
      position:absolute; inset:0;
      background: repeating-linear-gradient(-45deg,
        rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px,
        transparent 1px, transparent 14px);
    }
    .left-brand {
      font-size: clamp(1.5rem,2.8vw,2.2rem);
      font-weight: 700;
      color: #fff;
      text-shadow: 0 2px 12px rgba(0,0,0,.18);
      letter-spacing: -.5px;
      margin-bottom: 6px;
      position: relative;
    }
    .left-sub {
      font-size: clamp(.76rem,1.2vw,.92rem);
      color: rgba(255,255,255,.88);
      text-align: center;
      max-width: 230px;
      line-height: 1.55;
      margin-bottom: clamp(16px,2.5vh,28px);
      position: relative;
    }
    .emoji-wrap {
      position: relative;
      cursor: pointer;
      filter: drop-shadow(0 0 18px rgba(255,215,0,.55));
      transition: transform .3s, filter .3s;
    }
    .emoji-wrap:hover {
      transform: scale(1.14) rotate(7deg);
      filter: drop-shadow(0 0 28px rgba(255,215,0,.9));
    }
    .badge-row {
      display: flex; gap: 6px;
      margin-top: clamp(16px,2.5vh,26px);
      position: relative;
      flex-wrap: wrap;
      justify-content: center;
    }
    .badge {
      background: rgba(255,255,255,.2);
      border: 1px solid rgba(255,255,255,.32);
      backdrop-filter: blur(6px);
      border-radius: 20px;
      padding: 4px 11px;
      font-size: clamp(.62rem,.9vw,.74rem);
      color: #fff;
      font-weight: 500;
      white-space: nowrap;
    }

    /* ── RIGHT ── */
    .right {
      flex: 1;
      min-width: 0;            /* evita overflow em flex */
      background: #fff;
      padding: clamp(16px, 3vh, 52px) clamp(16px, 5vw, 44px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-left: 1px solid #f0ebe0;
      overflow-y: auto;
    }
    .right h1 {
      font-size: clamp(1.4rem,2.5vw,1.8rem);
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 2px;
      letter-spacing: -.4px;
    }
    .right .subtitle { font-size:.87rem; color:#888; margin-bottom:12px; }
    .sup-label {
      font-size:.72rem; font-weight:700;
      color:var(--accent); text-transform:uppercase;
      letter-spacing:.08em; margin-bottom:4px;
    }
    .alert { border-radius:10px; padding:10px 14px; font-size:.86rem; margin-bottom:16px; }
    .alert-err { background:#fff1f1; border:1px solid #fca5a5; color:#b91c1c; }
    .alert-ok  { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
    .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
    .form-group label {
      font-size:.72rem; font-weight:700;
      color:#c9611a;
      letter-spacing:.08em; text-transform:uppercase;
      display:flex; align-items:center; gap:5px;
    }
    .req {
      display:inline-block;
      background:linear-gradient(135deg,var(--gold),var(--orange));
      color:#1a1a1a; font-size:.58rem; font-weight:800;
      border-radius:4px; padding:1px 5px;
      letter-spacing:.04em; text-transform:uppercase;
    }
    .form-group input {
      background:#f7f4ef;
      border:1px solid #e0d8cc;
      border-radius:10px;
      padding:9px 15px;
      color:#1a1a1a;
      font-family:'Rubik',sans-serif;
      font-size:.93rem;
      outline:none;
      transition:border-color .2s,box-shadow .2s;
      width:100%; height:40px;
    }
    .form-group input::placeholder { color:#bbb; }
    .form-group input:focus {
      border-color:#f97316;
      box-shadow:0 0 0 3px rgba(249,115,22,.15);
    }
    .btn-submit {
      width:100%; padding:10px; margin-top:4px;
      background:linear-gradient(135deg,var(--gold) 0%,#ffb347 50%,var(--orange) 100%);
      border:none; border-radius:10px;
      font-family:'Rubik',sans-serif;
      font-size:1rem; font-weight:700;
      color:#1a1a1a; cursor:pointer;
      box-shadow:0 6px 24px rgba(249,212,35,.35);
      transition:transform .2s,box-shadow .2s;
      letter-spacing:.2px;
    }
    .btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(249,212,35,.5); }
    .btn-submit:active { transform:none; }
    .link-row { margin-top:10px; text-align:center; font-size:.86rem; color:#999; }
    .link-row a { color:#f97316; text-decoration:none; font-weight:600; transition:color .2s; }
    .link-row a:hover { color:#ea6c00; text-decoration:underline; }
    .pw-wrap { position:relative; }
    .pw-wrap input { padding-right:44px !important; }
    .pw-eye {
      position:absolute; right:0; top:0; height:100%; width:44px;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:#aaa; transition:color .2s;
      background:none; border:none; outline:none; padding:0;
    }
    .pw-eye:hover { color:#f97316; }
    .pw-eye svg { width:18px; height:18px; flex-shrink:0; pointer-events:none; }
    .pw-strength { display:flex; gap:3px; margin-top:5px; }
    .pw-bar { height:3px; flex:1; border-radius:2px; background:#e0d8cc; transition:background .3s; }
    .pw-hint { font-size:.68rem; color:#bbb; margin-top:1px; }
    .row-pw { align-items:start; }
    .pw-strength-placeholder { visibility:hidden; }
    .pw-hint-placeholder { visibility:hidden; }
    .pw-gen { color: #f97316 !important; }
    .pw-gen:hover { color: #ea6c00 !important; background: rgba(249,115,22,.08) !important; border-radius: 0 10px 10px 0; }
    /* strength colors */
    .bar-weak   { background: #ef4444 !important; }
    .bar-fair   { background: #f97316 !important; }
    .bar-good   { background: #eab308 !important; }
    .bar-strong { background: #22c55e !important; }
    /* tooltip for generated password */
    .pw-generated-toast {
      position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
      background: #1e293b; color: #fff; font-size: .72rem; font-weight: 600;
      padding: 6px 12px; border-radius: 8px; text-align: center;
      opacity: 0; pointer-events: none; transform: translateY(4px);
      transition: all .25s; z-index: 100; white-space: nowrap;
    }
    .pw-generated-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .pw-generated-toast::after {
      content: ''; position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%); border: 5px solid transparent;
      border-top-color: #1e293b;
    }

    /* ── CARROSSEL SLOGANS ── */
    .slogans { position:relative; width:100%; height:clamp(110px,18vh,136px); }
    .slogan {
      position:absolute; inset:0;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      opacity:0; transform:translateY(14px) scale(.97);
      transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1);
      pointer-events:none; text-align:center; padding:0 6px;
    }
    .slogan.active  { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
    .slogan.leaving { opacity:0; transform:translateY(-14px) scale(.97); transition:opacity .38s ease,transform .38s ease; }
    .slogan-icon { font-size:1.65rem; margin-bottom:8px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
    .slogan-text {
      font-family:'Rubik',sans-serif;
      font-size:clamp(.88rem,1.4vw,1.05rem);
      font-weight:600; color:#fff; line-height:1.46;
      letter-spacing:-.1px; text-shadow:0 1px 8px rgba(0,0,0,.2);
    }
    .slogan-text mark {
      background:rgba(255,255,255,.22); color:#fff; font-weight:700;
      border-radius:4px; padding:1px 6px;
      -webkit-box-decoration-break:clone; box-decoration-break:clone;
    }
    .slogan-sub { font-size:.74rem; color:rgba(255,255,255,.65); margin-top:8px; font-weight:400; letter-spacing:.25px; }
    .slogan-bar { display:block; height:2px; width:0; background:rgba(255,255,255,.5); border-radius:1px; margin:8px auto 0; transition:width 4s linear; }
    .slogan.active .slogan-bar { width:46px; }
    .slogan-dots { display:flex; gap:7px; margin-top:16px; position:relative; }
    .dot { height:7px; width:7px; border-radius:4px; background:rgba(255,255,255,.28); cursor:pointer; border:none; padding:0; transition:background .3s,width .35s cubic-bezier(.4,0,.2,1); }
    .dot.active { background:#fff; width:22px; }
    /* Rodapé: estilos definidos em shared.css */