@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-optical-sizing: auto;
  font-family: "Manrope", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

:root {
  --gutterX: 1.5rem;
  --gutterY: 0;
}

button,
input {
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  padding-right: calc(var(--gutterX) * 0.5);
  padding-left: calc(var(--gutterX) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutterY));
  margin-right: calc(-0.5 * var(--gutterX));
  margin-left: calc(-0.5 * var(--gutterX));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutterX) * 0.5);
  padding-left: calc(var(--gutterX) * 0.5);
  margin-top: var(--gutterY);
}

[class^=col-lg-] {
  width: 100%;
}

@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.auth {
  display: grid;
  height: 100vh;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.auth::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: #f1edff;
  border-radius: 50%;
  bottom: -150px;
  left: -80px;
}
.auth::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: #edf4ff;
  border-radius: 50%;
  top: -150px;
  right: -80px;
}
.auth .container {
  min-height: 45vh;
}
.auth .container .row {
  align-items: center;
}
.auth .container .row .left {
  border-right: 1px solid #edf0f5;
}
.auth .container .row .left .intro h1 {
  font-size: 42px;
  color: #101828;
}
.auth .container .row .left .intro p {
  font-size: 18px;
  margin-top: 6px;
  color: #64748b;
}
.auth .container .row .left .accent {
  width: 120px;
  height: 6px;
  margin-top: 40px;
  border-radius: 10px;
  background: linear-gradient(90deg, #7b61ff, #4f8cff);
}
.auth .container .row .right {
  text-align: center;
}
.auth .container .row .right h2 {
  font-size: 36px;
  font-weight: 700;
  color: #101828;
}
.auth .container .row .right p {
  color: #64748b;
}
.auth .container .row .right .authentication {
  margin-top: 24px;
}
.auth .container .row .right .authentication .divider {
  gap: 16px;
  display: flex;
  align-items: center;
}
.auth .container .row .right .authentication .divider .line {
  flex: 1;
  height: 1px;
  background: #edf0f5;
}
.auth .container .row .right .authentication .divider #google {
  flex-shrink: 0;
}
.auth .container .row .right .authentication p {
  font-size: 13px;
  margin-top: 12px;
}
.auth .container .row .right .authentication p a {
  color: #5268b5;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .auth .container {
    min-height: 70vh;
  }
  .auth .container .row .left {
    border-right: none;
  }
  .auth .container .row .right {
    margin-top: 62px;
  }
}
.idora {
  margin: 32px 0;
}
.idora .container .row article .profile {
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
}
.idora .container .row article .profile .left figure img {
  width: 210px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 1/1;
  background-color: #EDEFF3;
}
.idora .container .row article .profile .right .username h1 {
  margin: 0;
  color: #101828;
}
.idora .container .row article .profile .right .username p {
  color: #64748b;
}
.idora .container .row article .profile .right .username p a {
  color: #5268b5;
  text-decoration: underline;
}
.idora .container .row article .profile .right .bio {
  margin-top: 12px;
}
.idora .container .row article .profile .right .socials {
  margin-top: 12px;
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.idora .container .row article .profile .right .socials a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101828;
  border-radius: 8px;
  background-color: #edeff3;
}
.idora .container .row article .profile .right .actions {
  margin-top: 16px;
  gap: 12px;
  display: flex;
  align-items: center;
}
.idora .container .row article .profile .right .actions a {
  color: #5268b5;
  text-decoration: underline;
}
.idora .container .row article .profile .right .actions span {
  color: #64748b;
}
.idora .container .row article .description {
  margin-top: 18px;
}
.idora .container .row article .description small {
  color: #64748b;
}
.idora .container .row article .description p {
  margin-top: 6px;
}
.idora .container .row article .description a {
  color: #5268b5;
  text-decoration: underline;
}
.idora .container .row article .description h1,
.idora .container .row article .description h2,
.idora .container .row article .description h3,
.idora .container .row article .description h4,
.idora .container .row article .description h5,
.idora .container .row article .description h6 {
  margin-top: 18px;
  color: #101828;
}
.idora .container .row article .description strong {
  color: #101828;
}
.idora .container .row article .description ul {
  margin-top: 12px;
  padding-left: 18px;
}
.idora .container .row article .description ul li {
  margin-top: 6px;
}
.idora .container .row article .others {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 18px;
}
.idora .container .row article .others .other {
  min-width: 0;
  flex: 1 1 150px;
}
.idora .container .row article .others .other small {
  color: #64748b;
}
.idora .container .row article .others .other p {
  margin-top: 6px;
}

@media (max-width: 576px) {
  .idora {
    margin: 12px 0 32px;
  }
  .idora .container .row article .profile {
    gap: 12px;
  }
  .idora .container .row article .profile .left figure img {
    width: 100%;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dashboard {
  color: #101828;
}
.dashboard .container {
  max-width: 980px;
  padding: 0 24px;
}
.dashboard a:focus-visible,
.dashboard button:focus-visible,
.dashboard select:focus-visible {
  outline: 2px solid #5268b5;
  outline-offset: 3px;
}
.dashboard {
  /* ---------- Hero ---------- */
}
.dashboard .hero {
  text-align: center;
  padding: 72px 0 48px;
}
.dashboard .hero figure {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
}
.dashboard .hero figure div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #edf0f5;
  background: #f5f5f7 center/cover no-repeat;
}
.dashboard .hero figure label {
  right: 0;
  bottom: 2px;
  width: 34px;
  height: 34px;
  display: grid;
  position: absolute;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
  border-radius: 50%;
  background: #101828;
  border: 3px solid #fff;
  transition: transform 0.2s;
}
.dashboard .hero figure label:hover {
  transform: scale(1.08);
}
.dashboard .hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.dashboard .hero p {
  margin-top: 10px;
  font-size: 19px;
  color: #475569;
}
.dashboard .hero .actions {
  gap: 22px;
  display: flex;
}
.dashboard .hero .actions a,
.dashboard .hero .actions button {
  gap: 7px;
  border: 0;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: none;
}
.dashboard .hero .actions a[hidden],
.dashboard .hero .actions button[hidden] {
  display: none;
}
.dashboard .hero .actions a {
  color: #5268b5;
}
.dashboard .hero .actions a:hover {
  color: #42559a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dashboard .hero .actions a[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}
.dashboard .hero .actions a[aria-disabled=true]:hover {
  color: #5268b5;
  text-decoration: none;
}
.dashboard .hero .actions button {
  color: #475569;
}
.dashboard .hero .actions button:hover {
  color: #d92d20;
}
.dashboard .hero .actions button:disabled, .dashboard .hero .actions button:disabled:hover {
  color: #475569;
  opacity: 0.45;
  cursor: not-allowed;
}
.dashboard .hero .actions[hidden] {
  display: none;
}
.dashboard .hero .actions {
  margin-top: 22px;
  justify-content: center;
}
.dashboard {
  /* ---------- Section tabs ---------- */
}
.dashboard .tabs {
  top: 0;
  z-index: 40;
  height: 48px;
  position: sticky;
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid #edf0f5;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.dashboard .tabs .container {
  gap: 28px;
  height: 100%;
  display: flex;
  overflow-x: auto;
  align-items: center;
  scrollbar-width: none;
}
.dashboard .tabs .container::-webkit-scrollbar {
  display: none;
}
.dashboard .tabs a {
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: #475569;
  transition: color 0.2s;
}
.dashboard .tabs a:hover, .dashboard .tabs a.active {
  color: #101828;
}
.dashboard .tabs a.active::after {
  content: "";
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  position: absolute;
  background: #101828;
}
.dashboard {
  /* ---------- Form ---------- */
}
.dashboard form {
  padding-bottom: 106px;
}
@media (pointer: coarse) {
  .dashboard form:has(.editor:focus-within) .bar {
    opacity: 0;
    pointer-events: none;
  }
}
.dashboard form section {
  gap: 48px;
  display: grid;
  padding: 56px 0;
  border-bottom: 1px solid #edf0f5;
  scroll-margin-top: 72px;
  grid-template-columns: 280px minmax(0, 1fr);
}
.dashboard form section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.dashboard form section h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.dashboard form section > div:first-child p {
  margin-top: 8px;
  max-width: 26ch;
  font-size: 14px;
  color: #475569;
}
@media (max-width: 860px) {
  .dashboard form section {
    gap: 24px;
    padding: 40px 0;
    grid-template-columns: 1fr;
  }
  .dashboard form section > div:first-child p {
    max-width: none;
  }
}
.dashboard form .fields {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard form .fields .full {
  grid-column: 1/-1;
}
@media (max-width: 640px) {
  .dashboard form .fields {
    grid-template-columns: 1fr;
  }
  .dashboard form .fields .full {
    grid-column: auto;
  }
}
.dashboard form .field {
  min-width: 0;
}
.dashboard form .field > label:not(.group) {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}
.dashboard form .field > label:not(.group) em {
  margin-left: 2px;
  font-style: normal;
  color: #d92d20;
}
.dashboard form .field > input,
.dashboard form .field > textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
}
.dashboard form .field > textarea {
  min-height: 120px;
  font-size: 16px;
  resize: vertical;
  line-height: 1.55;
}
.dashboard form .field small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  text-align: right;
  color: #8a909c;
  font-variant-numeric: tabular-nums;
}
.dashboard form .field small.over {
  color: #d92d20;
}
.dashboard form .field > input,
.dashboard form .field > textarea,
.dashboard form .group,
.dashboard form .editor {
  border-radius: 12px;
  background: #f5f5f7;
  border: 1px solid transparent;
}
.dashboard form .field > input:focus-within,
.dashboard form .field > textarea:focus-within,
.dashboard form .group:focus-within,
.dashboard form .editor:focus-within {
  background: #fff;
  border-color: #5268b5;
}
.dashboard form ::-moz-placeholder {
  color: #8a909c;
}
.dashboard form ::placeholder {
  color: #8a909c;
}
.dashboard form input:-webkit-autofill {
  -webkit-text-fill-color: #101828;
  -webkit-transition: background-color 600000s 0s;
  transition: background-color 600000s 0s;
}
.dashboard form {
  /* ---------- Description editor ---------- */
}
.dashboard form .editor.invalid {
  border-color: #d92d20;
}
.dashboard form .editor .tools {
  top: 48px;
  z-index: 5;
  gap: 4px;
  display: flex;
  padding: 8px;
  position: sticky;
  flex-wrap: wrap;
  align-items: center;
  background: inherit;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e3e5ea;
}
.dashboard form .editor .tools select,
.dashboard form .editor .tools button {
  height: 32px;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background: transparent;
}
.dashboard form .editor .tools select {
  padding: 0 8px;
  font-size: 14px;
  color: #101828;
}
.dashboard form .editor .tools button {
  width: 32px;
  color: #475569;
}
.dashboard form .editor .tools button:hover {
  color: #101828;
}
.dashboard form .editor .tools button.on {
  color: #5268b5;
  background: #e6e9f4;
}
.dashboard form .editor #editor {
  padding: 16px;
  min-height: 320px;
  max-height: 640px;
  overflow-y: auto;
  resize: vertical;
  line-height: 1.6;
}
.dashboard form .editor #editor:empty::before {
  content: attr(data-placeholder);
  color: #8a909c;
}
.dashboard form .editor #editor > :first-child {
  margin-top: 0;
}
.dashboard form .editor #editor p,
.dashboard form .editor #editor ul {
  margin-top: 8px;
}
.dashboard form .editor #editor h2,
.dashboard form .editor #editor h3,
.dashboard form .editor #editor h4,
.dashboard form .editor #editor h5,
.dashboard form .editor #editor h6 {
  margin-top: 16px;
  line-height: 1.25;
}
.dashboard form .editor #editor a {
  color: #5268b5;
  text-decoration: underline;
}
.dashboard form .editor #editor ul {
  padding-left: 18px;
}
.dashboard form .editor #editor li {
  margin-top: 6px;
}
@media (pointer: coarse) {
  .dashboard form .editor {
    display: flex;
    flex-direction: column;
  }
  .dashboard form .editor .tools {
    order: 2;
    position: static;
    border-bottom: 0;
    border-top: 1px solid #e3e5ea;
    border-radius: 0 0 12px 12px;
  }
  .dashboard form .editor:focus-within .tools {
    top: auto;
    position: sticky;
    bottom: var(--kb, 0px);
  }
}
.dashboard form {
  /* ---------- Prefix / icon inputs ---------- */
}
.dashboard form .group {
  display: flex;
  align-items: center;
}
.dashboard form .group span,
.dashboard form .group i {
  color: #475569;
}
.dashboard form .group span {
  padding-left: 16px;
  white-space: nowrap;
}
.dashboard form .group i + span {
  padding-left: 0;
}
.dashboard form .group i {
  width: 46px;
  font-size: 15px;
  text-align: center;
}
.dashboard form .group input {
  flex: 1;
  min-width: 0;
  border: 0;
  min-height: 46px;
  padding: 0 16px 0 2px;
  background: transparent;
}
.dashboard form {
  /* ---------- Resume ---------- */
}
.dashboard form .drop {
  gap: 16px;
  display: flex;
  padding: 22px;
  cursor: pointer;
  align-items: center;
  border-radius: 16px;
  border: 1.5px dashed #d8d8de;
  transition: border-color 0.2s;
}
.dashboard form .drop:hover, .dashboard form .drop.dragover {
  border-color: #5268b5;
}
.dashboard form .drop .icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #475569;
  border-radius: 12px;
  background: #f5f5f7;
}
.dashboard form .drop .text {
  flex: 1;
  min-width: 0;
}
.dashboard form .drop strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}
.dashboard form .drop small {
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: #8a909c;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dashboard form .drop .choose {
  font-size: 14px;
  font-weight: 500;
  color: #5268b5;
}
@media (max-width: 640px) {
  .dashboard form .drop {
    flex-wrap: wrap;
  }
}
.dashboard form .links {
  gap: 22px;
  display: flex;
}
.dashboard form .links a,
.dashboard form .links button {
  gap: 7px;
  border: 0;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: none;
}
.dashboard form .links a[hidden],
.dashboard form .links button[hidden] {
  display: none;
}
.dashboard form .links a {
  color: #5268b5;
}
.dashboard form .links a:hover {
  color: #42559a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dashboard form .links a[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}
.dashboard form .links a[aria-disabled=true]:hover {
  color: #5268b5;
  text-decoration: none;
}
.dashboard form .links button {
  color: #475569;
}
.dashboard form .links button:hover {
  color: #d92d20;
}
.dashboard form .links button:disabled, .dashboard form .links button:disabled:hover {
  color: #475569;
  opacity: 0.45;
  cursor: not-allowed;
}
.dashboard form .links[hidden] {
  display: none;
}
.dashboard form .links {
  margin-top: 14px;
}
.dashboard form {
  /* ---------- Visibility ---------- */
}
.dashboard form .switch {
  width: 100%;
  padding: 4px;
  display: grid;
  max-width: 360px;
  border-radius: 12px;
  background: #f5f5f7;
  grid-template-columns: 1fr 1fr;
}
.dashboard form .switch label {
  cursor: pointer;
  position: relative;
}
.dashboard form .switch input {
  opacity: 0;
  position: absolute;
}
.dashboard form .switch span {
  gap: 8px;
  display: flex;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.dashboard form .switch input:checked + span {
  color: #101828;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.dashboard form .switch input:focus-visible + span {
  outline: 2px solid #5268b5;
}
.dashboard form .logout strong {
  font-size: 15px;
  font-weight: 600;
}
.dashboard form .logout p {
  margin-top: 4px;
  font-size: 14px;
  color: #475569;
}
.dashboard form .logout button {
  gap: 8px;
  height: 44px;
  display: inline-flex;
  margin-top: 16px;
  padding: 0 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #d92d20;
  align-items: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #fecdca;
}
.dashboard form .logout button:hover {
  background: #fef3f2;
}
.dashboard form #visNote {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: #475569;
}
.dashboard {
  /* ---------- Floating save bar ---------- */
}
.dashboard .bar {
  --y: 24px;
  color: #fff;
  border-radius: 999px;
  background: #101828;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.35);
  left: 50%;
  gap: 10px;
  display: flex;
  position: fixed;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--y));
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dashboard .bar.show {
  --y: 0;
  opacity: 1;
  pointer-events: auto;
}
.dashboard .bar {
  gap: 6px;
  bottom: 24px;
  z-index: 60;
  padding: 8px 8px 8px 20px;
}
.dashboard .bar p {
  margin-right: 10px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.dashboard .bar button {
  gap: 8px;
  border: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity 0.2s;
}
.dashboard .bar button[type=button] {
  color: #fff;
  opacity: 0.7;
  background: transparent;
}
.dashboard .bar button[type=button]:hover {
  opacity: 1;
}
.dashboard .bar button[type=submit] {
  color: #101828;
  background: #fff;
}
.dashboard .bar button[type=submit]:hover {
  opacity: 0.9;
}
.dashboard .bar button:disabled, .dashboard .bar button:disabled:hover {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 640px) {
  .dashboard .bar {
    width: calc(100% - 24px);
    justify-content: space-between;
  }
  .dashboard .bar p {
    display: none;
  }
}
.dashboard {
  /* ---------- Toast ---------- */
}
.dashboard .toast {
  --y: -10px;
  color: #fff;
  border-radius: 999px;
  background: #101828;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.35);
  left: 50%;
  gap: 10px;
  display: flex;
  position: fixed;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--y));
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dashboard .toast.show {
  --y: 0;
  opacity: 1;
  pointer-events: auto;
}
.dashboard .toast {
  top: 70px;
  z-index: 200;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 500;
}
.dashboard .toast i {
  color: #32d583;
}
.dashboard .toast.error i {
  color: #f97066;
}
@media (max-width: 640px) {
  .dashboard .container {
    padding: 0 18px;
  }
  .dashboard .hero {
    padding: 48px 0 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard * {
    transition-duration: 0.01ms !important;
  }
}