/* Real popup stylesheet of the extension (login screen), scoped under .ext-popup for the site infographic. */
.ext-popup{
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body: 'Open Sans', 'Segoe UI', sans-serif;
  --mono: 'Consolas', 'Courier New', monospace;

  --bar: #131313;          
  --bar-line: #2a2a2a;
  --tile: #262626;         
  --card: #1a1a1a;         
  --card-head: #262626;    
  --line: #333;
  --line-soft: #2b2b2b;

  --rust-red: #cd412b;
  --olive: #5b7a2f;        
  --olive-btn: #4b5f2b;    
  --olive-line: #6b8a38;
  --lime: #8fc43c;         
  --amber: #e0a030;
  --red-title: #d4442a;

  --text: #ffffff;
  --text-2: #d5d5d5;
  --text-mut: #a8a8a8;
  --text-dim: #6e6e6e;
}
.ext-popup, .ext-popup *{ box-sizing: border-box; margin: 0; padding: 0; user-select: none; font-family: var(--body); }
.ext-popup, .ext-popup{
  width: 420px; height: 700px;
  overflow: hidden;
  background: var(--bar);
  color: var(--text);
}
.ext-popup .app-container{ display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.ext-popup .top-nav{
  height: 60px;
  background: var(--bar);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 50;
}
.ext-popup .nav-left{
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}
.ext-popup .nav-left .nav-btn{
  width: 40px;
  height: 40px;
  background: var(--tile);
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  color: var(--text-mut);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
  transition: background-color .15s, color .15s;
}
.ext-popup .nav-left .nav-btn:hover{
  background: #323232;
  color: var(--text);
}
.ext-popup .nav-left .rust-badge-btn{
  background: var(--rust-red) !important;
  filter: none !important;
  box-shadow: none !important;
}
.ext-popup .nav-left .rust-badge-btn:hover{
  background: #b53823 !important;
  filter: none !important;
  box-shadow: none !important;
}
.ext-popup .nav-left .rust-badge-btn svg, .ext-popup .nav-left .rust-badge-btn:hover svg{
  width: 24px;
  height: 24px;
  display: block;
  filter: none !important;
  box-shadow: none !important;
}
.ext-popup .nav-right{
  display: flex;
  align-items: center;
  gap: 0;
  height: 40px;
  background: var(--tile);
  padding: 0;
}
.ext-popup .nav-right .nav-btn{
  width: 40px;
  height: 40px;
  background: var(--tile);
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  color: var(--text-mut);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
  transition: background-color .15s, color .15s;
}
.ext-popup .nav-right .nav-btn:hover{
  background: #323232;
  color: var(--text);
}
.ext-popup .nav-btn.active{
  background: var(--olive);
  color: #fff;
}
.ext-popup .icon-svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.ext-popup .avatar-btn, .ext-popup .avatar-btn:hover{
  background: var(--tile) !important;
}
.ext-popup .avatar-badge{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ext-popup .avatar-badge svg{
  width: 18px;
  height: 18px;
  fill: #fff;
}
.ext-popup .avatar-badge img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ext-popup .content-viewport{
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2a1b17 0%, #1c1311 45%, #171110 100%);
}
.ext-popup .view{ display: none; width: 100%; height: 100%; }
.ext-popup .view.active{ display: flex; flex-direction: column; animation: viewIn .15s ease-out; }

@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
.ext-popup .view-scrollable{ overflow-y: auto; overflow-x: hidden; padding: 16px 14px 18px; gap: 16px; }
.ext-popup .view-scrollable::-webkit-scrollbar, .ext-popup #servers-list::-webkit-scrollbar{ width: 4px; }
.ext-popup .view-scrollable::-webkit-scrollbar-thumb, .ext-popup #servers-list::-webkit-scrollbar-thumb{ background: #4a4a4a; border-radius: 2px; }
.ext-popup #view-login{
  justify-content: center;
  align-items: center;
  padding: 18px 12px 12px;
  background: url('../img/backgroung.png') center 35%/cover no-repeat;
}
.ext-popup .auth-card{
  width: 100%;
  background: #1f2327;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column;
  text-align: center;
}
.ext-popup .auth-header{
  background: linear-gradient(180deg, #2c3338 0%, #1f2428 100%);
  padding: 26px 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ext-popup .rust-brand-vector{ height: 40px; width: auto; display: block; }
.ext-popup .auth-tagline{ font-size: 13px; color: #a9b0b5; line-height: 1.5; }
.ext-popup .auth-divider{
  display: flex; align-items: center;
  background: #141414;
  padding: 22px 18px 0;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: 14px; letter-spacing: 3px;
}
.ext-popup .auth-divider::before, .ext-popup .auth-divider::after{ content: ''; flex: 1; height: 1px; background: #333; }
.ext-popup .auth-divider span{ padding: 0 12px; }
.ext-popup .features-grid{
  background: #141414;
  padding: 14px 18px 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ext-popup .feat-btn{
  background: #1d1d1d;
  padding: 11px 8px 11px 14px;
  font-family: var(--display);
  font-size: 17px; letter-spacing: 2px;
  color: var(--text-2);
  display: flex; align-items: center; gap: 10px;
}
.ext-popup .feat-btn svg{ width: 18px; height: 18px; fill: var(--lime); flex-shrink: 0; }
.ext-popup .auth-action-area{ padding: 16px 18px; background: #1b1b1b; }
.ext-popup .btn-steam-auth{
  width: 100%; height: 48px;
  background: var(--olive-btn);
  color: #a6d44a;
  font-family: var(--display);
  font-size: 21px; letter-spacing: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color .15s;
}
.ext-popup .btn-steam-auth:hover{ background: #587030; }
.ext-popup .steam-glyph{ width: 24px; height: 24px; background: currentColor; -webkit-mask: url(../img/steam.svg) center/contain no-repeat; mask: url(../img/steam.svg) center/contain no-repeat; }
.ext-popup .steam-fallback-box{
  margin-top: 10px;
  background: #141414;
  border: 1px solid #333;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.ext-popup .steam-fallback-box.hidden{ display: none; }
.ext-popup .steam-fallback-note{ font-size: 11px; color: var(--text-2); line-height: 1.4; }
.ext-popup .steam-input-row{ display: flex; gap: 6px; }
.ext-popup .steam-input-row input{
  flex: 1; background: #202020; border: 1px solid #3c3c3c !important; color: #fff;
  padding: 8px 10px; font-size: 12px; outline: none;
}
.ext-popup .steam-input-row input:focus{ border-color: var(--lime) !important; }
.ext-popup .btn-manual-connect{
  background: var(--olive); color: #fff;
  padding: 0 14px; font-family: var(--display); font-size: 16px; letter-spacing: 1px; cursor: pointer;
}
.ext-popup .btn-manual-connect:hover{ background: #7ca33a; }
.ext-popup .btn-sub-steam-tab{
  background: transparent; border: 1px solid #333 !important; color: var(--text-mut);
  padding: 8px; font-size: 11px; cursor: pointer; text-align: center;
  transition: color .15s, border-color .15s;
}
.ext-popup .btn-sub-steam-tab:hover{ color: #fff; border-color: #666 !important; }
.ext-popup .auth-footer{
  background: #1b1b1b;
  padding: 0 18px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ext-popup .footer-disclaimer{ font-size: 10px; color: var(--text-dim); line-height: 1.4; text-align: left; }
.ext-popup .social-icons-row{ display: flex; gap: 9px; }
.ext-popup .social-icon-item{ width: 15px; height: 15px; fill: var(--text-dim); background: var(--text-dim); }
.ext-popup svg.social-icon-item{ background: none; }
.ext-popup span.social-icon-item{ -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ext-popup .social-icon-item:hover{ fill: var(--text-2); background-color: var(--text-2); }
.ext-popup svg.social-icon-item:hover{ background: none; }
.ext-popup .empty-servers-card, .ext-popup .push-notification-banner, .ext-popup .server-item-card, .ext-popup .toggles-group-box, .ext-popup .sliders-group-box, .ext-popup .account-profile-row, .ext-popup .modal-card-box{
  background: var(--card);
}
.ext-popup .section-banner-title{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--display);
  font-size: 30px; letter-spacing: 0;
  color: var(--text);
  background: #141414;
  margin: -16px -14px 0;
  padding: 10px 0 8px;
  flex-shrink: 0;
}
.ext-popup .section-banner-title svg{ width: 28px; height: 28px; fill: var(--amber); flex-shrink: 0; }
.ext-popup #view-search .section-banner-title{ font-size: 34px; letter-spacing: 1px; padding: 12px 0; gap: 10px; }
.ext-popup #view-search .section-banner-title svg{ width: 26px; height: 26px; fill: var(--amber); }
.ext-popup .search-field-wrapper input{
  width: 100%;
  background: #141414;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
}
.ext-popup .search-field-wrapper input::placeholder{ color: var(--text-dim); }
.ext-popup .search-field-wrapper input:focus{ border-color: var(--olive-line); }
.ext-popup .empty-servers-card{
  background: transparent; border: none;
  padding: 24px 12px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ext-popup .info-icon-badge{
  width: 30px; height: 30px; border-radius: 50%;
  background: #6a6a6a;
  display: flex; align-items: center; justify-content: center;
}
.ext-popup .info-icon-badge svg{ width: 18px; height: 18px; fill: #1b1b1b; }
.ext-popup .card-title-lg{ font-family: var(--display); font-size: 26px; letter-spacing: 0; color: var(--text); }
.ext-popup .card-desc-muted{ font-size: 13px; color: var(--text-mut); margin-bottom: 4px; }
.ext-popup .btn-tactical-outline{
  background: #262626;
  color: var(--text-2);
  padding: 12px 26px;
  font-family: var(--display);
  font-size: 18px; letter-spacing: 2px;
  cursor: pointer;
  transition: background-color .15s;
}
.ext-popup .btn-tactical-outline:hover{ background: #303030; }
.ext-popup .push-notification-banner{ padding: 14px 12px; display: flex; gap: 14px; align-items: flex-start; background: #161616; }
.ext-popup .banner-bell-icon{ width: 26px; height: 26px; fill: var(--amber); flex-shrink: 0; margin-top: 2px; }
.ext-popup .banner-text-col{ display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ext-popup .banner-header-text{ font-family: var(--display); font-size: 18px; letter-spacing: 1.5px; color: var(--text); }
.ext-popup .banner-body-text{ font-size: 12px; color: var(--text-mut); line-height: 1.4; margin-bottom: 8px; }
.ext-popup .btn-olive-full{
  background: var(--olive-btn);
  color: #a6d44a;
  padding: 11px 14px;
  font-family: var(--display);
  font-size: 18px; letter-spacing: 2px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color .15s;
}
.ext-popup .btn-olive-full:hover{ background: #587030; }
.ext-popup .settings-section-card > .btn-olive-full, .ext-popup .toggles-group-box + .btn-olive-full{ align-self: stretch; }
.ext-popup .dlc-divider{
  display: flex; align-items: center;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: 15px; letter-spacing: 3px;
}
.ext-popup .dlc-divider::before, .ext-popup .dlc-divider::after{ content: ''; flex: 1; height: 1px; background: #333; }
.ext-popup .dlc-divider span{ padding: 0 12px; }
.ext-popup .devblog-card{ display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); flex-shrink: 0; }
.ext-popup .devblog-header-image{
  height: 190px;
  background-size: cover; background-position: center;
  position: relative;
  display: flex; align-items: flex-end; gap: 0;
}
.ext-popup .bg-livestock{ background-image: url('../img/livestock_update_cows.png'); }
.ext-popup .bg-breach{
  background-image: url('../img/backgroung.png');
  background-position: center 62%;
  filter: none;
}
.ext-popup .badge-devblog, .ext-popup .badge-devblog-green{
  font-family: var(--display);
  font-size: 17px; letter-spacing: 2px;
  padding: 5px 9px 4px;
  z-index: 1;
}
.ext-popup .badge-devblog-green{ background: #4a6a24; color: var(--lime); }
.ext-popup .badge-devblog{ background: var(--rust-red); color: #fff; }
.ext-popup .devblog-date{
  background: rgba(20, 20, 20, .82);
  color: var(--text-2);
  font-family: var(--display);
  font-size: 17px; letter-spacing: 2px;
  padding: 5px 9px 4px;
  z-index: 1;
}
.ext-popup .devblog-content{ display: flex; flex-direction: column; }
.ext-popup .devblog-headline{
  font-family: var(--display);
  font-size: 27px; letter-spacing: 0; font-weight: 400;
  color: var(--text);
  background: var(--card-head);
  padding: 12px 14px 8px;
}
.ext-popup .devblog-paragraph{ font-size: 13px; color: var(--text-2); line-height: 1.6; padding: 12px 14px 16px; background: #151515; }
.ext-popup #view-hub .devblog-headline{ background: var(--red-title); align-self: flex-start; margin-top: -48px; margin-left: 14px; position: relative; z-index: 2; }
.ext-popup #view-hub .devblog-content{ background: transparent; }
.ext-popup #view-hub .devblog-paragraph{ margin: 0 14px; background: #151515; }
.ext-popup .server-item-card{ padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ext-popup .server-item-card:hover{ border-color: #4a4a4a; }
.ext-popup .server-item-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ext-popup .server-title-text{ font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-popup .server-stats-row{ display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-mut); }
.ext-popup .online-indicator{ color: var(--lime); font-weight: 700; }
.ext-popup .btn-pair-server{
  background: var(--olive-btn); border: 1px solid var(--olive-line);
  color: #a6d44a;
  padding: 6px 14px;
  font-family: var(--display); font-size: 16px; letter-spacing: 2px;
  cursor: pointer; flex-shrink: 0;
}
.ext-popup .btn-pair-server:hover{ background: #587030; }
.ext-popup .btn-pair-server.paired{ background: #262626; border-color: var(--line); color: var(--text-mut); cursor: default; }
.ext-popup .servers-empty-note{ text-align: center; padding: 20px; color: var(--text-mut); font-size: 12px; }
.ext-popup .hub-conn-toprow{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ext-popup .hub-conn-label{ font-family: var(--display); font-size: 18px; letter-spacing: 1.5px; color: var(--text-mut); }
.ext-popup .hub-conn-online{ color: var(--lime); font-weight: 700; font-size: 12px; }
.ext-popup .hub-conn-name{ font-family: var(--display); font-size: 26px; color: #fff; width: 100%; text-align: left; margin-top: 6px; font-weight: 400; }
.ext-popup .hub-conn-meta{ font-size: 11px; color: var(--text-mut); display: flex; gap: 12px; width: 100%; margin-top: 4px; }
.ext-popup .hub-conn-actions{ display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.ext-popup .hub-conn-actions .btn-tactical-outline{ flex: 1; padding: 10px; }
.ext-popup .btn-disconnect{
  flex: 1; background: #2a1a17; border: 1px solid #6b2f25; color: #e08a76;
  padding: 10px; font-family: var(--display); font-size: 18px; letter-spacing: 2px; cursor: pointer;
}
.ext-popup .btn-disconnect:hover{ background: #381f1b; }
.ext-popup .settings-section-card{ display: flex; flex-direction: column; gap: 10px; }
.ext-popup .settings-header-label{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 24px; letter-spacing: 2px;
  color: var(--text-2);
}
.ext-popup .settings-header-label svg{ width: 26px; height: 26px; fill: #777; flex-shrink: 0; }
.ext-popup .account-profile-row{
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #161616;
}
.ext-popup .account-info-left{ display: flex; align-items: center; gap: 12px; }
.ext-popup .account-avatar-square{
  width: 36px; height: 36px;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ext-popup .account-avatar-square svg{ width: 22px; height: 22px; fill: #fff; }
.ext-popup .account-avatar-square img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ext-popup .account-name-group{ display: flex; flex-direction: column; gap: 2px; }
.ext-popup .account-username-text{ font-size: 15px; font-weight: 700; color: var(--text-2); }
.ext-popup .account-steam-id{ font-size: 11px; color: var(--text-mut); font-family: var(--mono); }
.ext-popup .account-actions-group{ display: flex; align-items: center; gap: 8px; }
.ext-popup .btn-logout-action{
  background: var(--olive-btn); border: 1px solid var(--olive-line);
  color: #a6d44a;
  padding: 10px 18px;
  font-family: var(--display); font-size: 18px; letter-spacing: 2px; cursor: pointer;
  transition: background-color .15s;
}
.ext-popup .btn-logout-action:hover{ background: #587030; }
.ext-popup .steam-reg-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: #202020; border: 1px solid var(--line);
  color: var(--text-mut);
  padding: 10px 14px;
  font-family: var(--display); font-size: 16px; letter-spacing: 1.5px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ext-popup .steam-reg-btn:hover{ background: #282828; color: #fff; }
.ext-popup .steam-reg-icon{ width: 18px; height: 18px; fill: currentColor; }
.ext-popup .auth-register-link{
  display: inline-block; margin-top: 10px;
  font-size: 12px; color: var(--text-mut); text-decoration: none; letter-spacing: 0.5px;
  transition: color .15s;
}
.ext-popup .auth-register-link:hover{ color: #a6d44a; text-decoration: underline; }
.ext-popup .lang-dropdown-box{ background: var(--card); border: 1px solid var(--line); border-bottom: none; padding: 4px 4px 0; }
.ext-popup .lang-dropdown-box select{
  width: 100%; background: transparent; border: none; color: var(--text);
  padding: 14px 10px; font-size: 15px; font-weight: 700; outline: none; cursor: pointer;
}
.ext-popup .lang-dropdown-box option{ background: #1a1a1a; color: var(--text); }
.ext-popup .settings-section-card .lang-dropdown-box + .btn-translate-help{ margin-top: -10px; }
.ext-popup .btn-translate-help{
  width: 100%; background: #262626; border: 1px solid var(--line);
  color: var(--text-2);
  padding: 14px;
  font-family: var(--display); font-size: 19px; letter-spacing: 2px; cursor: pointer;
}
.ext-popup .btn-translate-help:hover{ background: #303030; }
.ext-popup .toggles-group-box{ background: #151515; }
.ext-popup .toggle-item-line{
  display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 22px;
  padding: 14px 16px;
  background: #161616;
}
.ext-popup .toggle-item-line:has(input:checked){ background: #1b2013; }
.ext-popup .toggle-item-line:last-child{ border-bottom: none; }
.ext-popup .toggle-title-text{ font-family: var(--display); font-size: 21px; letter-spacing: 2px; color: var(--text-2); }
.ext-popup .toggle-switch-wrapper{ position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.ext-popup .toggle-switch-wrapper input{ opacity: 0; width: 0; height: 0; }
.ext-popup .toggle-pill-slider{
  position: absolute; inset: 0; cursor: pointer;
  background: #1f1f1f; border: 1px solid #444;
  border-radius: 26px;
  transition: background-color .2s;
}
.ext-popup .toggle-pill-slider::before{
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.ext-popup input:checked + .toggle-pill-slider{ background: var(--olive); border-color: #6f8f3d; }
.ext-popup input:checked + .toggle-pill-slider::before{ transform: translateX(20px); }
.ext-popup .sliders-group-box{ padding: 0; display: flex; flex-direction: column; gap: 0; background: #161616; }
.ext-popup .slider-line-item{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
}
.ext-popup .slider-line-item:last-child{ border-bottom: none; }
.ext-popup .slider-title-text{ font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: var(--text-2); flex: 0 0 38%; line-height: 1.1; }
.ext-popup .slider-control-pair{ display: flex; align-items: center; gap: 12px; flex: 1; }
.ext-popup .range-track-input{ flex: 1; height: 5px; background: #2a2a2a; border-radius: 3px; outline: none; -webkit-appearance: none; }
.ext-popup .range-track-input::-webkit-slider-thumb{
  -webkit-appearance: none; width: 24px; height: 18px; border-radius: 9px; background: #fff; cursor: pointer;
}
.ext-popup .range-val-badge{ min-width: 44px; text-align: right; font-family: var(--mono); font-size: 14px; color: var(--text-mut); }
.ext-popup .ifttt-card{ background: #161616; border: 1px solid var(--line); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.ext-popup .ifttt-logo{ font-family: 'Arial Black', 'Segoe UI', sans-serif; font-weight: 900; font-size: 60px; line-height: 1; color: #fff; text-align: center; letter-spacing: -2px; }
.ext-popup .ifttt-text{ font-size: 13px; color: var(--text-2); line-height: 1.6; }
.ext-popup .ext-icon{ width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-left: 8px; }
.ext-popup .modal-overlay{
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.ext-popup .modal-overlay.hidden{ display: none; }
.ext-popup .modal-card-box{ width: 100%; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }
.ext-popup .modal-title-row{ display: flex; justify-content: space-between; align-items: center; }
.ext-popup .modal-title-text{ font-family: var(--display); font-size: 22px; letter-spacing: 1.5px; color: var(--text); }
.ext-popup .btn-close-modal{ background: transparent; border: none; color: var(--text-dim); font-size: 15px; width: 26px; height: 26px; cursor: pointer; }
.ext-popup .btn-close-modal:hover{ color: var(--text); }
.ext-popup .modal-body-paragraph{ font-size: 13px; color: var(--text-2); line-height: 1.5; }
.ext-popup .modal-demo-note{ font-size: 11px; color: var(--text-dim); padding-top: 10px; border-top: 1px solid var(--line); }
.ext-popup .modal-action-buttons{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ext-popup .btn-modal-green{
  background: var(--olive-btn); border: 1px solid var(--olive-line); color: #a6d44a;
  padding: 11px; font-family: var(--display); font-size: 19px; letter-spacing: 2px; cursor: pointer;
}
.ext-popup .btn-modal-green:hover{ background: #587030; }
.ext-popup .btn-modal-gray{
  background: #262626; color: var(--text-2); border: 1px solid var(--line);
  padding: 11px; font-family: var(--display); font-size: 19px; letter-spacing: 2px; cursor: pointer;
}
.ext-popup .btn-modal-gray:hover{ background: #303030; }
.ext-popup .modal-card-box kbd{ background: #262626; border: 1px solid var(--line); padding: 1px 5px; font-size: 11px; color: var(--text); }
.ext-popup .bottom-tab-bar{
  height: 54px;
  background: var(--bar);
  display: flex; align-items: stretch;
  flex-shrink: 0; z-index: 50;
}
.ext-popup .tab-nav-btn{
  background: transparent; border: none; color: #55595c; cursor: pointer;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background-color .15s;
}
.ext-popup .tab-nav-btn:hover{ color: #8a8f92; }
.ext-popup .tab-nav-btn.active{ color: var(--lime); background: #1c1c1c; }
.ext-popup .tab-nav-btn svg{ width: 24px; height: 24px; fill: currentColor; }
.ext-popup, .ext-popup *{ scrollbar-width: none; }
.ext-popup *::-webkit-scrollbar{ display: none; width: 0; }
.ext-popup .tab-nav-btn svg, .ext-popup .social-icon-item, .ext-popup .feat-btn svg{ transition: filter .15s, color .15s; }
.ext-popup .tab-nav-btn:hover svg, .ext-popup .feat-btn:hover svg{ filter: drop-shadow(0 0 6px rgba(160, 220, 70, .9)); }
.ext-popup .tab-nav-btn:hover{ color: var(--lime); }
.ext-popup .social-icon-item:hover{ filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)); }
.ext-popup .tab-nav-btn:hover{ color: var(--lime); }
.ext-popup .devblog-header-image{ height: 250px; }
.ext-popup .devblog-paragraph{ font-size: 14px; line-height: 1.7; padding: 16px 16px 22px; min-height: 130px; }
.ext-popup .devblog-headline{ font-size: 32px; padding: 14px 18px 10px; }
.ext-popup #view-hub .devblog-headline{ margin-top: -60px; margin-left: 0; }
.ext-popup #view-hub .devblog-paragraph{ margin: 0 12px 12px; padding: 18px 16px 24px; }
.ext-popup #view-hub .devblog-content{ padding: 0 0 0 12px; }
.ext-popup .auth-header{ padding: 34px 18px 22px; }
.ext-popup .features-grid{ padding: 18px 18px 28px; }
.ext-popup, .ext-popup *, .ext-popup *::before, .ext-popup *::after{ border: none !important; outline: none !important; }
.ext-popup .toggle-item-line, .ext-popup .slider-line-item{ box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04); }
.ext-popup .toggle-item-line:last-child, .ext-popup .slider-line-item:last-child{ box-shadow: none; }
.ext-popup .devblog-header-image{ height: 280px; }
.ext-popup .devblog-paragraph{ min-height: 220px; padding: 22px 18px 30px; }
.ext-popup #view-hub .devblog-paragraph{ min-height: 240px; padding: 26px 18px 34px; }
.ext-popup .push-notification-banner{ padding: 20px 14px; }
.ext-popup .btn-olive-full{ padding: 15px 18px; }
.ext-popup .features-grid .feat-btn{ padding-top: 15px; padding-bottom: 15px; }
.ext-popup .btn-steam-auth{ height: 58px; }
.ext-popup{ --text: #e4dad1; --text-2: #e4dad1; --text-mut: #bab1a8; --bar: #0c0b0b; --card: #1b1b1b; --card-head: #1f1f1f; --rust-red: #cd412b; --red-title: #cd412b; }
.ext-popup .devblog-paragraph, .ext-popup .banner-body-text, .ext-popup .auth-tagline, .ext-popup .card-desc-muted, .ext-popup .modal-body-paragraph{ font-size: 16px; line-height: 28px; color: var(--text-mut); }
.ext-popup .banner-body-text{ font-size: 14px; line-height: 22px; }
.ext-popup .feat-btn, .ext-popup .btn-olive-full, .ext-popup .btn-tactical-outline, .ext-popup .btn-translate-help, .ext-popup .btn-logout-action, .ext-popup .btn-pair-server, .ext-popup .btn-steam-auth, .ext-popup .btn-modal-green, .ext-popup .btn-modal-gray, .ext-popup .banner-header-text, .ext-popup .toggle-title-text, .ext-popup .slider-title-text, .ext-popup .settings-header-label, .ext-popup .auth-divider, .ext-popup .dlc-divider, .ext-popup .badge-devblog, .ext-popup .badge-devblog-green, .ext-popup .devblog-date{ letter-spacing: 1px; }
.ext-popup .devblog-headline, .ext-popup .card-title-lg, .ext-popup .section-banner-title{ letter-spacing: 0; color: var(--text); }
.ext-popup #view-login{ padding: 10px 12px; overflow: hidden; }
.ext-popup .auth-header{ padding: 18px 16px 12px; gap: 10px; }
.ext-popup .rust-brand-vector{ height: 34px; }
.ext-popup .auth-tagline{ font-size: 13px; line-height: 20px; }
.ext-popup .auth-divider{ padding: 12px 16px 0; }
.ext-popup .features-grid{ padding: 10px 16px 14px; gap: 6px; }
.ext-popup .features-grid .feat-btn{ padding-top: 9px; padding-bottom: 9px; font-size: 16px; }
.ext-popup .auth-action-area{ padding: 12px 16px; }
.ext-popup .btn-steam-auth{ height: 44px; }
.ext-popup .auth-footer{ padding: 0 16px 12px; }
.ext-popup #view-news{ padding: 0 12px 16px; gap: 0; }
.ext-popup #view-news .section-banner-title{ margin: 0 -12px 12px; padding: 12px 0 10px; border: none !important; box-shadow: none !important; }
.ext-popup #view-news .devblog-card{ border: none !important; box-shadow: none !important; margin-bottom: 16px; }
.ext-popup #view-hub .devblog-headline{ margin: 0; align-self: stretch; background: var(--red-title); padding: 14px 18px 10px; }
.ext-popup #view-hub .devblog-content{ padding: 0; }
.ext-popup #view-hub .devblog-paragraph{ margin: 0; min-height: 0; padding: 18px 18px 24px; }
.ext-popup .bg-livestock{ background-size: auto 122%; background-position: 50% 100%; }
.ext-popup .sdcc6394c7b{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-180%);
  width: calc(100% - 24px);
  max-width: 396px;
  padding: 12px 14px;
  background: #201c1b;
  border: 1px solid rgba(205, 65, 43, 0.5) !important;
  border-left: 4px solid var(--rust-red) !important;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 10px;
  align-items: center;
  z-index: 99999;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ext-popup .sdcc6394c7b.visible{
  transform: translateX(-50%) translateY(0);
}
.ext-popup .s4404ac3abd{
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.05em;
  color: #fff;
  display: block;
}
.ext-popup .s0a5bf47678{
  grid-column: 1;
  color: var(--text-mut);
  font-size: 11px;
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}
.ext-popup .s6c233bf4bc, .ext-popup .s48859ba87c{
  background: var(--rust-red);
  border: 0;
  border-radius: 999px;
  color: #fff;
  min-height: 32px;
  padding: 0 14px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s;
}
.ext-popup .s6c233bf4bc:hover{ background: #e04a2f; }
.ext-popup .s48859ba87c{
  padding: 0 10px;
  background: #2a2524;
}
.ext-popup .s48859ba87c:hover{ background: #3c3432; }
.ext-popup .ad-fullscreen-overlay{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: #000;
  display: flex;
  flex-direction: column;
}
.ext-popup .ad-fullscreen-overlay[hidden]{
  display: none !important;
}
.ext-popup .ad-fullscreen-frame{
  width: 100%;
  height: 100%;
  border: none !important;
  flex: 1;
  background: #000;
}
.ext-popup .ad-overlay-close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: 1px solid #444 !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000000;
  transition: background-color .15s;
}
.ext-popup .ad-overlay-close-btn:hover{
  background: #cd412b;
}
.ext-popup { position: relative; width: 420px; height: 700px; overflow: hidden; background: var(--bar); color: var(--text); font-family: var(--body); }
.ext-popup * { pointer-events: none; }