/* Мастер первого запуска (new/js/onboarding.js). Всё под .obw — страница настроек и Materialize не задеваются.
   Шаг помещается во фрейм страницы приложения 1078×658 без прокрутки (ТЗ, «Где живёт страница»). */
#ozon-onboarding[hidden] { display: none; }
.obw { box-sizing: border-box; max-width: 1040px; margin: 0 auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 16px;
    font-family: Roboto, Inter, system-ui, -apple-system, sans-serif; color: #1B1F24; -webkit-font-smoothing: antialiased; }
.obw *, .obw *::before, .obw *::after { box-sizing: border-box; }
.obw a { color: #0050E0; text-decoration: none; }
.obw a:hover { color: #003DB0; text-decoration: underline; }
.obw-hint { font-size: 13px; color: #5B6572; line-height: 1.45; }
.obw-h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; }
.obw-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #3D4752; }

.obw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.obw-head .obw-hint { font-size: 14px; }
.obw-links { display: flex; gap: 18px; font-size: 14px; }
.obw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.obw-steps li { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.obw-bar { height: 4px; border-radius: 2px; background: #D5DBE2; }
.obw-steps .done .obw-bar, .obw-steps .cur .obw-bar { background: #0050E0; }
.obw-n { font-weight: 700; color: #6B7580; margin-right: 6px; }
.obw-steps .done .obw-n, .obw-steps .cur .obw-n { color: #0050E0; }
.obw-l { color: #5B6572; }
.obw-steps .cur .obw-l { color: #1B1F24; font-weight: 600; }

.obw-two { display: flex; gap: 24px; align-items: flex-start; }
.obw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.obw-side { flex: none; width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #F6F8FA; font-size: 14px; line-height: 1.5; }
.obw-side ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #2E3742; }
.obw-side ol li { list-style: decimal; }
.obw-side-t { font-size: 15px; font-weight: 600; }
.obw-side-foot { padding-top: 10px; border-top: 1px solid #E3E7EC; }

.obw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.obw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.obw-field label { font-size: 13px; font-weight: 600; color: #2E3742; }
.obw .obw-in { height: 38px; width: 100%; margin: 0; padding: 0 10px; border: 1px solid #C9D2DD; border-radius: 8px; background: #fff;
    font: 400 14px Roboto, system-ui, sans-serif; color: #1B1F24; box-shadow: none; outline: none; }
.obw .obw-in:focus { border-color: #0050E0; box-shadow: 0 0 0 2px rgba(0, 80, 224, .15); }
.obw .obw-in-lg { height: 44px; border-radius: 10px; font-size: 15px; padding: 0 12px; }
.obw .obw-in-empty { border-color: #D93025; color: #9B1C12; background: #FFF7F6; }

.obw-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.obw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
    font: 600 15px/1 Roboto, system-ui, sans-serif; cursor: pointer; white-space: nowrap; text-transform: none; box-shadow: none; }
.obw-btn[disabled] { opacity: .6; cursor: default; }
.obw-btn-primary { background: #0050E0; color: #fff; }
.obw-btn-primary:hover:not([disabled]) { background: #003DB0; }
.obw-btn-ghost { background: #fff; color: #1B1F24; border-color: #D5DBE2; }
.obw-btn-ghost:hover { background: #F3F5F7; }

.obw-al { padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.obw-al-ok { background: #E7F6EE; color: #0E5C33; }
.obw-al-warn { background: #FFF3DC; color: #4D2B00; }
.obw-al-err { background: #FDECEA; color: #5C130B; }

.obw-opts { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.obw-opt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid #D5DBE2; border-radius: 12px; background: #fff; cursor: pointer; margin: 0; }
.obw-opt-on { border-color: #0050E0; background: #F2F6FF; box-shadow: 0 0 0 1px #0050E0 inset; }
.obw-opt-b { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.obw-opt-t { font-size: 15px; font-weight: 600; color: #1B1F24; }
.obw-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.obw-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #8A96A3; margin-top: 1px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700; font-style: normal; }
.obw-box-on { background: #0050E0; border-color: #0050E0; }
.obw-box-fixed { background: #8A96A3; border-color: #8A96A3; }
.obw-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #E6F0FF; color: #0040B8; font-size: 12px; font-weight: 600; }
.obw-sub { padding-left: 34px; margin-top: -4px; }
.obw-since { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 860px; }
.obw .obw-opt-col { flex-direction: column; gap: 4px; text-align: left; font: inherit; width: 100%; }
.obw-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 8px 14px; border-radius: 12px; background: #F6F8FA; font-size: 14px; line-height: 1.45; cursor: pointer; margin: 0; color: #1B1F24; }
.obw-switch { flex: none; width: 40px; height: 24px; border-radius: 12px; background: #B7C1CC; position: relative; margin-top: 1px; }
.obw-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.obw-switch-on { background: #0050E0; }
.obw-switch-on::after { left: 19px; }

.obw-article { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.obw-article-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: end; }
.obw-article-row .obw-hint { padding-bottom: 10px; }
.obw-samples-h { font-size: 13px; font-weight: 600; color: #2E3742; margin-top: 4px; }
.obw-sample { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 300px); gap: 10px; align-items: center; font-size: 13px; }
.obw-sample-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2E3742; }
.obw-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #F3F5F7; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.obw-sample-res { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5B6572; }
.obw-res-ok { color: #127A43; }
.obw-res-warn { color: #9A4A00; }
.obw-map { display: flex; flex-direction: column; gap: 8px; }
.obw-map-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; color: #2E3742; }
.obw-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 6px 24px; }
.obw-map-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }

.obw-final { display: flex; flex-direction: column; gap: 18px; max-width: 860px; padding-top: 18px; }
.obw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.obw-list li { display: flex; gap: 12px; align-items: center; }
.obw-mk { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.obw-mk-ok { background: #E7F6EE; color: #127A43; }
.obw-mk-wait { background: #EEF1F4; color: #5B6572; }
.obw-more { border-top: 1px solid #E3E7EC; padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.obw-more-t { font-size: 16px; font-weight: 600; }
.obw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.obw .obw-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #E3E7EC; border-radius: 12px; color: #1B1F24; }
.obw .obw-card:hover { border-color: #0050E0; text-decoration: none; }

/* Слайдер и узкий фрейм */
@media (max-width: 760px) {
    .obw-two { flex-direction: column; }
    .obw-side { width: 100%; }
    .obw-grid2, .obw-map-grid, .obw-cards, .obw-since { grid-template-columns: minmax(0, 1fr); }
    .obw-map-grid { grid-template-rows: none; grid-auto-flow: row; }
    .obw-article-row, .obw-sample { grid-template-columns: minmax(0, 1fr); }
    .obw-steps .obw-l { display: none; }
}