/* Admin: motion in the style of the site */
#main :is(.panel,.v6-panel,.v6-metric,.metric,.staff-card,.reward-card,.v6-task-card,.event-mini,.crm-panel,.v6-photo-card,.v6-calendar-cta){transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .3s}
@media(hover:hover){
#main :is(.v6-metric,.metric,.staff-card,.reward-card,.v6-task-card,.event-mini,.v6-calendar-cta,.v6-photo-card):hover{transform:translateY(-6px);box-shadow:0 26px 44px #2a4a6a1a}
#main :is(.panel,.v6-panel,.crm-panel):hover{box-shadow:0 18px 40px -22px #2a4a6a33}
#main .v6-table tbody tr{transition:background-color .25s}
#main .v6-table tbody tr:hover{background:#f3f6ff}
#main .list-row{transition:background-color .3s,transform .4s cubic-bezier(.22,1,.36,1);border-radius:14px}
#main .list-row:hover{background:#f6f8ff;transform:translateX(4px)}
#main .v6-metric:hover>strong,#main .metric:hover strong{color:#4261ee}
}
/* buttons: blue fill slides in like on the site */
#main .btn{position:relative;overflow:hidden;isolation:isolate;transition:color .45s ease .05s,border-color .45s,box-shadow .4s,transform .3s cubic-bezier(.22,1,.36,1)}
#main .btn::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:#4261ee;translate:-101% 0;transition:translate .55s cubic-bezier(.22,1,.36,1)}
#main .btn.primary::before{background:#f9fafb}
@media(hover:hover){
#main .btn:not(.primary):not(.ghost):hover{color:#fff;border-color:#4261ee}
#main .btn:not(.primary):not(.ghost):hover::before,#main .btn.primary:hover::before{translate:0 0}
#main .btn.primary:hover{color:#182b34;border-color:#f9fafb;box-shadow:0 14px 26px -8px #4261ee40}
#main .icon-btn{transition:background .3s,color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
#main .icon-btn:hover{background:#4261ee;color:#fff;transform:scale(1.08)}
}
#main .btn:active{scale:.98}
/* sidebar */
.v6-sidebar nav a{transition:background-color .3s,color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.v6-sidebar nav a svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.v6-sidebar nav a:not(.active):hover{transform:translateX(4px);background:#eef2ff;color:#4261ee}.v6-sidebar nav a:hover svg{transform:scale(1.18) rotate(-6deg)}}
.v6-sidebar nav a.active{box-shadow:0 14px 26px -12px #4261ee88}
@keyframes fxTitle{from{opacity:0;translate:0 22px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes fxRise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes fxUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* empty spaces get a calm decoration instead of a blank area */
.fx-deco{position:relative;overflow:hidden}
.fx-deco::after{content:'';position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border:2px dashed #cdd6ff;border-radius:50%;opacity:.6;pointer-events:none;animation:fxSpin 40s linear infinite}
.fx-star{position:absolute;color:#b6c5ff;pointer-events:none;animation:fxFloat 6s ease-in-out infinite}
@keyframes fxSpin{to{rotate:360deg}}
@keyframes fxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:6px -10px;rotate:18deg}}
@media(prefers-reduced-motion:reduce){body .v6-sidebar nav a,}

/* text on the blue metric stays readable */
#main .v6-metric.accent>strong,#main .v6-metric.accent:hover>strong,#main .v6-metric.accent small,#main .v6-metric.accent>span{color:#fff}
#main .v6-metric.accent small,#main .v6-metric.accent>span{color:#eef1ff}
/* tabs and segments keep their own look: no sliding fill */
#main :is(.v6-tabs,.v6-segments,.crm-context,.v6-filters) .btn::before{display:none}
#main :is(.v6-tabs,.v6-segments,.crm-context) .btn:hover{color:#4261ee;border-color:transparent;background:#eef2ff}
#main .v6-tabs .btn:hover{background:none}
#main .v6-tabs .btn.selected:hover,#main .crm-context .btn.selected:hover{color:#4261ee}
/* filters wrap instead of overlapping */
#main :is(.v6-filters,.v6-toolbar){flex-wrap:wrap;row-gap:12px}
#main .v6-select{max-width:none}
#main .v6-select>span{white-space:nowrap}
#main .v6-select select{max-width:260px}
.v6 #main :is(input,select,textarea,button,a):focus-visible{outline:2px solid #4261ee;outline-offset:2px}
.crm-context{margin:0 0 22px}

/* channel cards: real logos */
#main .channel-health>span.tg,#main .channel-health>span.max{background:none;padding:0;width:52px;height:52px;display:grid;place-items:center;flex:none}
#main .channel-health>span.tg svg,#main .channel-health>span.max svg{width:52px;height:52px;display:block}
#main .channel-dashboard{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

#main :is(.channel-marks,.channel-row)>span:is(.max,.tg){background:none!important;padding:0!important;display:grid;place-items:center;border-radius:0}
#main :is(.channel-marks,.channel-row)>span:is(.max,.tg) svg{width:100%;height:100%;display:block}
#main .channel-row>span:is(.max,.tg){width:44px;height:44px;flex:none}
#main .channel-marks>span{width:56px;height:56px}
#main .channel-marks.big>span{width:92px;height:92px}

.v6 .topbar :is(select,button,a):focus-visible,.v6 #staff-switch:focus-visible{outline:2px solid #4261ee;outline-offset:2px;box-shadow:none}

/* styled "view as" menu */
.fx-dd{position:relative;display:inline-block}
.fx-dd-btn{display:flex;align-items:center;gap:10px;min-width:220px;padding:6px 14px 6px 6px;border:1px solid #e3e9ee;border-radius:40px;background:#fff;color:#182b34;text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .3s,background .3s}
.fx-dd-btn:hover,.fx-dd.open .fx-dd-btn{border-color:#4261ee;box-shadow:0 10px 24px -14px #4261ee88}
.fx-dd-btn>span,.fx-dd-item>span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.fx-dd-btn b,.fx-dd-item b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-dd-btn small,.fx-dd-item small{font-size:11px;color:#7b8998;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;display:block}
.fx-dd-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1);flex:none}
.fx-dd.open .fx-dd-btn svg{transform:rotate(180deg)}
.fx-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-style:normal;font-size:11px;font-weight:600;background:hsl(var(--h) 70% 92%);color:hsl(var(--h) 45% 38%)}
.fx-dd-list{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:300px;max-height:min(60vh,420px);overflow:auto;padding:8px;border:1px solid #e6ebf3;border-radius:22px;background:#fff;box-shadow:0 30px 60px -20px #2a4a6a55;opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .25s ease,translate .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s;scrollbar-width:thin}
.fx-dd.open .fx-dd-list{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.fx-dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:14px;background:none;color:#182b34;text-align:left;cursor:pointer;transition:background .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.fx-dd-item:hover{background:#eef2ff;transform:translateX(3px)}
.fx-dd-item.on{background:#eef2ff}
.fx-dd-item em{font-style:normal;color:#4261ee;font-size:14px}
.fx-dd-btn:focus-visible,.fx-dd-item:focus-visible{outline:2px solid #4261ee;outline-offset:2px}

/* the top bar (with its menus) always sits above the page content */
.v6 header.topbar{position:relative;z-index:50}

/* photo avatars */
.avatar.has-img{padding:0;overflow:hidden;background:none!important}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.fx-av{position:relative;overflow:hidden}
.fx-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* breathing room under a lone action button */
#main .panel>.btn+*,#main .panel>a.btn+*{margin-top:22px}
#main .owner-card{margin-top:22px}