:root { 
    --bg:#0b1220; 
    --card:#111a2e; 
    --text:#eaf0ff; 
    --muted:#a9b6d6; 
    --accent:#6aa6ff; 
    --danger:#ff6b6b; 
  }
  body { 
    margin:0; 
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
    background:linear-gradient(180deg,#07101f, #0b1220); 
    color:var(--text); 
  }
  .wrap { 
    max-width: 980px; 
    margin: 0 auto; 
    padding: 28px 16px 60px; 
  }
  header { 
    display:flex; 
    gap:16px; 
    align-items:center; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    margin-bottom: 18px; 
  }
  .brand { 
    display:flex; 
    gap:12px; 
    align-items:center; 
  }
  .logo { 
    width:44px; 
    height:44px; 
    border-radius:12px; 
    background:rgba(106,166,255,.18); 
    border:1px solid rgba(106,166,255,.35); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-weight:800; 
  }
  h1 { 
    margin:0; 
    font-size: 20px; }
  p { 
    margin: 10px 0 0; 
    color: var(--muted); 
    line-height: 1.5; 
  }
  .grid { 
    display:grid; 
    grid-template-columns: 1fr 420px; 
    gap:18px; 
    align-items:start; 
  }
  @media (max-width: 860px) { 
    .grid { 
      grid-template-columns: 1fr; 
    } 
  }
  .left-col { 
    display:flex; 
    flex-direction:column; 
    gap:18px; 
  }
  .card { 
    background: rgba(17,26,46,.9); 
    border:1px solid rgba(255,255,255,.06); 
    border-radius:16px; 
    padding: 18px; 
    box-shadow: 0 10px 30px rgba(0,0,0,.25); 
  }
  .card h2 { 
    margin:0 0 8px; 
    font-size: 16px; 
  }
  label { 
    display:block; 
    margin: 12px 0 6px; 
    font-size: 13px; 
    color: var(--muted); 
  }
  input[type="text"], input[type="email"] {
    width:100%;
    display:block;
    box-sizing:border-box;
  
    padding: 12px 12px;
    height:auto;
  
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
    color: var(--text);
    outline:none;
  
    line-height: 1.2;
    min-height: 44px;
    margin: 0;
  }
  input:focus { 
    border-color: rgba(106,166,255,.7); 
    box-shadow: 0 0 0 3px rgba(106,166,255,.18); 
  }
  .check {
    margin-top: 12px;
    display:flex; 
    gap:10px; 
    align-items:flex-start;
    padding: 12px; 
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.12);
  }
  .check input { 
    margin-top: 3px; 
    transform: scale(1.1); 
  }
  .check b { 
    color: var(--text); 
  }
  .small { 
    font-size: 12.5px; 
    color: var(--muted); 
    line-height: 1.45; 
  }
  button {
    width:100%; 
    margin-top: 14px; 
    padding: 12px 14px; 
    border-radius: 12px;
    border:1px solid rgba(106,166,255,.55); 
    background: rgba(106,166,255,.18); 
    color: var(--text);
    font-weight: 700; 
    cursor:pointer;
  }
  button:hover { 
    background: rgba(106,166,255,.26); 
  }
  button:disabled { 
    opacity:.55; 
    cursor:not-allowed; 
  }
  .toast {
    display:none; margin-top: 14px; padding: 12px;
    border-radius: 12px; border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .toast.ok { 
    border-color: rgba(80, 200, 120, .35); 
  }
  .toast.err { 
    border-color: rgba(255, 107, 107, .35); 
  }
  .divider { 
    height:1px; 
    background: rgba(255,255,255,.08); 
    margin: 14px 0; 
  }
  .list { 
    margin: 10px 0 0; 
    padding-left: 18px; 
    color: var(--muted); 
  }
  .footer { 
    margin-top: 16px; 
    color: #7f8fb6; 
    font-size: 12.5px; 
  }
  a { 
    color: var(--accent); 
    text-decoration: none; 
  }
  a:hover { 
    text-decoration: underline; 
  }
  aside.card form { 
    max-width: 340px; 
    margin: 0 auto; 
  }
  .dropbtn{
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: 12px 44px 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);

    color: var(--text);
    outline: none;
    text-align: left;
    cursor: pointer;

    position: relative;
  }
  .dropbtn:focus{
    border-color: rgba(106,166,255,.7);
    box-shadow: 0 0 0 3px rgba(106,166,255,.18);
  }
  .dropbtn::after{
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);

    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(255,255,255,.85);

    pointer-events: none;
    opacity: .9;
  }
  .dropdown.open .dropbtn::after{
    transform: translateY(-50%) rotate(180deg);
  }
  .dropdown{ 
    width: 100%; 
    max-width: 100%; 
  }
  .dropdown-content{
    display: none;
    margin-top: 6px;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.12);

    overflow: hidden;
  }
  .dropdown.open .dropdown-content{
    display: block;
    width: 100%;
  }
  .dropdown-content button.team-item{
    display: block;
    width: 100%;
    padding: 12px 12px;
    box-sizing: border-box;

    background: transparent;
    border: 0;
    color: inherit;

    text-align: left;
    cursor: pointer;
  }
  .dropdown-content button.team-item:hover{
    background: rgba(106,166,255,.18);
  }