* {box-sizing: border-box;}
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; background: #05050c; color: #edf0f7; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;}
a {color: #c9bcff;}
button {border: 1px solid rgba(159, 135, 255, 0.82); border-radius: 999px; padding: 13px 22px; background: linear-gradient(135deg, #4a0bff 0%, #8a6dff 55%, #d3bd7a 100%); color: #fff; cursor: pointer; font-size: 16px; font-weight: bold; box-shadow: 0 12px 34px rgba(74, 11, 255, 0.36);}
button:hover {border-color: #d9cbff; box-shadow: 0 16px 42px rgba(74, 11, 255, 0.48);}
button:disabled {opacity: 0.7; cursor: wait;}
label {display: block; margin: 0 0 7px; color: #d8dcf1; font-size: 14px; font-weight: bold; letter-spacing: 0;}
input, textarea {width: 100%; border: 1px solid rgba(190, 180, 255, 0.2); border-radius: 12px; padding: 13px 14px; background: rgba(8, 10, 22, 0.72); color: #f7f8ff; font: inherit; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);}
input:focus, textarea:focus {border-color: rgba(159, 135, 255, 0.9); box-shadow: 0 0 0 4px rgba(74, 11, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);}
textarea {resize: vertical;}

.page {position: relative; min-height: 100vh; padding: 58px 20px; overflow: hidden; background: radial-gradient(circle at 18% 12%, rgba(74, 11, 255, 0.42) 0, rgba(74, 11, 255, 0) 30%), radial-gradient(circle at 82% 8%, rgba(211, 189, 122, 0.2) 0, rgba(211, 189, 122, 0) 28%), linear-gradient(145deg, #04040b 0%, #0b1020 52%, #070510 100%);}
  .page:before {position: absolute; top: 8%; left: 50%; width: 620px; height: 620px; border-radius: 50%; background: rgba(74, 11, 255, 0.12); filter: blur(72px); content: ""; transform: translateX(-50%);}
  .container {position: relative; width: 100%; max-width: 680px; border: 1px solid rgba(217, 203, 255, 0.18); border-radius: 28px; padding: 36px; margin: 0 auto; background: linear-gradient(145deg, rgba(18, 20, 38, 0.76), rgba(9, 11, 24, 0.62)); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.09); backdrop-filter: blur(18px);}
    .container .brand-mark {display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border: 1px solid rgba(159, 135, 255, 0.32); border-radius: 26px; margin: 0 0 20px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 18px 42px rgba(74, 11, 255, 0.28);}
      .container .brand-mark img {display: block; width: 58px; height: 58px; object-fit: contain;}
    .container h1 {margin: 0 0 24px; color: #fff; font-size: 30px; line-height: 1.2;}
    .container h2 {margin: 0 0 16px; color: #fff; font-size: 20px; line-height: 1.25;}
    .container p {margin: 0 0 14px;}
    .container strong {color: #fff;}
    .container .top-actions {display: flex; justify-content: flex-end; margin: -8px 0 18px;}
      .container .top-actions a {border: 1px solid rgba(190, 180, 255, 0.18); border-radius: 999px; padding: 9px 14px; background: rgba(255, 255, 255, 0.045); color: #e6e0ff; font-size: 14px; font-weight: bold; text-decoration: none;}
      .container .top-actions a:hover {border-color: rgba(159, 135, 255, 0.55);}
    .container .tabs {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid rgba(190, 180, 255, 0.14); border-radius: 999px; padding: 6px; margin: 0 0 18px; background: rgba(255, 255, 255, 0.045);}
      .container .tabs .tab-button {border: 0; border-radius: 999px; padding: 11px 14px; background: transparent; color: #bfc4df; box-shadow: none;}
      .container .tabs .tab-button.active {background: linear-gradient(135deg, #4a0bff 0%, #7e65ff 100%); color: #fff; box-shadow: 0 10px 26px rgba(74, 11, 255, 0.32);}
    .container .tab-panels {display: block;}
      .container .tab-panels .panel-section {border: 1px solid rgba(190, 180, 255, 0.14); border-radius: 20px; padding: 18px; background: rgba(255, 255, 255, 0.04);}
      .container .tab-panels .tab-panel {display: none;}
      .container .tab-panels .tab-panel.active {display: block;}
    .container .form {display: grid; gap: 16px;}
    .container .alert {border-radius: 16px; padding: 13px 15px; margin: 0 0 18px;}
    .container .alert-error {border: 1px solid rgba(255, 117, 132, 0.36); background: rgba(70, 17, 28, 0.62); color: #ffc2c8;}
    .container .alert-success {border: 1px solid rgba(104, 226, 159, 0.32); background: rgba(14, 58, 37, 0.58); color: #c2f7d7;}
    .container .alert-warning {border: 1px solid rgba(219, 193, 119, 0.38); background: rgba(72, 55, 18, 0.58); color: #ffe7a6;}
    .container .request-details {border: 1px solid rgba(190, 180, 255, 0.16); border-radius: 18px; padding: 18px; margin: 0 0 18px; background: rgba(255, 255, 255, 0.045);}
    .container .copy-secret {margin: 14px 0 0;}
    .container .sent-requests {margin: 0;}
      .container .sent-requests h2 {margin: 0 0 14px; color: #fff; font-size: 20px; line-height: 1.25;}
      .container .sent-requests .empty-state {margin: 0; color: #b9bfd7;}
      .container .sent-requests .request-list {display: grid; gap: 12px;}
        .container .sent-requests .request-row {display: grid; grid-template-columns: 0.8fr 1fr 1fr 1.4fr 0.8fr; gap: 14px; border: 1px solid rgba(190, 180, 255, 0.14); border-radius: 18px; padding: 15px; background: rgba(255, 255, 255, 0.045);}
          .container .sent-requests .request-row span {display: block; margin: 0 0 4px; color: #9ea5c3; font-size: 12px; font-weight: bold; text-transform: uppercase;}
          .container .sent-requests .request-row strong {display: block; overflow-wrap: anywhere; color: #fff; font-size: 14px;}
          .container .sent-requests .request-row p {margin: 0; overflow-wrap: anywhere; color: #d8dcf1; font-size: 14px;}

@media (max-width: 520px){
  .page {padding: 24px 12px;}
    .container {border-radius: 22px; padding: 24px;}
      .container .brand-mark {width: 76px; height: 76px; border-radius: 22px;}
        .container .brand-mark img {width: 50px; height: 50px;}
      .container h1 {font-size: 24px;}
      .container .tabs {grid-template-columns: 1fr;}
      .container .sent-requests .request-row {grid-template-columns: 1fr;}
}