:root {
  --bg:#06110B; --glass:rgba(18,38,27,.72); --glass-2:rgba(24,50,36,.82); --line:rgba(120,220,160,.16); --line-2:rgba(120,220,160,.28);
  --ink:#EAF4EE; --muted:#93AD9F; --neon:#2EE889; --green:#1FA85A; --deep:#0B3D24;
  --amber:#F3B658; --amber-bg:rgba(243,182,88,.14); --blue:#8CB6FF; --blue-bg:rgba(140,182,255,.14); --ok-bg:rgba(46,232,137,.16);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.hidden { display: none !important; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--muted); }
.brand i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7DF5B5, var(--green) 55%, var(--deep)); box-shadow: 0 0 14px rgba(46,232,137,.55); }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: 17px; font-weight: 800; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.5; }
.btn { background: linear-gradient(180deg, #37F092, #1FB864); color: #04160C; font-weight: 800; border-radius: 16px; padding: 16px 22px; font-size: 17px; box-shadow: 0 8px 30px rgba(46,232,137,.28), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .12s, box-shadow .2s; }
.btn:hover { box-shadow: 0 10px 40px rgba(46,232,137,.42), inset 0 1px 0 rgba(255,255,255,.4); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line-2); box-shadow: none; font-weight: 700; font-size: 14px; padding: 10px 14px; }
.btn.ghost:hover { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.st-classifying { background: rgba(255,255,255,.07); color: var(--muted); } .st-sent { background: var(--amber-bg); color: var(--amber); }
.st-opened { background: var(--blue-bg); color: var(--blue); } .st-ack { background: var(--ok-bg); color: var(--neon); }
.ico { border-radius: 50%; flex: none; display: block; object-fit: cover; }
input.field { width: 100%; font: inherit; font-size: 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(6,17,11,.6); color: var(--ink); }
input.field::placeholder { color: #6E8A7B; }
/* phone */
.phone { max-width: 430px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.hero { position: relative; border-radius: 26px; overflow: hidden; background: #050807; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 0; }
.hero-img { display: block; width: calc(100% + 44px); margin: 0 -22px; height: 300px; object-fit: cover; object-position: center 88%; }
.hero h1 { font-size: 30px; }
.wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 600; }
.wait i { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px var(--neon); flex: none; }
.rolecard { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 12px; }
.rolecard small { color: var(--muted); font-size: 13px; font-weight: 700; display: block; }
.rolecard b { font-size: 22px; font-weight: 800; display: block; margin: 2px 0; }
.news { overflow: hidden; animation: arrive .5s cubic-bezier(.2,.8,.2,1); border-color: var(--line-2); box-shadow: 0 0 0 1px rgba(46,232,137,.08), 0 18px 50px rgba(0,0,0,.45); }
.news .top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(46,232,137,.12), transparent); }
.news .top b { font-size: 14px; } .news .top .chip { margin-left: auto; background: var(--neon); color: #04160C; }
.news .body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.news h3 { font-size: 21px; font-weight: 800; line-height: 1.2; } .news p { font-size: 15px; line-height: 1.55; color: #B9CEC2; }
.news .btn { width: 100%; font-size: 18px; padding: 17px; margin-top: 4px; }
.done { display: flex; gap: 12px; align-items: center; background: var(--ok-bg); color: var(--neon); border-radius: 14px; padding: 13px 14px; font-weight: 800; font-size: 15px; }
.done span { width: 26px; height: 26px; border-radius: 50%; background: var(--neon); color: #04160C; display: grid; place-items: center; flex: none; }
/* lpr */
.member { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.member b { font-size: 18px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roles button { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 7px 10px 7px 7px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.04); border: 1px solid var(--line); text-align: left; }
.roles button img { width: 30px; height: 30px; }
.roles button.on { background: rgba(46,232,137,.18); border-color: var(--neon); color: #fff; box-shadow: 0 0 18px rgba(46,232,137,.2); }
.roles button.taken { opacity: .35; }
.meter { padding: 22px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(160deg, rgba(31,168,90,.25), rgba(18,38,27,.8) 60%); }
.meter small { color: var(--muted); font-size: 14px; font-weight: 700; }
.num { font-size: 68px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.num span { font-size: 24px; color: var(--muted); letter-spacing: 0; }
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.segs i { height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); transition: background .4s, box-shadow .4s; }
.segs i.on { background: var(--neon); box-shadow: 0 0 16px rgba(46,232,137,.6); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row .who { flex: 1; min-width: 0; } .row b { font-size: 15px; display: block; } .row small { color: var(--muted); font-size: 13px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final { border-radius: 28px; padding: 26px 22px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: radial-gradient(120% 80% at 50% 20%, #0D6A3A, #06301B 70%); border: 1px solid var(--line-2); animation: arrive .6s cubic-bezier(.2,.8,.2,1); }
.final img { width: min(78vw, 300px); height: auto; animation: spinin 1.1s cubic-bezier(.2,.8,.2,1); }
.final .bubble { background: #fff; color: #0B2A19; border-radius: 20px; padding: 14px 18px; font-size: 18px; font-weight: 800; max-width: 22ch; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.final h1 { font-size: 24px; } .final p { color: #BFE3CE; font-size: 15px; }
/* projector */
.proj { position: relative; border-radius: 26px; overflow: hidden; background: #030706 center / cover no-repeat; border: 1px solid var(--line); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.proj h1 { font-size: 34px; max-width: 20ch; }
.item { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: center; padding: 14px 18px; transition: border-color .4s, box-shadow .4s; }
.item.routed { border-color: rgba(46,232,137,.45); box-shadow: 0 0 30px rgba(46,232,137,.12); }
.item h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; } .item p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.route { display: flex; align-items: center; gap: 12px; animation: arrive .45s cubic-bezier(.2,.8,.2,1); }
.route .cat { font-weight: 800; color: var(--neon); font-size: 15px; } .route .to { font-size: 14px; font-weight: 700; margin: 2px 0 6px; } .route small { color: var(--muted); font-size: 12px; display: block; margin-top: 6px; }
.idle { color: var(--muted); font-size: 14px; font-weight: 600; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 14px 18px; }
.bar.win { background: linear-gradient(90deg, rgba(31,168,90,.5), rgba(11,61,36,.85)); border-color: var(--neon); }
.bar .cnt { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; } .bar .cnt span { font-size: 18px; color: var(--muted); }
.bar .segs { flex: 1; min-width: 160px; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } .pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes arrive { from { transform: translateY(-18px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes spinin { from { transform: scale(.4) rotate(-90deg); opacity: 0 } to { transform: none; opacity: 1 } }
@media (max-width: 760px) { .item { grid-template-columns: 1fr; } .proj { padding: 22px 16px; } .proj h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .pulse, .news, .final, .final img, .route { animation: none !important; } }
/* ===== v3: проектор-сцена и wow-эффекты ===== */
.proj3 { position: relative; width: 1600px; height: 900px; overflow: hidden; border-radius: 28px; background: #030706 center / cover no-repeat; color: var(--ink); font-family: "Manrope", system-ui, sans-serif; }
.proj3::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 35% 45%, rgba(6,17,11,.15), rgba(3,7,6,.72)); pointer-events: none; }
.proj3 > * { position: absolute; z-index: 1; }
.p-head { left: 44px; top: 34px; right: 44px; display: flex; justify-content: space-between; align-items: flex-start; }
.p-head h1 { font-size: 38px; margin-top: 10px; max-width: 22ch; }
.demo-tag { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--amber); border: 1px solid rgba(243,182,88,.4); border-radius: 999px; padding: 4px 10px; margin-left: 12px; }
.stepper { display: flex; gap: 8px; margin-top: 6px; }
.step { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(255,255,255,.08); }
.step.done { color: var(--neon); } .step.done b { background: var(--neon); color: #04160C; }
.step.cur { color: #fff; border-color: var(--neon); box-shadow: 0 0 22px rgba(46,232,137,.28); } .step.cur b { background: #fff; color: #04160C; }
.stage { left: 40px; top: 150px; width: 1040px; height: 640px; }
.stage svg { position: absolute; inset: 0; }
.ln { stroke: rgba(120,220,160,.16); stroke-width: 3; fill: none; transition: stroke .4s; }
.ln.flow { stroke: rgba(46,232,137,.55); stroke-dasharray: 10 12; animation: dash 0.9s linear infinite; }
.ln.ok { stroke: var(--neon); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(46,232,137,.8)); }
@keyframes dash { to { stroke-dashoffset: -44; } }
.core { position: absolute; left: 420px; top: 220px; width: 200px; height: 200px; display: grid; place-items: center; }
.core img { width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(0 0 40px rgba(46,232,137,.45)); }
.core.spin img { animation: spin 2.4s linear infinite; }
.core small { position: absolute; bottom: -34px; white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: var(--neon); }
@keyframes spin { to { transform: rotate(360deg); } }
.node { position: absolute; width: 290px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; background: rgba(12,26,18,.86); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(10px); transition: border-color .4s, box-shadow .4s, transform .4s; }
.node img.ico { width: 70px; height: 70px; }
.node b { display: block; font-size: 18px; } .node small { display: block; color: var(--muted); font-size: 14px; margin: 2px 0 6px; }
.node.ready { border-color: var(--line-2); }
.node.live { border-color: var(--amber); box-shadow: 0 0 26px rgba(243,182,88,.22); animation: bob 1.4s ease-in-out infinite; }
.node.ok { border-color: var(--neon); box-shadow: 0 0 34px rgba(46,232,137,.35); }
.node .tick { position: absolute; right: -10px; top: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--neon); color: #04160C; display: grid; place-items: center; font-weight: 900; box-shadow: 0 0 18px var(--neon); animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.side { left: 1110px; top: 150px; width: 450px; height: 640px; display: flex; flex-direction: column; gap: 14px; }
.qrc { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 16px; transition: border-color .3s, box-shadow .3s; }
.qrc img { width: 132px; height: 132px; border-radius: 12px; background: #fff; padding: 6px; }
.qrc .n { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--muted); } .qrc b { display: block; font-size: 22px; margin: 4px 0 8px; }
.qrc.cur { border-color: var(--neon); box-shadow: 0 0 30px rgba(46,232,137,.22); } .qrc.cur .n { color: var(--neon); }
.qrc.ok { opacity: .72; }
.people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .people span { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--neon); } .people span.off { background: rgba(255,255,255,.05); color: #5F7869; }
.feed { padding: 14px 16px; display: flex; gap: 12px; align-items: center; animation: arrive .45s cubic-bezier(.2,.8,.2,1); }
.feed img.ico { width: 48px; height: 48px; } .feed .t { flex: 1; min-width: 0; } .feed b { display: block; font-size: 16px; } .feed small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed.wait { opacity: .55; }
.p-bar { left: 40px; right: 40px; bottom: 34px; height: 76px; display: flex; align-items: center; gap: 22px; padding: 0 22px; }
.p-bar .btn[disabled] { opacity: .35; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.p-bar .cnt { font-size: 40px; font-weight: 800; } .p-bar .cnt span { font-size: 18px; color: var(--muted); }
.p-bar .segs { flex: 1; }
.p-final { inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; background: radial-gradient(70% 70% at 50% 40%, rgba(13,106,58,.96), rgba(3,20,11,.97)); animation: arrive .6s cubic-bezier(.2,.8,.2,1); }
.p-final img { width: 340px; animation: spinin 1.2s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 60px rgba(46,232,137,.6)); }
.p-final h1 { font-size: 54px; max-width: 20ch; } .p-final p { font-size: 22px; color: #BFE3CE; }
.p-final .bubble { background: #fff; color: #0B2A19; border-radius: 22px; padding: 16px 24px; font-size: 26px; font-weight: 800; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear infinite; opacity: .9; }
@keyframes fall { to { transform: translateY(1000px) rotate(540deg); } }
/* LPR donut */
.donut { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.donut svg { width: 220px; height: 220px; transform: rotate(-90deg); }
.donut .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .c b { font-size: 60px; font-weight: 800; letter-spacing: -2px; line-height: 1; } .donut .c small { color: var(--muted); font-size: 14px; font-weight: 700; }
.seg { fill: none; stroke-width: 20; stroke-linecap: round; transition: stroke .4s; }
.member-row { display: flex; align-items: center; gap: 12px; }
.member-row .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(46,232,137,.14); color: var(--neon); flex: none; }
.member.ghost { opacity: .45; border-style: dashed; }
.deadline { display: inline-flex; align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 5px 11px; }
.who-chip { align-self: flex-start; font-size: 15px; font-weight: 800; padding: 8px 14px; border-radius: 999px; background: rgba(46,232,137,.14); color: var(--neon); }
@media (prefers-reduced-motion: reduce) { .ln.flow, .core.spin img, .node.live, .confetti i { animation: none !important; } }
/* ===== v4: 4–10 ролей ===== */
.node { box-sizing: border-box; }
.compact .node { padding: 10px 14px; gap: 12px; }
.compact .node b { font-size: 16px; } .compact .node small { font-size: 13px; margin: 1px 0 4px; } .compact .node .chip { font-size: 12px; padding: 4px 9px; }
.compact .node .tick { width: 28px; height: 28px; right: -8px; top: -8px; }
.compact .feed { padding: 9px 12px; gap: 10px; } .compact .feed b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compact .feed .chip { font-size: 12px; padding: 4px 9px; }
.compact .side { gap: 9px; }
.ico.emo { display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(46,232,137,.35), rgba(12,40,24,.9) 70%); border: 1px solid rgba(46,232,137,.35); box-shadow: 0 0 16px rgba(46,232,137,.25); flex: none; line-height: 1; }
.qrc .url { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); word-break: break-all; }
.people span { min-width: 28px; text-align: center; }
.wifi { font-size: 16px; padding: 10px 14px; border-radius: 14px; background: rgba(140,182,255,.1); color: #CFE0FF; }
.warn { font-size: 14px; font-weight: 700; color: var(--amber); padding: 0 6px; }
.presets { display: flex; align-items: center; gap: 6px; } .presets small { color: var(--muted); font-size: 14px; font-weight: 700; margin-right: 4px; }
.pbtn { width: 42px; height: 38px; border-radius: 10px; font-weight: 800; font-size: 15px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); }
.pbtn.on { background: rgba(46,232,137,.18); border-color: var(--neon); color: #fff; }
.pick { display: flex; align-items: center; gap: 10px; }
select.sel { font-size: 15px; padding: 12px 14px; appearance: none; -webkit-appearance: none; background: rgba(6,17,11,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393AD9F' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
select.sel option { background: #0F1F17; color: #EAF4EE; }
.pick select.sel { flex: 1; min-width: 0; width: 100%; color: var(--ink); }
/* ===== 11–13 ролей ===== */
.dense .node { padding: 6px 12px; gap: 10px; }
.dense .node b { font-size: 14px; line-height: 1.15; } .dense .node small { font-size: 12px; margin: 0 0 3px; } .dense .node .chip { font-size: 11px; padding: 3px 8px; }
.dense .node .tick { width: 24px; height: 24px; font-size: 13px; right: -7px; top: -7px; }
.dense .side { gap: 6px; } .dense .feed { padding: 6px 10px; gap: 8px; border-radius: 14px; } .dense .feed b { font-size: 13px; } .dense .feed .chip { font-size: 11px; padding: 3px 8px; }
.dense .qrc { padding: 12px; grid-template-columns: 116px 1fr; } .dense .qrc img { width: 116px; height: 116px; }
.dense .people span { min-width: 24px; font-size: 11px; padding: 3px 6px; }
/* ===== круговая раскладка ===== */
.orbit { fill: none; stroke: rgba(120,220,160,.14); stroke-width: 1.5; stroke-dasharray: 3 10; animation: orbitspin 60s linear infinite; }
.orbit.in { stroke: rgba(120,220,160,.08); animation-direction: reverse; }
@keyframes orbitspin { to { stroke-dashoffset: -520; } }
.node.orb, .compact .node.orb, .dense .node.orb { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; padding: 8px 8px; border-radius: 22px; }
.node.orb b { font-size: 16px; line-height: 1.15; } .node.orb small { font-size: 13px; margin: 0; }
.compact .node.orb b { font-size: 14px; } .compact .node.orb small { font-size: 12px; } .compact .node.orb .chip { font-size: 11px; padding: 3px 9px; }
.dense .node.orb { gap: 2px; padding: 6px 6px; border-radius: 18px; } .dense .node.orb b { font-size: 13px; } .dense .node.orb small { font-size: 11px; } .dense .node.orb .chip { font-size: 10px; padding: 2px 7px; }
.node.orb .tick { right: -6px; top: -6px; }
@media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }
/* ===== сцена 1100px + светофор критичности ===== */
.stage { left: 30px; width: 1100px; } .core { left: 450px; }
.side { left: 1160px; width: 400px; }
.qrc { grid-template-columns: 120px 1fr; } .qrc img { width: 120px; height: 120px; }
:root { --crit: #FF5C5C; --imp: #F3B658; --info: #2EE889; }
.ldot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; vertical-align: middle; margin-right: 6px; }
.ldot.l-info { background: var(--info); box-shadow: 0 0 8px var(--info); } .ldot.l-imp { background: var(--imp); box-shadow: 0 0 8px var(--imp); }
.ldot.l-crit { background: var(--crit); box-shadow: 0 0 10px var(--crit); animation: critblink 1.2s ease-in-out infinite; }
@keyframes critblink { 50% { opacity: .45; } }
.node.orb > .ldot { position: absolute; left: 10px; top: 10px; margin: 0; }
.node.orb.lv-crit:not(.ok) { border-color: rgba(255,92,92,.7); box-shadow: 0 0 26px rgba(255,92,92,.25); }
.lvl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.lvl i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.lvl.l-info { color: var(--info); background: rgba(46,232,137,.12); } .lvl.l-imp { color: var(--imp); background: rgba(243,182,88,.14); } .lvl.l-crit { color: var(--crit); background: rgba(255,92,92,.14); }
.news.lv-crit { border-color: rgba(255,92,92,.55); box-shadow: 0 0 30px rgba(255,92,92,.15); } .news.lv-imp { border-color: rgba(243,182,88,.45); }
.plan { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(243,182,88,.1); border: 1px solid rgba(243,182,88,.35); }
.plan.l-crit { background: rgba(255,92,92,.1); border-color: rgba(255,92,92,.45); }
.plan b { font-size: 15px; } .plan small { color: var(--muted); font-size: 13px; }
.plan-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.plan-opts button { padding: 12px 6px; border-radius: 12px; font-weight: 800; font-size: 14px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); }
.plan-opts button:active { transform: scale(.97); } .plan.l-crit .plan-opts button { border-color: rgba(255,92,92,.5); } .plan.l-imp .plan-opts button { border-color: rgba(243,182,88,.5); }
.chip.st-plan { background: rgba(255,159,67,.16); color: #FFB067; animation: critblink 1.4s ease-in-out infinite; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); } .legend span { display: inline-flex; align-items: center; }
.legend-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .legend-card b { font-size: 15px; } .legend-card small { color: var(--muted); font-size: 12px; }
.feed-head { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 2px; } .feed-head b { font-size: 16px; }
.feed.lv-crit { border-color: rgba(255,92,92,.45); } .feed .ldot { margin-right: 0; }
.meter-sub { font-size: 13px; color: var(--muted); text-align: center; } .meter .legend { justify-content: center; }
.segs i.half { background: #FF9F43; box-shadow: 0 0 10px rgba(255,159,67,.5); }
/* ===== 3D-вращение иконок ролей: синхронно, с толщиной ===== */
.rot3d { display: inline-grid; place-items: center; perspective: 480px; flex: none; }
.rot3d .spinner { display: grid; transform-style: preserve-3d; animation: spinY 7s linear infinite; will-change: transform; }
.rot3d .lyr { grid-area: 1 / 1; display: grid; place-items: center; transform-style: preserve-3d; }
.rot3d .lyr.back { backface-visibility: hidden; } .rot3d .lyr:not(.back) { backface-visibility: visible; }
.node.live .rot3d .spinner { filter: drop-shadow(0 0 10px rgba(243,182,88,.55)); }
.node.live.lv-crit .rot3d .spinner { filter: drop-shadow(0 0 12px rgba(255,92,92,.65)); }
.node.ok .rot3d .spinner { filter: drop-shadow(0 0 10px rgba(46,232,137,.6)); }
@keyframes spinY { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .rot3d .spinner { animation: none; } }