/* Motion system + components added in v0.2. One easing/duration scale, transform/opacity only. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: .15s; --t-med: .28s; --t-slow: .6s; --c0: #e5213f; --c1: #b8bcc4; --c2: #7a1020; --c3: #5b9bd5; --c4: #e0a23a; --c5: #3fb97f; }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, calc(100vw - 2rem)); }
.toast { position: static; background: var(--panel); border: 1px solid var(--line-hi); border-left: 3px solid var(--silver); padding: .65rem .9rem; border-radius: var(--r); cursor: pointer; animation: toast-in var(--t-med) var(--ease) both; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.bad { border-left-color: var(--red-hi); }
.toast.out { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- modal ---------- */
.overlay-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 70; animation: fade var(--t-med) ease both; }
.overlay-bg.closing { opacity: 0; transition: opacity .16s; }
.modal { background: var(--panel); border: 1px solid var(--line-hi); border-radius: 14px; padding: 1.4rem; width: min(480px, 100%); box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: pop var(--t-med) var(--ease) both; }
.overlay-bg.closing .modal { transform: scale(.97); transition: transform .16s; }
.modal-actions { justify-content: flex-end; margin-top: 1rem; }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---------- skeletons ---------- */
.skel { background: linear-gradient(90deg, var(--char) 25%, #25252b 50%, var(--char) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 6px; }
.skel-line { height: 14px; margin: .55rem 0; } .skel-line.short { width: 45%; } .skel-line.big { height: 30px; width: 60%; }
.skel-title { height: 30px; width: 260px; margin-bottom: 1rem; } .skel-table { padding: .6rem 1rem; } .skel-card { min-height: 92px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- status indicators ---------- */
.dot.pulse { position: relative; }
.dot.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ping 2s ease-out infinite; }
.dot.ok { color: var(--ok); } .dot.bad { color: var(--red-hi); } .dot.warn { color: var(--warn); }
.dot.bad.pulse::after { animation-duration: 1.1s; }
@keyframes ping { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.live-ind { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); }

/* ---------- page + card motion ---------- */
.content.page-in > * { animation: rise .45s var(--ease) both; }
.content.page-in > *:nth-child(2) { animation-delay: .04s; } .content.page-in > *:nth-child(3) { animation-delay: .08s; } .content.page-in > *:nth-child(n+4) { animation-delay: .12s; }
.cards .card { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform var(--t-fast), border-color var(--t-fast); }
.cards .card:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.card.alert { border-color: var(--red); background: linear-gradient(180deg, rgba(200,16,46,.12), var(--panel)); }
.btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }
button:active { transform: translateY(1px); }

/* ---------- sidebar collapse ---------- */
.shell { transition: grid-template-columns var(--t-med) var(--ease); }
.shell.collapsed { grid-template-columns: 64px 1fr; }
.shell.collapsed .side { padding-inline: .4rem; overflow-x: hidden; }
.shell.collapsed .side h4, .shell.collapsed .side .brand span.t { display: none; }
.shell.collapsed .side a { justify-content: center; padding-inline: 0; font-size: .72rem; }
.side .ico { width: 18px; text-align: center; margin-right: .6rem; opacity: .85; }
.shell.collapsed .side .lbl { display: none; } .shell.collapsed .side .ico { margin: 0; }
.side a { display: flex; align-items: center; justify-content: flex-start; } .side a .badge { margin-left: auto; }
.collapse-btn { margin: .6rem .3rem 0; width: calc(100% - .6rem); }
.grow { flex: 1; }

/* ---------- charts ---------- */
.chart-wrap { width: 100%; } .chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .axis { fill: var(--muted); font-size: 10px; }
.chart .guide { stroke: var(--silver); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .line { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; }
.chart .line.c0 { stroke: var(--c0); } .chart .line.c1 { stroke: var(--c1); }
.chart .area { fill: var(--c0); opacity: 0; animation: fade-area .9s .3s ease forwards; } .chart .area.c0 { fill: rgba(229,33,63,.16); }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade-area { to { opacity: 1; } }
.legend { display: flex; gap: 1rem; color: var(--muted); font-size: .8rem; margin-top: .3rem; } .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; }
.sw.c0 { background: var(--c0); } .sw.c1 { background: var(--c1); } .sw.c2 { background: var(--c2); } .sw.c3 { background: var(--c3); } .sw.c4 { background: var(--c4); } .sw.c5 { background: var(--c5); }
.donut-wrap { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; } .donut { width: 150px; flex: none; }
.donut .seg { stroke-width: 14; transition: opacity var(--t-fast); animation: grow 1s var(--ease) both; } .donut .seg:hover { opacity: .8; }
.seg.c0 { stroke: var(--c0); } .seg.c1 { stroke: var(--c1); } .seg.c2 { stroke: var(--c2); } .seg.c3 { stroke: var(--c3); } .seg.c4 { stroke: var(--c4); } .seg.c5 { stroke: var(--c5); }
.donut-n { fill: var(--text); font: 700 20px var(--display); } @keyframes grow { from { opacity: 0; } }
.legend-list { list-style: none; margin: 0; padding: 0; font-size: .88rem; } .legend-list li { margin: .25rem 0; } .legend-list b { color: var(--silver); margin-left: .3rem; }
.range-tabs { display: inline-flex; border: 1px solid var(--line-hi); border-radius: var(--r); overflow: hidden; } .range-tabs button { border: 0; border-radius: 0; background: transparent; padding: .25rem .8rem; }
.range-tabs button.on { background: var(--red-dim); color: #fff; }

/* ---------- landing ---------- */
.features { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 2rem; } .features h2 { font-size: 2rem; text-align: center; } .features .sub { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 2rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color var(--t-fast); }
.feature.in { opacity: 1; transform: none; } .feature:hover { border-color: var(--red); transform: translateY(-3px); }
.feature .ic { width: 38px; height: 38px; border-radius: 9px; background: var(--red-dim); display: grid; place-items: center; color: #ff7a8c; font-weight: 700; margin-bottom: .7rem; }
.feature p { color: var(--silver); margin: .3rem 0 0; font-size: .92rem; } .feature .honest { display: block; margin-top: .6rem; color: var(--muted); font-size: .78rem; }
.stats-strip { max-width: 1200px; margin: 1rem auto 2rem; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.stat { text-align: center; border-top: 2px solid var(--red); padding-top: .8rem; } .stat .n { font: 700 2.4rem var(--display); } .stat .l { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.stats-note { text-align: center; color: var(--muted); font-size: .8rem; margin-bottom: 2rem; }
.code404 { font: 700 7rem/1 var(--display); color: var(--red); letter-spacing: .05em; text-shadow: 0 0 40px rgba(200,16,46,.4); }
.staff-card .roles { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }
.progress { height: 3px; background: var(--red); position: fixed; top: 0; left: 0; z-index: 80; width: 0; transition: width .3s var(--ease), opacity .3s; }

@media (max-width: 860px) { .shell.collapsed { grid-template-columns: 1fr; } .collapse-btn { display: none; } #toasts { left: 1rem; right: 1rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .chart .line { stroke-dashoffset: 0; } .chart .area, .feature { opacity: 1; transform: none; } }