/* v6 design layer: motion, feedback, keyboard, nav pill, hover, glow. Loaded last. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
.main{overflow-x:clip}

/* Page entrance */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view.enter > *{animation:rise .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
#view.enter .rise{animation:rise .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 28ms)}

/* Sidebar: sliding pill, owner group, shortcut hints */
.nav{position:relative}
.nav-pill{position:absolute;left:0;right:0;top:0;border-radius:9px;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);transition:transform .32s var(--ease-out),height .32s var(--ease-out),opacity .2s;z-index:0;pointer-events:none}
.nav-pill::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--ink)}
.nav a{z-index:1}
.nav a.active{background:transparent;box-shadow:none}
.nav a.active::before{display:none}
.nav-key{display:none;margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--gray-light);white-space:nowrap}
@media (hover:hover) and (min-width:901px){.nav a:hover .nav-key{display:inline}.nav a:hover .count-badge,.nav a:hover > .hdot{display:none}}
.nav a .ico{transition:transform .25s var(--ease-spring)}
.nav a:hover .ico{transform:scale(1.12) rotate(-4deg)}

/* Overview hero glow */
.hero{position:relative;isolation:isolate}
.aurora{position:absolute;z-index:-1;top:-180px;right:-140px;width:620px;height:520px;pointer-events:none;filter:blur(70px);opacity:.75}
.aurora span{position:absolute;border-radius:50%;animation:drift 22s ease-in-out infinite alternate}
.aurora span:first-child{width:380px;height:380px;left:120px;top:60px;background:radial-gradient(circle,rgba(231,250,72,.85),rgba(231,250,72,0) 70%)}
.aurora span:last-child{width:300px;height:300px;left:300px;top:180px;animation-duration:28s;animation-direction:alternate-reverse}
.aurora.morning span:last-child{background:radial-gradient(circle,rgba(253,230,138,.7),transparent 70%)}
.aurora.afternoon span:last-child{background:radial-gradient(circle,rgba(167,243,208,.6),transparent 70%)}
.aurora.evening span:last-child{background:radial-gradient(circle,rgba(196,181,253,.55),transparent 70%)}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}100%{transform:translate(30px,-20px) scale(.95)}}
.clear-chip{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 16px 8px 10px;border-radius:100px;background:var(--accent);font-weight:500;font-size:15px;animation:rise .6s var(--ease-spring) .3s both}
.clear-chip .check{width:20px;height:20px;border-radius:50%;background:var(--ink);position:relative;flex:none}
.clear-chip .check::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sparkles{position:absolute;width:0;height:0;z-index:60;pointer-events:none}
.sparkles i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:burst 1.2s var(--ease-out) var(--d) forwards}
.sparkles i.lime{background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sparkles i.ink{background:var(--ink);width:5px;height:5px;border-radius:50%}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(160deg)}}

/* Waiting on you: calmer urgency, rows that respond */
.wait-row{position:relative;transition:background .15s,transform .2s var(--ease-out),box-shadow .2s}
.wait-row.urgent{background:var(--off);box-shadow:inset 3px 0 0 var(--neg)}
.wait-row:hover{transform:translateX(4px)}
.wait-row .ico{transition:transform .25s var(--ease-spring)}
.wait-row:hover .ico{transform:scale(1.08) rotate(-3deg)}
.wait-go{position:relative}
.wait-go::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease-out)}
.wait-row:hover .wait-go::after{transform:scaleX(1)}

/* Rows and cards: lift, icon play, cursor light */
.launch-row,.client-row{transition:background .15s,transform .2s var(--ease-out)}
.launch-row:hover,.client-row:hover{transform:translateY(-1px)}
.launch-row .ico,.client-row .avatar{transition:transform .3s var(--ease-spring)}
.launch-row:hover .ico{transform:scale(1.07) rotate(-4deg)}
.client-row:hover .avatar{transform:scale(1.08)}
.rcard,.client-health,.ops-setup,.wait-row,.launch-row,.client-row,.check-row{background-image:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),rgba(231,250,72,.22),transparent 65%)}
.rcard,.client-health{transition:transform .25s var(--ease-out),box-shadow .25s}
.rcard:hover,.client-health:hover{transform:translateY(-2px);box-shadow:0 12px 32px -18px rgba(0,0,0,.25)}

/* Health: live dot */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pos);margin-left:10px;vertical-align:middle;position:relative}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pos);animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}
.hdot.down,.hdot.warn{position:relative}
.wf-row.failing .wf-name::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--neg);margin-right:10px;vertical-align:middle;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* Buttons: tactile */
.btn{transition:transform .12s var(--ease-out),background .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn:not(.secondary):hover{box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}

/* Skeletons */
.skel{display:flex;flex-direction:column;gap:14px;max-width:980px}
.sk{border-radius:10px;background:linear-gradient(90deg,#f1f1ee 0,#f8f8f6 40%,#f1f1ee 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.sk-h{height:44px;width:42%}.sk-p{height:18px;width:64%;margin-bottom:18px}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:12px}.sk-card{height:120px;border-radius:16px}
.sk-line{height:52px}
@keyframes shimmer{to{background-position:-200% 0}}

/* Toasts */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:80;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:100px;padding:11px 18px 11px 14px;font-size:15px;box-shadow:0 16px 40px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .25s,transform .35s var(--ease-spring)}
.toast.in{opacity:1;transform:none}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.toast.err .toast-dot{background:#f87171}
.toast button{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0 0 0 6px}

/* Modals: spring in */
.modal{animation:fade .18s ease-out}
.modal .card{animation:pop .32s var(--ease-spring)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}}

/* Keyboard sheet */
.keys{display:grid;grid-template-columns:1fr auto;gap:10px 24px;margin:18px 0 0}
.keys dt{margin:0}.keys dd{margin:0;display:flex;gap:4px}
kbd{font-family:inherit;font-size:12px;font-weight:600;min-width:24px;text-align:center;padding:2px 7px;border-radius:6px;background:var(--off);border:1px solid var(--line);box-shadow:0 1px 0 var(--line)}

/* Progress and bars grow in */
.ch-bar span,.hb-track span,.ob-progress span{animation:grow .9s var(--ease-out) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}}
.rc-bar,.rbar span{animation:growY .8s var(--ease-out) both;transform-origin:bottom}
@keyframes growY{from{transform:scaleY(0)}}

@media (max-width:900px){.aurora{width:420px;height:380px;right:-200px;top:-160px}.wait-row:hover{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}