/* /platform/web-app — the page's own rules (ported from the 02.10 etalon's inline <style>; the kit's rules stay in y.css / ui.css) */
/* ---- hero: the whole product ---- */
.wa{max-width:1300px;margin:64px auto 0;text-align:left;position:relative}
.wa .ui-app{grid-template-columns:210px minmax(0,1fr);height:520px}
.wa .ui-side a{cursor:pointer}
.wa .ui-main{position:relative;overflow:hidden;padding:20px 24px}
.vw{position:absolute;inset:0;padding:20px 24px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease);pointer-events:none;overflow:hidden}
.vw.on{opacity:1;transform:none;pointer-events:auto}
.vh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px}
.vh h4{font-size:20px;font-weight:700;letter-spacing:-.02em}
.vh small{display:block;font-size:12px;color:var(--u-mut);margin-top:2px}
.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.k4 div{background:#fff;border:1px solid var(--u-bd);border-radius:10px;padding:12px}
.k4 small{font-size:11.5px;color:var(--u-mut)}
.k4 b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.k4 em{font-style:normal;font-size:11px;color:#0b7648;font-weight:650}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-top:12px}
.lst .ui-tr{grid-template-columns:auto 1fr auto}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:calc(100% - 60px)}
.col5{background:#eef0f3;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.col5 h6{font-size:11.5px;font-weight:700;color:#475569;padding:2px 4px 4px;display:flex;justify-content:space-between}
.tc{background:#fff;border:1px solid var(--u-bd);border-radius:8px;padding:8px 9px;font-size:11.5px;line-height:1.35;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:all .5s var(--ease)}
.tc .id{font:600 10px ui-monospace,monospace;color:var(--u-mut)}
.tc b{display:block;font-weight:600;margin-top:2px}
.tc.mv{animation:uPop .5s cubic-bezier(.2,.9,.3,1.25)}
.sbox{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--u-bd2);border-radius:10px;padding:10px 12px;font-size:14px}
.sbox svg{width:16px;height:16px;color:var(--u-mut)}
.sgrp{margin-top:14px}
.sgrp h6{font-size:11.5px;font-weight:700;color:#475569;margin:10px 0 6px}
.sr{background:#fff;border:1px solid var(--u-bd);border-radius:9px;padding:9px 11px;font-size:12.5px;margin-top:6px;animation:uIn .35s var(--ease) both}
.sr small{display:block;font-size:11.5px;color:var(--u-mut);margin-top:2px}
.sr mark{background:#fff3c4;color:inherit;border-radius:3px;padding:0 1px}
.art2{background:#fff;border:1px solid var(--u-bd);border-radius:12px;padding:18px 20px;max-width:640px}
.art2 .vv{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--u-mut)}
.art2 .vv b{color:#0b7648}
.art2 h5{margin-top:8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.art2 p{margin-top:8px;font-size:13px;line-height:1.6;color:#1e293b}
.art2 .new{background:#f0fbf5;border-left:3px solid #16a34a;padding:6px 10px;border-radius:0 6px 6px 0;margin-top:10px;font-size:12.5px}
.rm .ui-tr{grid-template-columns:1fr 160px 90px}
.pb{height:7px;border-radius:4px;background:#e2e8f0;overflow:hidden}.pb i{display:block;height:100%;background:#2563eb;border-radius:4px}
.vd3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vd3 div{background:#fff;border:1px solid var(--u-bd);border-radius:10px;overflow:hidden}
.vd3 svg{display:block;width:100%;height:auto;background:#f8fafc}
.vd3 b{display:block;padding:8px 10px 2px;font-size:12.5px}
.vd3 small{display:block;padding:0 10px 10px;font-size:11.5px;color:var(--u-mut)}
.vd3 div.sel{outline:2px solid #2563eb}
.lad{display:grid;gap:8px;max-width:620px}
.lad div{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--u-bd);border-radius:10px;padding:12px 14px;font-size:13px}
.lad div i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:700;background:#eef2ff;color:#1d4fc4}
.lad div small{display:block;color:var(--u-mut);font-size:11.5px;margin-top:2px}
.lad div.on{border-color:#bfd2fb;background:#f6f9ff}
.dcl .ui-tr{grid-template-columns:auto 1fr auto}
.tour{display:flex;justify-content:center;gap:10px;margin-top:18px;font-size:14px;color:var(--ink2);align-items:center}
.tour b{color:#fff;font-weight:600}
.tour button{all:unset;cursor:pointer;color:var(--acc2);font-weight:600}
/* ---- terminals ---- */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;position:relative}
.term{background:#0c0d10;border:1px solid var(--line2);border-radius:14px;overflow:hidden;cursor:zoom-in;transition:all .5s var(--ease);height:230px;display:flex;flex-direction:column}
.term .th{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.term .th i{width:8px;height:8px;border-radius:50%;background:#7fd8a8;box-shadow:0 0 8px #7fd8a8}
.term .th span{margin-left:auto;color:var(--ink4);font-size:11.5px}
.term pre{flex:1;margin:0;padding:12px 14px;font:500 12.3px/1.65 ui-monospace,"SF Mono",monospace;color:#c8ccd4;white-space:pre-wrap;overflow:hidden}
.term pre .g{color:#7fd8a8}.term pre .y{color:#e9bd73}.term pre .b{color:#9fb0ff}.term pre .m{color:#6b7078}
.tg.full .term:not(.big){display:none}
.tg.full{grid-template-columns:1fr}
.tg.full .term.big{height:440px;cursor:zoom-out}
.tg-cap{display:flex;justify-content:center;gap:24px;margin-top:20px;font-size:14px;color:var(--ink2);flex-wrap:wrap}
.tg-cap span{display:flex;gap:8px;align-items:center}
.tg-cap svg{width:16px;height:16px;color:var(--acc2)}
/* ---- search ---- */
.sx2{max-width:880px;margin:56px auto 0}
.sx2 .in{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.sx2 .in svg{width:20px;height:20px;color:#596779;flex:none}
.sx2 input{all:unset;flex:1;font:500 17px "Plus Jakarta Sans";color:#0f172a}
.sx2 .qs2{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.sx2 .qs2 button{all:unset;cursor:pointer;font-size:13.5px;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;transition:all .2s}
.sx2 .qs2 button:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.sx2 .out{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sx2 .grp{background:#fff;border-radius:14px;padding:14px;color:#0f172a;min-height:150px}
.sx2 .grp h6{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#475569}
.sx2 .grp .r{margin-top:8px;font-size:12.8px;line-height:1.4;padding:8px 10px;border-radius:8px;background:#f8fafc;animation:uIn .3s var(--ease) both}
.sx2 .grp .r small{display:block;color:#596779;font-size:11.5px;margin-top:2px}
.sx2 .grp .r mark{background:#fff3c4;color:inherit;border-radius:3px}
.sx2 .grp .none{margin-top:10px;font-size:12.5px;color:#94a3b8}
@media(max-width:1060px){.wa .ui-app{grid-template-columns:1fr;height:560px}.wa .ui-side{display:none}.tg{grid-template-columns:1fr}.sx2 .out{grid-template-columns:1fr}.k4{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}