/* Quy tắc cho các luồng còn dùng CSS cũ (popup form, khảo sát, popup mua).
   Nằm trong @layer nên misol.css luôn thắng. Chỉ chứa quy tắc có class còn xuất hiện trong mã. */
@layer flows{
:root{
  --ink: #082e26;
  --forest: #0a3a2d;
  --cream: #f6f5ed;
  --mist: #e7eee6;
  --lime: #b6db70;
  --coral: #e6895d;
  --line: rgba(9, 55, 43, .14);
}
button,input,select{ font: inherit; }
button{ cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.back-home{ display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; padding: 0; border-radius: 15px; color: var(--forest); text-decoration: none; background: rgba(255,255,255,.82); border: 1px solid #dbe6df; box-shadow: 0 5px 14px rgba(15,54,42,.05); transition: transform .2s, background .2s, box-shadow .2s; }
.back-home svg{ width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.back-home:hover{ transform: translateY(-2px); background: white; box-shadow: 0 9px 18px rgba(15,54,42,.1); }
.experience-product-title{ color: #092f27; font-size: 15px; font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.experience-page{ width: min(1180px, calc(100% - 48px)); margin: 22px auto 0; }
.breadcrumb{ display: inline-flex; gap: 8px; color: #476459; text-decoration: none; font-size: 12px; font-weight: 700; }
.breadcrumb:hover{ color: var(--forest); }
.phone-speaker{ position: absolute; top: 12px; left: 50%; width: 64px; height: 5px; border-radius: 8px; background: #d6dfd5; transform: translateX(-50%); }
.phone-device{ display: flex; align-items: center; gap: 10px; padding: 15px 13px; border: 1px solid #dfe8dd; border-radius: 15px; background: #fff; }
.mini-lamp{ display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #376147; background: #eff6e8; }
.phone-device b,.phone-device small{ display: block; }
.phone-device b{ font-size: 13px; }
.phone-device small{ margin-top: 3px; color: #6f8379; font-size: 10px; }
.button-dark{ padding: 12px 15px; border-radius: 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.button-dark{ border: 1px solid var(--forest); color: white; background: var(--forest); }
.button-dark:hover{ background: #16523e; }
.sk02-first-screen{ display: grid; grid-template-columns: minmax(0, 430px) minmax(320px, 438px); align-items: start; justify-content: center; gap: 26px; min-height: 0; padding: 8px 0 6px; overflow: visible; position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sk02-first-screen::before{ content: none; }
.sk02-device-block{ display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 18px 10px 22px; border: 1px solid rgba(27,70,52,.1); border-radius: 26px; background: linear-gradient(180deg, #fffdf5 0%, #f4faf1 100%); box-shadow: 0 18px 42px rgba(21,62,46,.08); }
.sk02-experience-intro{ position: relative; z-index: 1; width: min(100%, 392px); padding: 0 3px; color: #113d31; }
.sk02-experience-intro p{ margin: 0 0 7px; color: #397551; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.sk02-experience-intro h1{ max-width: 350px; margin: 0; color: #082f26; font-family: "Be Vietnam Pro", sans-serif; font-size: 23px; font-weight: 900; line-height: 1.16; letter-spacing: 0; }
.sk02-experience-intro > span{ display: block; margin-top: 9px; color: #5e766a; font-size: 11px; line-height: 1.45; }
.sk02-phone-wrap{ position: relative; z-index: 1; display: flex; width: 100%; justify-content: center; }
.sk02-support{ position: relative; z-index: 10; isolation: isolate; width: 100%; max-width: 438px; padding: 18px; border: 1px solid rgba(35,82,63,.13); border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #fbfff8 100%); box-shadow: 0 18px 40px rgba(20,60,45,.08); }
.sk02-support-head{ display: flex; gap: 10px; align-items: center; }
.sk02-support-icon{ display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #efffe8; background: #0b4938; font-size: 12px; }
.sk02-support-head p,.sk02-support-head h2{ margin: 0; }
.sk02-support-head h2{ color: #123d31; font-size: 16px; line-height: 1.28; font-weight: 900; }
.sk02-video-frame{ position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; margin-top: 15px; border: 0; border-radius: 16px; background: #f7fbf4; box-shadow: 0 10px 24px rgba(8,44,34,.08); line-height: 0; }
.sk02-video-link{ position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: white; text-decoration: none; background: linear-gradient(180deg, rgba(5,30,25,.03), rgba(5,30,25,.16)), url("https://i.ytimg.com/vi/JfRLEovZb7w/hqdefault.jpg") center / cover no-repeat; }
.sk02-video-link span{ display: grid; width: 58px; height: 42px; place-items: center; border-radius: 12px; padding-left: 4px; color: white; background: #ff0033; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: 21px; transition: transform .18s ease; }
.sk02-video-link:hover span{ transform: scale(1.06); }
.sk02-phone{ width: min(100%, 392px); padding: 27px 18px 42px; position: relative; overflow: hidden; border: 6px solid #0a342a; border-radius: 35px; background: linear-gradient(180deg, #fbfcf6 0%, #eef5ed 100%); box-shadow: 0 24px 45px rgba(7,47,35,.24), inset 0 0 0 1px rgba(255,255,255,.75); user-select: none; -webkit-user-select: none; }
.sk02-phone::before{ content: none; }
.sk02-phone::after{ content: ""; position: absolute; left: 50%; bottom: 8px; width: 72px; height: 4px; border-radius: 999px; background: #aebfb3; box-shadow: 0 1px 0 rgba(255,255,255,.72); transform: translateX(-50%); }
.phone-brand{ display: inline-flex; align-items: center; gap: 6px; }
.phone-brand-logo{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.phone-app-top{ display: flex; align-items: center; justify-content: space-between; margin: 2px 3px 12px; color: #244f40; font-size: 12px; font-weight: 900; }
.phone-app-top span:first-child{ color: #0b382d; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.phone-app-top strong{ color: #0b382d; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.phone-room-preview{ position: relative; height: 164px; overflow: hidden; border: 1px solid #dbe6db; border-radius: 24px; background: linear-gradient(135deg, #cbd8cf, #edf0e6 60%, #d5e6d7); transition: background .45s ease; }
.phone-room-preview::before{ content: ""; position: absolute; inset: 0; opacity: .28; background: linear-gradient(90deg, transparent 48%, rgba(88,121,93,.26) 48.4%, transparent 48.8%), linear-gradient(0deg, transparent 28%, rgba(88,121,93,.2) 28.4%, transparent 28.8%); background-size: 58px 58px; }
.phone-room-preview::after{ content: ""; position: absolute; z-index: 8; inset: 0; opacity: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(3,22,18,.22), rgba(3,22,18,.58)); backdrop-filter: blur(1px) saturate(.82); pointer-events: none; transition: opacity .22s ease; }
.sk02-phone.is-entry-guiding .phone-room-preview::after{ opacity: 1; }
.preview-wall{ position: absolute; top: 24px; left: 22px; width: 62px; height: 66px; overflow: hidden; border: 5px solid #fbfbf1; border-radius: 4px; background: #0a3a2f url("/assets/images/misolhome_logo.webp") center / cover no-repeat; box-shadow: 0 8px 18px rgba(22,52,38,.12); transform: rotate(-4deg); transition: opacity .45s, filter .45s, background .45s; }
.preview-wall::before,.preview-wall::after{ content: none; }
.preview-table{ position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 48px; background: repeating-linear-gradient(93deg, #a87f5f 0 4px, #bb916d 4px 11px); }
.preview-lamp{ position: absolute; z-index: 3; right: 50px; bottom: 36px; width: 104px; height: 126px; filter: drop-shadow(0 5px 4px rgba(47,35,25,.16)); }
.preview-shade{ position: absolute; z-index: 2; top: 0; left: 10px; width: 82px; height: 57px; clip-path: polygon(17% 0, 83% 0, 100% 91%, 0 91%); border-radius: 45% 45% 9px 9px; background: linear-gradient(105deg, #d0c8b0, #eee7cf 55%, #c9c0a7); box-shadow: inset 0 -9px 11px rgba(97,79,49,.12); transition: background .35s, box-shadow .35s, filter .35s; }
.preview-stem{ position: absolute; z-index: 1; right: 49px; bottom: 12px; width: 7px; height: 76px; border-radius: 6px; background: linear-gradient(90deg, #4a443b, #746c5d 48%, #4a443b); }
.preview-base{ position: absolute; right: 22px; bottom: 0; width: 64px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #756c5d, #4b443b); box-shadow: inset 0 2px 2px rgba(255,255,255,.14); }
.preview-power-cord{ position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.preview-power-cord path{ fill: none; stroke: #3c4d45; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(255,255,255,.28)); }
.preview-sk02{ position: absolute; z-index: 4; right: 23px; bottom: 70px; display: grid; width: 16px; height: 16px; place-items: center; padding: 1px; border: 1px solid #d8e2d8; border-radius: 5px; background: linear-gradient(145deg, #fff, #e8eee8); box-shadow: 0 3px 7px rgba(20,48,36,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.preview-sk02 i{ display: grid; grid-template-columns: repeat(2, 2px); grid-template-rows: repeat(2, 2px); gap: 1px; width: 8px; height: 8px; place-content: center; border: 1px solid #d7dfd6; border-radius: 3px; background: #f5f7f3; }
.preview-sk02 i b{ display: block; width: 2px; height: 2px; border-radius: 50%; background: #728176; }
.preview-sk02 i b:nth-child(3){ grid-column: 1 / -1; justify-self: center; }
.preview-plug{ position: absolute; right: 2px; bottom: 2px; display: flex; gap: 1px; width: 5px; height: 4px; padding: 1px; border-radius: 2px; background: #365349; transform: rotate(-8deg); }
.preview-plug b{ display: block; width: 1px; height: 2px; border-radius: 1px; background: #b6c5b9; }
.preview-sk02 em{ position: absolute; top: 2px; right: 2px; width: 3px; height: 3px; border-radius: 50%; background: #aeb9b1; box-shadow: 0 0 0 1px rgba(111,135,120,.12); transition: background .3s, box-shadow .3s; }
.sk02-first-screen.is-on .preview-sk02 em{ background: #e25543; box-shadow: 0 0 0 1px rgba(226,85,67,.16), 0 0 6px rgba(226,85,67,.8); }
.preview-light{ position: absolute; z-index: 1; right: 0; bottom: 22px; width: 210px; height: 190px; opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,239,155,.95), rgba(255,224,131,.2) 44%, transparent 70%); filter: blur(3px); transition: opacity .45s; }
.sk02-first-screen[data-day-phase="morning"] .phone-room-preview{ background: linear-gradient(135deg, #d7ebd5, #f8f5df 58%, #c7e2d4); }
.sk02-first-screen[data-day-phase="noon"] .phone-room-preview{ background: linear-gradient(135deg, #d6edf1, #fff6ca 58%, #d5ebcf); }
.sk02-first-screen[data-day-phase="afternoon"] .phone-room-preview{ background: linear-gradient(135deg, #b7ccd2, #f4d7b9 58%, #c9d8bc); }
.sk02-first-screen[data-day-phase="night"]{ border-color: transparent; background: transparent; box-shadow: none; }
.sk02-first-screen[data-day-phase="night"] .sk02-device-block{ border-color: rgba(27,70,52,.1); background: linear-gradient(180deg, #fffdf5 0%, #eef7ef 100%); box-shadow: 0 18px 42px rgba(21,62,46,.08); }
.sk02-first-screen[data-day-phase="night"] .breadcrumb{ color: rgba(224,244,233,.72); }
.sk02-first-screen[data-day-phase="night"] .sk02-phone{ border-color: #06251f; background: linear-gradient(180deg, #dfe8dc 0%, #b8c9be 100%); box-shadow: 0 30px 58px rgba(0,13,10,.48), inset 0 0 0 1px rgba(255,255,255,.38); }
.sk02-first-screen[data-day-phase="night"] .phone-app-top{ color: #153d33; }
.sk02-first-screen[data-day-phase="night"] .phone-room-preview{ border-color: #244a43; background: linear-gradient(135deg, #071f21, #0f3030 57%, #061a19); box-shadow: inset 0 0 76px rgba(0,0,0,.68); }
.sk02-first-screen[data-day-phase="night"] .phone-room-preview::before{ opacity: .18; }
.sk02-first-screen[data-day-phase="night"] .preview-wall{ border-color: #b6c9b5; background-color: #61796f; }
.sk02-first-screen[data-day-phase="night"] .preview-table{ background: repeating-linear-gradient(93deg, #715641 0 4px, #8f6c51 4px 11px); }
.sk02-first-screen[data-day-phase="night"]:not(.is-on) .phone-room-preview::before{ opacity: .06; }
.sk02-first-screen[data-day-phase="night"]:not(.is-on) .preview-wall,.sk02-first-screen[data-day-phase="night"]:not(.is-on) .preview-lamp,.sk02-first-screen[data-day-phase="night"]:not(.is-on) .preview-power-cord,.sk02-first-screen[data-day-phase="night"]:not(.is-on) .preview-table{ opacity: .16; filter: brightness(.38) blur(.35px); }
.sk02-first-screen[data-day-phase="night"]:not(.is-on) .preview-sk02{ opacity: .34; filter: brightness(.62); }
.sk02-first-screen[data-day-phase="night"].is-on .phone-room-preview{ border-color: #7fae89; background: linear-gradient(135deg, #bfd9d0, #f6edc9 58%, #d6e8d2); box-shadow: inset 0 0 48px rgba(255,236,152,.28), 0 12px 34px rgba(255,223,112,.16); }
.sk02-first-screen.is-on .preview-wall{ border-color: #fff9ec; background-color: #f1dca9; box-shadow: 0 10px 24px rgba(255,221,130,.18); }
.sk02-first-screen.is-on .preview-light{ opacity: 1; }
.sk02-first-screen.is-on .preview-shade{ background: linear-gradient(105deg, #f4d870, #fff2b5 55%, #e4bf55); box-shadow: inset 0 -7px 10px rgba(165,112,21,.18), 0 0 24px 8px rgba(255,221,111,.42); filter: brightness(1.08); }
.phone-main-action{ position: relative; width: 100%; margin-top: 10px; color: var(--ink); text-align: left; border-radius: 18px; box-shadow: 0 10px 26px rgba(13,51,39,.07); transition: background .25s, border-color .25s, box-shadow .25s, transform .2s; }
.phone-main-action:hover{ transform: translateY(-1px); }
.phone-main-action.is-guided{ z-index: 6; border-color: #8dcf91; box-shadow: 0 0 0 5px rgba(141,207,145,.12), 0 14px 34px rgba(13,51,39,.14); animation: guided-target-pulse 1.25s ease-in-out infinite; }
.phone-main-action.is-entry-copy{ justify-content: center; min-height: 78px; padding: 16px 18px; text-align: center; background: linear-gradient(145deg, #f4fff0, #e5f9e4); }
.phone-main-action.is-entry-copy .mini-lamp{ display: none; }
.phone-main-action.is-entry-copy > span{ width: 100%; }
.phone-main-action.is-entry-copy b{ color: #0b3e31; font-size: 19px; font-weight: 900; line-height: 1.05; }
.phone-main-action.is-entry-copy small{ margin-top: 5px; color: #0b6b53; font-size: 11px; font-weight: 900; line-height: 1.25; }
.sk02-first-screen.is-on .phone-main-action{ border-color: #8dd7a6; background: linear-gradient(135deg, #e8fff0, #d2f7df); box-shadow: 0 14px 30px rgba(47,143,82,.16); }
.sk02-first-screen .phone-main-action.is-guided{ border-color: #8dcf91; box-shadow: 0 0 0 5px rgba(141,207,145,.18), 0 14px 34px rgba(13,51,39,.14); }
.sk02-first-screen.is-on .phone-main-action.is-entry-copy,.sk02-first-screen .phone-main-action.is-entry-copy{ background: linear-gradient(145deg, #f4fff0, #e5f9e4); }
.sk02-first-screen.is-on .phone-main-action .mini-lamp{ color: #0f6f3d; background: #c3f1d0; }
.phone-schedule-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid #dce8dc; border-radius: 18px; background: #ffffff; }
.phone-schedule-title{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.phone-schedule-title span,.phone-schedule-title strong{ display: block; }
.phone-schedule-title span{ color: #64776e; font-size: 10px; font-weight: 800; }
.phone-schedule-title button{ padding: 0; border: 0; color: #143d30; background: transparent; }
.phone-schedule-title strong{ color: inherit; font-size: 11px; text-align: right; }
.phone-schedule-form label{ min-width: 0; color: #5d7368; font-size: 10px; font-weight: 800; }
.phone-schedule-form label span{ display: block; margin-bottom: 4px; }
.phone-schedule-form select,.phone-schedule-form input{ width: 100%; min-width: 0; padding: 9px 7px; outline: none; border: 1px solid #cddccd; border-radius: 10px; color: var(--ink); background: #f7faf5; font-size: 11px; }
.select-control{ position: relative; display: block; }
.select-control::after{ content: ""; position: absolute; top: 50%; right: 11px; width: 6px; height: 6px; border-right: 1.5px solid #315b4b; border-bottom: 1.5px solid #315b4b; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.phone-schedule-form .select-control select{ padding-right: 29px; appearance: none; cursor: pointer; background: linear-gradient(135deg, #fbfdf9, #eef6ec); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(21,71,53,.04); transition: border-color .2s, box-shadow .2s, background .2s; }
.phone-schedule-form .select-control select:hover,.phone-schedule-form .select-control select:focus{ border-color: #91bd90; background: #fff; box-shadow: 0 0 0 3px rgba(83,156,92,.12); }
.time-picker-trigger{ display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 0; padding: 9px 8px; border: 1px solid #cddccd; border-radius: 10px; color: var(--ink); background: linear-gradient(135deg, #fbfdf9, #eef6ec); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(21,71,53,.04); font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.time-picker-trigger:hover,.time-picker-trigger:focus{ border-color: #91bd90; background: #fff; box-shadow: 0 0 0 3px rgba(83,156,92,.12); }
.time-picker-trigger.is-invalid{ border-color: #d74b32; background: #fff4f1; box-shadow: 0 0 0 3px rgba(215,75,50,.12); }
.time-picker-trigger i{ position: relative; width: 13px; height: 13px; border: 1.5px solid #416a58; border-radius: 50%; }
.time-picker-trigger i::before,.time-picker-trigger i::after{ content: ""; position: absolute; left: 50%; width: 1.5px; border-radius: 3px; background: #416a58; transform-origin: bottom; }
.time-picker-trigger i::before{ top: 2px; height: 4px; transform: translateX(-50%); }
.time-picker-trigger i::after{ top: 5px; height: 4px; transform: translateX(-50%) rotate(125deg); }
.phone-schedule-form .button-dark{ grid-column: 1 / -1; align-self: end; padding: 10px 8px; border-radius: 10px; font-size: 11px; }
.phone-more-features{ position: absolute; right: 18px; bottom: 17px; left: 18px; margin: 0; color: #74877d; text-align: center; font-size: 9px; font-weight: 700; }
.phone-schedule-modal{ position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 14px; border-radius: 26px; background: rgba(7,45,35,.48); backdrop-filter: blur(5px); }
.phone-schedule-modal[hidden]{ display: none; }
.phone-modal-card{ width: 100%; max-height: 72%; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: #fbfcf6; box-shadow: 0 20px 45px rgba(3,27,21,.32); }
.phone-modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #e0e9df; }
.phone-modal-head strong{ color: #123d31; font-size: 13px; }
.phone-modal-head button{ display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid #d8e3d7; border-radius: 50%; color: #244c3d; background: #fff; font-size: 17px; line-height: 1; }
.phone-schedule-list{ display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 12px; }
.phone-schedule-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #dfe8dd; border-radius: 15px; background: #f5faf2; }
.phone-schedule-item b,.phone-schedule-item small{ display: block; }
.phone-schedule-item b{ color: #123d31; font-size: 12px; }
.phone-schedule-item small{ margin-top: 3px; color: #66786f; font-size: 10px; }
.phone-schedule-item button{ display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #0b3e31; font-size: 16px; line-height: 1; }
.empty-schedule{ margin: 0; padding: 18px 12px; color: #66786f; text-align: center; font-size: 11px; }
.phone-toast{ position: absolute; z-index: 20; top: 54px; right: 16px; left: 16px; margin: 0; padding: 10px 12px; border: 1px solid #94d6a7; border-radius: 13px; color: #1d6a3c; background: rgba(244,255,246,.97); box-shadow: 0 12px 26px rgba(32,93,56,.16); font-size: 10px; font-weight: 800; line-height: 1.4; animation: toast-in .24s ease-out; }
.phone-time-picker-modal{ position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 14px; border-radius: 26px; background: rgba(7,45,35,.46); backdrop-filter: blur(5px); }
.phone-time-picker-modal[hidden]{ display: none; }
.phone-time-picker-card{ width: 100%; padding-bottom: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: #fbfcf6; box-shadow: 0 20px 45px rgba(3,27,21,.32); }
.phone-time-picker-card .button-dark{ width: calc(100% - 26px); margin: 8px 13px 0; padding: 11px 8px; border-radius: 11px; font-size: 11px; }
.time-wheel-caption{ margin: 12px 14px 3px; color: #718277; text-align: center; font-size: 10px; }
.time-wheel-picker{ position: relative; display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; padding: 0 18px; }
.time-wheel-picker::before{ content: ""; position: absolute; z-index: 0; top: 50%; right: 18px; left: 18px; height: 38px; border: 1px solid #9ecb9c; border-radius: 10px; background: #edf8e9; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); pointer-events: none; transform: translateY(-50%); }
.time-wheel{ position: relative; z-index: 1; height: 146px; overflow-y: auto; padding: 54px 0; scroll-snap-type: y mandatory; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent); }
.time-wheel::-webkit-scrollbar{ display: none; }
.time-wheel button{ display: block; width: 100%; height: 38px; padding: 0; border: 0; color: #64766c; background: transparent; font-family: "DM Serif Display", Georgia, serif; font-size: 20px; line-height: 38px; opacity: .34; scroll-snap-align: center; transition: color .16s, opacity .16s, transform .16s; }
.time-wheel button.is-selected{ color: #124232; font-weight: 700; opacity: 1; transform: scale(1.08); }
.time-wheel-separator{ position: relative; z-index: 1; color: #1d4b39; text-align: center; font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 700; }
.door-layout{ display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; min-height: 400px; border: 1px solid #dbe5dd; border-radius: 24px; background: #f5f6ef; }
.garage-scene{ position: relative; padding: 22px; overflow: hidden; background: linear-gradient(130deg, #d6ddcd, #e8e9dc 65%, #bfcfbd); }
.garage-scene::before{ content: ""; position: absolute; inset: 0; opacity: .32; background: linear-gradient(90deg, rgba(54,72,59,.22) 1px, transparent 1px), linear-gradient(0deg, rgba(54,72,59,.22) 1px, transparent 1px); background-size: 30px 30px; }
.garage-sign{ position: relative; z-index: 1; display: inline-block; padding: 7px 10px; color: #68766c; border: 1px solid #b6c4b7; background: rgba(255,255,255,.45); font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.garage-lamp{ position: absolute; top: 24px; right: 35px; width: 18px; height: 18px; border-radius: 50%; background: #f4d676; box-shadow: 0 0 24px 7px rgba(244,214,118,.66); }
.garage-opening{ position: absolute; right: 10%; bottom: 58px; left: 10%; height: 250px; overflow: hidden; border: 10px solid #52665a; border-bottom: 0; background: #192e28; }
.garage-interior{ position: absolute; inset: 0; display: flex; align-items: end; justify-content: space-around; padding-bottom: 24px; background: linear-gradient(150deg, #092d26, #27453a); }
.garage-interior span{ width: 47px; height: 100px; background: linear-gradient(90deg, #384e41, #1d372d); box-shadow: 14px -10px 0 #18342b; }
.garage-door{ position: absolute; inset: 0; transform: translateY(calc(-1 * var(--door-open, 0%))); background: repeating-linear-gradient(0deg, #cfb598 0 21px, #a98365 22px 25px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), inset 10px 0 19px rgba(70,50,36,.17); transition: transform .05s linear; }
.garage-floor{ position: absolute; right: -20%; bottom: 0; left: -20%; height: 62px; background: linear-gradient(155deg, #a9b2a0, #7b8a79); transform: perspective(100px) rotateX(35deg); }
.door-readout{ position: absolute; z-index: 2; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 9px; color: #f0f7eb; background: rgba(5,42,33,.8); font-size: 10px; font-weight: 700; }
.door-readout strong{ margin-left: 4px; color: #c4e787; }
.door-dot{ width: 7px; height: 7px; border-radius: 50%; background: #9dd472; box-shadow: 0 0 0 3px rgba(157,212,114,.18); }
.remote-console{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px 30px; color: #ebf6e8; background: #102f28; }
.remote-brand{ margin-bottom: 5px; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.remote-brand span{ color: #b9dc7c; font-size: 8px; letter-spacing: .15em; }
.remote-signal{ display: flex; gap: 3px; align-items: end; height: 31px; margin-bottom: 20px; }
.remote-signal i{ width: 3px; background: #a6d472; border-radius: 3px; }
.remote-signal i:nth-child(1){ height: 9px; }
.remote-signal i:nth-child(2){ height: 18px; }
.remote-signal i:nth-child(3){ height: 27px; }
.remote-hint{ min-height: 36px; margin: 0 0 18px; color: #c8d6cd; text-align: center; font-size: 11px; line-height: 1.5; }
.remote-controls{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; }
.remote-controls button{ display: grid; gap: 5px; min-height: 82px; place-content: center; padding: 5px; border: 1px solid #3a5a4f; border-radius: 13px; color: #f2f6ec; background: #1d483c; font-size: 10px; font-weight: 800; transition: transform .2s, background .2s; }
.remote-controls button:hover{ background: #316453; transform: translateY(-3px); }
.remote-controls button span{ color: #bce07f; font-size: 17px; }
.remote-console > small{ margin-top: 22px; opacity: .55; font-size: 9px; }
.door-sequence{ display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: center; margin-top: 23px; padding: 14px; border-radius: 16px; background: #eef2ea; }
.sequence-step{ display: flex; gap: 9px; align-items: center; opacity: .4; transition: opacity .3s; }
.sequence-step.is-active{ opacity: 1; }
.sequence-step b{ display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #456150; background: #d9e7d5; font-size: 10px; }
.sequence-step.is-active b{ color: #173d2d; background: #bbdf77; }
.sequence-step span,.sequence-step small{ display: block; }
.sequence-step span{ font-size: 11px; font-weight: 800; }
.sequence-step small{ margin-top: 2px; color: #738177; font-size: 9px; font-weight: 500; line-height: 1.4; }
.sequence-line{ height: 1px; background: #cbd8ca; }
.datic-first-screen{ display: grid; grid-template-columns: minmax(0, 430px) minmax(320px, 438px); align-items: start; justify-content: center; gap: 26px; margin-top: -8px; padding: 0 0 6px; }
.datic-device-block{ display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 18px 10px 22px; border: 1px solid rgba(27,70,52,.1); border-radius: 26px; background: linear-gradient(180deg, #fffdf5 0%, #f4faf1 100%); box-shadow: 0 18px 42px rgba(21,62,46,.08); }
.datic-experience-intro{ width: min(100%, 392px); }
.door-phone-wrap{ display: flex; width: 100%; justify-content: center; }
.door-phone{ position: relative; overflow: hidden; width: min(100%, 392px); padding: 27px 18px 42px; border: 6px solid #0a342a; border-radius: 35px; background: linear-gradient(180deg, #fbfcf6 0%, #e8f1e8 100%); box-shadow: 0 24px 45px rgba(7,47,35,.24), inset 0 0 0 1px rgba(255,255,255,.75); }
.door-phone::after{ content: ""; position: absolute; left: 50%; bottom: 8px; width: 72px; height: 4px; border-radius: 999px; background: #aebfb3; box-shadow: 0 1px 0 rgba(255,255,255,.72); transform: translateX(-50%); }
.door-phone-top{ display: flex; align-items: center; justify-content: space-between; margin: 2px 3px 12px; color: #244f40; }
.door-phone-top strong{ color: #0b382d; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.door-phone-top span{ color: #0b382d; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.datic-first-screen .door-layout{ display: grid; grid-template-columns: 1fr; gap: 10px; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.datic-first-screen .garage-scene{ min-height: 216px; border: 1px solid #dbe6db; border-radius: 24px; background: linear-gradient(135deg, #d8e4d6, #f4f1df 58%, #c8dcca); box-shadow: inset 0 -38px 0 rgba(16,54,43,.08); }
.datic-first-screen .garage-scene::before{ opacity: .22; background-size: 44px 44px; }
.datic-first-screen .garage-sign{ padding: 6px 9px; background: rgba(255,255,255,.72); color: #4f685e; }
.datic-first-screen .garage-lamp{ top: 24px; right: 28px; width: 16px; height: 16px; }
.datic-first-screen .garage-opening{ right: 9%; bottom: 39px; left: 9%; height: 142px; border-width: 8px; border-color: #536a5f; background: #17342b; }
.datic-first-screen .garage-floor{ height: 39px; right: 0; left: 0; transform: none; background: linear-gradient(180deg, #aeb9a8, #8fa090); }
.datic-first-screen .door-readout{ right: 18px; bottom: 14px; padding: 8px 10px; border-radius: 999px; font-size: 10px; }
.datic-first-screen .remote-console{ padding: 16px 14px 15px; border-radius: 20px; background: #0b3e31; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.datic-first-screen .remote-brand{ margin: 0 0 4px; font-size: 15px; }
.datic-first-screen .remote-signal{ height: 26px; margin-bottom: 9px; }
.datic-first-screen .remote-hint{ min-height: 17px; margin: 0 0 12px; color: #d7e7db; font-size: 10px; }
.datic-first-screen .remote-controls{ gap: 8px; }
.datic-first-screen .remote-controls button{ min-height: 58px; border-radius: 13px; background: #1b5747; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.datic-first-screen .door-sequence{ grid-template-columns: 1fr 18px 1fr 18px 1fr; gap: 0; margin: 11px 0 0; padding: 10px; border: 1px solid #dce8dc; border-radius: 18px; background: #fff; }
.datic-first-screen .sequence-step{ gap: 6px; }
.datic-first-screen .sequence-step b{ width: 21px; height: 21px; font-size: 9px; }
.datic-first-screen .sequence-step span{ font-size: 9px; line-height: 1.2; }
.datic-first-screen .sequence-step small{ display: none; }
.datic-support{ align-self: start; margin-top: 72px; }
@media (max-width: 760px){.datic-first-screen{ grid-template-columns: 1fr; gap: 18px; align-items: center; margin-top: -8px; padding: 0; }.datic-device-block{ gap: 14px; padding: 14px 8px 18px; border-radius: 22px; }.datic-experience-intro{ width: min(100%, 360px); padding: 0 5px; }.datic-experience-intro h1{ font-size: 22px; }.door-phone{ width: min(100%, 360px); padding: 24px 13px 40px; border-width: 5px; border-radius: 30px; }.datic-first-screen .garage-scene{ min-height: 178px; border-radius: 19px; }.datic-first-screen .garage-opening{ right: 8%; left: 8%; height: 114px; }.datic-first-screen .remote-console{ padding: 14px 12px; }.datic-first-screen .remote-controls button{ min-height: 54px; }.datic-first-screen .door-sequence{ grid-template-columns: 1fr 14px 1fr 14px 1fr; padding: 9px; }.datic-first-screen .sequence-step{ justify-content: center; }.datic-first-screen .sequence-step b{ display: none; }.datic-support{ width: 100%; margin-top: 0; padding: 15px; border-radius: 21px; }}
.entec-layout{ display: grid; grid-template-columns: 1.06fr .94fr; overflow: hidden; border: 1px solid #d9e6dd; border-radius: 24px; background: #f9faf6; }
.home-load-board{ padding: 27px 30px 24px; color: #dff2df; background: radial-gradient(circle at 80% 20%, #205c4d, transparent 43%), #103a31; }
.board-top{ display: flex; align-items: center; justify-content: space-between; color: #b8d1c3; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.power-value{ display: flex; gap: 9px; align-items: baseline; margin: 28px 0 17px; }
.power-value strong{ color: #eff8e8; font-family: "DM Serif Display", Georgia, serif; font-size: 61px; font-weight: 400; line-height: .8; letter-spacing: -.06em; }
.power-value span{ color: #bad1c2; font-size: 11px; }
.usage-chart{ position: relative; display: flex; align-items: end; gap: 9px; height: 141px; padding: 8px 3px 22px; border-bottom: 1px solid rgba(218,241,222,.19); }
.usage-chart > div{ display: flex; gap: 9px; align-items: end; width: 100%; height: 100%; }
.usage-chart i{ display: block; flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(#cbeb83, #63a16a); opacity: .68; transition: height .35s ease; }
.usage-chart svg{ position: absolute; top: 7px; right: 3px; bottom: 22px; left: 3px; width: calc(100% - 6px); height: calc(100% - 29px); pointer-events: none; }
.usage-chart path{ fill: none; stroke: #f2f7e9; stroke-width: 2; vector-effect: non-scaling-stroke; transition: d .35s ease; }
.usage-chart > span{ position: absolute; bottom: 5px; color: #9cb9aa; font-size: 8px; }
.usage-chart > span:nth-of-type(1){ left: 0; }
.usage-chart > span:nth-of-type(2){ left: 32%; }
.usage-chart > span:nth-of-type(3){ left: 65%; }
.usage-chart > span:nth-of-type(4){ right: 0; }
.board-total{ display: flex; justify-content: space-between; padding-top: 18px; color: #a8c4b2; font-size: 11px; }
.board-total b{ color: #d5ec9d; }
.entec-first-screen{ display: grid; grid-template-columns: minmax(0, 430px) minmax(320px, 438px); align-items: start; justify-content: center; gap: 26px; margin-top: -8px; padding: 0 0 6px; }
.entec-device-block{ display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 18px 10px 22px; border: 1px solid rgba(27,70,52,.1); border-radius: 26px; background: linear-gradient(180deg, #fffdf5 0%, #f4faf1 100%); box-shadow: 0 18px 42px rgba(21,62,46,.08); }
.entec-experience-intro{ width: min(100%, 392px); }
.entec-phone-wrap{ display: flex; width: 100%; justify-content: center; }
.entec-phone{ position: relative; overflow: hidden; width: min(100%, 392px); padding: 27px 18px 42px; border: 6px solid #0a342a; border-radius: 35px; background: linear-gradient(180deg, #fbfcf6 0%, #eaf3ea 100%); box-shadow: 0 24px 45px rgba(7,47,35,.24), inset 0 0 0 1px rgba(255,255,255,.75); }
.entec-phone::after{ content: ""; position: absolute; left: 50%; bottom: 8px; width: 72px; height: 4px; border-radius: 999px; background: #aebfb3; box-shadow: 0 1px 0 rgba(255,255,255,.72); transform: translateX(-50%); }
.entec-phone-top{ display: flex; align-items: center; justify-content: space-between; margin: 2px 3px 12px; color: #244f40; }
.entec-phone-top strong{ color: #0b382d; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.entec-phone-top span{ color: #0b382d; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.entec-first-screen .entec-layout{ display: grid; grid-template-columns: 1fr; gap: 10px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.entec-first-screen .home-load-board{ padding: 18px 18px 15px; border-radius: 24px; background: radial-gradient(circle at 82% 18%, #236b59, transparent 39%), linear-gradient(155deg, #0b3e31, #164f40); box-shadow: 0 16px 28px rgba(9,50,39,.16); }
.entec-first-screen .power-value{ margin: 20px 0 14px; }
.entec-first-screen .power-value strong{ font-size: 52px; }
.entec-first-screen .usage-chart{ height: 116px; }
.meter-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 14px; }
.meter-grid div{ padding: 10px; border: 1px solid rgba(216,241,221,.14); border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.meter-grid span,.meter-grid b{ display: block; }
.meter-grid span{ color: #b7d1c3; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.meter-grid b{ margin-top: 4px; color: #eff8e8; font-size: 15px; }
.meter-chart{ margin-top: 4px; }
.meter-chart > div{ align-items: end; gap: 3px; }
.meter-chart i{ border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #d2ec8b, #5ea36f); opacity: .76; }
.meter-board .board-top time{ color: #d8eecf; font-size: 9px; font-weight: 900; letter-spacing: 0; }
.meter-controls{ display: grid; gap: 9px; padding: 14px; border: 1px solid #dce8dc; border-radius: 20px; background: #fff; }
.tariff-card{ display: grid; gap: 7px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #f7fcf4, #eef7eb); border: 1px solid #d3e5d0; }
.tariff-card span{ color: #5c7368; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.tariff-card span small{ color: #74877d; font-size: 9px; font-weight: 700; text-transform: none; }
.tariff-card label{ display: flex; align-items: center; gap: 7px; color: #123d31; font-size: 11px; font-weight: 900; }
.tariff-card input{ width: 92px; padding: 8px 9px; outline: none; border: 1px solid #bfd7bf; border-radius: 11px; color: #113d31; background: #fff; font-size: 13px; font-weight: 900; }
.tariff-card input:focus{ border-color: #7fb87a; box-shadow: 0 0 0 3px rgba(105,174,101,.16); }
.tariff-card small{ color: #74877d; font-size: 10px; line-height: 1.35; }
.entec-support{ align-self: start; margin-top: 72px; }
@media (max-width: 760px){.entec-first-screen{ grid-template-columns: 1fr; gap: 18px; align-items: center; margin-top: -8px; padding: 0; }.entec-device-block{ gap: 14px; padding: 14px 8px 18px; border-radius: 22px; }.entec-experience-intro{ width: min(100%, 360px); padding: 0 5px; }.entec-experience-intro h1{ font-size: 22px; }.entec-phone{ width: min(100%, 360px); padding: 24px 13px 40px; border-width: 5px; border-radius: 30px; }.entec-first-screen .home-load-board{ padding: 15px; border-radius: 20px; }.entec-first-screen .power-value strong{ font-size: 46px; }.entec-first-screen .usage-chart{ height: 96px; }.meter-grid{ gap: 7px; }.meter-grid div{ padding: 9px; }.meter-controls{ padding: 12px; }.tariff-card label{ flex-wrap: wrap; }.tariff-card span small{ display: inline; }.entec-support{ width: 100%; margin-top: 0; padding: 15px; border-radius: 21px; }}
@media (max-width: 760px){.experience-page{ width: min(calc(100% - 28px), 560px); }.back-home{ width: 40px; height: 40px; padding: 0; border-radius: 14px; }.back-home svg{ width: 20px; height: 20px; }.experience-product-title{ font-size: 13px; }.door-layout,.entec-layout{ grid-template-columns: 1fr; border-radius: 18px; }.garage-scene{ min-height: 316px; }.garage-opening{ right: 7%; left: 7%; height: 208px; }.remote-console{ padding: 27px 20px; }.door-sequence{ grid-template-columns: 1fr; gap: 11px; }.sequence-line{ width: 1px; height: 17px; margin-left: 13px; }.home-load-board{ padding: 24px; }.power-value strong{ font-size: 52px; }}
@media (max-width: 760px){.sk02-first-screen{ margin-top: -8px; }.sk02-first-screen{ grid-template-columns: 1fr; gap: 18px; align-items: center; min-height: 0; padding: 0; border-radius: 0; }.sk02-first-screen::before{ right: -220px; bottom: -240px; opacity: .42; }.sk02-device-block{ gap: 14px; padding: 14px 8px 18px; border-radius: 22px; }.sk02-experience-intro{ width: min(100%, 360px); padding: 0 5px; }.sk02-experience-intro h1{ font-size: 22px; }.sk02-phone-wrap{ order: 0; width: 100%; }.sk02-support{ width: 100%; padding: 15px; border-radius: 21px; }.sk02-support-head h2{ font-size: 14px; }.sk02-phone{ width: min(100%, 360px); padding: 24px 13px 40px; border-width: 5px; border-radius: 30px; }.phone-room-preview{ height: 142px; border-radius: 19px; }.phone-main-action.is-entry-copy{ min-height: 74px; padding: 14px 16px; }.phone-main-action.is-entry-copy b{ font-size: 18px; }.preview-lamp{ right: 31px; bottom: 31px; transform: scale(.82); transform-origin: right bottom; }.preview-wall{ top: 18px; left: 17px; width: 50px; height: 54px; }.phone-schedule-form{ grid-template-columns: 1fr 1fr; }.phone-schedule-title{ grid-column: 1 / -1; }.phone-schedule-form .button-dark{ grid-column: 1 / -1; width: 100%; }}
.experience-product-title{
  min-width: 0;
  margin-left: auto;
  color: #15483d;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: right;
}
@media (max-width: 760px){.back-home{
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }.experience-product-title{
    max-width: 112px;
    font-size: 0.66rem;
  }}
.washer-phone-column{ display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.washer-unit{ display: flex; flex-direction: column; gap: 12px; width: min(100%, 392px); }
.washer-unit__body{ position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, #dfe3e0, #c9cfc9); box-shadow: inset 0 2px 6px rgba(255,255,255,.4), inset 0 -10px 18px rgba(20,30,25,.12), 0 18px 36px rgba(10,30,22,.14); }
.washer-led{ position: absolute; z-index: 2; top: 10px; right: 10px; width: 58px; padding: 6px; border-radius: 9px; background: #3a4147; box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 4px 10px rgba(10,30,22,.25); --led-idle: #22c55e; --led-wash: #3f8cff; --led-done: #22c55e; }
.washer-led__grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.washer-led__grid i{ display: block; aspect-ratio: 1; border-radius: 2px; background: #20262a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); transition: background .3s ease, box-shadow .3s ease; }
.washer-led:not(.is-active):not(.is-done) .washer-led__grid i:nth-child(2){ background: var(--led-idle); box-shadow: 0 0 6px 1px var(--led-idle); }
.washer-led.is-active .washer-led__grid i{ background: var(--led-wash); box-shadow: 0 0 6px 1px var(--led-wash); animation: washer-led-wave 1.4s ease-in-out infinite; animation-delay: var(--led-delay, 0s); }
.washer-led.is-done .washer-led__grid i{ background: var(--led-done); box-shadow: 0 0 6px 1px var(--led-done); animation: washer-led-blink .9s ease-in-out infinite; }
@keyframes washer-led-wave{ 0%, 100%{ opacity: .35; filter: brightness(.8); } 50%{ opacity: 1; filter: brightness(1.35); } }
@keyframes washer-led-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: .15; } }
@keyframes washer-collect-pulse{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 50%{ box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce){ .washer-led__grid i{ animation: none !important; } }
.washer-unit__door{ position: relative; flex: 0 0 auto; width: 158px; height: 158px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef3f0, #b9c2bd 60%, #7c8781 100%); box-shadow: 0 6px 14px rgba(10,30,22,.28), inset 0 0 0 6px rgba(255,255,255,.5); }
.washer-unit__glass{ position: absolute; inset: 14px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.55), rgba(120,150,165,.35) 55%, rgba(30,45,55,.55) 100%); box-shadow: inset 0 0 18px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25); }
.washer-unit__drum{ position: absolute; inset: 6px; border-radius: 50%; will-change: transform; }
.washer-unit__clothes{ position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 14px; }
.washer-cloth{ width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.25); }
.washer-cloth:nth-child(2n){ transform: rotate(18deg); }
.washer-cloth:nth-child(3n){ transform: rotate(-14deg); }
.washer-cloth:nth-child(5n){ transform: rotate(9deg); }
.washer-unit__side{ display: flex; flex: 1; flex-direction: column; gap: 7px; }
.washer-unit__side span{ height: 4px; border-radius: 2px; background: rgba(10,30,22,.18); }
.washer-unit__side span:nth-child(2){ width: 80%; }
.washer-unit__side span:nth-child(3){ width: 60%; }
.washer-unit__side span:nth-child(4){ width: 40%; }
.washer-unit__status{ min-height: 16px; margin: 0; color: #123d31; font-size: 12px; font-weight: 800; text-align: center; }
.washer-unit__actions{ display: flex; gap: 8px; }
.washer-unit__actions button{ flex: 1; padding: 10px 8px; border: 1px solid #cfe0cb; border-radius: 9px; background: #f0f8ec; color: #35613b; font-size: 11px; font-weight: 800; }
.washer-unit__actions button[data-washer-primary]{ border-color: #123d31; color: #fff; background: #123d31; }
.washer-unit__actions button[data-washer-primary].is-attention{ animation: washer-collect-pulse 1.4s ease-in-out infinite; }
.washer-unit__actions button:disabled{ opacity: .45; cursor: not-allowed; animation: none; }
.washer-phone{ position: relative; }
.washer-phone .phone-app-top{ margin-bottom: 10px; }
.washer-toast{ display: none; gap: 10px; align-items: flex-start; position: absolute; z-index: 8; top: 62px; left: 18px; right: 18px; padding: 12px 13px; border: 1px solid #dbe8d9; border-radius: 14px; background: #fbfffa; box-shadow: 0 14px 28px rgba(10,40,30,.18); opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
.washer-toast.is-shown{ display: flex; }
.washer-toast.is-shown.is-visible{ opacity: 1; transform: translateY(0); }
.washer-toast__dot{ display: block; flex: 0 0 auto; margin-top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #2f6fe0; box-shadow: 0 0 0 4px rgba(47,111,224,.16); }
.washer-toast strong{ display: block; margin-bottom: 2px; color: #397551; font-size: 10px; font-weight: 800; }
.washer-toast p{ margin: 0; color: #123d31; font-size: 12px; line-height: 1.4; }
.washer-history{ padding: 18px 16px; border: 1px solid #dfe8dd; border-radius: 16px; background: #fff; }
.washer-history__title{ margin: 0 0 14px; color: #123d31; font-size: 14px; font-weight: 800; }
.washer-history__list{ display: flex; flex-direction: column; gap: 12px; }
.washer-history__item{ display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 14px 16px; border-left: 4px solid var(--event-color, #cfe0cb); border-radius: 12px; background: color-mix(in srgb, var(--event-color, #cfe0cb) 16%, #fff); font-size: 14px; line-height: 1.35; }
.washer-history__item strong{ color: #123d31; font-size: 12px; font-weight: 800; }
.washer-history__item span{ color: #274238; font-size: 14px; }
.washer-history__empty{ margin: 0; color: #8a9a91; font-size: 13px; }
:root{
  --experience-paper: #f6f4ed;
  --experience-surface: #fffdf8;
  --experience-mist: #e8f1e7;
  --experience-ink: #0c3a31;
  --experience-muted: #5d756c;
  --experience-green: #087563;
  --experience-deep: #053f35;
  --experience-lime: #bce96f;
  --experience-line: rgba(11, 67, 55, 0.14);
  --experience-shadow: 0 16px 36px rgba(9, 52, 43, 0.09);
}
.back-home{
  width: 44px;
  height: 44px;
  border: 1px solid var(--experience-line);
  border-radius: 8px;
  background: var(--experience-surface);
  box-shadow: none;
}
.experience-product-title{
  min-width: 0;
  margin-left: auto;
  color: #285d50;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}
.experience-page{
  width: min(calc(100% - 40px), 980px);
  margin: 14px auto 38px;
}
.sk02-first-screen,.datic-first-screen,.entec-first-screen{
  grid-template-columns: minmax(0, 430px) minmax(300px, 390px);
  gap: 20px;
  margin: 0;
  padding: 0;
}
.sk02-device-block,.datic-device-block,.entec-device-block{
  gap: 14px;
  padding: 18px 12px 20px;
  border: 1px solid var(--experience-line);
  border-radius: 8px;
  background: var(--experience-surface);
  box-shadow: var(--experience-shadow);
}
.sk02-experience-intro,.datic-experience-intro,.entec-experience-intro{
  width: min(100%, 392px);
  padding-inline: 3px;
}
.sk02-experience-intro p{
  margin-bottom: 6px;
  color: #4e8069;
  font-size: 0.64rem;
  font-weight: 700;
}
.sk02-experience-intro h1,.datic-experience-intro h1,.entec-experience-intro h1{
  max-width: 100%;
  color: var(--experience-ink);
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1.2;
}
.sk02-experience-intro > span{
  margin-top: 7px;
  color: var(--experience-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
.sk02-support,.datic-support,.entec-support{
  align-self: start;
  width: 100%;
  max-width: 390px;
  margin-top: 64px;
  padding: 18px;
  border: 1px solid var(--experience-line);
  border-radius: 8px;
  background: var(--experience-surface);
  box-shadow: var(--experience-shadow);
}
.sk02-support-head h2{
  color: var(--experience-ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}
.sk02-support-icon{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--experience-deep);
}
.sk02-video-frame{
  margin-top: 14px;
  border-radius: 8px;
}
.sk02-phone,.door-phone,.entec-phone{
  box-shadow: 0 20px 42px rgba(7, 47, 35, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.phone-main-action,.phone-schedule-form,.datic-first-screen .garage-scene,.datic-first-screen .remote-console,.datic-first-screen .door-sequence,.entec-first-screen .home-load-board{
  border-radius: 8px;
}
.remote-controls button,.tariff-card,.phone-schedule-form :where(input, select, button),.button-dark{
  min-height: 44px;
  border-radius: 8px;
}
@media (max-width: 760px){.back-home{
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
  }.experience-product-title{
    grid-column: 2;
    align-self: start;
    max-width: none;
    margin: 0;
    overflow: hidden;
    font-size: 0.64rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }.experience-page{
    width: min(calc(100% - 24px), 560px);
    margin-top: 10px;
  }.sk02-first-screen,.datic-first-screen,.entec-first-screen{
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
  }.sk02-device-block,.datic-device-block,.entec-device-block{
    gap: 12px;
    padding: 14px 8px 16px;
    border-radius: 8px;
  }.sk02-experience-intro,.datic-experience-intro,.entec-experience-intro{
    width: min(100%, 360px);
    padding-inline: 5px;
  }.sk02-experience-intro h1,.datic-experience-intro h1,.entec-experience-intro h1{
    font-size: 1.25rem;
  }.sk02-phone,.door-phone,.entec-phone{
    width: min(100%, 360px);
  }.sk02-support,.datic-support,.entec-support{
    max-width: none;
    margin-top: 0;
    padding: 15px;
    border-radius: 8px;
  }.sk02-video-frame{
    border-radius: 8px;
  }}
@media (max-width: 365px){.experience-page{
    width: calc(100% - 20px);
  }.sk02-experience-intro h1,.datic-experience-intro h1,.entec-experience-intro h1{
    font-size: 1.16rem;
  }}
.experience-product-title{
  grid-column: 2;
  margin: 0;
  color: var(--experience-ink);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  white-space: normal;
}
.experience-page{
  margin-top: 10px;
}
.sk02-experience-intro p,.datic-experience-intro p,.entec-experience-intro p{
  color: #407763;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: none;
}
@media (max-width: 760px){.back-home{
    grid-row: auto;
    width: 42px;
    height: 42px;
  }.experience-product-title{
    grid-column: 2;
    align-self: center;
    overflow: visible;
    font-size: 0.9rem;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }.experience-page{
    width: min(calc(100% - 24px), 560px);
    margin-top: 8px;
  }.sk02-first-screen,.datic-first-screen,.entec-first-screen{
    gap: 12px;
  }.sk02-device-block,.datic-device-block,.entec-device-block{
    padding-top: 12px;
  }.sk02-experience-intro,.datic-experience-intro,.entec-experience-intro{
    padding-inline: 6px;
  }.sk02-experience-intro h1,.datic-experience-intro h1,.entec-experience-intro h1{
    font-size: 1.2rem;
    line-height: 1.18;
  }.sk02-experience-intro > span{
    font-size: 0.7rem;
    line-height: 1.45;
  }}

}