:root{
      --bg: #0b0f14;
      --panel: rgba(255,255,255,0.06);
      --stroke: rgba(255,255,255,0.14);
      --glow: rgba(0,180,255,0.35);
      --txt: #e8f1ff;
      --human: #69b2ff;
      --ai: #ff7a7a;
    }
    html,body{ height:100%; margin:0; background: radial-gradient(1200px 600px at 20% 10%, #112033 0%, #0b0f14 60%, #070a0e 100%); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--txt); }
    #scene{ position:fixed; inset:0; display:block; }

    .hud{
      position:fixed; top:14px; left:14px; right:14px;
      display:flex; align-items:center; gap:12px; padding:12px 14px;
      background:var(--panel); border:1px solid var(--stroke);
      border-radius:16px; backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    .brand{ font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
    .logo{ filter: drop-shadow(0 0 6px var(--glow)); }

    .stats{ display:flex; gap:10px; margin-left:auto; margin-right:auto; }
    .chip{
      display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
      background: rgba(255,255,255,0.05); border:1px solid var(--stroke);
      border-radius:12px;
    }
    .chip.training{
      flex-direction:column; align-items:flex-start; gap:4px;
      min-width:220px; font-size:13px;
    }
    .chip.training span:last-child{ opacity:0.7; font-size:12px; }
    .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow: 0 0 8px currentColor; }
    .dot.human{ background:var(--human); color:var(--human); }
    .dot.ai{ background:var(--ai); color:var(--ai); }

    .controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .control-chip{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      padding:6px 10px;
      background:rgba(255,255,255,0.03);
    }
    .control-chip select{
      appearance:none;
      border-radius:8px;
      border:1px solid var(--stroke);
      background:rgba(8,12,18,0.65);
      color:var(--txt);
      padding:4px 8px;
      font-size:13px;
      cursor:pointer;
    }
    .control-chip select:focus{
      outline:none;
      border-color:var(--glow);
      box-shadow:0 0 0 1px var(--glow);
    }
    .btn{
      padding:8px 12px; border-radius:10px; border:1px solid var(--stroke);
      background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      color:var(--txt); cursor:pointer;
    }
    .btn:hover{ box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset, 0 0 10px var(--glow); }
    .btn.btn-ghost{ background:rgba(255,255,255,0.02); border-style:dashed; }
    .btn.btn-ghost:hover{ background:rgba(255,255,255,0.05); }
    .btn:disabled{
      opacity:0.45;
      cursor:not-allowed;
      pointer-events:none;
    }
    .switch{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }

    .corner{
      position:fixed; bottom:14px; padding:8px 12px;
      background:var(--panel); border:1px solid var(--stroke);
      border-radius:10px; backdrop-filter: blur(8px); font-weight:600;
    }
    .corner-left{ left:14px; }
    .corner-right{ right:14px; }

    /* Registro */
    .register-layout{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px 16px 80px;
      box-sizing:border-box;
    }

    .register-card{
      width:100%;
      max-width:520px;
      background:var(--panel);
      border:1px solid var(--stroke);
      border-radius:20px;
      padding:28px;
      backdrop-filter: blur(14px);
      box-shadow:0 20px 40px rgba(0,0,0,0.45);
      display:flex;
      flex-direction:column;
      gap:24px;
    }

    .register-card h1{
      margin:0;
      font-size:28px;
      display:flex;
      align-items:center;
      gap:12px;
    }

    .register-card p{
      margin:0;
      opacity:0.8;
      line-height:1.5;
    }

    .register-form{
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .form-row{
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .form-row label{
      font-weight:600;
      font-size:14px;
      letter-spacing:0.3px;
    }

    .register-input,
    .register-select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--stroke);
      background:rgba(8,12,18,0.65);
      color:var(--txt);
      font-size:15px;
      box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset;
    }

    .register-input:focus,
    .register-select:focus{
      outline:none;
      border-color:var(--glow);
      box-shadow:0 0 0 1px var(--glow);
    }

    .register-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .register-btn{
      padding:10px 16px;
      border-radius:12px;
      border:1px solid var(--stroke);
      background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
      color:var(--txt);
      cursor:pointer;
      font-weight:600;
      letter-spacing:0.3px;
    }

    .register-btn.secondary{
      background:rgba(255,255,255,0.02);
      border-style:dashed;
    }

    .register-btn:hover{
      box-shadow:0 0 0 2px rgba(255,255,255,0.05) inset, 0 0 12px var(--glow);
    }

    .register-list{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .register-item{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:12px 14px;
      background:rgba(255,255,255,0.05);
      border:1px solid var(--stroke);
      border-radius:12px;
      font-size:15px;
    }

    .register-item span{
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .register-item small{
      opacity:0.7;
      font-size:12px;
      letter-spacing:0.4px;
      text-transform:uppercase;
    }

    .register-remove{
      background:none;
      border:none;
      color:rgba(255,255,255,0.7);
      cursor:pointer;
      font-size:13px;
      padding:6px 8px;
      border-radius:8px;
    }

    .register-remove:hover{
      background:rgba(255,255,255,0.08);
      color:#fff;
    }

    .json-preview{
      background:rgba(4,8,12,0.7);
      border:1px solid var(--stroke);
      border-radius:12px;
      padding:12px;
      font-family:"JetBrains Mono", "Fira Code", monospace;
      font-size:13px;
      line-height:1.4;
      max-height:180px;
      overflow:auto;
    }

    .register-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      font-size:13px;
      opacity:0.75;
    }