/* ===================================================================
   MUTE — design tokens
   =================================================================== */
:root{
  --bg: #0A0F0D;
  --surface: #121814;
  --surface-2: #1A2119;
  --line: #232C24;

  --text: #EDEFEC;
  --text-dim: #8B968B;
  --text-faint: #5B655C;

  --calm: #3E8EFF;      /* синхронизация / подавление */
  --calm-dim: #3E8EFF33;
  --signal: #FF7A45;    /* обнаруженный шум */
  --signal-dim: #FF7A4533;
  --brand-leaf: #5C9E52; /* только для бейджа NutriSync */

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;

  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(120% 90% at 50% -10%, #101a14 0%, #0A0F0D 55%);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input{ font-family: inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2{ margin:0; }

.app{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  padding-bottom: 84px; /* room for tabbar */
}

/* ===================================================================
   Top bar
   =================================================================== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 20px 6px;
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand__mark{ width:26px; height:26px; border-radius:7px; }
.brand__name{
  font-weight:800;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.brand__version{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 2px;
}
.brand__parent{
  display:flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  background: #F3F1EA;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  transition: transform 120ms ease;
}
.brand__parent:active{ transform: scale(0.96); }
.brand__parent span{
  color: #5B6B5D;
  font-size: 11.5px;
  font-weight: 600;
}
.brand__parent-logo{
  height: 22px;
  width:auto;
  display:block;
}

/* ===================================================================
   Screens
   =================================================================== */
.screen{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 8px 20px 24px;
}

.status{
  text-align:center;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height:1.5;
  max-width: 300px;
  margin: 14px 0 6px;
  min-height: 42px;
}

.preset-switch{
  display:flex;
  gap:4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 4px;
}
.preset-switch__opt{
  display:flex;
  align-items:center;
  gap:6px;
  border:none;
  background:transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition: background 160ms ease, color 160ms ease;
}
.preset-switch__opt.is-active{
  background: var(--surface-2);
  color: var(--text);
}
.preset-switch__opt svg{ flex-shrink:0; }
.preset-switch.is-locked .preset-switch__opt{ pointer-events:none; opacity:0.5; }

/* ===================================================================
   The ring — signature element
   =================================================================== */
.ring-stage{
  width:100%;
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 14px;
}

.live-range{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--signal);
  background: var(--signal-dim);
  border: 1px solid #FF7A4550;
  padding: 6px 14px;
  border-radius: 999px;
  margin:0;
  text-align:center;
}

.ring-wrap{
  position:relative;
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ring{
  width:100%;
  height:100%;
  overflow: visible;
}
.ring line{
  stroke-width: 3.4;
  transition: fill 220ms ease, opacity 220ms ease, stroke-width 220ms ease;
}
.ring.is-recording line{
  stroke-width: 4.6;
}
.ring.is-recording{
  filter: drop-shadow(0 0 6px rgba(62,142,255,0.55)) drop-shadow(0 0 14px rgba(62,142,255,0.28));
}
.ring.is-playing-anti{
  filter: drop-shadow(0 0 6px rgba(92,158,82,0.6)) drop-shadow(0 0 14px rgba(92,158,82,0.3));
}
.ring rect{
  transition: fill 220ms ease, opacity 220ms ease;
}

.ring-center{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  pointer-events:none;
}
.ring-center__value{
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight:500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.ring-center__label{
  font-size: 11px;
  color: var(--text-faint);
  max-width: 120px;
  text-align:center;
  line-height:1.3;
}

.rec-btn{
  position:absolute;
  bottom: -6px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px -8px #00000090;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform 140ms ease, box-shadow 220ms ease;
}
.rec-btn:active{ transform: scale(0.94); }
.rec-btn__dot{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--signal);
  transition: all 220ms ease;
}
.rec-btn.is-recording{ box-shadow: 0 0 0 1px var(--signal), 0 0 26px -2px var(--signal-dim); }
.rec-btn.is-recording .rec-btn__dot{ border-radius: 6px; width:20px; height:20px; }
.rec-btn.is-busy{ pointer-events:none; opacity:0.5; }
.rec-btn.is-done .rec-btn__dot{ background: var(--calm); }

/* ===================================================================
   Detected bands panel
   =================================================================== */
.bands{ width:100%; margin-top: 14px; }
.bands__head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.bands__head h2{ font-size:15px; font-weight:700; }
.bands__hint{ font-size:12px; color: var(--text-faint); }
.bands__badge{
  align-self:flex-start;
  margin-top:4px;
  font-size: 11.5px;
  font-weight:600;
  color: var(--calm);
  background: var(--calm-dim);
  border-radius: 999px;
  padding: 3px 10px;
}

.bands__list{ display:flex; flex-direction:column; gap:8px; }
.band-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.band-row__swatch{
  width: 8px;
  height: 30px;
  border-radius: 4px;
  flex-shrink:0;
  background: linear-gradient(180deg, var(--signal), #FF7A4560);
}
.band-row__main{ flex:1; min-width:0; }
.band-row__range{
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight:500;
}
.band-row__desc{ font-size:12px; color: var(--text-dim); margin-top:2px; }
.band-row__db{
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight:500;
  color: var(--signal);
  text-align:right;
  white-space:nowrap;
}
.band-row__db small{ display:block; font-size:9.5px; color:var(--text-faint); font-weight:400; letter-spacing:0.04em; }

/* ===================================================================
   Buttons
   =================================================================== */
.btn{
  border:none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 14.5px;
  font-weight:700;
  cursor:pointer;
  transition: transform 120ms ease, opacity 160ms ease;
  font-family: inherit;
}
.btn:active{ transform: scale(0.97); }
.btn--primary{ background: var(--text); color: #0A0F0D; }
.btn--accent{ background: var(--calm); color: #fff; }
.btn--ghost{ background: transparent; color: var(--text-dim); border: 1px solid var(--line); }
.btn:disabled{ opacity:0.4; pointer-events:none; }

.actions{ display:flex; gap:10px; width:100%; margin-top:18px; }
.actions .btn{ flex:1; }

.save-row{
  width:100%;
  display:flex;
  gap:8px;
  margin-top: 12px;
}

/* ===================================================================
   Anti-noise player
   =================================================================== */
.player{
  width:100%;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.player__head{ display:flex; flex-direction:column; gap:3px; }
.player__title{ font-weight:700; font-size:14.5px; }
.player__hint{ font-size:12px; color: var(--text-faint); line-height:1.45; }

.player__controls{
  display:flex;
  align-items:center;
  gap:12px;
}
.player__playbtn{
  flex-shrink:0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border:none;
  background: var(--calm);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.player__playbtn svg{ margin-left: 1px; }
.player__playbtn:active{ transform: scale(0.94); }

.player__track{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.player__bar{
  width:100%;
  height:5px;
  border-radius:999px;
  background: var(--surface-2);
  overflow:hidden;
  cursor:pointer;
}
.player__bar-fill{
  width:0%;
  height:100%;
  background: var(--calm);
  border-radius:999px;
  transition: width 100ms linear;
}
.player__time{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.player__share{ width:100%; }

.player__volume{
  display:flex;
  align-items:center;
  gap:10px;
}
.player__volume-icon{ color: var(--text-faint); flex-shrink:0; }
.player__volume-slider{
  flex:1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--calm) 0%, var(--calm) 33.3%, var(--surface-2) 33.3%, var(--surface-2) 100%);
  outline:none;
}
.player__volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background: #fff;
  border: 2px solid var(--calm);
  cursor:pointer;
}
.player__volume-slider::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:50%;
  background: #fff;
  border: 2px solid var(--calm);
  cursor:pointer;
}
.player__volume-value{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  width: 40px;
  text-align:right;
  flex-shrink:0;
}

.player__loop{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.player__loop-text{
  font-size: 12.5px;
  color: var(--text-dim);
  line-height:1.4;
}
.save-row__input{
  flex:1;
  min-width:0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13.5px;
  height: 46px;
}
.save-row__input::placeholder{ color: var(--text-faint); }
.save-row .btn{ white-space:nowrap; padding-inline:18px; }

/* ===================================================================
   Section head (shared by Profiles / Sync)
   =================================================================== */
.section-head{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin: 16px 0 18px;
}
.section-head h1{ font-size:22px; font-weight:800; }
.section-head__count{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ===================================================================
   Profiles screen
   =================================================================== */
.profile-list{ width:100%; display:flex; flex-direction:column; gap:10px; }
.profile-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px;
  display:flex;
  align-items:center;
  gap:14px;
}
.profile-card__spark{ width:44px; height:44px; flex-shrink:0; }
.profile-card__body{ flex:1; min-width:0; }
.profile-card__name{ font-weight:700; font-size:14.5px; }
.profile-card__tag{ margin-right:5px; }
.profile-card__meta{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top:3px;
}
.profile-card__actions{ display:flex; gap:6px; flex-shrink:0; }

.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size: 14px;
}
.icon-btn:active{ transform: scale(0.92); }
.icon-btn--danger:active{ color: var(--signal); }

.empty{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 46px 20px;
  color: var(--text-faint);
  font-size: 13.5px;
  line-height:1.6;
}
.empty__ring{
  width:64px; height:64px;
  border-radius:50%;
  border: 2px dashed var(--line);
  margin-bottom:16px;
}

/* ===================================================================
   Sync screen
   =================================================================== */
.sync-intro{
  text-align:center;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height:1.55;
  max-width: 320px;
  margin: 0 0 20px;
}

.my-id-card{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.my-id-card__label{ font-size:11.5px; color: var(--text-faint); flex-shrink:0; }
.my-id-card__id{
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight:500;
  letter-spacing: 0.03em;
  flex:1;
}

.join-row{ width:100%; display:flex; gap:8px; margin-bottom: 26px; }
.join-row__input{
  flex:1;
  min-width:0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13.5px;
  height: 46px;
  font-family: var(--font-mono);
}
.join-row__input::placeholder{ color: var(--text-faint); font-family: var(--font-ui); }

.pool{ width:100%; }
.pool__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pool__head h2{ font-size:15px; font-weight:700; }

.switch input{ display:none; }
.switch__track{
  display:block;
  width:44px; height:26px;
  border-radius:999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  position:relative;
  cursor:pointer;
  transition: background 200ms ease;
}
.switch__thumb{
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--text-faint);
  transition: transform 200ms ease, background 200ms ease;
}
.switch input:checked + .switch__track{ background: #3E8EFF2b; border-color: var(--calm); }
.switch input:checked + .switch__track .switch__thumb{ transform: translateX(18px); background: var(--calm); }

.pool__list{ display:flex; flex-direction:column; gap:8px; }
.pool-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.pool-row__dot{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--text-faint);
  flex-shrink:0;
}
.pool-row.is-online .pool-row__dot{ background: var(--calm); box-shadow: 0 0 8px 1px var(--calm-dim); }
.pool-row__body{ flex:1; min-width:0; }
.pool-row__id{ font-family: var(--font-mono); font-size:13px; }
.pool-row__role{ font-size:11.5px; color: var(--text-faint); margin-top:2px; }
.pool-row__latency{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); white-space:nowrap; }

.pool__empty{
  font-size: 12.5px;
  color: var(--text-faint);
  text-align:center;
  padding: 18px 10px;
  line-height:1.5;
}

/* ===================================================================
   Tab bar
   =================================================================== */
.tabbar{
  position: fixed;
  left:50%;
  bottom: 0;
  transform: translateX(-50%);
  width:100%;
  max-width: 480px;
  display:flex;
  background: #0D1310E6;
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}
.tabbar__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:none;
  border:none;
  color: var(--text-faint);
  padding: 6px 4px;
  font-size: 10.5px;
  cursor:pointer;
}
.tabbar__icon{ width:22px; height:22px; }
.tabbar__item.is-active{ color: var(--text); }
.tabbar__item.is-active .tabbar__icon{ color: var(--calm); }

/* ===================================================================
   Toast
   =================================================================== */
.toast{
  position: fixed;
  left:50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 999px;
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease, transform 220ms ease;
  white-space:nowrap;
  z-index: 40;
}
.toast.is-visible{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   Mic permission modal
   =================================================================== */
.mic-modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
@media (min-width: 480px){
  .mic-modal{ align-items:center; }
}
.mic-modal__backdrop{
  position:absolute;
  inset:0;
  background: #05070690;
  backdrop-filter: blur(6px);
}
.mic-modal__card{
  position:relative;
  width:100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  animation: sheetUp 220ms ease;
}
@media (min-width: 480px){
  .mic-modal__card{ border-radius: 24px; padding: 30px 26px; }
}
@keyframes sheetUp{
  from{ transform: translateY(24px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.mic-modal__ask, .mic-modal__denied{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.mic-modal__icon{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--calm-dim);
  color: var(--calm);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.mic-modal__icon--denied{ background: var(--signal-dim); color: var(--signal); }
.mic-modal__card h2{ font-size:17px; font-weight:800; margin-bottom:8px; }
.mic-modal__card p{
  font-size: 13.5px;
  line-height:1.55;
  color: var(--text-dim);
  max-width: 320px;
  margin: 0 0 22px;
}
.mic-modal__denied .mic-modal__card p{ margin-bottom: 14px; }

.mic-modal__steps{
  width:100%;
  list-style:none;
  counter-reset: micstep;
  margin: 0 0 22px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.mic-modal__steps li{
  counter-increment: micstep;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size: 13px;
  line-height:1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px;
}
.mic-modal__steps li::before{
  content: counter(micstep);
  flex-shrink:0;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--calm-dim);
  color: var(--calm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
.mic-modal__steps li b{ color:var(--text); font-weight:700; }

.mic-modal__actions{ display:flex; gap:10px; width:100%; }
.mic-modal__actions .btn{ flex:1; }
.mic-modal__denied .mic-modal__actions .btn{ flex:none; width:100%; }

/* ===================================================================
   Utility / a11y
   =================================================================== */
:focus-visible{ outline: 2px solid var(--calm); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}