/* Общие стили */
html, body{
  margin:0; padding:0;
  font-family:'Roboto Slab',serif;
  background:#000; color:#199c68;
  width:100%; height:100vh; overflow-x:hidden;
}

/* Блокируем прокрутку фона, пока открыт любой попап */
body.modal-open{ overflow:hidden; touch-action:none; overscroll-behavior:contain; }

/* Заголовки */
h1{ margin:20px; text-align:center; }

/* ===== ЛОГИН ===== */
#login-section{ display:none; text-align:center; }
.login-container{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:16px; box-sizing:border-box; }
.login-hero{ width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
#showLoginPopupBtn{ margin-top:auto; margin-left:auto; margin-right:auto; display:block; width:240px; }

/* Вспомогательные */
label{ display:block; margin-bottom:8px; font-weight:bold; }
input[type="email"], input[type="password"]{
  width:100%; padding:10px; margin-bottom:15px;
  border-radius:4px; border:none; background:#444; color:#fff;
}

/* Кнопки */
button{ background:#199c68; border:none; border-radius:6px; color:#fff; font-size:1rem; cursor:pointer; padding:12px 20px; margin-right:10px; }
button:hover{ background:#138954; }
.error{ color:#ff7777; margin:15px 0; }
.divider{ margin:20px 0; text-align:center; color:#aaa; }

/* Google-кнопка зелёная в попапе логина */
#loginPopup .google-btn{ background:#199c68; width:100%; margin:0 0 16px 0; }
.auth-actions{ display:flex; gap:12px; }
.auth-actions button{ flex:1 1 0; margin-right:0; width:auto; }

/* ===== Попапы (перекрывают весь экран) ===== */
.popup-overlay{
  position:fixed; inset:0; width:100vw; height:100vh; height:100dvh;
  background:rgba(0,0,0,.9); display:none; justify-content:center; align-items:center;
  z-index:9999; text-align:center; padding:max(env(safe-area-inset-top),16px) 16px max(env(safe-area-inset-bottom),16px);
  box-sizing:border-box; overscroll-behavior:contain;
}
.popup-content{ background:#000; padding:20px; text-align:center; width:min(90%,600px); max-height:min(90dvh,720px); overflow-y:auto; border-radius:12px; }
.popup-button-container{ display:flex; flex-direction:column; gap:16px; width:100%; max-width:360px; margin:0 auto; }
.popup-button-container button{ width:100%; }

/* ===== Стартовое меню ===== */
.app-title{ margin:16px auto 8px; text-align:center; }
.menu-grid{
  padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; max-width:720px; margin:0 auto;
}
.menu-card{
  background:#111; border:1px solid #1c1c1c; border-radius:12px; padding:16px; width:100%;
  margin-right:0; text-align:center; transition:transform .08s ease, background-color .15s ease, border-color .15s ease;
}
.menu-card:hover{ background:#151515; } 
.menu-card:active,.menu-card.pressed{ transform:scale(.98); }
.menu-card__value{ font-size:1.6rem; font-weight:700; color:#fff; }
.menu-card.inactive{ pointer-events:none; opacity:.9; }
.menu-card.inactive .menu-card__value{ color:#666; }

/* ===== Экран тренировки ===== */
.image-container{ max-width:100%; background:#fff; overflow:hidden; display:flex; justify-content:center; }
img{ width:100%; height:auto; max-width:390px; }

.progress-container{ width:100%; background:#333; position:relative; overflow:hidden; margin-bottom:5px; }
#progressContainer{ height:10px; }
#overallProgressContainer{ height:20px; }
.progress-bar{ height:100%; width:0%; background:linear-gradient(to right,#199c68,#137852); transition:width .3s ease; }

.info-container{ color:#199c68; font-size:2em; text-align:center; background:#fff; width:100%; padding:10px 0; box-sizing:border-box; }
.additional-info{ font-size:.5em; color:#000; }
.timer{ margin-top:5px; color:#000; }
#gymPopup .timer{ color:#fff!important; }

.button-container{ display:flex; flex-direction:column; align-items:center; gap:15px; margin-top:20px; }
.button-container button{ width:200px; height:50px; background:#199c68; border-radius:5px; cursor:pointer; color:#fff; font-size:110%; border:none; transition:transform .1s ease; }
.button-container button:hover{ background:#199c68; }
.button-container button.pressed{ transform:scale(.95); }
#erledigtButton{ border:3px solid #199c68; }
#späterButton{ background:#000; color:#fff; border:3px solid #fff; }
#späterButton:hover{ background:#000; }
#pauseButton{ background:#000; color:#fff; border:3px solid #fff; }
#pauseButton:hover{ background:#000; }
#setButton{ width:calc(200px + 6px); height:calc(50px + 6px); }

/* ===== Финальный экран / дашборд ===== */
#fertigPage .image-container{ background:#000; }
#fertigPage img{ width:100%; height:auto; max-width:none; }
#fertigPage .info-container{ color:#e6e6e6; font-size:1rem; text-align:left; background:transparent; width:100%; padding:16px; box-sizing:border-box; }

.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.dash-card{ background:#111; border:1px solid #1c1c1c; border-radius:12px; padding:12px; }
.dash-card__title{ font-size:.9rem; color:#9aa0a6; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.dash-card__value{ font-size:1.6rem; font-weight:700; color:#199c68; }
.dash-card--pause .dash-card__value{ color:#ff8a00; }

.dash-rings{ display:flex; justify-content:center; align-items:center; gap:20px; padding:12px 0 16px; }
.ring{ width:140px; height:140px; border-radius:50%; background:conic-gradient(#199c68 calc(var(--p,0) * 1turn), #222 0); position:relative; }
.ring::before{ content:''; position:absolute; inset:10px; background:#000; border-radius:50%; }
.ring__center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring__value{ font-size:1.6rem; font-weight:700; color:#199c68; }
.ring__label{ font-size:.9rem; color:#9aa0a6; }

.dash-block__title{ color:#9aa0a6; margin:6px 0 8px; }
.timeline{ position:relative; width:100%; height:12px; background:#1c1c1c; border-radius:999px; overflow:hidden; cursor:pointer; }
.timeline__fill{ position:absolute; left:0; top:0; height:100%; width:100%; background:linear-gradient(90deg,#199c68,#0fbf7f); z-index:1; }
.timeline__segment--pause{ position:absolute; top:0; height:100%; background:#ff8a00; opacity:.9; z-index:2; }
.timeline__marker--set{ position:absolute; top:-3px; width:2px; height:18px; background:#ff8a00; z-index:3; }

.sets{ margin-top:12px; }
.sets__title{ color:#9aa0a6; margin-bottom:8px; }
.sets__list{ list-style:none; padding:0; margin:0; }
.sets__list li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #1c1c1c; color:#e6e6e6; }
.sets__index{ color:#199c68; }

/* Кнопки на финальном экране */
#fertigPage .button-container{ display:flex; flex-direction:column; align-items:center; gap:15px; margin-bottom:20px; }
#fertigPage button{ width:200px; height:50px; }

/* ===== Statistik (History) ===== */
#statsPage{ padding:16px 16px 24px; }
.stats-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.stats-filters{ display:flex; gap:8px; align-items:center; }
#statsActivitySelect, #statsSortSelect{ background:#111; color:#e6e6e6; border:1px solid #1c1c1c; border-radius:8px; padding:10px 12px; }

.stats-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.stats-card{ background:#111; border:1px solid #1c1c1c; border-radius:12px; padding:12px; }
.stats-card__label{ color:#9aa0a6; font-size:.9rem; margin-bottom:6px; }
.stats-card__value{ color:#199c68; font-size:1.6rem; font-weight:700; }

.stats-list{ display:flex; flex-direction:column; gap:10px; }
.stats-item{ background:#111; border:1px solid #1c1c1c; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.stats-item__left{ display:flex; flex-direction:column; gap:6px; }
.stats-item__title{ font-weight:600; }
.stats-item__meta{ color:#9aa0a6; font-size:.9rem; }
.stats-item__right{ text-align:right; }
.stats-item__kcal{ color:#199c68; font-weight:700; }
.stats-item__distance{ color:#9aa0a6; font-size:.9rem; }
.stats-empty{ color:#9aa0a6; text-align:center; padding:16px; }

@media (min-width:720px){ .stats-summary-grid{ grid-template-columns:repeat(4,1fr); } }

@media (max-width:600px){
  .popup-content h2{ font-size:1.5em; }
  .popup-button-container button,.button-container button{ width:200px; }
  #setButton{ width:calc(200px + 6px); }
  .ring{ width:120px; height:120px; }
  .ring::before{ inset:8px; }
  .ring__value{ font-size:1.4rem; }
}
/* ===== Fixes ===== */

/* 1) Collapsible: список сетов действительно сворачивается */
.sets--collapsed { display: none; }

/* 2) Кнопки по центру: убираем глобовый правый отступ и даём полноширинные кнопки в попапах */
button { margin-right: 0; } /* перекрывает раннее правило button{ margin-right:10px } */

.popup-button-container{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  align-items: center;
}
.popup-button-container button{
  width: 100%;
  margin: 0;
}
#loginPopup .auth-actions{ display: flex; gap: 12px; }
#loginPopup .auth-actions button{ flex: 1 1 0; margin: 0; width: auto; }

/* 3) Убираем «мигание» меню до решения JS, что показывать */
.booting #app-section{ display: none !important; }

/* 4) Гарантируем, что клик доходит до контейнера таймлайна */
.timeline{ cursor: pointer; }
.timeline__fill,
.timeline__segment--pause,
.timeline__marker--set{
  pointer-events: none;
}

/* ============================================================
   АНТИ-МИГАНИЕ
   ============================================================ */
.booting #login-section,
.booting #app-section { visibility: hidden; opacity: 0; }
#login-section, #app-section { transition: opacity 0.15s ease; }

/* ============================================================
   ЭКРАН 1 — HERO (картинка + кнопка)
   ============================================================ */
#login-section {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  z-index: 100;
}

/* Hero wrapper */
.lh-wrap {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Фоновые декоративные элементы Hero */
.lh-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.lh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.25;
}
.lh-orb--1 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #199c68 0%, transparent 70%);
  top: -80px; right: -60px;
  animation: orbFloat 9s ease-in-out infinite;
}
.lh-orb--2 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, #0d5c3e 0%, transparent 70%);
  bottom: 100px; left: -60px;
  animation: orbFloat 12s ease-in-out infinite reverse;
}
.lh-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25,156,104,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,156,104,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.04); }
}

/* Контент Hero */
.lh-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Заголовок Hero — стиль как в оригинале */
.lh-title {
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 700;
  color: #199c68;
  text-align: center;
  margin: clamp(12px, 4vh, 24px) 0 0;
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(25,156,104,0.4);
}

/* Картинка — занимает всё доступное пространство между заголовком и кнопкой */
.lh-img-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lh-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* CTA кнопка Hero */
.lh-cta {
  flex-shrink: 0;
  width: min(340px, calc(100% - 40px));
  padding: 16px;
  margin: clamp(12px, 3vh, 20px) 0 clamp(20px, 5vh, 36px);
  background: #199c68;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 24px rgba(25,156,104,0.4);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.lh-cta:hover { background: #138954; box-shadow: 0 6px 32px rgba(25,156,104,0.55); }
.lh-cta:active { transform: scale(0.97); }

/* ============================================================
   ЭКРАН 2 — ФОРМА ВХОДА
   ============================================================ */
.lf-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: #030806;
}

/* Фон формы */
.lf-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.lf-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
}
.lf-orb--1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #199c68 0%, transparent 70%);
  top: -100px; right: -80px;
  animation: orbFloat 8s ease-in-out infinite;
}
.lf-orb--2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #0d5c3e 0%, transparent 70%);
  bottom: 40px; left: -80px;
  animation: orbFloat 11s ease-in-out infinite reverse;
}
.lf-orb--3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #199c6833 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: orbPulse 5s ease-in-out infinite;
}
.lf-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25,156,104,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,156,104,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.2; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.4; transform: translate(-50%,-50%) scale(1.15); }
}

/* Контент формы */
.lf-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4vh, 32px) 20px clamp(16px, 4vh, 32px);
  box-sizing: border-box;
  min-height: 100dvh;
  justify-content: center;
}

/* Кнопка назад */
.lf-back {
  position: fixed;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  padding: 0; margin: 0;
  transition: background 0.2s;
  z-index: 10;
}
.lf-back:hover { background: rgba(255,255,255,0.12); }

/* Заголовок формы — в стиле оригинала */
.lf-title {
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 700;
  color: #199c68;
  margin: 0 0 4px;
  text-shadow: 0 0 20px rgba(25,156,104,0.4);
  text-align: center;
}
.lf-sub {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-size: clamp(0.75rem, 3vw, 0.85rem);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 3vh, 24px);
  text-align: center;
}

/* Карточка */
.lf-card {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(25,156,104,0.2);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 28px) clamp(16px, 5vw, 24px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  box-sizing: border-box;
}

/* Кнопки */
.lf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(0.9rem, 3.5vw, 0.95rem);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: transform 0.1s ease, box-shadow 0.2s ease, opacity 0.2s;
  margin: 0;
  box-sizing: border-box;
}
.lf-btn:active { transform: scale(0.97); }
.lf-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.lf-btn--google {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.lf-btn--google:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.lf-btn--primary {
  flex: 1;
  background: linear-gradient(135deg, #199c68 0%, #0d7a50 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(25,156,104,0.35);
}
.lf-btn--primary:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(25,156,104,0.5);
}
.lf-btn--outline {
  flex: 1;
  background: transparent;
  color: #199c68;
  border: 1.5px solid #199c68;
}
.lf-btn--outline:hover:not(:disabled) {
  background: rgba(25,156,104,0.08);
}

/* Разделитель */
.lf-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: rgba(255,255,255,0.25);
  font-family: 'Roboto Slab', serif;
  font-size: 0.78rem;
}
.lf-divider::before,
.lf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

/* Floating label поля — РАБОЧИЙ вариант без placeholder */
.lf-field {
  position: relative;
  margin-bottom: clamp(12px, 2.5vh, 16px);
}
.lf-input {
  width: 100%;
  height: 56px;
  padding: 22px 14px 8px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(0.9rem, 3.5vw, 1rem);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  caret-color: #199c68;
}
.lf-input:focus {
  border-color: #199c68;
  background: rgba(25,156,104,0.06);
}
/* Label всегда вверху (floating) */
.lf-label {
  position: absolute;
  left: 14px;
  top: 8px;
  color: rgba(255,255,255,0.4);
  font-family: 'Roboto Slab', serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: color 0.2s;
  text-transform: uppercase;
}
.lf-input:focus ~ .lf-label { color: #199c68; }

/* Eye кнопка */
.lf-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 6px;
  width: auto; height: auto;
  margin: 0;
  display: flex; align-items: center;
}
.lf-eye:hover { color: #199c68; background: none; }

/* Кнопки в ряд */
.lf-actions {
  display: flex;
  gap: 10px;
  margin-top: clamp(14px, 2.5vh, 20px);
}

/* Сообщения */
.auth-msg {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Roboto Slab', serif;
  font-size: clamp(0.8rem, 3vw, 0.85rem);
  text-align: center;
}
.auth-msg--error {
  background: rgba(255,80,80,0.1);
  border: 1px solid rgba(255,80,80,0.3);
  color: #ff7777;
}
.auth-msg--success {
  background: rgba(25,156,104,0.1);
  border: 1px solid rgba(25,156,104,0.3);
  color: #199c68;
}

/* Футер */
.lf-footer {
  font-family: 'Roboto Slab', serif;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.15);
  margin-top: clamp(14px, 3vh, 22px);
  text-align: center;
}

/* ============================================================
   Адаптив: очень маленькие экраны (высота < 600px, напр. iPhone SE)
   ============================================================ */
@media (max-height: 600px) {
  .lf-inner { justify-content: flex-start; padding-top: 60px; }
  .lf-title { font-size: 1.6rem; }
  .lf-sub { display: none; }
  .lf-card { padding: 16px; }
  .lf-input { height: 50px; padding: 18px 14px 6px; }
  .lf-field { margin-bottom: 10px; }
  .lf-divider { margin: 12px 0; }
  .lf-footer { margin-top: 10px; }
}

/* Очень широкие экраны (планшет) */
@media (min-width: 600px) {
  .lh-img { object-fit: contain; max-height: 75vh; }
}

/* Кнопка сброса пароля */
.lf-btn-reset {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-family: 'Roboto Slab', serif;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 10px 0 2px;
  margin: 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.lf-btn-reset:hover { color: #199c68; background: none; }
/* ===== MENÜ / PROFIL ===== */

.settings-page {
  min-height: 100dvh;
  padding:
    max(16px, env(safe-area-inset-top))
    16px
    max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #030806;
  color: #fff;
}

.settings-header {
  max-width: 620px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.settings-header h2 {
  grid-column: 2;
  margin: 0;
  text-align: center;
  color: #199c68;
}

.settings-back-btn {
  grid-column: 1;
  margin: 0;
  padding: 9px 14px;
  background: #111;
  border: 1px solid #2a2a2a;
}

.settings-card {
  width: 100%;
  max-width: 620px;
  margin: 0 auto 14px;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(25,156,104,.22);
  border-radius: 18px;
}

.settings-account {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.settings-label {
  margin-bottom: 5px;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
  text-transform: uppercase;
}

.settings-email {
  overflow-wrap: anywhere;
  color: #fff;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.settings-field {
  margin-bottom: 14px;
}

.settings-field label {
  margin-bottom: 7px;
  color: rgba(255,255,255,.62);
  font-size: .85rem;
}

.settings-field input,
.settings-field select,
.settings-readonly {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}

.settings-field input {
  margin: 0;
}

.settings-field select option {
  color: #000;
}

.settings-readonly {
  display: flex;
  align-items: center;
  color: #199c68;
}

.settings-btn {
  width: 100%;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
}

.settings-btn[hidden] {
  display: none !important;
}

.settings-btn--primary,
.settings-btn--install {
  background: linear-gradient(135deg, #199c68, #0d7a50);
}

.settings-btn--logout {
  margin-top: 12px;
  background: transparent;
  color: #ff7777;
  border: 1px solid rgba(255,119,119,.45);
}

.settings-message {
  margin-top: 14px;
  padding: 11px;
  border-radius: 10px;
  text-align: center;
}

.settings-message--success {
  color: #199c68;
  border: 1px solid rgba(25,156,104,.35);
  background: rgba(25,156,104,.1);
}

.settings-message--error {
  color: #ff7777;
  border: 1px solid rgba(255,119,119,.35);
  background: rgba(255,119,119,.1);
}

.settings-build {
  text-align: center;
  color: rgba(255,255,255,.25);
  font-size: .72rem;
}

@media (max-width: 420px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}