:root{
  --bg0:#070a12;
  --bg1:#0b1022;
  --txt:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --stroke:rgba(255,255,255,.10);

  /* Telegram OAuth-ish */
  --tg-bg:#f2f2f2;
  --tg-card:#ffffff;
  --tg-text:#111111;
  --tg-muted:#6b6b6b;
  --tg-line:#e7e7e7;
  --tg-blue:#2AABEE;
  --tg-blue-hover:#1f9fe6;
  --tg-link:#3b89c9;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--txt);
  background:
    radial-gradient(1000px 540px at 20% 20%, rgba(42,171,238,.18), transparent 60%),
    radial-gradient(900px 620px at 80% 30%, rgba(255,255,255,.05), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
.wrap{max-width:920px;margin:0 auto;padding:26px 16px 70px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:42px;height:42px;border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  display:grid;place-items:center;
}
.title h1{font-size:16px;margin:0;letter-spacing:.2px}
.title p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.userBox{position:relative;display:flex;align-items:center;gap:10px;}
.tgPrimaryBtn.small{padding:9px 12px;font-size:12px;box-shadow:0 8px 24px rgba(42,171,238,.22);}
.userBadge{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.userAvatar{
  width:34px;height:34px;border-radius:50%;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  display:grid;place-items:center;
  font-weight:800;color:#0e1a2b;
  background-size:cover;background-position:center;
}
.userAvatar.withPhoto{color:transparent;}
.userLabel .userName{font-weight:800;font-size:13px;color:var(--txt);}
.userLabel .userSub{font-size:11px;color:var(--muted);}
.userMenu{
  position:absolute;right:0;top:46px;
  background: rgba(6,10,20,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:6px;
  min-width:180px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
  z-index:12;
}
.userMenu.hidden{display:none;}
.userMenu button{
  width:100%;border:none;background: rgba(255,255,255,.06);
  color:var(--txt);padding:10px 12px;border-radius:10px;
  font-weight:800;cursor:pointer;
}
.userMenu button:hover{background: rgba(255,255,255,.12);}
.userMenu #addAccountBtn{
  background: rgba(42,171,238,.14);
  outline:1px solid rgba(42,171,238,.28);
}
.userMenu #addAccountBtn:hover{
  background: rgba(42,171,238,.22);
}
.userMenu #logoutBtn{
  background: rgba(241,108,108,.14);
  outline:1px solid rgba(241,108,108,.22);
}
.userMenu #logoutBtn:hover{
  background: rgba(241,108,108,.22);
}
.switchList{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:260px;
  overflow:auto;
}
.switchList.hidden{display:none;}
.switchItem{
  width:100%;
  border:none;
  background: rgba(255,255,255,.05);
  color:var(--txt);
  padding:9px 10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}
.switchItem:hover{background: rgba(255,255,255,.12);}
.switchItem.active{
  background: rgba(42,171,238,.22);
  outline:1px solid rgba(42,171,238,.35);
}
.switchItem:disabled{opacity:.6;cursor:default;}
.files{
  margin-top:16px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background: rgba(255,255,255,.05);
  overflow:hidden;
}

.siteFooter{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.siteLink{
  color:rgba(255,255,255,.82);
  text-decoration:underline;
  font-weight:800;
}
.siteLink:hover{color:rgba(255,255,255,.95);}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.row:first-child{border-top:none}
.row.dim{opacity:.65}
.left{display:flex;gap:12px;align-items:center;min-width:0}
.ico{
  width:42px;height:42px;border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;flex:0 0 auto;
}
.meta{min-width:0}
.name{
  font-weight:800;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;
}
.hint{margin-top:4px;font-size:12px;color:var(--muted)}
.btn{
  cursor:pointer; user-select:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: var(--txt);
  padding:10px 12px;border-radius:14px;
  font-weight:800;font-size:12px;letter-spacing:.2px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform: translateY(-1px);background: rgba(255,255,255,.10);border-color: rgba(255,255,255,.24);}
.btn:active{transform: translateY(0px);opacity:.9}
.btn.ghost{background: transparent}
.footNote{
  margin-top:12px;color:var(--muted);font-size:12px;line-height:1.35;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.linkLike{
  border:none;background:transparent;color:rgba(255,255,255,.82);
  text-decoration:underline;cursor:pointer;padding:0;font-weight:800;
}
.adminPanel{
  margin-top:18px;
  border:1px dashed rgba(255,255,255,.25);
  padding:12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
}
.adminPanel h3{margin:0 0 10px;font-size:14px;color:#fff;}
.adminForm{display:flex;flex-direction:column;gap:10px;}
.adminTextarea{min-height:80px;resize:vertical;}
.uploadRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hintRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.adminList{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.adminList .row{padding:10px;}

.overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.overlay.show{display:flex}
.tgWindow{
  width:min(520px,100%);
  background: #f7f8fb;
  border-radius: 14px;
  box-shadow: 0 26px 120px rgba(0,0,0,.65);
  overflow:hidden;
  color:#0e1a2b;
}
.tgBar{
  background: #e9ecf2;
  padding:12px 14px;
  border-bottom:1px solid #d9dde5;
  display:flex;align-items:center;justify-content:space-between;
  color:#2b2b2b;
  font-size:13px;
}
.tgBarLeft{display:flex;align-items:center;gap:8px}
.tgMiniCircle{
  display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#fff;border:1px solid #d8dbe1;
}
.tgBarTitle{font-weight:800}
.tgX{
  width:26px;height:26px;border-radius:6px;
  display:grid;place-items:center;
  cursor:pointer;
  color:#444;
}
.tgX:hover{background: rgba(0,0,0,.06)}
.tgBody{
  background: #fff;
  padding: 22px 22px 18px;
  color: #0e1a2b;
}
.selectSheet{
  width:min(680px,100%);
  background: linear-gradient(180deg, rgba(19,27,46,.94), rgba(12,17,29,.94));
  border-radius:18px;
  box-shadow: 0 26px 120px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.08);
  padding:16px 16px 12px;
  color:#dfe7ff;
  backdrop-filter: blur(10px);
}
.sheetHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.sheetTitle{font-weight:800;font-size:16px;color:#f7f9ff;}
.sheetSub{margin-top:4px;font-size:13px;color:rgba(255,255,255,.75);}
.sheetClose{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;width:32px;height:32px;border-radius:10px;
  cursor:pointer;font-size:16px;line-height:1;
}
.providers{
  margin:14px 0;
  display:flex;flex-direction:column;gap:10px;
}
.providerCard{
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px 14px;
  display:grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items:center;
  column-gap:6px;
  cursor:pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
  text-align:left;
}
.providerCard:hover{border-color: rgba(255,255,255,.18);background: rgba(255,255,255,.07);transform: translateY(-1px);}
.providerCard.disabled{opacity:.55;cursor:not-allowed;}
.providerCard.disabled:hover{transform:none;}
.provIcon{
  width:36px;height:36px;border-radius:12px;
  background: rgba(255,255,255,.06);
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
}
.vkIconImg{
  background: transparent;
  border:0;
}
.vkIconImg img{
  width:20px;
  height:20px;
  display:block;
  border-radius:50%;
}
.providerCard#chooseVk .provIcon{color:#6d7fa3;}
.provIcon svg{display:block;}
.tgIcon{background: rgba(42,171,238,.18);border-color: rgba(42,171,238,.35);}
.provMeta{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.provMeta .provTitle{font-weight:800;font-size:13px;color:#f6fbff;margin:0;line-height:1.1;}
.provMeta .provDesc{font-size:12px;color:#5c6675;margin:0;line-height:1.2;}
.provBadge{
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;font-size:11px;letter-spacing:.2px;
  color:rgba(255,255,255,.8);
  background: rgba(255,255,255,.04);
}
.provBadge.active{background: rgba(42,171,238,.14);border-color: rgba(42,171,238,.38);color:#bde7ff;}
.provBadge.soon{background: rgba(255,255,255,.06);color:rgba(255,255,255,.65);}
.providerCard.active{border-color: rgba(42,171,238,.4);background: rgba(42,171,238,.07);}
.tgHero{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:16px;
}
.tgCircle{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid #e2e5eb;
  font-weight:800;color:#f6f9ff;
}
.botCircle{background:#f16c6c;border-color:#f16c6c;color:#fff;}
.tgArrow{width:28px;height:28px;opacity:.7}
.tgH{
  text-align:center;margin:0 0 8px;
  font-size:16px;font-weight:700;color: #0e1a2b;
}
.tgP{
  text-align:center;margin:0 auto 14px;
  font-size:13px;color: #4a5666;line-height:1.35;
  max-width: 440px;
}
.tgFineprint{
  margin: -6px auto 14px;
  max-width: 460px;
  text-align:center;
  font-size:11px;
  line-height:1.35;
  color:#6b7480;
}
.tgFineprint a{color: var(--tg-link); text-decoration: underline; font-weight:800;}
.tgFineprint a:hover{color:#2f7fbe;}
.tgProviderPicker{
  display:flex;justify-content:center;margin:10px 0 14px;
}
.tgProviderBtn{
  display:flex;align-items:center;gap:10px;
  border:1px solid #dfe4ec;
  background:#f6f8fb;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.tgProviderBtn:hover{border-color:#c9d3e0;box-shadow:0 8px 26px rgba(0,0,0,.08);transform: translateY(-1px);}
.tgProviderBtn .provIcon{
  width:34px;height:34px;border-radius:10px;
  background: rgba(42,171,238,.15);
  display:grid;place-items:center;
  border:1px solid rgba(42,171,238,.25);
}
.tgProviderBtn .provText{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;}
.tgProviderBtn .provText strong{font-size:14px;color:#0e1a2b;}
.tgProviderBtn .provText small{font-size:12px;color:#5c6675;}
.tgForm{max-width:440px;margin:0 auto}
.hidden{display:none!important;}
.tgPanel{margin-bottom:12px;}
.tgPanel.hidden{display:none;}
.tgLabel{
  display:block;margin:0 0 6px 4px;
  font-size:12px;font-weight:700;color: #4a5666;
}
.tgInputRow{
  display:flex;gap:10px;align-items:center;
  margin:0 0 4px;flex-wrap:wrap;
}
#stepPhone .tgInputRow #sendCodeBtn{
  margin-left:auto;
}
.tgSelect{
  flex:1 1 0;min-width:180px;
  border:1px solid #d6dbe3;
  background:#fff;color:#0e1a2b;
  padding:11px 12px;border-radius:10px;
  font-size:14px;outline:none;
}
.tgSelect:focus{border-color: #2AABEE;box-shadow:0 0 0 3px rgba(42,171,238,.16);}
.tgInput{
  flex:1 1 0;min-width:200px;
  border:1px solid #d6dbe3;
  background:#fff;color:#0e1a2b;
  padding:11px 12px;border-radius:10px;
  font-size:14px;outline:none;
}
.tgInput:focus{border-color: #2AABEE;box-shadow:0 0 0 3px rgba(42,171,238,.16);}
.tgInput:disabled{opacity:.65}
.tgPrimaryBtn{
  border:none;background: linear-gradient(135deg, #2AABEE, #1f9fe6);color:#fff;
  font-weight:800;font-size:13px;cursor:pointer;
  padding:11px 14px;border-radius:10px;
  transition: transform .12s ease;
  white-space:nowrap;
  box-shadow: 0 12px 32px rgba(42,171,238,.25);
}
.tgPrimaryBtn:not(:disabled):hover{transform: translateY(-1px);}
.tgPrimaryBtn:disabled{background:#c7d9ea;color:#eff5fb;cursor:not-allowed;box-shadow:none;transform:none;}
.tgFooterLine{
  border-top:1px solid #e4e8ee;
  margin-top:12px;padding-top:10px;text-align:center;
  font-size:11px;color:#6b7480;
}

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  background: rgba(15,18,35,.72);
  border:1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 12px;
  display:flex;align-items:center;gap:8px;
  transition: opacity .18s ease, transform .18s ease;
  max-width: min(560px, calc(100% - 24px));
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.toast.show{opacity:1;transform: translateX(-50%) translateY(0)}
.dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--tg-blue);
  box-shadow: 0 0 0 4px rgba(42,171,238,.16);
  flex:0 0 auto;
}

/* Cookie notice */
.cookieBanner{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(920px, calc(100% - 24px));
  z-index: 60;
}
.cookieBanner.hidden{display:none!important;}
.cookieInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(6,10,20,.92);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cookieText{
  color: rgba(255,255,255,.85);
  font-size:12px;
  line-height:1.35;
}
.cookieText a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  font-weight: 800;
}
.cookieText code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: rgba(255,255,255,.9);
}
.cookieActions{display:flex;gap:10px;flex:0 0 auto;}

/* Policy pages */
.policyWrap{max-width:980px;}
.policyHead h1{margin:0 0 10px;font-size:20px;}
.policyMeta{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5;}
.policyBody{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.policyBody h2{margin:16px 0 8px;font-size:14px;}
.policyBody p{margin:0 0 10px;color:rgba(255,255,255,.86);line-height:1.55;font-size:13px;}
.policyBody ul{margin:0 0 10px 18px;color:rgba(255,255,255,.86);line-height:1.55;font-size:13px;}
.policyBody li{margin:0 0 6px;}
.policyNote{
  color:rgba(255,255,255,.72);
  font-size:12px;
}
.policyFooter{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.policyLink{
  color:rgba(255,255,255,.82);
  text-decoration:underline;
  font-weight:800;
  font-size:12px;
}