/* A board-first SaaS interface, rendered as an illustrative portfolio preview. */
.saas-art { background: #503ac8; }
.saas-browser { color: #272b36; font-size: 1.5cqw; line-height: 1.35; }
.saas-browser strong { font-weight: 500; }
.saas-shell { display: grid; grid-template-columns: 14.5cqw 1fr; height: calc(100% - 5cqw); background: #fafafd; }
.saas-sidebar { display: flex; flex-direction: column; padding: 3cqw 1.2cqw 2cqw; background: #eeeff6; color: #757588; }
.saas-sidebar > strong { color: #282637; font-size: 4.8cqw; letter-spacing: -.35cqw; padding: 0 .5cqw; margin-bottom: 3cqw; }
.saas-sidebar > strong > span { color: #6450ce; }
.saas-sidebar > span { padding: 1.6cqw .8cqw; white-space: nowrap; font-size: 1.3cqw; }
.saas-sidebar > .saas-workspace { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw .65cqw; margin-bottom: 2cqw; border: .15cqw solid #dce0e9; border-radius: .7cqw; color: #464556; background: #f8f8fb; font-size: 1.15cqw; }
.saas-nav-selected { background: #dedaf4; color: #5441ba; border-radius: .7cqw; }
.saas-sidebar > .saas-plan { margin-top: auto; white-space: normal; font-size: 1cqw; letter-spacing: .04cqw; line-height: 1.8; color: #555364; }
.saas-plan > small { font-size: 1.1cqw; letter-spacing: 0; color: #777282; }
.saas-plan > i { display: block; height: .6cqw; border-radius: 1cqw; background: #dddbe9; overflow: hidden; margin-top: 1cqw; }
.saas-plan > i > b { display: block; height: 100%; width: 60%; background: #7663d3; }
.saas-page { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 2.3cqw; }
.saas-topline { display: flex; align-items: center; justify-content: space-between; color: #85828f; font-size: 1.2cqw; }
.saas-avatars { display: flex; padding-right: .8cqw; }
.saas-avatars > i { display: grid; place-items: center; height: 3cqw; width: 3cqw; margin-right: -.65cqw; border: .35cqw solid #fafafd; border-radius: 50%; background: #dbd4f3; color: #5d4f8c; font: 1cqw/1 Arial,sans-serif; }
.saas-avatars > i:nth-child(2) { background: #d3e5df; color: #477d6a; }
.saas-avatars > i:nth-child(3) { background: #ebdecb; color: #8c7151; }
.saas-page-title { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin: 2cqw 0 2.5cqw; }
.saas-page-title > strong { font-size: 4cqw; letter-spacing: -.15cqw; }
.saas-page-title > span { padding: 1.1cqw 1.4cqw; color: #fff; background: #6650cd; border-radius: .65cqw; font-size: 1.3cqw; white-space: nowrap; }
.saas-board-nav { display: flex; align-items: center; justify-content: space-between; border-bottom: .15cqw solid #e5e4ed; margin-bottom: 2cqw; padding-bottom: 1.5cqw; color: #817d8c; font-size: 1.4cqw; }
.saas-board-nav > span:first-child { display: flex; align-items: center; gap: 2.5cqw; }
.saas-board-nav b { font-weight: 500; color: #6750c9; position: relative; }
.saas-board-nav b::after { content: ''; position: absolute; height: .3cqw; background: currentColor; bottom: -1.65cqw; left: 0; right: 0; }
.saas-board-filter { font-size: 1.3cqw; }
.saas-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4cqw; flex: 1; min-height: 0; }
.saas-column { display: flex; flex-direction: column; gap: 1.3cqw; min-width: 0; padding: 1.2cqw; background: #f0eef8; border-radius: 1cqw; }
.saas-column-progress { background: #f6efe7; }
.saas-column-done { background: #eaf2ef; }
.saas-column-heading { display: flex; align-items: center; gap: .65cqw; padding: .3cqw .1cqw .6cqw; font-size: 1.5cqw; font-weight: 500; color: #514d62; white-space: nowrap; }
.saas-column-heading > i { display: block; width: .9cqw; height: .9cqw; border-radius: 50%; background: #8d7bc6; }
.saas-column-progress .saas-column-heading > i { background: #d0924f; }
.saas-column-done .saas-column-heading > i { background: #55977a; }
.saas-column-heading > small { display: grid; place-items: center; min-width: 1.8cqw; height: 1.8cqw; font-size: 1.1cqw; font-weight: 400; color: #85808e; }
.saas-column-heading > b { margin-left: auto; font-size: 1.8cqw; font-weight: 400; color: #8c849b; }
.saas-task { display: flex; flex-direction: column; gap: 1cqw; padding: 1.2cqw 1.3cqw; background: #fff; border: .14cqw solid #e5e3ed; border-radius: .9cqw; box-shadow: 0 .3cqw .6cqw #23203708; }
.saas-task > small { padding: .45cqw .6cqw; background: #f3e6d3; color: #89602d; font-size: .9cqw; letter-spacing: .025cqw; align-self: flex-start; border-radius: .35cqw; }
.saas-task > .saas-tag-green { background: #e3eee7; color: #456f58; }
.saas-task > .saas-tag-violet { background: #eae5f9; color: #6c50a5; }
.saas-task > strong { font-size: 1.75cqw; line-height: 1.35; min-height: 4.7cqw; }
.saas-task > span { display: flex; align-items: center; justify-content: space-between; gap: .4cqw; }
.saas-task > span > i { display: grid; place-items: center; flex: 0 0 2.3cqw; height: 2.3cqw; background: #e8e2f5; color: #6b538e; font: 1cqw Arial,sans-serif; border-radius: 50%; }
.saas-task > span > .saas-avatar-mint { background: #d9eae3; color: #426b59; }
.saas-task > span > .saas-avatar-peach { background: #f4e2d3; color: #9b6d49; }
.saas-task > span > small { font-size: 1.1cqw; color: #837b8f; white-space: nowrap; }
.saas-task > span > .saas-completed { color: #548369; }
.saas-task-active { border-color: #a895df; box-shadow: 0 .5cqw 1.2cqw #65529716; }
.saas-task > .saas-task-progress { height: .65cqw; background: #ece8f8; border-radius: .5cqw; overflow: hidden; }
.saas-task-progress > b { display: block; width: 60%; height: 100%; background: #8e78d8; }
.saas-add-task { display: block; padding: .6cqw .3cqw .1cqw; color: #898092; font-size: 1.25cqw; }