/* DOSTA v6 — стили модулей (обе темы через переменные site.css) */

/* циферблат цикла (суперлайк №28: крупнее, светлее, в нашем стиле) */
.dialw { position: relative; aspect-ratio: 1; touch-action: none; }
.dial { width: 100%; height: 100%; overflow: visible; cursor: grab; }
.dial .face { fill: none; }
.light .dial .face { fill: rgba(255,255,255,.35); stroke: rgba(255,255,255,.9); stroke-width: 1; }
.dark .dial .face { fill: rgba(255,255,255,.02); stroke: rgba(255,255,255,.08); }
.dial .tk line { stroke: var(--fg); stroke-opacity: .16; stroke-width: 2; stroke-linecap: round; transition: stroke-opacity .25s; }
.dial .tk line.on { stroke-opacity: .85; }
.dial .lb text { font: 500 12px var(--mono); letter-spacing: .06em; fill: var(--fg); fill-opacity: .4; transition: fill-opacity .3s; }
.dial .lb text.on { fill-opacity: 1; }
.dial .nd { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.dial .tip { fill: var(--red); }
.dialw .mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-48%); text-align: center; pointer-events: none; }
.dialw .num { font-weight: 300; font-size: clamp(76px, 10vw, 150px); line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.dialw .cap { margin-top: 14px; color: var(--fg3); }
.dialw .cap b { color: var(--fg); font-weight: 500; }

/* линейка этапов (суперлайк №4) со слайдером */
.ru { position: relative; height: 170px; touch-action: none; cursor: ew-resize; user-select: none; }
.ru .scale { position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-top: 1px solid var(--line); }
.ru { padding-top: 6px; }
.ru .scale i { position: absolute; top: 0; width: 1px; height: 7px; background: var(--fg); opacity: .3; }
.ru .scale i.b { height: 12px; opacity: .6; }
.ru .scale i span { position: absolute; top: 18px; left: 0; white-space: nowrap; color: var(--fg3); }
.ru .scale i:last-child span { left: auto; right: 0; }
.ru .fill { position: absolute; left: 0; top: 33px; height: 3px; border-radius: 2px; background: var(--fg); width: 0; }
.ru .hd { position: absolute; top: 0; width: 0; z-index: 2; }
.ru .hd span { position: absolute; left: 0; top: -6px; transform: translateX(-50%); white-space: nowrap; font-weight: 500; color: #0E1116; background: #C6FF3D; padding: 5px 10px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(198,255,61,.25); }
.ru .hd i { position: absolute; left: -13px; top: 21px; width: 26px; height: 26px; border-radius: 50%; background: #C6FF3D; box-shadow: 0 0 0 1.5px #0E1116, 0 0 0 8px rgba(198,255,61,.3), 0 0 24px 6px rgba(198,255,61,.45); cursor: grab; }
.dark .ru .hd i { box-shadow: 0 0 0 1.5px #05070A, 0 0 0 8px rgba(198,255,61,.22), 0 0 30px 8px rgba(198,255,61,.35); }
.ru .st { position: absolute; left: 0; right: 0; top: 78px; }
.ru .sd { position: absolute; top: 0; }
.ru .sd.lo { top: 44px; }
.ru .sd b { display: block; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--fg); margin-bottom: 8px; transition: background .3s, box-shadow .3s; }
.ru .sd.done b { background: var(--fg); }
.ru .sd.now b { background: var(--fg); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--fg); animation: pulse 1.4s var(--io) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 9px var(--fg); } }
.ru .sd b { transition: background .3s, transform .4s var(--io); }
.ru .sd.done b, .ru .sd.now b { transform: scale(1.15); }
.ru .sd > span { white-space: nowrap; color: var(--fg3); }
.ru .sd.now > span, .ru .sd.done > span { color: var(--fg); }
.ru .sd em { font-style: normal; opacity: .5; }
.ru .sd:last-child { transform: translateX(-100%); text-align: right; }
.ru .sd:last-child b { margin-left: auto; }

/* карточка этапа */
.stg { display: grid; gap: 16px; align-content: start; }
.stg .kv { display: grid; gap: 6px; }
.stg .kv p { font-size: 17px; line-height: 1.4; }
.stg .yours { color: var(--fg); }
.stg .yours::first-letter { color: #7DB300; }

/* окно заказа из стекла (суперлайк №34 без айфона) */
.ow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ow .cd { border-radius: 24px; padding: 16px 18px; color: #fff; background: linear-gradient(160deg, rgba(120,132,148,.5), rgba(40,48,60,.42) 60%, rgba(90,100,114,.46)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -20px 30px -20px rgba(255,255,255,.2); transition: opacity .4s; }
.ow .c1, .ow .c2, .ow .c4 { grid-column: 1 / -1; }
.ow .hdr { display: flex; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.ow .dim { color: rgba(255,255,255,.55); }
.ow .big { display: flex; align-items: flex-start; gap: 10px; }
.ow .big .n { font-weight: 300; font-size: 84px; line-height: .86; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ow .big .of { font-size: 22px; line-height: 1.05; color: rgba(255,255,255,.7); padding-top: 6px; }
.ow .steps { margin-top: 12px; font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
.ow .steps .s { color: rgba(255,255,255,.3); filter: blur(1.6px); min-height: 1.25em; }
.ow .steps .s.on { color: #fff; filter: none; }
.ow .steps .s span { color: #FF8A3D; }
.ow .row { display: flex; gap: 14px; align-items: center; }
.ow .row img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; }
.ow .t { font-size: 19px; letter-spacing: -.015em; }
.ow .sm { margin-top: 4px; text-transform: none; }
.ow .ok { color: #fff; }
.ow .v { font-size: 36px; letter-spacing: -.04em; line-height: 1; }
.ow .bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 14px 0 8px; overflow: hidden; }
.ow .bar i { display: block; height: 100%; background: #fff; transition: width .2s; }
.ow .rt { display: flex; justify-content: space-between; font-size: 18px; letter-spacing: -.015em; }
.ow .line { position: relative; height: 12px; margin: 12px 0 6px; }
.ow .line::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; border-top: 1.5px dashed rgba(255,255,255,.35); }
.ow .line i { position: absolute; left: 0; top: 5px; height: 1.5px; background: #fff; }
.ow .line b { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 3px; background: #FF8A3D; }
.ow .c4.off { opacity: .45; }
/* светлая: окно заказа в светлом стекле, встроено в страницу */
.light .ow .cd { color: var(--ink); background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.42) 60%, rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -16px 30px -18px rgba(255,255,255,.7), 0 16px 40px -26px rgba(30,40,55,.35); }
.light .ow .hdr { color: rgba(14,17,22,.55); }
.light .ow .dim, .light .ow .big .of { color: rgba(14,17,22,.45); }
.light .ow .steps .s { color: rgba(14,17,22,.22); }
.light .ow .steps .s.on, .light .ow .ok { color: var(--ink); }
.light .ow .steps .s span { color: var(--ink); }
.light .ow .bar { background: rgba(14,17,22,.1); }
.light .ow .bar i, .light .ow .line i { background: var(--ink); }
.light .ow .line::before { border-color: rgba(14,17,22,.25); }
.light .ow .line b { background: #C6FF3D; box-shadow: 0 0 0 1.2px var(--ink); border-radius: 50%; }
.dark .ow .line b { background: #C6FF3D; border-radius: 50%; }
.dark .ow .steps .s span { color: #C6FF3D; }

/* чек-лист TODAY (суперлайк №26) */
.cks { font-family: var(--mono); font-size: clamp(15px, 1.5vw, 21px); letter-spacing: .02em; line-height: 1.5; }
.ck { display: grid; grid-template-columns: 7.2em 3.2em 1fr; gap: .6em; padding: .28em 0; color: var(--fg3); transition: color .3s; }
.ck .dt { color: var(--fg2); }
.ck.done { color: var(--fg3); }
.ck.now { color: var(--fg); }
.ck.now .dt { color: var(--red); }
.ck.tg { color: var(--fg); margin-top: .8em; }
.ck.tg:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }

/* код заказа (суперлайк №35) */
.code { font-family: var(--mono); font-size: clamp(14px, 1.45vw, 20px); line-height: 1.75; white-space: pre; overflow-x: auto; color: var(--fg); }
.code .c { color: var(--fg2); }
.code .i { padding-left: 2ch; }
.code .s { color: var(--fg); opacity: .78; }
.code .num { color: var(--lime); border-bottom: 1.5px solid var(--lime); cursor: ew-resize; padding: 0 .1em; touch-action: none; user-select: none; }
.code .num.drag { background: rgba(198,255,61,.12); }
.code .bars { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 1.2ch; }
.code .bars i { width: 3px; height: 16px; background: rgba(255,255,255,.18); }
.code .bars i.on { background: var(--lime); }

/* знак-переключатель (суперлайк №38, правка 21.10): плотный знак, свет внутри стекла */
.pt { position: relative; aspect-ratio: 1; max-width: 600px; margin: 0 auto; user-select: none; }
.pt svg { width: 100%; height: 100%; overflow: visible; }
.pt .f { cursor: pointer; }
.pt .f .ed { stroke: #fff; stroke-width: .5; transition: stroke .6s, stroke-width .6s; }
.light .pt .f .ed { filter: drop-shadow(0 .4px .6px rgba(30,40,55,.25)); }
.pt .f:hover .ed { stroke-width: .9; }
.pt .f.on .ed { stroke: #A6DD00; stroke-width: .9; }
.dark .pt .f .ed { stroke: rgba(255,255,255,.3); }
.dark .pt .f.on .ed { stroke: #C6FF3D; }
.pt .lbs { position: absolute; inset: 0; pointer-events: none; }
.pt .lb { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: -.01em; padding: 8px 10px; color: var(--fg); opacity: .7; transition: opacity .4s; white-space: nowrap; }
.pt .lb.on { opacity: 1; font-weight: 500; }
.whoc .ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.whoc .ex span { padding: 7px 12px; border-radius: 999px; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.whoc .go2 { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* техпакет (суперлайки №19, №20) */
.tp { position: relative; }
.tp svg { width: 100%; height: auto; overflow: visible; }
.tp .dr { fill: none; stroke: var(--fg); stroke-width: 1.1; stroke-linejoin: round; }
.dark .tp .dr { stroke: #fff; stroke-width: 1; }
.tp .dr .dim { stroke: var(--fg); stroke-width: .8; }
.tp .ld polyline { stroke: var(--fg); stroke-width: .8; opacity: .55; }
.dark .tp .ld polyline { stroke: var(--red); opacity: .9; }
.tp .ld circle { fill: var(--fg); }
.dark .tp .ld circle { fill: var(--red); }
.tp .dt { font: 500 13px var(--mono); fill: var(--fg); text-anchor: middle; letter-spacing: .05em; }
.tp .cl { position: absolute; inset: 0; pointer-events: none; }
.tp .cn { position: absolute; transform: translateY(-50%); display: flex; gap: 10px; font-size: 13.5px; line-height: 1.3; width: 22%; padding: 4px 0; }
.tp .cn.l { flex-direction: row-reverse; text-align: right; }
.tp .cn.r { text-align: left; }
.tp .cn .n { color: var(--fg3); }
.dark .tp .cn .n { color: var(--red); }
.tp .cn b { font-weight: 500; }

/* рентген */
.xr { position: relative; overflow: hidden; border-radius: 24px; }
.xr img { width: 100%; display: block; }
.xr .xx { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.xr .ln { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #C6FF3D; box-shadow: 0 0 14px 3px rgba(198,255,61,.75), 0 0 46px 8px rgba(198,255,61,.3); }
.xr .tag { position: absolute; left: 18px; top: 16px; color: #fff; mix-blend-mode: difference; }

/* кольцо (суперлайк №6) */
.rg { position: relative; height: clamp(360px, 46vw, 620px); perspective: 1400px; perspective-origin: 50% 40%; overflow: hidden; touch-action: pan-y; cursor: grab; }
.rg-in { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.rg .cd { position: absolute; left: 0; top: 0; backface-visibility: hidden; overflow: hidden; border-radius: 4px; background: #222; padding: 0; }
.rg .cd img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rg .cd b { position: absolute; left: 10px; bottom: 9px; right: 10px; text-align: left; color: #fff; font-size: 10px; text-shadow: 0 0 6px rgba(0,0,0,.6); }

/* карта мира */
.wm { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wm::-webkit-scrollbar { display: none; }
.wm canvas { cursor: crosshair; }
.cl96 { columns: 6 150px; column-gap: 24px; }
.cl96 button { display: block; padding: 3px 0; color: var(--fg3); text-align: left; transition: color .2s; font-size: 11px; }
.cl96 button:hover, .cl96 button.on { color: var(--fg); }

/* кейсы */
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.case .card { grid-column: span 5; border-radius: 32px; padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 22px; }
.case .mos { grid-column: span 7; position: relative; min-height: 420px; }
.case.rev .card { order: 2; }
.case .card .t { font-weight: 500; font-size: clamp(30px, 3.2vw, 50px); line-height: 1; letter-spacing: -.045em; }
.case .card p { font-size: 17px; line-height: 1.45; color: var(--fg); }
.case .fx { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: auto; }
.case .fx div { display: grid; gap: 4px; }
.case .fx span:first-child { color: var(--fg3); font-size: 14px; }
.case .fx span:last-child { font-size: 17px; }
.mos .bt img { width: 100%; height: 100%; object-fit: cover; }

/* соль: 30 дней, 5 прототипов (кейс NUANU) */
.salt { display: flex; align-items: center; gap: 14px; }
.salt .pr { display: flex; gap: 8px; }
.salt .pr i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--fg); display: flex; align-items: center; justify-content: center; font: 500 10px var(--mono); font-style: normal; transition: all .4s; }
.salt .pr i.x { opacity: .3; text-decoration: line-through; }
.salt .pr i.win { background: var(--lime); box-shadow: inset 0 0 0 1.2px var(--fg), 0 0 0 5px rgba(198,255,61,.35); }
.salt .dd { font-variant-numeric: tabular-nums; }
/* 300 наборов — каждый отмечен */
.sets { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.sets i { aspect-ratio: 1; border-radius: 1.5px; background: var(--line); transition: background .2s; }
.sets i.on { background: var(--fg); }

@media (max-width: 900px) {
  .case .card, .case .mos { grid-column: 1 / -1; }
  .case.rev .card { order: 0; }
  .case .mos { min-height: 0; }
  .ru .sd > span { display: none; }
  .ru .sd.now > span { display: block; }
  .tp .cl { position: static; display: grid; gap: 10px; margin-top: 12px; }
  .tp .cn { position: static; transform: none; max-width: none; }
  .ow .big .n { font-size: 64px; }
}