/* fourme — стиль по пресс-киту: тёплый чёрный, кровавый бордо с зерном,
   белые заголовки капслоком, пыльно-розовый для второстепенного. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0f0d0d;        /* тёплый чёрный */
  --card:#181414;
  --line:#2e2525;
  --text:#f4efee;      /* белый текст */
  --dim:#c39d97;       /* пыльно-розовый из пресс-кита (контраст на карточке ≈ 7:1) */
  --blood:#5c1418;     /* бордо обложки */
  --blood2:#8a2228;
  --red:#d23c44;       /* REC, перегруз */
  --track:#3a2f2e;
  --ok:#eadbd8;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:500 16px/1.45 "Montserrat",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:560px;margin:0 auto;padding:16px 16px 128px}
h2{margin:0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text)}
a{color:var(--text);text-decoration-color:var(--dim);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* шапка: бордо с зерном, как обложка */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 85% 10%, var(--blood2) 0%, var(--blood) 38%, #1a0a0b 72%, var(--bg) 100%);
  padding:calc(env(safe-area-inset-top) + 22px) 16px 22px}
.hero::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.brand{display:flex;flex-direction:column;gap:6px}
.logo{font-size:32px;font-weight:500;line-height:1.1;letter-spacing:.01em;color:#fff}
.tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#f0d9d5}

.meter{height:8px;background:rgba(255,255,255,.14);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .05s}

/* карточки */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 16px;margin-bottom:12px}
.card > h2,.card-head{margin-bottom:14px}
.card-head{display:flex;align-items:center;justify-content:space-between}
.text{margin:10px 0 16px;font-size:16px}
.hint{color:var(--dim);font-size:15px;line-height:1.4;margin:8px 0}
.empty{color:var(--dim);font-size:15px;margin:12px 0}
.lbl{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}

/* поля */
.field{display:block;margin:4px 0 10px}
select,input[type=text]{width:100%;margin-top:8px;padding:13px 14px;font:500 17px "Montserrat",system-ui,sans-serif;
  color:var(--text);background:#0c0a0a;border:1px solid var(--line);border-radius:6px;-webkit-appearance:none;appearance:none}
input[type=text]::placeholder{color:#8f7a76}
select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select:disabled{opacity:.5}
select:focus,input[type=text]:focus{border-color:var(--dim);outline:none}

/* слайдеры */
.slider{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:2px;margin:16px 0 4px}
.slider output{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.slider input{grid-column:1 / -1}
input[type=range]{--p:50%;width:100%;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--text) 0 var(--p),var(--track) var(--p) 100%)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--track)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--text)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;
  background:var(--text);border:5px solid var(--blood2);box-shadow:0 1px 4px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--text);border:5px solid var(--blood2)}

/* переключатели */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:6px 0;font-size:16px;font-weight:600}
.toggle small{display:block;font-size:14px;font-weight:500;color:var(--dim)}
.switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:54px;height:32px;margin:0;border-radius:16px;
  background:var(--track);border:1px solid #4a3d3b;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#a8908c;transition:transform .15s,background .15s}
.switch:checked{background:var(--blood2);border-color:var(--blood2)}
.switch:checked::after{transform:translateX(22px);background:#fff}

/* сегменты */
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:2px 0 4px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0}
.seg span{display:block;text-align:center;padding:13px 6px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);background:#0c0a0a}
.seg label + label span{border-left:1px solid var(--line)}
.seg input:checked + span{background:var(--text);color:var(--bg)}
.seg input:focus-visible + span{outline:2px solid var(--text);outline-offset:-4px}

/* кнопки */
.btn,.chips button,.track button{font:700 15px "Montserrat",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);background:transparent;border:1px solid #5a4846;border-radius:6px;padding:12px 14px;min-height:50px;cursor:pointer}
button:active{filter:brightness(1.25)}
button:disabled{opacity:.4}
.btn-light{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-big{width:100%;min-height:58px;font-size:16px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chips button{padding:12px 6px}

/* записи */
ul{list-style:none;margin:0;padding:0}
.track{border-top:1px solid var(--line);padding:16px 0}
.track:first-child{border-top:0;padding-top:6px}
.track input[type=text]{margin:0;font-weight:600}
.track .btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.track .btns button{width:100%}
.track button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.track .del{display:block;margin:10px 0 0 auto;min-height:44px;padding:8px 4px;border:0;background:none;
  color:var(--dim);font-size:13px;text-decoration:underline;text-underline-offset:4px}
audio{width:100%;height:44px;margin-top:10px}
details summary{color:var(--dim);font-size:15px;margin-top:10px;cursor:pointer}
.track .hint{margin-top:10px}

/* сообщения */
.note{margin:0 0 12px;padding:12px 14px;border-radius:6px;font-size:15px;font-weight:600}
.note-red{background:var(--red);color:#fff}
.note-warn{background:#3b2a12;color:#ffdb9a;border:1px solid #6b4c1c}
.danger{color:#ff8a8f!important}

/* нижняя панель */
#transport{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:rgba(15,13,13,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.btn-rec{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:528px;margin:0 auto;min-height:62px;
  font-size:18px;letter-spacing:.16em;background:var(--blood2);border-color:var(--blood2);color:#fff}
.btn-rec .dot{width:14px;height:14px;border-radius:50%;background:#fff}

/* экран записи */
#recScreen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 24px);
  background:radial-gradient(90% 70% at 50% 40%, #3a0d10 0%, #160607 55%, #050404 100%);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#recScreen::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
#recScreen > *{position:relative;z-index:1}
.rs-top{text-align:center;color:var(--dim);font-size:15px;font-weight:600}
#rsTitle{display:block;color:#fff;font-size:22px;font-weight:600;margin-bottom:8px}
#rsMid{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:18px}
#rsBig{font-size:104px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.02em}
.meter.big{width:100%;height:12px}
#rsInfo{color:#e6cfcb;font-size:16px;font-weight:600;margin:0;min-height:22px;text-align:center}
#rsStop{position:relative;overflow:hidden;width:100%;max-width:520px;min-height:104px;border-radius:8px;
  font:700 17px "Montserrat",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,0,0,.35);border:2px solid #fff;color:#fff;touch-action:none}
#rsStop .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blood2)}
#rsStop.holding .fill{width:100%;transition:width 1s linear}
#rsStop .rs-lbl{position:relative}
.err{color:#ffb4b8!important;font-weight:600}
.fb{background:#3b2a12;border:1px solid #6b4c1c;border-radius:6px;padding:10px 12px;color:#ffdb9a!important;font-weight:600}
.fb a{color:#fff}
.track [data-a=open]{width:100%;margin-top:6px}
.note-inline{color:#ffdb9a!important}
#outIos .lbl,#outPick{margin-top:14px}
#outIos .btn-big{margin:6px 0}
#refreshDev{width:100%;margin-top:6px}
.btn-wide{width:100%;margin-top:6px}
.hint .em{color:var(--text);font-weight:600}
.sent{color:#9fe0b0!important;font-weight:600}
#warn{white-space:pre-line;cursor:pointer}
.note-update{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1f2a1f;border:1px solid #3d5a3d;color:#d6f5d6}
.note-update .btn{min-height:44px;padding:8px 14px}
.wire{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:#0c0a0a}
.wire p{margin:0 0 8px;font-size:15px;line-height:1.45;color:var(--dim)}
.wire p:last-child{margin:0}
.wire b,.wire-mini b{color:var(--text)}
.wire-mini{margin:12px 0 4px}
.wire-mini summary{color:var(--text);font-size:15px;font-weight:600;margin:0;min-height:44px;display:flex;align-items:center}
.wire-mini p{margin:6px 0 10px;font-size:15px;line-height:1.45;color:var(--dim)}
[hidden]{display:none!important}
/* тексты только для своего типа телефона */
html:not([data-os="ios"]) .os-ios,html[data-os="ios"] .os-android{display:none!important}