/* ==========================================================================
   WELLTEAM W7 OS — ARAYÜZ DÜZELTMELERİ  (v3.4.6)
   En son yüklenir. Mevcut hiçbir dosya değiştirilmez.
   Geri alma: index.html'deki <link> satırını sil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) MASAÜSTÜ: PENCERE ARTIK YAN MENÜNÜN ALTINA GİRMİYOR
   Sorun: .admin-sidebar z-index:80, .overlay z-index:50 idi.
          Menü pencerenin üstünde kalıyor, panel sola kayıp kırpılıyordu.
   Çözüm: Pencere katmanı menünün üstüne alındı ve panel,
          menünin sağındaki alana ortalandı.
   -------------------------------------------------------------------------- */
@media (min-width:701px){
  .overlay{
    z-index:200!important;
    align-items:center!important;
  }
  .overlay .modal{
    max-height:88vh!important;
    margin:0!important;
  }
  /* Yatay taşma güvenliği */
  body.admin-mode{ overflow-x:hidden; }
}

/* Geniş ekran: yan menü 252px */
@media (min-width:951px){
  body.admin-mode .overlay{
    padding-left:296px!important;
    padding-right:20px!important;
  }
  body.partner-mode .overlay{
    padding-left:calc(var(--premium-sidebar-w, 240px) + 44px)!important;
    padding-right:20px!important;
  }
}

/* Orta ekran: yan menü 78px'e daralıyor */
@media (min-width:701px) and (max-width:950px){
  body.admin-mode .overlay,
  body.partner-mode .overlay{
    padding-left:122px!important;
    padding-right:16px!important;
  }
}

/* --------------------------------------------------------------------------
   2) MOBİL: KAPAT BUTONU ARTIK BAŞLIĞI SIKIŞTIRMIYOR
   Sorun: float:right kullanılmıştı; başlık kartı butonun etrafına
          sarılıp daralıyor, isim iki satıra bölünüyordu.
   Çözüm: Buton kendi satırında, sağa yaslı ve yapışkan bir üst şerit.
          İçerik butonun ALTINDAN tam genişlikte başlar.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .overlay .modal{
    padding-top:8px!important;
    max-height:92vh!important;
  }

  .overlay .modal > .modal-close{
    float:none!important;
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:auto!important;
    min-width:104px!important;
    min-height:44px!important;
    margin:0 0 12px auto!important;   /* sağa yasla, altına boşluk */
    padding:9px 16px!important;
    border:1px solid rgba(148,177,211,.32)!important;
    border-radius:13px!important;
    background:rgba(11,24,42,.97)!important;
    color:#eaf2ff!important;
    font-size:14.5px!important;
    font-weight:600!important;
    letter-spacing:.01em!important;
    box-shadow:0 8px 22px rgba(0,0,0,.38)!important;
    cursor:pointer!important;
  }
  .overlay .modal > .modal-close > span:first-child{
    font-size:20px!important;
    font-weight:400!important;
    line-height:.75!important;
  }

  /* Başlık ve kartlar tam genişliğe dönsün */
  .overlay .modal > .modal-close ~ *{ clear:both!important; width:auto!important; }
  .overlay .modal > .modal-close + h3{ margin-top:0!important; }
  .overlay .modal .leader-file-hero,
  .overlay .modal > .card:first-of-type{ width:100%!important; }

  /* Alt işlem şeridi artık içeriğin üstüne binmiyor */
  .modal .actions{
    position:static!important;
    margin-top:18px!important;
    padding:14px 0 4px!important;
    border-top:1px solid rgba(148,177,211,.18)!important;
    background:transparent!important;
  }
  .modal .actions .btn{ flex:1 1 auto!important; min-height:46px!important; }
}

/* --------------------------------------------------------------------------
   3) MOBİL ALT MENÜDE "İLK EKRAN" (↪) HER ZAMAN GÖRÜNÜR
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  body.admin-mode .admin-sidebar,
  body.partner-mode .premium-sidebar{ overflow:visible!important; }

  body.admin-mode .admin-side-nav,
  body.partner-mode .premium-nav{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(46px,1fr)!important;
    grid-template-columns:none!important;
    gap:2px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-mode .admin-side-nav::-webkit-scrollbar,
  body.partner-mode .premium-nav::-webkit-scrollbar{ display:none; }

  body.admin-mode .admin-side-nav button,
  body.partner-mode .premium-nav button{
    min-width:46px!important;
    padding:4px 2px!important;
  }
  body.admin-mode .admin-side-nav button.first-screen-nav{
    position:relative!important;
    color:#f3c76c!important;
  }
  body.admin-mode .admin-side-nav button.first-screen-nav::before{
    content:"";
    position:absolute; left:-1px; top:14px; bottom:14px;
    width:1px; background:rgba(148,177,211,.26);
  }
  body.admin-mode .admin-side-nav button.first-screen-nav .admin-side-icon{
    color:#f3c76c!important; font-size:19px!important;
  }
}

/* --------------------------------------------------------------------------
   4) GİRİŞ SAHNESİ — MOBİL: "GÜNÜN SÖZÜ" PANELLERE BİNMİYOR
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .vision-leader-note{
    height:62px!important; min-height:0!important; max-height:62px!important;
    overflow:hidden!important; align-items:center!important; padding:6px 11px!important;
  }
  .vision-note-copy{ min-width:0; }
  .vision-note-copy small{ line-height:1.1!important; }
  .vision-note-copy p{ margin:1px 0!important; line-height:1.25!important; -webkit-line-clamp:2!important; }
  .vision-note-copy b{ line-height:1.1!important; }
  .vision-gates{ bottom:88px!important; }
  body.landing-mode .vision-landing{ padding-bottom:232px!important; }
  .vision-copy h2{
    font-size:clamp(32px,10.6vw,47px)!important;
    line-height:1.02!important; margin:9px 0!important; letter-spacing:-.015em;
  }
}
@media (max-width:380px), (max-height:700px) and (max-width:760px){
  .vision-leader-note{ height:58px!important; max-height:58px!important; bottom:9px!important; }
  .vision-gates{ bottom:80px!important; }
  body.landing-mode .vision-landing{ padding-bottom:214px!important; }
  .vision-copy h2{ font-size:clamp(28px,9.8vw,38px)!important; }
}
@media (max-width:420px), (max-height:620px){
  .vision-leader-note{ height:56px!important; max-height:56px!important; bottom:8px!important; }
  .vision-gates{ bottom:77px!important; }
  body.landing-mode .vision-landing{ padding-bottom:209px!important; }
  .vision-copy h2{ font-size:clamp(29px,9.9vw,39px)!important; }
}

/* --------------------------------------------------------------------------
   5) MASAÜSTÜ GİRİŞ BAŞLIĞI DAHA BÜYÜK
   "Liderlik yolculuğunu tek merkezden yönet."
   Mobil boyutlara DOKUNULMAZ (yukarıdaki 4. blok geçerli kalır).
   -------------------------------------------------------------------------- */
@media (min-width:951px){
  .vision-copy h2{
    font-size:clamp(42px,5.15vw,73px)!important;
    line-height:1.02!important;
    letter-spacing:-.048em!important;
    margin:12px 0 14px!important;
  }
  /* Alt paragraf giris panellerinin altinda kalmasin */
  .vision-copy p{
    font-size:16.5px!important;
    line-height:1.5!important;
    margin-bottom:6px!important;
  }
  body.landing-mode .vision-landing{ padding-bottom:246px!important; }
}
@media (min-width:701px) and (max-width:950px){
  .vision-copy h2{
    font-size:clamp(36px,4.8vw,58px)!important;
    line-height:1.03!important;
    margin:10px 0 12px!important;
  }
  body.landing-mode .vision-landing{ padding-bottom:206px!important; }
}


/* --------------------------------------------------------------------------
   6) LİDER HİYERARŞİSİ — KOMPAKT GÖRÜNÜM
   Amaç: Tek ekranda daha çok lider görünsün, alt seviyeler kademeli küçülsün.
   -------------------------------------------------------------------------- */
.leader-tree-node{
  --tree-scale:clamp(.78, calc(1 - var(--tree-depth,0) * .07), 1);
}
.leader-tree-card{
  padding:calc(11px * var(--tree-scale)) calc(13px * var(--tree-scale))!important;
  border-radius:calc(15px * var(--tree-scale))!important;
}
.leader-tree-card>div:nth-child(2)>b{
  font-size:calc(15px * var(--tree-scale))!important;
  line-height:1.2!important;
}
.leader-tree-card>div:nth-child(2)>span{
  font-size:calc(12px * var(--tree-scale))!important;
  line-height:1.2!important;
}
.leader-tree-card .table-avatar,
.leader-tree-card .table-avatar img,
.leader-tree-card .table-avatar>div{
  width:calc(40px * var(--tree-scale))!important;
  height:calc(40px * var(--tree-scale))!important;
  border-radius:calc(13px * var(--tree-scale))!important;
  font-size:calc(14px * var(--tree-scale))!important;
}
.leader-tree-children{
  margin:7px 0 0 20px!important;
  padding-left:13px!important;
  gap:7px!important;
}

/* Masaüstü: sütunlar daralsın, satırlar sıkılaşsın */
@media (min-width:701px){
  .leader-tree-shell{ padding:16px!important; max-height:none!important; }
  .leader-tree-node{ min-width:520px!important; }
  .leader-tree-card{
    grid-template-columns:calc(40px * var(--tree-scale)) minmax(150px,1fr) 78px 78px!important;
    gap:10px!important;
  }
  .leader-tree-stat b{ font-size:15px!important; }
  .leader-tree-stat span{ font-size:9.5px!important; }
}

/* Mobil: yatay taşma bitti, kart tek satıra sığıyor */
@media (max-width:700px){
  .leader-tree-shell{ padding:12px!important; overflow-x:hidden!important; }
  .leader-tree-node{ min-width:0!important; }
  .leader-tree-card{
    grid-template-columns:calc(34px * var(--tree-scale)) minmax(0,1fr) auto auto!important;
    gap:8px!important;
    padding:calc(9px * var(--tree-scale)) calc(10px * var(--tree-scale))!important;
  }
  .leader-tree-card .table-avatar,
  .leader-tree-card .table-avatar img,
  .leader-tree-card .table-avatar>div{
    width:calc(34px * var(--tree-scale))!important;
    height:calc(34px * var(--tree-scale))!important;
    font-size:calc(12px * var(--tree-scale))!important;
  }
  .leader-tree-card>div:nth-child(2)>b{
    font-size:calc(13.5px * var(--tree-scale))!important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
  }
  .leader-tree-card>div:nth-child(2)>span{ font-size:calc(11px * var(--tree-scale))!important; }
  .leader-tree-stat{ min-width:34px!important; }
  .leader-tree-stat b{ font-size:13px!important; }
  .leader-tree-stat span{ font-size:8.5px!important; letter-spacing:0!important; }
  .leader-tree-children{ margin:6px 0 0 12px!important; padding-left:9px!important; gap:6px!important; }
}

/* --------------------------------------------------------------------------
   7) LİDER AĞACI — KESİN ÇÖZÜM
   Yöntem: isim bloğu satırın TAMAMINI kaplar (calc(100% - avatar - gap)),
   böylece rozetler zorunlu olarak ALT SATIRA düşer. Genişlik hesabı
   gerekmediği için hiçbir derinlikte taşma oluşamaz.
   -------------------------------------------------------------------------- */
.leader-workspace,.leader-workspace *,
.leader-tree-shell,.leader-tree-shell *,
.leader-dossier-tree,.leader-dossier-tree *{ box-sizing:border-box; }

@media (max-width:900px){
  /* Kapsayıcılar ekranı asla aşmasın */
  body.admin-mode .wrap{
    max-width:100vw!important;
    overflow-x:hidden!important;
    padding-bottom:120px!important;
  }
  .leader-workspace,
  .leader-workspace>*,
  .leader-tree-shell,
  .leader-dossier-tree{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .leader-workspace-hero{ flex-wrap:wrap!important; gap:12px!important; }
  .leader-workspace-score{ flex:0 0 auto!important; }

  .leader-tree-shell,.leader-dossier-tree{ padding:12px 10px!important; }
  .leader-tree-node{ min-width:0!important; width:100%!important; max-width:100%!important; }

  .leader-tree-card{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:7px 9px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px 11px!important;
  }
  .leader-tree-card>.table-avatar{ flex:0 0 34px!important; width:34px!important; height:34px!important; }
  /* Kritik satır: isim bloğu satırı doldurur -> rozetler alt satıra iner */
  .leader-tree-card>div:nth-child(2){
    flex:1 1 calc(100% - 43px)!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .leader-tree-card>div:nth-child(2)>b{
    display:block!important; font-size:13.5px!important;
    overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important;
  }
  .leader-tree-card>div:nth-child(2)>span{ font-size:11px!important; }

  .leader-tree-stat{
    flex:0 0 auto!important;
    display:inline-flex!important; align-items:baseline!important; gap:5px!important;
    padding:3px 11px!important; border-radius:999px!important;
    background:rgba(67,218,205,.11)!important;
    max-width:none!important; overflow:visible!important; text-align:left!important;
  }
  .leader-tree-stat b{ display:inline!important; font-size:12.5px!important; line-height:1!important; }
  .leader-tree-stat span{ display:inline!important; font-size:10px!important; letter-spacing:0!important; white-space:nowrap!important; }

  .leader-tree-children{
    margin:6px 0 0 9px!important; padding-left:8px!important; gap:6px!important;
    min-width:0!important; max-width:calc(100% - 9px)!important;
  }
}

/* --------------------------------------------------------------------------
   8) MASAÜSTÜ LİDERLER TABLOSU — "Sil" artık kesilmiyor
   İşlem sütunu sağa sabitlendi; tablo kaydırılsa da butonlar hep görünür.
   -------------------------------------------------------------------------- */
@media (min-width:951px){
  .table-shell{ overflow-x:auto!important; }
  .table-shell table{ min-width:max-content!important; }
  .table-shell th:last-child,
  .table-shell td:last-child{
    position:sticky!important; right:0!important; z-index:3!important;
    background:linear-gradient(90deg,rgba(8,21,36,0),rgba(8,21,36,.97) 14%)!important;
    padding-left:18px!important;
    white-space:nowrap!important;
  }
  .table-shell td:last-child .btn{ margin-left:6px!important; }
  .table-shell td:last-child .btn.small{ padding:6px 11px!important; font-size:12.5px!important; }
}

/* --------------------------------------------------------------------------
   9) SIFIR DUVARI + METRİK HİYERARŞİSİ
   -------------------------------------------------------------------------- */
.leader-empty-state{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin:16px 0 14px; padding:18px 20px;
  border:1px dashed rgba(148,177,211,.34); border-radius:18px;
  background:linear-gradient(135deg,rgba(67,218,205,.06),rgba(139,92,246,.07));
}
.leader-empty-icon{ display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border-radius:15px; font-size:22px; background:rgba(67,218,205,.12); }
.leader-empty-copy{ flex:1 1 240px; min-width:0; }
.leader-empty-copy b{ display:block; font-size:15.5px; margin-bottom:4px; }
.leader-empty-copy span{ display:block; font-size:13px; color:var(--muted); line-height:1.5; }
.leader-empty-state .btn{ flex:0 0 auto; }

.leader-dossier-metrics .metric-hero{
  grid-column:span 2!important;
  border-color:rgba(67,218,205,.36)!important;
  background:linear-gradient(160deg,rgba(67,218,205,.13),rgba(6,20,42,.74))!important;
  padding:16px 18px!important;
}
.leader-dossier-metrics .metric-hero b{ font-size:2.1em!important; line-height:1.05!important; }
.leader-dossier-metrics .metric-hero span{ font-size:12.5px!important; }
.leader-dossier-metrics .metric-hero em{ display:block; margin-top:6px; font-style:normal; font-size:11.5px; color:var(--muted); line-height:1.35; }
.leader-dossier-metrics>div:not(.metric-hero){ padding:11px 13px!important; }
.leader-dossier-metrics>div:not(.metric-hero) b{ font-size:1.25em!important; }
.leader-dossier-metrics>div:not(.metric-hero) span{ font-size:11px!important; }
.leader-dossier-metrics .is-zero{ opacity:.42!important; }
.leader-dossier-metrics .is-zero b{ color:var(--muted)!important; }
.leader-dossier-metrics.compact{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important; }

@media (max-width:700px){
  .leader-empty-state{ padding:15px 16px; gap:11px; }
  .leader-empty-state .btn{ width:100%; justify-content:center; }
  .leader-empty-icon{ width:40px; height:40px; font-size:19px; }
  .leader-dossier-metrics .metric-hero b{ font-size:1.8em!important; }
}

/* --------------------------------------------------------------------------
   10) AVATAR KİMLİĞİ
   -------------------------------------------------------------------------- */
.avatar-mono{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:inherit;
  font-weight:700; letter-spacing:.02em; color:#fff;
  background:linear-gradient(150deg,hsl(var(--av-h,190) 62% 46%),hsl(calc(var(--av-h,190) + 34) 58% 34%));
  box-shadow:inset 0 0 0 2px var(--rank-accent,#35b5a8),inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.avatar-photo{ box-shadow:inset 0 0 0 2px var(--rank-accent,#35b5a8); }
.table-avatar,.leader-dossier-avatar,.premium-avatar{ overflow:hidden; }

/* ==========================================================================
   BASİT MOD (v3.8.0)
   body.simple-mode aktifken ileri özellikler gizlenir.
   Temel akış (eğitimler, ortaklar, profil) her zaman görünür.
   ========================================================================== */

/* --- Üst köşedeki seçici --- */
.wt-mode-switch{
  display:inline-flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px;
  background:rgba(148,177,211,.10);
  border:1px solid rgba(148,177,211,.22);
}
.wt-mode-switch button{
  padding:6px 14px; border:0; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:#9db2cb; background:transparent;
  transition:background .16s, color .16s;
}
.wt-mode-switch button:hover{ color:#dcebfb; }
.wt-mode-switch button.is-on{
  color:#06111f; background:#35b5a8;
  box-shadow:0 2px 8px rgba(53,181,168,.28);
}

/* --- Basit modda gizlenenler --- */
body.simple-mode .adv-only{ display:none !important; }

/* Ortak tarafı: oyunlaştırma katmanı (gerçek sınıflar) */
body.simple-mode .home2-streak,
body.simple-mode .premium-streak{ display:none !important; }

/* Alt kısayol şeridi basit modda ferahlasın */
body.simple-mode .home2-bottom{ justify-content:center !important; }

/* Lider tarafı: ikincil metrikler gizlensin, ana metrikler kalsın */
body.simple-mode .leader-dossier-metrics > div:not(.metric-hero){ display:none !important; }

/* Basit modda ana metrikler tam genişlik alsın */
body.simple-mode .leader-dossier-metrics{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;
}
body.simple-mode .leader-dossier-metrics .metric-hero{ grid-column:auto !important; }

/* Basit modda kartlar biraz daha ferah */
body.simple-mode .card{ padding:20px !important; }

/* Mobilde seçici daralsın */
@media (max-width:700px){
  .wt-mode-switch button{ padding:5px 11px; font-size:11.5px; }
  .topbar .row{ gap:7px !important; flex-wrap:wrap; }
}

/* ==========================================================================
   BASİT/DETAYLI SEÇİCİ — MOBİL GÖRÜNÜRLÜK DÜZELTMESİ (v3.9.1)
   Sorun: responsive-screens.css içindeki
     .topbar>.row{flex-wrap:nowrap!important}
   kuralı yüzünden seçici satıra sığmıyor ve ekran dışında kalıyordu.
   Lider mobil panelinde kullanıcı basit moda geçtiğinde geri dönemiyordu.
   ========================================================================== */
@media (max-width:700px){
  body.admin-mode .topbar,
  body.partner-mode .topbar{
    overflow:visible !important;
    min-height:auto !important;
  }
  .topbar > .row{
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    row-gap:6px !important;
    width:auto !important;
    min-width:0 !important;
  }
  /* Seçici her zaman görünür ve satırın başında */
  .topbar .wt-mode-switch{
    display:inline-flex !important;
    order:-1 !important;
    flex:0 0 auto !important;
  }
  .wt-mode-switch button{
    padding:5px 12px !important;
    font-size:11.5px !important;
    min-height:30px !important;
  }
}

/* Çok dar ekranlarda seçici tek başına üst satıra alınsın */
@media (max-width:400px){
  .topbar > .row{ justify-content:space-between !important; }
  .topbar .wt-mode-switch{ order:-1 !important; }
  .wt-mode-switch button{ padding:5px 10px !important; font-size:11px !important; }
}

/* Basit modda gizlenen sekme aktifse otomatik Genel Bakış'a dönülür (JS),
   burada ek güvence: gizli sekme içeriği görünmesin */
body.simple-mode .admin-side-nav button[data-tab="tracking"],
body.simple-mode .admin-side-nav button[data-tab="education"]{ display:none !important; }

/* Giriş kodu kopyalama düğmesi (v3.10.0) */
.code-copy{
  padding:3px 8px !important;
  font-size:13px !important;
  min-height:26px !important;
  line-height:1 !important;
  vertical-align:middle;
}
.code-chip{ user-select:all; }
body .code-chip.invite-success-code{
  background:#071827!important;
  color:#f8fafc!important;
  border-color:rgba(45,212,191,.72)!important;
}

/* ==========================================================================
   MOBİLDE MOD SEÇİCİ — GERÇEK KÖK NEDEN DÜZELTMESİ (v3.10.1)
   responsive-screens.css:428 -> body.admin-mode .topbar{display:none!important}
   Mobilde lider panelinde ÜST ÇUBUĞUN TAMAMI gizleniyordu; seçici de onun
   içinde olduğu için erişilemiyordu ve kullanıcı basit modda kilitleniyordu.
   Çözüm: üst çubuk mobilde yalnızca seçici + çıkış için ince bir şerit olarak
   geri getirildi (marka bloğu gizli kalır, yer kaplamaz).
   ========================================================================== */
@media (max-width:700px){
  body.admin-mode .topbar{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-height:0 !important;
    margin:0 0 10px !important;
    padding:6px 0 8px !important;
    border-bottom:1px solid rgba(148,177,211,.14) !important;
    overflow:visible !important;
  }
  body.admin-mode .topbar > .brand{ display:none !important; }
  body.admin-mode .topbar > .row{
    width:auto !important;
    margin-left:auto !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    gap:8px !important;
    row-gap:6px !important;
  }
  body.admin-mode .topbar .wt-mode-switch{
    display:inline-flex !important;
    order:-1 !important;
    flex:0 0 auto !important;
  }
  body.admin-mode .topbar .btn{
    padding:6px 13px !important;
    font-size:12.5px !important;
    min-height:32px !important;
  }
}

/* Davet linki kutusu (v3.11.0) */
.invite-link-box{
  display:flex; gap:8px; align-items:center; margin-top:14px;
}
.invite-link-box input{
  flex:1 1 auto; min-width:0;
  font-family:ui-monospace,monospace; font-size:12.5px;
  padding:10px 12px;
}
@media (max-width:700px){
  .invite-link-box{ flex-wrap:wrap; }
  .invite-link-box .btn{ width:100%; justify-content:center; }
}