:root{
      --bg:#f4f7fb;
      --card:#ffffff;
      --accent:#0b63ff;
      --muted:#6b7280;
      --success:#16a34a;
      --radius:12px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
      color:#0f172a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:40px 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
    }
    .container{
      width:100%;
      max-width:920px;
      display:grid;
      grid-template-columns:1fr 420px;
      gap:28px;
      align-items:start;
    }
    @media (max-width:880px){
      .container{grid-template-columns:1fr; padding:0 12px}
    }
    .card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(11,35,66,0.08);
      padding:28px;
    }
    .hero{
      display:flex;
      gap:18px;
      align-items:center;
      margin-bottom:8px;
    }
    .brand-badge{
      width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#7c9cff);color:white;font-weight:700;font-size:20px;
    }
    h1{font-size:20px;margin:0}
    p.lead{margin:6px 0 16px;color:var(--muted);font-size:14px}

    form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    @media (max-width:640px){form{grid-template-columns:1fr}}

    label{display:block;font-size:13px;color:#111827;margin-bottom:6px}
    .input-wrap{display:flex;flex-direction:column}
    input[type="text"], input[type="email"], input[type="tel"] , input[type="number"]{
      padding:12px 14px;border-radius:10px;border:1px solid #e6eaf2;font-size:15px;outline:none;transition:box-shadow .15s,border-color .15s; background:transparent
    }
    input:focus{box-shadow:0 6px 18px rgba(11,99,255,0.08);border-color:var(--accent)}

    .full{grid-column:1/-1}
    .hint{font-size:12px;color:var(--muted);margin-top:6px}

    .row{display:flex;gap:12px}
    .small{flex:1}

    .actions{display:flex;gap:12px;align-items:center;margin-top:6px}
    button.primary{background:var(--accent);color:white;padding:10px 16px;border-radius:10px;border:0;font-weight:600;cursor:pointer}
    button.danger{background:red;color:white;padding:10px 16px;border-radius:10px;border:0;font-weight:600;cursor:pointer}
    button.ghost{background:transparent;border:1px solid #e6eaf2;color:var(--accent);padding:10px 14px;border-radius:10px;cursor:pointer}

    .side-card{padding:22px;display:flex;flex-direction:column;gap:14px}
    .info{font-size:14px;color:var(--muted)}
    .stat{display:flex;gap:12px;align-items:center}
    .stat svg{width:36px;height:36px}

    .note{font-size:12px;color:#0f5132;background:#ecfdf5;padding:10px;border-radius:8px}

    .error{color:#b91c1c;font-size:13px;margin-top:6px}
    .success{color:var(--success);font-size:14px}

    footer{grid-column:1/-1;margin-top:16px;font-size:12px;color:var(--muted)}