/* settings.css — панель настроек в стиле iOS (группированные карточки, разделители). */
.settings-panel{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  top:auto;
  right:14px;
  left:auto;
  z-index:50;
  width:min(340px, 88vw);
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* единая glass-подложка на весь блок настроек */
  background:rgba(28,28,30,.62);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 14px 60px rgba(0,0,0,.5);
  padding:0;
  display:none;
  flex-direction:column;
  min-height:0;
  gap:0;
  color:#fff;
  font:400 17px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
@media (orientation: landscape) {
  .settings-panel{
    top:50%;
    left:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%, -50%);
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px);
    width:min(420px, 60vw);
  }
}
.settings-panel.show{ display:flex; }

/* заголовок группы (как в iOS: мелкий заглавными/серый слева) */
.sp-group-title{
  font-size:12px;
  font-weight:600;
  color:rgba(235,235,245,.55);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:2px 14px 4px;
}

/* неактивная строка настроек (напр. Стиль часов в режиме Микс) */
.sp-row.disabled{ opacity:.4; pointer-events:none; }
#sp-style.disabled{ opacity:.4; pointer-events:none; }

.sp-header{
  font-size:20px;
  font-weight:700;
  color:#fff;
  text-align:center;
  padding:14px 14px 12px;
  flex:0 0 auto;
  background:rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:18px 18px 0 0;
}
.sp-body{
  padding:4px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sp-footer{
  flex:0 0 auto;
  text-align:center;
  font-size:12px;
  color:rgba(235,235,245,.85);
  padding:10px 14px 12px;
  border-top:1px solid rgba(255,255,255,.15);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}

/* контейнер кнопки гео + поля города — прижат вправо, элементы вплотную */
.city-wrap{ display:flex; align-items:center; margin-left:auto; }
.sp-geo{
  flex:0 0 auto;
  width:38px; height:38px;
  margin-right:8px;
  border:none; border-radius:9px;
  background:rgba(118,118,128,.22);
  color:#fff; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.light .sp-geo{ color:#1c1c1e; background:rgba(118,118,128,.12); }

/* карточка-группа: прозрачная внутри общей glass-подложки.
   НЕ сжимается (flex:0 0 auto) — иначе группы налезают друг на друга при нехватке места,
   и панель скроллится целиком. */
.sp-group{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
  overflow:visible;
  flex:0 0 auto;
}

/* строка параметра: подпись слева, контрол справа (iOS) */
.sp-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  min-height:42px;
  padding:5px 16px;
  position:relative;
}
.sp-row + .sp-row::before{
  content:"";
  position:absolute;
  top:0; left:16px; right:0;
  height:1px;
  background:rgba(84,84,88,.55);
  transform:scaleY(.5);
}
.sp-lbl{ font-size:17px; color:#fff; font-weight:400; flex:none; white-space:nowrap; }
.sp-val{ flex:none; margin-left:auto; color:rgba(235,235,245,.6); font-size:15px; }

/* range (iOS) */
.settings-panel input[type=range]{ -webkit-appearance:none; flex:1; width:auto; max-width:160px; height:4px; border-radius:2px; background:rgba(120,120,128,.4); outline:none; margin-left:auto; }
.settings-panel input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }

/* текстовое поле (iOS) */
.settings-panel input[type=text]{ -webkit-appearance:none; background:rgba(118,118,128,.18); border:none; border-radius:9px; color:#fff; padding:7px 11px; font-size:16px; flex:0 1 auto; width:auto; min-width:0; max-width:160px; text-align:right; box-sizing:border-box; }

/* сегментированный переключатель (iOS-подобный) */
.sp-seg{ display:flex; background:rgba(118,118,128,.22); border-radius:9px; overflow:hidden; margin-left:auto; padding:2px; gap:4px; min-width:140px; }
#sp-face{ min-width:auto; }
/* «Смена сторон» и «Только часы» — одинаковая ширина и стиль */
#sp-flip, #sp-clockonly{ min-width:182px; }
.sp-seg button{ background:none; border:none; color:#fff; font-size:13px; padding:6px 10px; font-weight:500; border-radius:7px; flex:1 1 0; min-width:0; white-space:nowrap; }
#sp-face button{ flex:0 1 auto; padding:6px 12px; }
.sp-seg button.on{ background:rgba(120,120,128,.5); color:#fff; }

/* компактные сегменты для [I|O] [mix] — тот же вид, что у sp-seg, но уже и прижаты вправо */
.sp-seg-sm{ min-width:auto; margin-left:auto; gap:0; }
.sp-seg-sm button{ padding:6px 12px; flex:0 1 auto; }
.sp-seg-sm.dis{ opacity:.35; pointer-events:none; }
.sp-seg-full.dis{ opacity:.35; pointer-events:none; }
/* [I|O] растянут до ширины обычных сегментов (Единицы/Давление) */
.sp-seg-full{ flex:none; min-width:140px; margin-left:8px; }

/* переключатель (switch, iOS) */
.sp-sw{width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);position:relative;cursor:pointer;flex:none;margin-left:auto;transition:background .2s;}
.sp-sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .2s;}
.sp-sw.on{background:#30d158;}
.sp-sw.on::after{transform:translateX(20px);}

/* СВЕТЛАЯ ТЕМА — берём из системы (prefers-color-scheme: light) */
@media (prefers-color-scheme: light) {
  .settings-panel{
    background:rgba(250,250,252,.78);
    border:1px solid rgba(0,0,0,.12);
    color:#1c1c1e;
    box-shadow:0 14px 60px rgba(0,0,0,.25);
  }
  .sp-group-title{ color:rgba(60,60,67,.6); }
  .sp-header{ color:#1c1c1e; }
  .sp-geo{ color:#1c1c1e; background:rgba(118,118,128,.12); }
  .sp-row + .sp-row::before{ background:rgba(60,60,67,.2); }
  .sp-lbl{ color:#1c1c1e; }
  .sp-val{ color:rgba(60,60,67,.6); }
  .settings-panel input[type=text]{ background:rgba(118,118,128,.12); color:#1c1c1e; }
  .sp-seg{ background:rgba(118,118,128,.16); }
  .sp-seg button{ color:#1c1c1e; }
  .sp-seg button.on{ background:rgba(0,0,0,.08); color:#1c1c1e; }
  .settings-panel input[type=range]{ background:rgba(120,120,128,.3); }
  .sp-sw{ background:rgba(120,120,128,.32); }
  .sp-sw.on{ background:#30d158; }
  .sp-footer{
    color:rgba(28,28,30,.85);
    border-top:1px solid rgba(0,0,0,.12);
    text-shadow:0 1px 2px rgba(0,0,0,.15);
  }
}