.ui { --ok: #16794f; --ok-bg: #e2f5ea; --wait: #9a5b07; --wait-bg: #fdf0d9; position: relative; background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -50px rgba(40, 30, 120, .5), 0 0 0 1px rgba(18, 17, 23, .06); font: 500 13px/1.35 var(--f-body); color: var(--ink); overflow: hidden; text-align: left; isolation: isolate; }
.ui b { font-weight: 700; }
.ui small { display: block; color: var(--mute); font-size: 11.5px; font-weight: 500; }
.ui p { margin: 0; }
.ui svg { display: block; }
.ui-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ui-top b { font: 700 13px/1 var(--f-display); }
.ui-logo { display: inline-flex; gap: 1px; }
.ui-logo i { width: 9px; height: 11px; border: 2.5px solid var(--violet); border-bottom: 0; border-radius: 9px 9px 0 0; }
.ui-crumb { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-crumb::before { content: "/"; margin-right: 8px; color: var(--lav); }
.ui-search { margin-left: auto; width: 110px; height: 24px; border-radius: 8px; background: var(--paper); flex: none; }
.ui-me { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); font: 700 10px/26px var(--f-display); text-align: center; }
.ui-body { display: grid; grid-template-columns: 44px 1fr; min-height: 320px; }
.ui-side { border-right: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; background: #fbfbfe; }
.ui-side i { width: 18px; height: 18px; border-radius: 6px; background: var(--paper-2); }
.ui-side i.on { background: var(--violet); }
.ui-main { position: relative; padding: 16px 16px 82px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: opacity .4s ease; }
.ui.is-fade .ui-main { opacity: 0; }

.ui-chip { display: inline-block; padding: 3px 9px; border-radius: 99px; font: 700 10.5px/1.3 var(--f-body); white-space: nowrap; background: var(--violet-soft); color: var(--violet-ink); }
.ui-chip.c-ok { background: var(--ok-bg); color: var(--ok); }
.ui-chip.c-wait { background: var(--wait-bg); color: var(--wait); }
.ui-chip.c-mute { background: var(--paper); color: var(--mute); }
.ui-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); font: 700 10.5px/30px var(--f-display); text-align: center; }
.ui-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--violet-soft); display: grid; place-items: center; }
.ui-ic svg { width: 16px; height: 16px; color: var(--violet); }
.ui-btn { display: inline-flex; align-self: flex-start; justify-content: center; padding: 7px 12px; border-radius: 9px; background: var(--violet); color: #fff; font: 700 11.5px/1.2 var(--f-body); white-space: nowrap; }
.ui-btn.is-done { background: var(--ok-bg); color: var(--ok); }
.ui-label { display: block; color: var(--mute); font-size: 11.5px; }
.ui-panel { background: #f7f6fd; border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ui-kpi { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ui-kpi b { font: 800 28px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ui-kpi span { color: var(--mute); font-size: 12px; }
.ui-kpi.sm b { font-size: 20px; }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-kpis .ui-kpi { background: #f7f6fd; border-radius: 12px; padding: 10px 12px; flex-direction: column; gap: 4px; }
.ui-bar { height: 8px; border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.ui-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #8b87ff); transform-origin: left; transform: scaleX(var(--w, 1)); }
.ui-bar.is-2 i { background: var(--lav); }
.ui-bar.is-warn i { background: linear-gradient(90deg, #e59b2b, #f2c063); }

.ui-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #f7f6fd; min-width: 0; }
.ui-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.ui-list b, .ui-docs b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-list.sm li { padding: 8px 10px; }
.ck { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lav); display: grid; place-items: center; background: var(--violet); }
.ck svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.ui-list li.is-wait .ck { background: none; }
.sign { position: absolute; right: 12px; top: 50%; width: 92px; height: 28px; margin-top: -14px; fill: none; stroke: var(--violet-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 0; opacity: .85; }
.ui-toast { position: absolute; right: 14px; bottom: 14px; left: auto; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); background: #fff; border-radius: 14px; padding: 10px 16px 10px 10px; box-shadow: 0 20px 40px -18px rgba(30, 20, 90, .45), 0 0 0 1px var(--line); z-index: 2; }
.ui-toast > span:last-child { min-width: 0; }

.ui-person { display: flex; align-items: center; gap: 12px; }
.ui-person > div { flex: 1; min-width: 0; }
.ui-person > div b { display: block; font: 700 15px/1.2 var(--f-display); }
.ui-ring { position: relative; flex: none; width: 54px; height: 54px; }
.ui-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.ui-ring circle { stroke: var(--paper-2); }
.ui-ring .rg { stroke: var(--violet); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 23.9; }
.ui-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--f-display); }

.ui-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; }
.ui-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ui-docs li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; min-width: 0; }
.ui-docs li > span:nth-child(2) { flex: 1; min-width: 0; }
.ui-docs li.on { background: var(--violet-soft); }
.ui-doc { position: relative; flex: none; width: 22px; height: 27px; border-radius: 4px 9px 4px 4px; background: var(--paper-2); }
.ui-doc::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 2px; background: #fff; box-shadow: 0 5px 0 #fff, 0 10px 0 #fff; border-radius: 2px; opacity: .9; }
.ui-docs li.on .ui-doc, .ui-list .ui-doc { background: var(--lav); }
.ui-avs { display: flex; gap: 4px; flex-wrap: wrap; }
.ui-avs .ui-av { width: 28px; height: 28px; line-height: 28px; font-size: 9.5px; }
.ui-avs .ui-av.a-ok::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #23a46d; box-shadow: 0 0 0 2px #f7f6fd; }
.ui-avs .ui-av.is-miss { background: none; box-shadow: inset 0 0 0 1.5px dashed var(--lav); color: var(--mute); outline: 1.5px dashed var(--lav); outline-offset: -1.5px; }

.ui-shifts { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 4px; font-size: 11px; }
.sh-d { text-align: center; color: var(--mute); font-weight: 600; }
.sh-n { color: var(--ink-2); font-weight: 600; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-c { position: relative; height: 28px; border-radius: 7px; background: #f4f3fb; }
.sh-c i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; font: 700 11px/1 var(--f-display); font-style: normal; }
.sh-c .s-R { background: var(--violet-soft); color: var(--violet-ink); }
.sh-c .s-O { background: var(--lav); color: #3e3a9e; }
.sh-c .s-N { background: var(--night-2); color: #fff; }
.sh-c.is-off { background: repeating-linear-gradient(135deg, #f4f3fb 0 4px, #ebe9f6 4px 8px); }
.sh-c.is-gap { box-shadow: inset 0 0 0 1.5px #f2c063; background: var(--wait-bg); }
.sh-c.is-gap em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--wait); opacity: 0; }
.ui-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-in { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; background: #f7f6fd; min-width: 0; }

.ui-req { background: #f7f6fd; border-radius: 14px; padding: 14px; }
.ui-req-h { display: flex; align-items: center; gap: 10px; }
.ui-req-h > span:nth-child(2) { flex: 1; min-width: 0; }
.ui-req-h b { font: 700 14px/1.25 var(--f-display); }
.ui-sw { display: inline-grid; justify-items: start; }
.ui-sw > * { grid-area: 1 / 1; }
.ui-sw > *:first-child { opacity: 0; }
.ui-path { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ui-path li { position: relative; padding-top: 22px; }
.ui-path li i { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); z-index: 1; }
.ui-path li + li::before, .ui-path li + li::after { content: ""; position: absolute; top: 6px; left: calc(-100% + 18px); width: calc(100% - 22px); height: 2px; border-radius: 2px; background: var(--paper-2); }
.ui-path li + li::before { background: var(--violet); z-index: 1; transform-origin: left; }
.ui-path b { display: block; font-size: 12px; }
.ui-left { display: flex; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.ui-left span { color: var(--mute); font-size: 12px; margin-right: auto; }
.ui-left b { font: 800 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ui-left small { display: inline; }

.ui-duo { display: grid; grid-template-columns: 1fr 176px; gap: 14px; align-items: start; }
.ui-poll { display: grid; grid-template-columns: 50px 1fr 38px; gap: 8px; align-items: center; font-size: 12px; }
.ui-poll b { text-align: right; font-variant-numeric: tabular-nums; }
.ui-phone { position: relative; border-radius: 28px; background: #f4f3fb; border: 6px solid #17161f; padding: 28px 8px 12px; display: grid; gap: 8px; margin-bottom: -60px; }
.ph-notch { position: absolute; top: 7px; left: 50%; width: 54px; height: 12px; margin-left: -27px; border-radius: 9px; background: #17161f; }
.ph-msg { background: #fff; border-radius: 12px; padding: 9px 10px; display: grid; gap: 3px; }
.ph-msg b { font-size: 12px; line-height: 1.25; }
.ph-msg p { font-size: 11px; color: var(--ink-2); }
.ph-msg.is-urgent { box-shadow: inset 0 0 0 1.5px #f1c2c2; }
.ph-msg.is-urgent small { color: #c43d3d; font-weight: 700; }
.ph-msg .ui-sw { margin-top: 5px; display: grid; }
.ph-msg .ui-btn { width: 100%; }

.ui-gantt { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 7px 10px; align-items: center; }
.g-days { grid-column: 2; display: flex; justify-content: space-around; color: var(--mute); font-size: 10.5px; font-weight: 600; }
.g-days i { font-style: normal; }
.g-n { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.g-row { position: relative; height: 24px; border-radius: 7px; background: #f7f6fd; }
.g-row i { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); border-radius: 7px; transform-origin: left; }
.g-row .g-a { background: linear-gradient(90deg, var(--violet), #8b87ff); }
.g-row .g-b { background: #a9a6ff; }
.g-row .g-c { background: var(--lav); }
.g-today { position: absolute; top: 18px; bottom: -4px; left: calc(72px + (100% - 72px) * .52); width: 0; border-left: 2px dashed var(--violet-ink); opacity: .55; }
.ui-stock { flex: 1; display: grid; gap: 6px; font-size: 12px; }
.ui-stock > span { color: var(--mute); }
.ui-stock > span b { color: var(--ink); }

.ui-conf { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: center; }
.ui-pergola { width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ui-pergola .pg-ground { stroke: var(--paper-2); stroke-width: 3; }
.ui-pergola .pg-frame { stroke: #2e2d36; stroke-width: 5; stroke-dasharray: 900; stroke-dashoffset: 0; }
.ui-pergola .pg-roof { stroke: var(--violet); stroke-width: 3; stroke-dasharray: 400; stroke-dashoffset: 0; }
.ui-opts { list-style: none; margin: 0; padding: 0; display: grid; }
.ui-opts li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ui-opts li > span:first-child { color: var(--mute); }
.ui-opts .ui-sw { justify-items: end; text-align: right; }
.ui-opts .ui-price { border: 0; padding-top: 12px; }
.ui-price b { font: 800 20px/1 var(--f-display); color: var(--violet); font-variant-numeric: tabular-nums; }

.js .ui:not(.is-play) .a-in, .js .ui:not(.is-play) li.is-new { opacity: 0; }
.js .ui:not(.is-play) .ui-list li:not(.is-wait) .ck { background: none; }
.js .ui:not(.is-play) .ck svg { stroke-dashoffset: 16; }
.js .ui:not(.is-play) .ui-bar i, .js .ui:not(.is-play) .g-row i, .js .ui:not(.is-play) .ui-path li + li::before { transform: scaleX(0); }
.js .ui:not(.is-play) .ui-ring .rg { stroke-dashoffset: 119.4; }
.js .ui:not(.is-play) .sign { stroke-dashoffset: 320; }
.js .ui:not(.is-play) .sh-c i, .js .ui:not(.is-play) .ui-avs .a-ok::after { opacity: 0; }
.js .ui:not(.is-play) .ui-pergola .pg-frame { stroke-dashoffset: 900; }
.js .ui:not(.is-play) .ui-pergola .pg-roof { stroke-dashoffset: 400; }
.js .ui:not(.is-play) .ui-path li:not(.on) i { background: #fff; box-shadow: inset 0 0 0 2px var(--lav); }
.js .ui:not(.is-play) .ui-sw > *:first-child { opacity: 1; }
.js .ui:not(.is-play) .ui-sw > *:last-child { opacity: 0; }
html:not(.js) .ui-sw > *:first-child { opacity: 0; }

@keyframes ui-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes ui-out { to { opacity: 0; } }
@keyframes ui-ck { from { background: transparent; } to { background: var(--violet); } }
@keyframes ui-draw { from { stroke-dashoffset: var(--len, 16); } to { stroke-dashoffset: 0; } }
@keyframes ui-grow { from { transform: scaleX(0); } }
@keyframes ui-ring { from { stroke-dashoffset: 119.4; } }
@keyframes ui-new { from { opacity: 0; background: var(--lav); } 40% { opacity: 1; background: var(--lav); } }
@keyframes ui-press { 0%, 100% { background: var(--violet); } 40% { background: var(--violet-ink); box-shadow: 0 0 0 5px var(--violet-soft); } }
@keyframes ui-dot { from { background: #fff; box-shadow: inset 0 0 0 2px var(--lav); } }
@keyframes ui-col { from { stroke: #d9d7e8; } }
@keyframes ui-gap { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }

.ui.is-play .a-in { animation: ui-in .7s var(--ease) var(--d, 0s) both; }
.ui.is-play li.is-new { animation: ui-new 1.6s ease var(--d, 0s) both; }
.ui.is-play .ui-list li:not(.is-wait) .ck { animation: ui-ck .3s ease var(--d, 0s) both; }
.ui.is-play .ui-list li:not(.is-wait) .ck svg { animation: ui-draw .35s ease calc(var(--d, 0s) + .15s) both; }
.ui.is-play .sign { --len: 320; animation: ui-draw 1s ease-in-out calc(var(--d, 0s) - 1.1s) both; }
.ui.is-play .ui-bar i, .ui.is-play .g-row i { animation: ui-grow 1.4s var(--ease) var(--d, 0s) both; }
.ui.is-play .ui-ring .rg { animation: ui-ring 1.6s var(--ease) .3s both; }
.ui.is-play .sh-c i { animation: ui-in .45s ease var(--d, 0s) both; }
.ui.is-play .sh-c.is-gap em { animation: ui-gap 2.3s ease .3s both; }
.ui.is-play .ui-avs .a-ok::after { animation: ui-in .4s ease var(--d, 0s) both; }
.ui.is-play .a-press { animation: ui-press .7s ease var(--d, 0s) both; }
.ui.is-play .ui-sw > *:first-child { opacity: 1; animation: ui-out .3s ease var(--d, 0s) both; }
.ui.is-play .ui-sw > *:last-child { animation: ui-in .5s ease var(--d, 0s) both; }
.ui.is-play .ui-path li:not(.on) i { animation: ui-dot .01s linear var(--d, 0s) backwards; }
.ui.is-play .ui-path li + li::before { animation: ui-grow .7s var(--ease) calc(var(--d, 0s) - .7s) both; }
.ui.is-play .ui-pergola .pg-frame { --len: 900; animation: ui-draw 1.2s ease .1s both, ui-col .5s ease 1s backwards; }
.ui.is-play .ui-pergola .pg-roof { --len: 400; animation: ui-draw .9s ease .7s both; }

@media (prefers-reduced-motion: reduce) {
    .ui *, .ui *::before, .ui *::after { animation-delay: 0s !important; animation-duration: .01ms !important; }
}

.svc-visual.is-ui { padding: 1.5rem 0 3rem 2.5rem; }
.svc-ui { position: relative; }
.svc-ui::before { content: ""; position: absolute; inset: -1.5rem -1.2rem -3rem 3rem; border-radius: 40px; background: linear-gradient(150deg, #dcd9ff 0%, #ecebfb 75%); z-index: -1; }
.svc-visual.is-ui .svc-mascot { left: -18px; bottom: -6px; z-index: 3; }

.sys { display: grid; grid-template-columns: minmax(270px, .78fr) 1.45fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sys-list { display: flex; flex-direction: column; position: sticky; top: 110px; }
.sys-group { margin: 1.6rem 0 .3rem; font: 600 .72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sys-group:first-child { margin-top: .2rem; }
.sys-tab { position: relative; display: grid; grid-template-columns: 2.1rem 1fr; gap: .6rem; align-items: start; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .85rem 0 .9rem; color: var(--ink); }
.st-no { font: 600 .8rem/1.75 var(--f-display); color: var(--mute); transition: color .3s; font-variant-numeric: tabular-nums; }
.st-tx b { display: block; font: 700 1.06rem/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink-2); transition: color .3s; }
.st-tx small { display: block; margin-top: .15rem; font-size: .9rem; line-height: 1.4; color: var(--mute); }
.sys-tab:hover b, .sys-tab[aria-selected="true"] b, .sys-tab[aria-selected="true"] .st-no { color: var(--violet); }
.st-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--violet); transform-origin: left; transform: scaleX(0); }
.sys-tab[aria-selected="true"] .st-bar { transform: scaleX(1); }
.sys.is-auto .sys-tab[aria-selected="true"] .st-bar { animation: ui-grow var(--sysdur, 8s) linear both; }
.sys-stage { padding: clamp(1rem, 3vw, 2.4rem); border-radius: 36px; background: linear-gradient(150deg, #e1defe 0%, #eeedfb 70%); }
.sys-panel { animation: ui-in .6s ease both; }
.sys-cap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.4rem; }
.sys-cap p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.sys-more { flex: none; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: 99px; background: #fff; color: var(--violet); font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .3s, color .3s; }
.sys-more svg { width: 16px; height: 16px; }
.sys-more:hover { background: var(--violet); color: #fff; }

.sysc-sec .section-head p { color: #cfcbe0; }
.sysc { position: relative; aspect-ratio: 1000 / 420; margin-top: 1rem; }
.sysc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sysc-wires path { fill: none; stroke: rgba(207, 204, 255, .28); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; animation: sysc-flow 1.4s linear infinite; }
.sysc-dot { fill: #cfccff; }
.sysc-dot.is-out { fill: #8b87ff; }
.sysc.is-off .sysc-wires path, .sysc.is-off .sc-pulse { animation-play-state: paused; }
@keyframes sysc-flow { to { stroke-dashoffset: -20; } }
.sysc-col { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; width: 23%; }
.sysc-col.is-in { left: 0; }
.sysc-col.is-out { right: 0; }
.sysc-col li { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-50%); display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .55rem; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--night-line); color: #fff; font-size: .92rem; line-height: 1.25; }
.sysc-col b { font-weight: 600; }
.sysc-col small { display: block; color: #a9a6bd; font-size: .78rem; }
.sc-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(96, 92, 229, .38); display: grid; place-items: center; }
.sc-ic svg { width: 17px; height: 17px; color: #cfccff; }
.sysc-core { position: absolute; left: 50%; width: clamp(132px, 12%, 170px); top: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 32% 25%, #8a86ff, var(--violet) 58%, #3c38b0); display: grid; place-content: center; justify-items: center; gap: .2rem; text-align: center; color: #fff; padding: 1rem; }
.sysc-core b { font: 700 1rem/1.1 var(--f-display); }
.sysc-core small { font-size: .72rem; line-height: 1.25; color: #dedcff; max-width: 9em; }
.sc-logo { display: inline-flex; gap: 2px; margin-bottom: .35rem; }
.sc-logo i { width: 14px; height: 17px; border: 3.5px solid #fff; border-bottom: 0; border-radius: 14px 14px 0 0; }
.sc-pulse { position: absolute; inset: 0; border-radius: 50%; animation: sysc-pulse 3s ease-out infinite; }
.sc-pulse + .sc-pulse { animation-delay: 1.5s; }
@keyframes sysc-pulse { from { box-shadow: 0 0 0 0 rgba(139, 135, 255, .45); } to { box-shadow: 0 0 0 34px rgba(139, 135, 255, 0); } }

.sflow { --w1: 170px; --cg: 1.4rem; list-style: none; margin: 0; padding: 0; position: relative; }
.sflow::before, .sflow::after { content: ""; position: absolute; left: calc(var(--w1) + var(--cg) + 24px); top: 26px; bottom: 60px; width: 2px; border-radius: 2px; background: var(--paper-2); }
.sflow::after { background: linear-gradient(var(--violet), #8b87ff); transform-origin: top; transform: scaleY(var(--p, 1)); }
.js .sflow::after { transform: scaleY(var(--p, 0)); }
.sf-step { display: grid; grid-template-columns: var(--w1) 50px 1fr; column-gap: var(--cg); align-items: start; padding-bottom: 2.6rem; }
.sf-step:last-child { padding-bottom: 0; }
.sf-when { padding-top: 1rem; text-align: right; font: 600 .74rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.sf-dot { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--f-display); background: var(--violet); color: #fff; box-shadow: 0 0 0 6px var(--violet-soft); transition: background .5s, color .5s, box-shadow .5s; }
.js .sf-step:not(.is-on) .sf-dot { background: var(--paper); color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--lav); }
.sf-body h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: .65rem 0 .5rem; }
.sf-body p { margin: 0 0 1rem; color: var(--ink-2); }
.sf-note { display: inline-flex; align-items: center; gap: .65rem; padding: .5rem 1rem .5rem .5rem; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -20px rgba(40, 30, 120, .45), 0 0 0 1px var(--line); font: 600 .9rem/1.3 var(--f-body); transition: opacity .7s, filter .7s; }
.js .sf-step:not(.is-on) .sf-note { opacity: .3; filter: blur(2px); }
.sf-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--violet-soft); display: grid; place-items: center; }
.sf-ic svg { width: 16px; height: 16px; color: var(--violet); }

@media (max-width: 1100px) {
    .sys { grid-template-columns: 1fr; }
    .sys-list { position: relative; top: 0; flex-direction: row; overflow-x: auto; gap: .5rem; padding: 0 var(--gutter) .4rem; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
    .sys-list::-webkit-scrollbar { display: none; }
    .sys-group, .st-no, .st-tx small, .st-bar { display: none; }
    .sys-tab { flex: none; display: block; padding: .6rem 1.05rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; }
    .st-tx b { font-size: .95rem; white-space: nowrap; }
    .sys-tab[aria-selected="true"] { background: var(--violet); border-color: var(--violet); }
    .sys-tab[aria-selected="true"] b { color: #fff; }
}
@media (max-width: 900px) {
    .sysc { aspect-ratio: auto; display: grid; gap: 1.6rem; justify-items: center; }
    .sysc-wires { display: none; }
    .sysc-col { position: static; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .sysc-col li { position: static; transform: none; }
    .sysc-core { position: relative; left: auto; top: auto; transform: none; width: 150px; }
    .sysc-core::before, .sysc-core::after { content: ""; position: absolute; left: 50%; height: 1.6rem; border-left: 2px dashed rgba(207, 204, 255, .35); }
    .sysc-core::before { bottom: 100%; }
    .sysc-core::after { top: 100%; }
    .svc-visual.is-ui { padding: 1rem 0 2.5rem 1.2rem; }
}
@media (max-width: 760px) {
    .sflow { --w1: 0px; --cg: 1rem; }
    .sflow::before, .sflow::after { left: 24px; }
    .sf-step { grid-template-columns: 50px 1fr; }
    .sf-when { grid-column: 2; grid-row: 1; padding-top: .2rem; text-align: left; }
    .sf-dot { grid-column: 1; grid-row: 1 / span 2; }
    .sf-body { grid-column: 2; }
    .sf-body h3 { margin-top: .4rem; }
    .sys-cap { flex-direction: column; align-items: flex-start; }
    .ui { font-size: 12px; }
    .ui-side, .ui-search { display: none; }
    .ui-body { grid-template-columns: 1fr; min-height: 0; }
    .ui-main { padding: 12px 12px 76px; }
    .ui-cols, .ui-conf { grid-template-columns: 1fr; }
    .ui-duo { grid-template-columns: 1fr 150px; }
    .ui-kpis .ui-kpi { padding: 8px; }
    .ui-kpi.sm b { font-size: 17px; }
    .ui-pergola { max-width: 220px; justify-self: center; }
    .ui-shifts { grid-template-columns: 42px repeat(7, 1fr); gap: 3px; }
    .sysc-col { gap: .5rem; }
    .sysc-col li { font-size: .84rem; padding: .5rem .6rem .5rem .5rem; gap: .55rem; }
    .sc-ic { width: 28px; height: 28px; border-radius: 8px; }
    .ui-me { margin-left: auto; }
}
.sys-sec .section-head, .sysc-sec .section-head, .sflow-sec .section-head { max-width: none; }
.sys-sec .section-head h2, .sysc-sec .section-head h2, .sflow-sec .section-head h2 { max-width: 780px; }
.sys-sec .section-head p, .sysc-sec .section-head p { max-width: none; margin-top: 1.1rem; }
.sysc-sec:has(+ .is-night) { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.systiles-sec .section-head { max-width: none; }
.systiles-sec .section-head h2 { max-width: 780px; }
.systiles-sec .section-head p { margin-top: 1.1rem; }
.systiles-g { margin: 1.6rem 0 .8rem; font: 600 .74rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.systiles-g:first-of-type { margin-top: 0; }
.systiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .systiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .systiles { grid-template-columns: 1fr; } .systiles a { padding: .85rem .9rem; } }
.systiles a { height: 100%; display: grid; grid-template-columns: 48px 1fr 34px; gap: 1rem; align-items: center; padding: 1.05rem 1.1rem; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: background .3s, box-shadow .3s; }
.systiles a:hover { box-shadow: 0 0 0 1.5px var(--violet), 0 24px 40px -30px rgba(60, 50, 160, .5); }
.stl-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--violet-soft); display: grid; place-items: center; transition: background .3s; }
.stl-ic svg { width: 22px; height: 22px; color: var(--violet); transition: color .3s; }
.systiles a:hover .stl-ic { background: var(--violet); }
.systiles a:hover .stl-ic svg { color: #fff; }
.stl-tx b { display: block; font: 700 1.05rem/1.25 var(--f-display); letter-spacing: -.01em; }
.stl-tx > span { display: block; margin-top: .2rem; font-size: .92rem; line-height: 1.4; color: var(--mute); }
.stl-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); transition: background .3s; }
.stl-go svg { width: 15px; height: 15px; color: var(--violet); transition: color .3s; }
.systiles a:hover .stl-go { background: var(--violet); }
.systiles a:hover .stl-go svg { color: #fff; }
.systiles .is-custom a { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lav); }

.how-ui { align-self: center; padding: 1.5rem 0 2rem 1.5rem; }
.how-ui.svc-ui::before { inset: 0 2rem 0 0; }
.how-ui .ui { margin: 0 0 0 1rem; }
.sf-step { padding-bottom: 1.5rem; }
.sf-body h3 { margin: .55rem 0 .3rem; }
.sf-body p { margin-bottom: .7rem; }
.sflow::before, .sflow::after { bottom: 40px; }
@media (min-width: 1101px) {
    .sflow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; }
    .sflow::before, .sflow::after { left: 25px; right: calc(20% - 1.3rem); top: 25px; bottom: auto; width: auto; height: 2px; }
    .sflow::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
    .js .sflow::after { transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease); }
    .sf-step { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; }
    .sf-when { order: 2; padding: 1.1rem 0 0; text-align: left; }
    .sf-dot { order: 1; }
    .sf-body { order: 3; }
    .sf-body h3 { font-size: 1.2rem; margin: .45rem 0 .4rem; }
    .sf-body p { font-size: .95rem; line-height: 1.55; }
    .sf-note { font-size: .82rem; align-items: flex-start; }
}
.stl-tx { min-width: 0; }
.stl-tx b, .stl-tx > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.systiles .is-custom .stl-go { background: var(--violet-soft); }
@media (max-width: 680px) { .stl-tx b, .stl-tx > span { white-space: normal; } }
.sysc { aspect-ratio: 1000 / 280; margin-top: .5rem; }
.sysc-col li { padding: .42rem .8rem .42rem .45rem; font-size: .88rem; }
.sysc-col .sc-ic { width: 30px; height: 30px; border-radius: 9px; }
.sysc-core { width: clamp(118px, 10.5%, 150px); }
.sysc-core small { display: none; }
@media (max-width: 900px) { .sysc { aspect-ratio: auto; } }
.sysc-dot.is-out { fill: var(--neon, #c6ff3d); }
.systiles .is-custom .stl-ic { background: var(--neon, #c6ff3d); }
.systiles .is-custom .stl-ic svg { color: var(--ink); }
.sys2-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
.sys2-tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .5rem; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); font: 600 .92rem/1.2 var(--f-body); transition: background .25s, color .25s, box-shadow .25s; }
.sys2-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--violet-soft); display: grid; place-items: center; transition: background .25s; }
.sys2-ic svg { width: 15px; height: 15px; color: var(--violet); transition: color .25s; }
.sys2-tab:hover { box-shadow: 0 0 0 1.5px var(--lav); }
.sys2-tab[aria-selected="true"] { background: var(--violet); color: #fff; box-shadow: 0 12px 24px -16px rgba(96,92,229,.8); }
.sys2-tab[aria-selected="true"] .sys2-ic { background: var(--neon, #c6ff3d); }
.sys2-tab[aria-selected="true"] .sys2-ic svg { color: var(--ink); }
.sys2-tab .st-bar { left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.6); }
.sys2 .sys2-tab[aria-selected="true"] .st-bar { transform: scaleX(1); }
.sys2.is-auto .sys2-tab[aria-selected="true"] .st-bar { animation: ui-grow var(--sysdur, 8s) linear both; }
.sys2-stage { border-radius: 32px; background: linear-gradient(150deg, #e1defe 0%, #eeedfb 70%); padding: clamp(1.2rem, 3vw, 2.2rem); }
.sys2-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; animation: ui-in .5s ease both; }
.sys2-text h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: .5rem; }
.sys2-text p { margin: 0 0 1rem; color: var(--ink-2); }
.sys2-text ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.sys2-text li { display: flex; gap: .6rem; align-items: center; font-weight: 600; font-size: .95rem; }
.sys2-text li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23605ce5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-9'/></svg>") center/12px no-repeat; }
@media (max-width: 1000px) {
    .sys2-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 1rem; padding: 0 var(--gutter) .3rem; scrollbar-width: none; }
    .sys2-tabs::-webkit-scrollbar { display: none; }
    .sys2-tab { flex: none; }
    .sys2-panel { grid-template-columns: 1fr; }
    .sys2-ui { order: -1; }
}
@media (min-width: 1001px) {
    .sys2-tabs { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
    .sys2-tab { flex: 1 1 auto; justify-content: center; padding: .45rem .8rem .45rem .45rem; font-size: .88rem; white-space: nowrap; }
    .sys2-ic { width: 26px; height: 26px; }
}