body {
  background: #f5f2eb;
}

html:has(.modal-backdrop:not([hidden]), .portfolio-cover-backdrop:not([hidden]), .render-lightbox:not([hidden]), .media-photo-lightbox:not([hidden]), .render-context-menu:not([hidden]), .portfolio-context-menu:not([hidden])),
body:has(.modal-backdrop:not([hidden]), .portfolio-cover-backdrop:not([hidden]), .render-lightbox:not([hidden]), .media-photo-lightbox:not([hidden]), .render-context-menu:not([hidden]), .portfolio-context-menu:not([hidden])) {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-backdrop,
.portfolio-cover-backdrop,
.render-lightbox,
.media-photo-lightbox {
  overscroll-behavior: contain;
}

.render-context-menu {
  max-height: min(72vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#santiye-app-root {
  --bg: #f5f2eb;
  --paper: #fcfaf6;
  --ink: #292a25;
  --muted: #77786f;
  --line: #e2ded4;
  --green: #66694a;
  --green-soft: #eeeee4;
  --blue: #66694a;
  --blue-soft: #eeeee4;
  --amber: #9c8057;
  --amber-soft: #f4ede2;
  --red: #a46156;
  --shadow: 0 8px 26px rgba(48, 47, 39, .045);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}

#santiye-app-root .app-shell {
  background: var(--bg);
}

#santiye-app-root .sidebar {
  background: #faf8f3;
  border-color: var(--line);
}

#santiye-app-root .brand {
  color: var(--ink);
}

#santiye-app-root .workspace-label,
#santiye-app-root .nav-caption {
  color: #89897e;
}

#santiye-app-root .workspace-switch {
  border-color: var(--line);
  border-radius: 3px;
  background: #fffefa;
}

#santiye-app-root .workspace-avatar,
#santiye-app-root .profile-avatar {
  border-radius: 50%;
  background: #e9e9df;
  color: #5e6242;
}

#santiye-app-root .nav-item {
  border-radius: 2px;
  color: #696b64;
}

#santiye-app-root .nav-item:hover {
  background: #f0eee7;
  color: var(--ink);
}

#santiye-app-root .nav-item.active {
  background: #e9e9df;
  color: #55583c;
  box-shadow: inset 2px 0 #66694a;
}

#santiye-app-root .nav-count {
  background: #f0eee7;
  color: #696b64;
}

#santiye-app-root .weather-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #f4f1e9;
}

#santiye-app-root .profile-button {
  border-color: var(--line);
  background: #faf8f3;
}

#santiye-app-root .main-area {
  max-width: none;
  padding-right: clamp(20px, 3.2vw, 52px);
  padding-left: clamp(20px, 3.2vw, 52px);
}

#santiye-app-root .topbar {
  border-color: var(--line);
}

#santiye-app-root .breadcrumbs strong {
  color: #4a4b41;
}

#santiye-app-root .icon-button,
#santiye-app-root .avatar-small {
  border-color: var(--line);
  background: #fffefa;
  color: #5e6242;
}

#santiye-app-root .view {
  padding-top: 24px;
}

#santiye-app-root .overline {
  color: #838274;
  letter-spacing: 1.65px;
}

#santiye-app-root h1,
#santiye-app-root h2,
#santiye-app-root h3 {
  color: #292a25;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

#santiye-app-root h1 {
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -1.5px;
  line-height: 1.02;
}

#santiye-app-root h2 {
  font-size: 23px;
  letter-spacing: -.3px;
}

#santiye-app-root .subheading {
  color: #707168;
}

#santiye-app-root .button {
  border-radius: 2px;
  letter-spacing: .02em;
}

#santiye-app-root .button-primary {
  background: #66694a;
  box-shadow: none;
}

#santiye-app-root .button-primary:hover {
  background: #55583c;
}

#santiye-app-root .button-outline {
  border-color: #d7d2c7;
  background: #fffefa;
  color: #535449;
}

#santiye-app-root .overview-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  min-height: 390px;
  margin: 0 0 26px;
  border: 1px solid var(--line);
  background: #f0eee7;
}

#santiye-app-root .overview-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(26px, 4vw, 56px);
}

#santiye-app-root .overview-hero-copy .overline {
  margin-bottom: 20px;
}

#santiye-app-root .overview-hero-copy h1 {
  max-width: 470px;
  margin-bottom: 13px;
}

#santiye-app-root .overview-hero-copy .subheading {
  max-width: 370px;
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

#santiye-app-root .overview-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 25px;
}

#santiye-app-root .overview-project-link {
  padding: 8px 0;
  color: #5e6242;
}

#santiye-app-root .overview-hero-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 27px;
  padding-top: 15px;
  border-top: 1px solid #d8d4c9;
}

#santiye-app-root .overview-hero-metric strong {
  color: #66694a;
  font: 400 30px/1 Georgia, "Times New Roman", serif;
}

#santiye-app-root .overview-hero-metric span {
  color: #7a7a70;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 1.5;
}

#santiye-app-root .overview-hero-art {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(247, 244, 235, .04), rgba(38, 41, 34, .12)),
    linear-gradient(145deg, #d9d4c8 0%, #b8b8a8 51%, #878c7d 100%);
}

#santiye-app-root .hero-art-architecture {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 79%;
  height: 83%;
  overflow: hidden;
  background: linear-gradient(90deg, #dedbd0 0 37%, #c7c7b9 37% 41%, #a6aa9a 41% 100%);
  clip-path: polygon(0 20%, 62% 0, 100% 15%, 100% 100%, 0 100%);
  box-shadow: -30px 20px 50px rgba(48, 49, 41, .15);
}

#santiye-app-root .hero-art-architecture::before {
  position: absolute;
  inset: 20% 5% 0 14%;
  background: repeating-linear-gradient(90deg, rgba(81, 87, 72, .46) 0 2px, transparent 2px 18%);
  content: "";
}

#santiye-app-root .hero-art-architecture::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18%;
  background: linear-gradient(165deg, transparent 0 47%, rgba(245, 241, 230, .7) 48% 49%, transparent 50%);
  content: "";
}

#santiye-app-root .hero-art-architecture i {
  position: absolute;
  z-index: 1;
  bottom: 18%;
  width: 15%;
  height: 48%;
  border: 1px solid rgba(88, 91, 77, .25);
  background: rgba(235, 231, 219, .52);
}

#santiye-app-root .hero-art-architecture i:nth-child(1) { left: 10%; }
#santiye-app-root .hero-art-architecture i:nth-child(2) { left: 29%; height: 58%; }
#santiye-app-root .hero-art-architecture i:nth-child(3) { left: 49%; height: 65%; }
#santiye-app-root .hero-art-architecture i:nth-child(4) { left: 69%; height: 54%; }

#santiye-app-root .overview-hero-art > img:not([hidden]) {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#santiye-app-root .overview-hero-art > img[hidden] {
  display: none;
}

#santiye-app-root .hero-art-caption {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 15px 20px;
  background: linear-gradient(90deg, rgba(38, 41, 34, .82), rgba(38, 41, 34, .22));
  color: #fffdf7;
}

#santiye-app-root .hero-art-caption span {
  color: #e0dfd2;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

#santiye-app-root .hero-art-caption b {
  overflow: hidden;
  font: 400 18px Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .hero-art-caption small {
  color: #e1dfd5;
  font-size: 10px;
}

#santiye-app-root .stat-grid {
  gap: 0;
  margin: 0 0 28px;
  border: 1px solid var(--line);
  background: #fbf9f4;
}

#santiye-app-root .stat-card {
  min-height: 110px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#santiye-app-root .stat-card:last-child {
  border-right: 0;
}

#santiye-app-root .stat-top {
  color: #74756b;
}

#santiye-app-root .stat-card > strong {
  color: #292a25;
  font: 400 31px/1 Georgia, "Times New Roman", serif;
}

#santiye-app-root .stat-card > small {
  color: #85857b;
}

#santiye-app-root .stat-icon {
  border-radius: 50%;
}

#santiye-app-root .lavender,
#santiye-app-root .green,
#santiye-app-root .amber,
#santiye-app-root .blue {
  background: #eeeee4;
  color: #66694a;
}

#santiye-app-root .content-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

#santiye-app-root .panel,
#santiye-app-root .project-card,
#santiye-app-root .resource-card {
  border-color: var(--line);
  border-radius: 2px;
  background: #fcfaf6;
  box-shadow: none;
}

#santiye-app-root .panel {
  padding: 20px 0;
}

#santiye-app-root .content-grid > .panel {
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

#santiye-app-root .panel-heading {
  margin-bottom: 17px;
}

#santiye-app-root .panel-heading .overline {
  color: #838274;
}

#santiye-app-root .project-count-pill {
  border-radius: 50%;
  background: #eeeee4;
  color: #5e6242;
}

#santiye-app-root .quiet-link,
#santiye-app-root .panel-link {
  color: #66694a;
}

#santiye-app-root .overview-project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

#santiye-app-root .project-card {
  overflow: hidden;
  border-width: 1px;
  transition: border-color .18s ease, transform .18s ease;
}

#santiye-app-root .project-card:hover {
  transform: translateY(-2px);
  border-color: #b9b8a6;
  box-shadow: none;
}

#santiye-app-root .project-cover {
  height: 205px;
  background: linear-gradient(145deg, #dedfd4, #a9ae9d);
}

#santiye-app-root .project-cover.cover-2 {
  background: linear-gradient(145deg, #e6dfd2, #b9aa94);
}

#santiye-app-root .project-cover.cover-3 {
  background: linear-gradient(145deg, #d8ded8, #929c8f);
}

#santiye-app-root .project-cover.cover-4 {
  background: linear-gradient(145deg, #dedbd2, #a7a18f);
}

#santiye-app-root .cover-architecture {
  position: absolute;
  right: 14%;
  bottom: 0;
  left: 14%;
  height: 81%;
  overflow: hidden;
  background: linear-gradient(90deg, #e8e4d8 0 40%, #bfc2b3 40% 43%, #d2d0c3 43% 100%);
  clip-path: polygon(0 22%, 62% 0, 100% 15%, 100% 100%, 0 100%);
}

#santiye-app-root .cover-architecture i {
  position: absolute;
  bottom: 17%;
  width: 17%;
  height: 44%;
  border: 1px solid rgba(79, 84, 69, .28);
  background: rgba(145, 153, 133, .4);
}

#santiye-app-root .cover-architecture i:nth-child(1) { left: 8%; }
#santiye-app-root .cover-architecture i:nth-child(2) { left: 29%; height: 57%; }
#santiye-app-root .cover-architecture i:nth-child(3) { left: 51%; height: 64%; }
#santiye-app-root .cover-architecture i:nth-child(4) { left: 73%; height: 49%; }

#santiye-app-root .cover-label {
  top: 12px;
  left: 12px;
  border-radius: 0;
  background: rgba(250, 248, 242, .88);
  color: #55583c;
  letter-spacing: 1px;
}

#santiye-app-root .cover-photo.loaded {
  display: block;
}

#santiye-app-root .card-body {
  padding: 14px 15px 15px;
}

#santiye-app-root .card-title-row h3 {
  color: #303129;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .55px;
  text-transform: uppercase;
}

#santiye-app-root .project-status {
  border-radius: 0;
  background: #e9eadf;
  color: #5e6242;
}

#santiye-app-root .project-status.planning {
  background: #f1eade;
  color: #8a7049;
}

#santiye-app-root .card-address,
#santiye-app-root .card-jobs {
  color: #77786f;
}

#santiye-app-root .card-bottom {
  border-color: var(--line);
}

#santiye-app-root .card-code {
  color: #85857b;
}

#santiye-app-root .project-open-link {
  border-color: var(--line);
}

#santiye-app-root .agenda-item {
  border-color: var(--line);
}

#santiye-app-root .agenda-item b,
#santiye-app-root .work-summary-heading h2,
#santiye-app-root .work-group-heading h3 {
  color: #303129;
}

#santiye-app-root .agenda-item small,
#santiye-app-root .work-meta,
#santiye-app-root .work-dates {
  color: #77786f;
}

#santiye-app-root .agenda-item strong,
#santiye-app-root .work-location {
  color: #66694a;
}

#santiye-app-root .week-panel {
  border-color: var(--line);
}

#santiye-app-root .week-day.current {
  background: #eeeee4;
  color: #55583c;
}

#santiye-app-root .work-summary {
  margin-top: 18px;
  border-radius: 2px;
  background: #fcfaf6;
}

#santiye-app-root .work-summary-heading h2 {
  font: 400 23px Georgia, "Times New Roman", serif;
}

#santiye-app-root .work-group,
#santiye-app-root .work-row,
#santiye-app-root .work-row.compact {
  border-color: var(--line);
}

#santiye-app-root .count-badge,
#santiye-app-root .work-index {
  border-radius: 2px;
  background: #eeeee4;
  color: #5e6242;
}

#santiye-app-root .work-title b {
  color: #303129;
}

#santiye-app-root .work-progress strong {
  color: #303129;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

#santiye-app-root .work-progress .progress-track {
  background: #e9e6dc;
}

#santiye-app-root .work-progress .progress-track i {
  background: #777b59;
}

#santiye-app-root .work-action {
  border-color: #d9d5ca;
  border-radius: 2px;
  color: #5e6242;
}

#santiye-app-root .work-action:hover {
  border-color: #b9b8a6;
  background: #f1efe8;
}

#santiye-app-root .filter-chip.selected,
#santiye-app-root .filter-chips .filter-chip.selected {
  border-color: #d9d5ca;
  background: #fffefa;
  color: #5e6242;
}

#santiye-app-root .search-box,
#santiye-app-root .work-filters select,
#santiye-app-root .project-menu,
#santiye-app-root .media-card,
#santiye-app-root .empty-state,
#santiye-app-root .media-empty {
  border-color: var(--line);
  border-radius: 2px;
  background: #fcfaf6;
}

#santiye-app-root .project-menu-item {
  border-radius: 2px;
  color: #696b64;
}

#santiye-app-root .project-menu-item:hover {
  background: #f0eee7;
}

#santiye-app-root .project-menu-item.active {
  background: #66694a;
  color: #fff;
}

#santiye-app-root .modal,
#santiye-app-root .field-label > input,
#santiye-app-root .field-label > select,
#santiye-app-root .field-label > textarea,
#santiye-app-root .location-input {
  border-color: var(--line);
  border-radius: 2px;
}

#santiye-app-root .field-label > input,
#santiye-app-root .field-label > select,
#santiye-app-root .field-label > textarea,
#santiye-app-root .location-input {
  background: #fffefa;
}

#santiye-app-root .assistant-toggle,
#santiye-app-root .assistant-form button {
  background: #66694a;
}

#santiye-app-root .assistant-panel {
  border-color: var(--line);
  border-radius: 3px;
}

#santiye-app-root .assistant-avatar,
#santiye-app-root .assistant-suggestions button {
  border-color: var(--line);
  background: #f4f1e9;
  color: #5e6242;
}

#santiye-app-root .assistant-message.user {
  background: #66694a;
}

.assistant-toggle,
.assistant-form button {
  background: #66694a;
}

.assistant-panel {
  border-color: #e2ded4;
  border-radius: 3px;
}

.assistant-header {
  border-color: #e2ded4;
}

.assistant-avatar,
.assistant-suggestions button {
  border-color: #e2ded4;
  background: #f4f1e9;
  color: #5e6242;
}

.assistant-message {
  background: #f0eee7;
  color: #393a32;
}

.assistant-message.user {
  background: #66694a;
  color: #fff;
}

.assistant-form {
  border-color: #e2ded4;
}

.assistant-form input {
  border-color: #e2ded4;
}

@media (max-width: 1100px) {
  #santiye-app-root .overview-hero {
    grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  }

  #santiye-app-root .overview-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #santiye-app-root .main-area {
    padding-right: 22px;
    padding-left: 22px;
  }

  #santiye-app-root .overview-hero {
    grid-template-columns: 1fr 1fr;
    min-height: 340px;
  }

  #santiye-app-root .overview-hero-copy {
    padding: 26px;
  }

  #santiye-app-root .overview-hero-art {
    min-height: 300px;
  }

  #santiye-app-root .overview-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #santiye-app-root .main-area {
    padding-right: 14px;
    padding-left: 14px;
  }

  #santiye-app-root .overview-hero {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .overview-hero-copy {
    padding: 25px 22px;
  }

  #santiye-app-root .overview-hero-copy h1 {
    font-size: 39px;
  }

  #santiye-app-root .overview-hero-art {
    min-height: 230px;
  }

  #santiye-app-root .overview-hero-actions {
    gap: 9px;
  }

  #santiye-app-root .overview-project-grid {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .project-cover {
    height: 205px;
  }

  #santiye-app-root .stat-card {
    border-bottom: 1px solid var(--line);
  }

  #santiye-app-root .stat-card:nth-child(2) {
    border-right: 0;
  }

  #santiye-app-root .stat-card:nth-child(n + 3) {
    border-bottom: 0;
  }
}

#santiye-app-root .project-overview-highlights {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr);
  gap: 14px;
  margin: 18px 0;
}

#santiye-app-root .project-detail-heading {
  position: relative;
  isolation: isolate;
  min-height: 150px;
  overflow: hidden;
  padding: 18px 22px;
  border: 1px solid #3a3a3a;
  background: #222;
}

#santiye-app-root .project-detail-background,
#santiye-app-root .project-detail-heading::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

#santiye-app-root .project-detail-background {
  object-fit: cover;
  object-position: center 45%;
  opacity: .38;
}

#santiye-app-root .project-detail-heading::after {
  content: "";
  background: linear-gradient(90deg, rgb(30 30 30 / 48%), rgb(30 30 30 / 76%));
  pointer-events: none;
}

#santiye-app-root .project-detail-heading > :not(.project-detail-background) {
  position: relative;
  z-index: 1;
}

#santiye-app-root .project-overview-highlights > .panel {
  min-width: 0;
  border-color: #3a3a3a;
  border-radius: 2px;
  background: #252525;
}

#santiye-app-root .project-overview-progress {
  margin: 18px 0;
  padding: 20px;
  border-color: #3a3a3a;
  background: #222;
}

#santiye-app-root .project-overview-progress > .panel-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

#santiye-app-root .project-overview-progress > .panel-heading h2 {
  margin: 0;
  color: #eeeae2;
  font: 400 21px/1.3 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-overview-progress-intro {
  max-width: 760px;
  margin: 6px 0 0;
  color: #aaa59b;
  font-size: 11px;
  line-height: 1.55;
}

#santiye-app-root .project-overview-all-works {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #49443a;
  background: #1e1e1e;
}

#santiye-app-root .project-overview-all-works > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#santiye-app-root .project-overview-all-works > header .overline {
  margin: 0 0 4px;
  color: #c9ad83;
  font-size: 9px;
  letter-spacing: 1px;
}

#santiye-app-root .project-overview-all-works > header h3 {
  margin: 0;
  color: #f0ede6;
  font: 500 16px/1.35 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-overview-all-works > header h3 span {
  margin-left: 5px;
  color: #d3b792;
  font-size: 12px;
}

#santiye-app-root .project-overview-work-list {
  display: grid;
  gap: 8px;
}

#santiye-app-root .project-overview-work-item {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #3b3934;
  background: #292929;
}

#santiye-app-root .project-overview-work-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#santiye-app-root .project-overview-work-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#santiye-app-root .project-overview-work-heading b {
  color: #eeeae2;
  font-size: 12px;
  line-height: 1.45;
}

#santiye-app-root .project-overview-work-heading small {
  color: #a9a49a;
  font-size: 10px;
  line-height: 1.45;
}

#santiye-app-root .project-overview-work-heading .work-state {
  flex: 0 0 auto;
}

#santiye-app-root .project-overview-work-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

#santiye-app-root .project-overview-work-progress strong {
  color: #e0c49b;
  font: 600 12px "DM Sans", Arial, sans-serif;
  text-align: right;
}

#santiye-app-root .project-overview-work-item > p {
  margin: 0;
  color: #b6b0a5;
  font-size: 10px;
  line-height: 1.5;
}

#santiye-app-root .project-overview-work-item > .project-overview-work-impact {
  color: #e2aaa0;
}

#santiye-app-root .project-overview-progress-areas {
  display: grid;
  gap: 10px;
}

#santiye-app-root .project-overview-progress-area {
  padding: 0 14px 14px;
  border: 1px solid #49443a;
  background: #202020;
}

#santiye-app-root .project-overview-progress-area > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  margin: 0 -14px;
  padding: 10px 14px;
  border-bottom: 1px solid #49443a;
  background: #292929;
}

#santiye-app-root .project-overview-progress-area > header .overline {
  margin: 0 0 4px;
  color: #c9ad83;
  font-size: 9px;
  letter-spacing: 1px;
}

#santiye-app-root .project-overview-progress-area > header h3 {
  margin: 0;
  color: #f0ede6;
  font: 500 17px/1.35 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-overview-progress-area > header > span,
#santiye-app-root .project-overview-progress-group > header > span {
  flex: 0 0 auto;
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .project-overview-progress-groups {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#santiye-app-root .project-overview-progress-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid #3b3934;
  background: #252525;
}

#santiye-app-root .project-overview-progress-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #3a3a3a;
}

#santiye-app-root .project-overview-progress-group > header h3 {
  margin: 0;
  color: #dec8a8;
  font: 600 13px/1.4 "Manrope", Arial, sans-serif;
}

#santiye-app-root .project-overview-progress-subgroup + .project-overview-progress-subgroup {
  margin-top: 12px;
}

#santiye-app-root .project-overview-progress-subgroup > h4 {
  margin: 0 0 7px;
  color: #bcb4a8;
  font: 500 11px/1.4 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-overview-progress-items {
  display: grid;
  gap: 6px;
}

#santiye-app-root .project-overview-progress-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#santiye-app-root .project-overview-progress-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#santiye-app-root .project-overview-progress-top b {
  color: #eeeae2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

#santiye-app-root .project-overview-progress-top strong {
  flex: 0 0 auto;
  color: #e0c49b;
  font: 600 14px/1.2 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-overview-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 8px;
  background: #42403a;
}

#santiye-app-root .project-overview-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a7f5a, #dfc49a);
  transition: width .25s ease;
}

#santiye-app-root .project-overview-progress-item small {
  color: #a9a49a;
  font-size: 10px;
  line-height: 1.4;
}

#santiye-app-root .project-delivery-list,
#santiye-app-root .project-team-list,
#santiye-app-root .project-workflow-items {
  display: grid;
  gap: 8px;
}

#santiye-app-root .project-delivery-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #3a3a3a;
}

#santiye-app-root .project-delivery-date {
  color: #d3b792;
  font-size: 11px;
  font-weight: 700;
}

#santiye-app-root .project-delivery-item > div,
#santiye-app-root .project-delivery-item > div small {
  display: grid;
  gap: 4px;
}

#santiye-app-root .project-delivery-item > div b {
  color: #eeeae2;
  font-size: 11px;
}

#santiye-app-root .project-delivery-item > div small {
  color: #9e998f;
  font-size: 9px;
}

#santiye-app-root .project-team-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 0;
  border-top: 1px solid #3a3a3a;
  color: #e7e3dc;
  font-size: 10px;
}

#santiye-app-root .project-team-person i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #38332c;
  color: #e0c49b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

#santiye-app-root .project-workflow-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

#santiye-app-root .project-workflow-summary span {
  padding: 9px 12px;
  border: 1px solid #3b3b3b;
  background: #252525;
  color: #aaa59c;
  font-size: 10px;
}

#santiye-app-root .project-workflow-summary b {
  margin-right: 4px;
  color: #e0c49b;
}

#santiye-app-root .project-workflow-hint {
  margin: 8px 0 18px;
  color: #9e998f;
  font-size: 10px;
  line-height: 1.6;
}

#santiye-app-root .project-workflow-areas {
  display: grid;
  gap: 18px;
}

#santiye-app-root .project-workflow-area {
  padding: 18px;
  border: 1px solid #3a3a3a;
  background: #202020;
}

#santiye-app-root .project-workflow-area > header {
  padding-bottom: 12px;
  border-bottom: 1px solid #3a3a3a;
}

#santiye-app-root .project-workflow-area > header .overline {
  margin-bottom: 5px;
}

#santiye-app-root .project-workflow-area > header h2 {
  margin: 0;
  color: #eeeae2;
  font: 600 19px/1.3 "Manrope", Arial, sans-serif;
}

#santiye-app-root .project-workflow-groups {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

#santiye-app-root .project-workflow-subgroup {
  margin: 10px 0 0 14px;
  padding-left: 12px;
  border-left: 1px solid #48443d;
}

#santiye-app-root .project-workflow-subgroup > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
}

#santiye-app-root .project-workflow-subgroup > header h4 {
  margin: 0;
  color: #bcb4a8;
  font: 500 10px/1.4 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-workflow-subgroup > header span {
  color: #969188;
  font-size: 9px;
}

#santiye-app-root .project-workflow-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#santiye-app-root .project-workflow-group > header h3 {
  margin: 0;
  color: #d6c6ad;
  font: 600 12px/1.4 "Manrope", Arial, sans-serif;
}

#santiye-app-root .project-workflow-group > header span {
  color: #969188;
  font-size: 9px;
}

#santiye-app-root .project-workflow-item {
  display: grid;
  gap: 10px;
  padding: 0 15px 15px;
  border: 1px solid #3a3a3a;
  border-top: 0;
  background: #262626;
}

#santiye-app-root .project-workflow-row {
  min-width: 0;
  border: 1px solid #3d3b36;
  background: #292929;
}

#santiye-app-root .project-workflow-row[open] {
  border-color: #675a43;
}

#santiye-app-root .project-workflow-row-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(105px, 150px) auto auto 18px;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 12px 15px;
  list-style: none;
  cursor: pointer;
}

#santiye-app-root .project-workflow-row-summary::-webkit-details-marker {
  display: none;
}

#santiye-app-root .project-workflow-row-name {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#santiye-app-root .project-workflow-row-name b {
  color: #eeeae2;
  font-size: 12px;
  line-height: 1.4;
}

#santiye-app-root .project-workflow-row-name small {
  overflow: hidden;
  color: #aaa59b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .project-workflow-row-progress {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

#santiye-app-root .project-workflow-row-progress strong {
  color: #e0c49b;
  font-size: 11px;
  text-align: right;
}

#santiye-app-root .project-workflow-row-progress > i {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #42403a;
}

#santiye-app-root .project-workflow-row-progress > i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a7f5a, #dfc49a);
}

#santiye-app-root .project-workflow-row-thumbnails {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

#santiye-app-root .project-workflow-row-thumbnails img,
#santiye-app-root .project-workflow-row-thumbnails small {
  width: 33px;
  height: 33px;
  margin-left: -5px;
  border: 2px solid #292929;
  border-radius: 50%;
  background: #37342e;
  object-fit: cover;
}

#santiye-app-root .project-workflow-row-thumbnails small {
  display: grid;
  place-items: center;
  color: #e0c49b;
  font-size: 9px;
  font-weight: 700;
}

#santiye-app-root .project-workflow-row-chevron {
  color: #c9ad83;
  font-size: 16px;
  transition: transform .2s ease;
}

#santiye-app-root .project-workflow-row[open] .project-workflow-row-chevron {
  transform: rotate(180deg);
}

#santiye-app-root .project-workflow-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#santiye-app-root .project-workflow-item-title b {
  color: #eeeae2;
  font-size: 11px;
}

#santiye-app-root .workflow-status {
  padding: 4px 7px;
  background: #38332c;
  color: #d3b792;
  font-size: 9px;
}

#santiye-app-root .workflow-status.active {
  background: #33392e;
  color: #c3d0a6;
}

#santiye-app-root .workflow-status.complete {
  background: #2e3931;
  color: #b7d4be;
}

#santiye-app-root .workflow-status.blocked {
  background: #473330;
  color: #e2a99d;
}

#santiye-app-root .project-workflow-fields {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(180px, 1.2fr) minmax(150px, .9fr);
  gap: 9px;
}

#santiye-app-root .project-workflow-fields label,
#santiye-app-root .project-workflow-note {
  display: grid;
  gap: 5px;
  color: #aaa59c;
  font-size: 9px;
}

#santiye-app-root .project-workflow-fields select,
#santiye-app-root .project-workflow-fields input,
#santiye-app-root .project-workflow-note textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #46433c;
  border-radius: 2px;
  background: #1e1e1e;
  color: #eeeae2;
  font: 10px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-workflow-note textarea {
  resize: vertical;
}

#santiye-app-root .project-workflow-item > .button {
  justify-self: start;
  min-height: 30px;
  font-size: 9px;
}

#santiye-app-root .project-workflow-selection-media {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #3d3b36;
  background: #222;
}

#santiye-app-root .project-workflow-selection-media > div:first-child {
  display: grid;
  gap: 4px;
}

#santiye-app-root .project-workflow-selection-media > div:first-child b {
  color: #eeeae2;
  font-size: 11px;
}

#santiye-app-root .project-workflow-selection-media > div:first-child small,
#santiye-app-root .project-workflow-no-photos {
  margin: 0;
  color: #a9a49a;
  font-size: 10px;
}

#santiye-app-root .project-workflow-selection-media .project-workflow-document-heading {
  display: grid;
  gap: 4px;
  padding-top: 9px;
  border-top: 1px solid #3d3b36;
}

#santiye-app-root .project-workflow-document-heading b {
  color: #eeeae2;
  font-size: 11px;
}

#santiye-app-root .project-workflow-document-heading small {
  color: #a9a49a;
  font-size: 10px;
}

#santiye-app-root .project-workflow-documents {
  display: grid;
  gap: 5px;
}

#santiye-app-root .project-workflow-documents > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #3d3b36;
  background: #292929;
}

#santiye-app-root .project-workflow-documents a {
  overflow: hidden;
  color: #d6bd98;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .project-workflow-documents button {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid #51433c;
  background: #372c29;
  color: #e2aaa0;
  cursor: pointer;
}

#santiye-app-root .project-workflow-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

#santiye-app-root .project-workflow-photos figure {
  width: 128px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #45423c;
  background: #292929;
}

#santiye-app-root .project-workflow-photos figure > a {
  display: block;
  height: 88px;
}

#santiye-app-root .project-workflow-photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#santiye-app-root .project-workflow-photos figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
}

#santiye-app-root .project-workflow-photos figcaption span {
  overflow: hidden;
  color: #d3cec4;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .project-workflow-photos figcaption button {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid #51433c;
  background: #372c29;
  color: #e2aaa0;
  cursor: pointer;
}

#santiye-app-root .project-workflow-photo-add {
  position: relative;
  justify-self: start;
  overflow: hidden;
  cursor: pointer;
}

#santiye-app-root .project-workflow-photo-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#santiye-app-root .assistant-message {
  white-space: pre-line;
}

@media (max-width: 820px) {
  #santiye-app-root .project-overview-highlights {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .project-overview-progress-items {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .project-workflow-row-summary {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 8px;
  }

  #santiye-app-root .project-workflow-row-progress {
    grid-column: 1;
    max-width: 190px;
  }

  #santiye-app-root .project-workflow-row-summary > .workflow-status,
  #santiye-app-root .project-workflow-row-thumbnails {
    grid-column: 2;
  }

  #santiye-app-root .project-workflow-row-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 600px) {
  #santiye-app-root .project-workflow-area {
    padding: 12px;
  }

  #santiye-app-root .project-overview-progress-area {
    padding: 0 12px 12px;
  }

  #santiye-app-root .project-overview-progress-area > header {
    margin: 0 -12px;
    padding: 9px 12px;
  }

  #santiye-app-root .project-overview-progress-group {
    padding: 8px;
  }

  #santiye-app-root .project-workflow-fields {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .project-delivery-item {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  #santiye-app-root .project-delivery-item > .work-state {
    grid-column: 2;
    justify-self: start;
  }

  #santiye-app-root .project-overview-progress {
    padding: 13px;
  }

  #santiye-app-root .project-overview-progress-area {
    padding: 11px;
  }

  #santiye-app-root .project-overview-all-works {
    padding: 11px;
  }

  #santiye-app-root .project-overview-work-item {
    padding: 11px;
  }

  #santiye-app-root .project-overview-work-heading {
    flex-direction: column;
  }
}

#santiye-app-root .workspace-switch {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .workspace-roster {
  position: absolute;
  z-index: 25;
  top: 112px;
  right: 12px;
  left: 12px;
  display: grid;
  max-height: min(68vh, 560px);
  overflow: auto;
  padding: 10px;
  border: 1px solid #e6e2d9;
  border-radius: 9px;
  background: #fffefa;
  box-shadow: 0 16px 42px rgba(27, 35, 29, .18);
}

#santiye-app-root .workspace-roster[hidden],
#santiye-app-root .notification-panel[hidden] {
  display: none !important;
}

#santiye-app-root .workspace-roster-heading,
#santiye-app-root .notification-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 5px 9px;
  color: #27332b;
  font-size: 11px;
}

#santiye-app-root .workspace-roster-heading span,
#santiye-app-root .notification-panel-heading span {
  color: #8a918a;
  font-size: 9px;
}

#santiye-app-root .workspace-roster-person,
#santiye-app-root .notification-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 5px;
  border: 0;
  border-top: 1px solid #efede8;
  background: transparent;
  color: #29352d;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .workspace-roster-person:hover,
#santiye-app-root .notification-item:hover {
  background: #f3f1eb;
}

#santiye-app-root .workspace-roster-person > span:nth-child(2),
#santiye-app-root .notification-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
  flex: 1;
}

#santiye-app-root .workspace-roster-person b,
#santiye-app-root .notification-item b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .workspace-roster-person small,
#santiye-app-root .notification-item small,
#santiye-app-root .workspace-roster-note {
  color: #7d857d;
  font-size: 8px;
}

#santiye-app-root .workspace-roster-person i,
#santiye-app-root .notification-item i {
  color: #a58251;
  font-size: 15px;
  font-style: normal;
}

#santiye-app-root .workspace-roster-note {
  margin: 5px;
  line-height: 1.5;
}

@media (min-width: 601px) and (max-width: 820px) {
  #santiye-app-root .workspace-roster {
    right: auto;
    left: 76px;
    width: 280px;
  }
}

#santiye-app-root .topbar {
  position: relative;
  z-index: 10;
}

#santiye-app-root .notification-button {
  position: relative;
}

#santiye-app-root .notification-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  display: grid;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  place-items: center;
  border-radius: 9px;
  background: #bb5c52;
  color: #fff;
  font-size: 8px;
  line-height: 1;
}

#santiye-app-root .notification-badge[hidden] {
  display: none;
}

#santiye-app-root .notification-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% - 4px);
  right: 0;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 440px);
  overflow: auto;
  padding: 10px;
  border: 1px solid #e6e2d9;
  border-radius: 9px;
  background: #fffefa;
  box-shadow: 0 16px 42px rgba(27, 35, 29, .18);
}

#santiye-app-root .notification-date {
  display: grid;
  min-width: 47px;
  min-height: 34px;
  place-items: center;
  padding: 4px;
  border-radius: 5px;
  background: #f2eee5;
  color: #8e6e3f;
  font-size: 9px;
  font-weight: 700;
}

#santiye-app-root .calendar-pin.work-calendar-entry i {
  background: #d3b17e;
}

#santiye-app-root .calendar-next-work-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0 4px;
  padding: 12px;
  border: 1px solid #51483a;
  background: #2a2925;
  color: #eeeae2;
}

#santiye-app-root .calendar-next-work-note > div {
  display: grid;
  gap: 4px;
}

#santiye-app-root .calendar-next-work-note .overline {
  margin: 0;
  color: #d3b17e;
  font-size: 8px;
}

#santiye-app-root .calendar-next-work-note b {
  font-size: 12px;
}

#santiye-app-root .calendar-next-work-note small,
#santiye-app-root .calendar-next-work-note p:not(.overline) {
  margin: 0;
  color: #b7b2a8;
  font-size: 9px;
  line-height: 1.45;
}

#santiye-app-root .year-calendar-date.selected {
  box-shadow: inset 0 0 0 1px #e0c49b;
}

#santiye-app-root .year-calendar-day-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .year-calendar-event {
  width: 100%;
  padding: 1px 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .year-calendar-event:hover {
  text-decoration: underline;
}

#santiye-app-root .project-calendar-day-details {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #393939;
  background: #252525;
}

#santiye-app-root .calendar-day-details-heading,
#santiye-app-root .calendar-work-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#santiye-app-root .calendar-day-details-heading h3,
#santiye-app-root .calendar-work-detail h4 {
  margin: 3px 0;
  color: #eeeae2;
  font-size: 13px;
}

#santiye-app-root .calendar-day-details-heading > span {
  color: #b7b2a8;
  font-size: 9px;
}

#santiye-app-root .calendar-work-detail {
  margin-top: 9px;
  padding: 10px;
  border-top: 1px solid #393939;
}

#santiye-app-root .calendar-work-detail .overline {
  margin: 0;
  color: #a29e96;
  font-size: 8px;
}

#santiye-app-root .calendar-work-detail > p,
#santiye-app-root .calendar-work-detail-dates,
#santiye-app-root .calendar-work-note,
#santiye-app-root .calendar-work-impact {
  margin: 5px 0 0;
  color: #c9c4ba;
  font-size: 9px;
  line-height: 1.5;
}

#santiye-app-root .calendar-work-impact {
  color: #e0c49b;
}

#santiye-app-root .day-task-note {
  margin: 6px 0 0;
  color: #777f78;
  font-size: 9px;
  line-height: 1.45;
}

#santiye-app-root .work-task-instructions {
  margin: 6px 0 0;
  color: #85857b;
  font-size: 10px;
  line-height: 1.45;
}

#santiye-app-root .project-upcoming-layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 600px) {
  #santiye-app-root .notification-panel {
    right: -34px;
  }

  #santiye-app-root .calendar-next-work-note {
    align-items: flex-start;
  }
}

:root {
  --workspace-sidebar-width: 260px;
}

#santiye-app-root.auth-locked {
  display: none;
}

#santiye-app-root .sidebar {
  width: var(--workspace-sidebar-width);
  transition: none;
  container-type: inline-size;
}

#santiye-app-root .main-area {
  margin-left: var(--workspace-sidebar-width);
  max-width: none;
}

#santiye-app-root .brand {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  gap: 0;
  padding: 0 7px;
}

#santiye-app-root .brand-logo {
  width: 100%;
  max-height: 86px;
  object-fit: contain;
  object-position: center;
}

#santiye-app-root .auth-brand span {
  display: grid;
  gap: 3px;
  color: #e7e3dc;
  font: 700 15px/1.1 "Manrope", Arial, sans-serif;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

#santiye-app-root .auth-brand small {
  color: #aaa59b;
  font: 600 8px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: 3.2px;
}

#santiye-app-root .main-nav {
  gap: 5px;
}

#santiye-app-root .nav-item {
  font-size: clamp(12px, 3.4cqw, 15px);
}

#santiye-app-root .workspace-label,
#santiye-app-root .nav-caption {
  font-size: clamp(9px, 2.7cqw, 11px);
}

#santiye-app-root .workspace-switch b {
  font-size: clamp(11px, 3.1cqw, 13px);
}

#santiye-app-root .workspace-switch small {
  font-size: clamp(10px, 2.8cqw, 12px);
}

#santiye-app-root .nav-caption {
  margin-top: 21px;
}

#santiye-app-root .sidebar-resizer {
  position: fixed;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: calc(var(--workspace-sidebar-width) - 3px);
  width: 6px;
  cursor: col-resize;
  touch-action: none;
}

#santiye-app-root .sidebar-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: #333;
  content: "";
  transition: background .16s ease, width .16s ease;
}

#santiye-app-root .sidebar-resizer:hover::after,
#santiye-app-root .sidebar-resizer:focus-visible::after,
body.sidebar-resizing #santiye-app-root .sidebar-resizer::after {
  left: 1px;
  width: 3px;
  background: #c3a47a;
}

body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

#santiye-app-root .manager-session-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#santiye-app-root .manager-session-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

#santiye-app-root .manager-session-heading h2 {
  margin: 0;
}

#santiye-app-root .manager-session-heading p:last-child {
  margin: 3px 0 0;
  color: #aaa59b;
  font-size: 11px;
}

#santiye-app-root .manager-access-note {
  margin-top: 14px;
  border-color: #51483a;
  background: #292722;
  color: #c9c4ba;
  font-size: 11px;
  line-height: 1.6;
}

#santiye-app-root .manager-access-note p {
  margin: 0;
}

.auth-gate {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background:
    radial-gradient(ellipse at 86% 12%, rgba(196, 173, 131, .13), transparent 34%),
    #202020;
  color: #eeeae2;
  font-family: "DM Sans", Arial, sans-serif;
}

.auth-gate[hidden] {
  display: none;
}

.auth-card {
  width: min(440px, 100%);
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid #393832;
  background: #252523;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 42px;
  color: inherit;
  text-decoration: none;
}

.auth-card .field-label[hidden] {
  display: none;
}

.auth-input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  margin-top: 6px;
  box-sizing: border-box;
  border: 1px solid #46433c;
  border-radius: 12px;
  background: #1f1f1d;
  color: #aaa59b;
}

.auth-input:focus-within {
  border-color: #c3a47a;
}

.auth-input > svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-card .auth-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eeeae2;
  font-size: 15px;
  outline: none;
  box-shadow: none;
}

.password-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa59b;
  cursor: pointer;
}

.password-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
  color: #eeeae2;
}

.password-toggle .eye-off,
.password-toggle[aria-pressed="true"] .eye-on {
  display: none;
}

.password-toggle[aria-pressed="true"] .eye-off {
  display: block;
}

.auth-brand img {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-position: center;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.auth-brand span {
  display: grid;
  gap: 3px;
  color: #e7e3dc;
  font: 700 16px/1.1 "Manrope", Arial, sans-serif;
  letter-spacing: 1.2px;
}

.auth-brand small {
  color: #aaa59b;
  font: 600 8px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: 3.2px;
}

.auth-card > .overline {
  color: #c3a47a;
}

.auth-card h1 {
  margin: 0;
  color: #eeeae2;
  font: 500 clamp(23px, 4vw, 30px)/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -.7px;
}

.auth-subtitle {
  margin: 9px 0 24px;
  color: #aaa59b;
  font-size: 12px;
}

.auth-card .field-label {
  margin-bottom: 14px;
  color: #c9c4ba;
}

.auth-card input {
  border-color: #46433c;
  background: #1f1f1d;
  color: #eeeae2;
}

.auth-submit {
  width: 100%;
  margin-top: 6px;
}

.auth-error {
  min-height: 18px;
  margin: 4px 0;
  color: #efaaa3;
  font-size: 10px;
}

.auth-local-warning {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid #393832;
  color: #aaa59b;
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  #santiye-app-root .sidebar {
    width: 68px;
  }

  #santiye-app-root .workspace-label,
  #santiye-app-root .nav-caption,
  #santiye-app-root .nav-item {
    font-size: 0;
  }

  #santiye-app-root .workspace-switch > span:not(.workspace-avatar) {
    display: none;
  }

  #santiye-app-root .main-area {
    margin-left: 68px;
  }

  #santiye-app-root .sidebar-resizer {
    display: none;
  }

  #santiye-app-root .brand {
    justify-content: center;
    padding: 0;
  }

  #santiye-app-root .brand-logo {
    width: 42px;
    height: 30px;
    max-height: 34px;
    object-fit: cover;
    object-position: left center;
  }
}

@media (max-width: 600px) {
  #santiye-app-root .sidebar {
    display: none;
  }

  #santiye-app-root .sidebar.open {
    display: flex;
    width: 248px;
  }

  #santiye-app-root .sidebar.open .brand {
    width: 100%;
    min-height: 72px;
    padding: 0 7px;
  }

  #santiye-app-root .sidebar.open .brand-logo {
    width: 100%;
    max-height: 72px;
  }

  #santiye-app-root .sidebar.open .workspace-label,
  #santiye-app-root .sidebar.open .nav-caption {
    font-size: 9px;
  }

  #santiye-app-root .sidebar.open .workspace-switch > span:not(.workspace-avatar) {
    display: block;
  }

  #santiye-app-root .sidebar.open .nav-item {
    font-size: 12px;
  }

  #santiye-app-root .main-area {
    margin-left: 0;
  }

  #santiye-app-root .manager-session-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

#santiye-app-root .month-calendar-panel {
  margin-bottom: 18px;
  padding: 22px;
  border-color: #3a3a3a;
  background: #222;
}

#santiye-app-root .month-calendar-heading,
#santiye-app-root .month-calendar-period,
#santiye-app-root .week-calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#santiye-app-root .month-calendar-heading h2,
#santiye-app-root .week-calendar-heading h2 {
  margin: 3px 0 0;
  color: #eeeae2;
  font: 500 21px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .month-calendar-note {
  margin: 6px 0 0;
  color: #a29e96;
  font-size: 11px;
}

#santiye-app-root .month-calendar-period {
  flex-shrink: 0;
  color: #e0c49b;
  font-size: 14px;
  text-transform: capitalize;
}

#santiye-app-root .month-calendar-period .period-arrow {
  border-color: #46433c;
  background: #252525;
  color: #eeeae2;
}

#santiye-app-root .calendar-pin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0 12px;
  color: #b7b2a8;
  font-size: 10px;
}

#santiye-app-root .calendar-pin-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#santiye-app-root .calendar-pin-legend i,
#santiye-app-root .calendar-pin i,
#santiye-app-root .week-calendar-pin i,
#santiye-app-root .schedule-pin-summary > i {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #d3b17e;
}

#santiye-app-root .calendar-pin-legend .work-start i,
#santiye-app-root .calendar-pin.work-start i,
#santiye-app-root .week-calendar-pin.work-start i,
#santiye-app-root .schedule-pin-summary.work-start > i {
  background: #92a6d5;
}

#santiye-app-root .calendar-pin-legend .delivery i,
#santiye-app-root .calendar-pin.delivery i,
#santiye-app-root .week-calendar-pin.delivery i,
#santiye-app-root .schedule-pin-summary.delivery > i {
  background: #d99586;
}

#santiye-app-root .month-calendar-scroll {
  overflow-x: auto;
  border: 1px solid #393939;
  border-radius: 2px;
}

#santiye-app-root .month-calendar-weekdays,
#santiye-app-root .month-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 770px;
}

#santiye-app-root .month-calendar-weekdays span {
  padding: 11px 8px;
  border-right: 1px solid #393939;
  border-bottom: 1px solid #393939;
  background: #252525;
  color: #aaa59b;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

#santiye-app-root .month-calendar-weekdays span:last-child {
  border-right: 0;
}

#santiye-app-root .month-calendar-day {
  display: block;
  min-width: 0;
  min-height: 88px;
  padding: 9px;
  border: 0;
  border-right: 1px solid #393939;
  border-bottom: 1px solid #393939;
  background: #222;
  color: #eeeae2;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .month-calendar-day:nth-child(7n) {
  border-right: 0;
}

#santiye-app-root .month-calendar-day:nth-last-child(-n + 7) {
  border-bottom: 0;
}

#santiye-app-root .month-calendar-day:hover,
#santiye-app-root .month-calendar-day.selected {
  background: #302d28;
}

#santiye-app-root .month-calendar-day.outside-month {
  color: #77736c;
  background: #1e1e1e;
}

#santiye-app-root .month-calendar-day.today .month-calendar-date {
  color: #e0c49b;
}

#santiye-app-root .month-calendar-day.selected .month-calendar-date {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #66573f;
  color: #fff;
}

#santiye-app-root .month-calendar-date {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
}

#santiye-app-root .month-calendar-pins {
  display: grid;
  gap: 4px;
}

#santiye-app-root .calendar-pin {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: #d2b58d;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#santiye-app-root .calendar-pin.work-start {
  color: #b5c3e6;
}

#santiye-app-root .calendar-pin.delivery {
  color: #e2aaa0;
}

#santiye-app-root .calendar-pin span {
  overflow: hidden;
  text-overflow: ellipsis;
}

#santiye-app-root .calendar-pin-more {
  color: #aaa59b;
  font-size: 9px;
}

#santiye-app-root .week-calendar-heading {
  display: block;
  padding: 18px 16px 13px;
}

#santiye-app-root .week-calendar-heading h2 {
  font-size: 18px;
}

#santiye-app-root .calendar-grid {
  min-width: 770px;
}

#santiye-app-root .calendar-panel {
  overflow-x: auto;
}

#santiye-app-root .calendar-day {
  min-height: 430px;
  background: #222;
}

#santiye-app-root .calendar-day-head {
  padding: 15px 8px;
  background: #252525;
}

#santiye-app-root .calendar-day-head span {
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .calendar-day-head b {
  margin-top: 7px;
  color: #eeeae2;
  font-size: 19px;
}

#santiye-app-root .calendar-day.selected .calendar-day-head {
  background: #37332d;
}

#santiye-app-root .calendar-slots {
  min-height: 350px;
  padding: 10px 7px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, #333 56px, #333 57px);
}

#santiye-app-root .calendar-event {
  margin: 5px 0 9px;
  padding: 9px 7px;
  border-color: #b99a70;
  background: #302d28;
  color: #e0c49b;
}

#santiye-app-root .calendar-event.event-blue {
  border-color: #92a6d5;
  background: #292b31;
  color: #c3cee9;
}

#santiye-app-root .calendar-event b {
  font-size: 10px;
}

#santiye-app-root .calendar-event small {
  color: #aaa59b;
  font-size: 9px;
}

#santiye-app-root .week-calendar-pin {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 3px 0 8px;
  color: #d2b58d;
  font-size: 9px;
  line-height: 1.35;
}

#santiye-app-root .week-calendar-pin i {
  margin-top: 3px;
}

#santiye-app-root .week-calendar-pin.work-start {
  color: #b5c3e6;
}

#santiye-app-root .week-calendar-pin.delivery {
  color: #e2aaa0;
}

#santiye-app-root .schedule-side {
  padding: 18px;
  background: #222;
}

#santiye-app-root .schedule-side .panel-heading h2 {
  color: #eeeae2;
  font-size: 16px;
  text-transform: capitalize;
}

#santiye-app-root .schedule-date-pins {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

#santiye-app-root .schedule-pin-summary {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border: 1px solid #393939;
  background: #252525;
}

#santiye-app-root .schedule-pin-summary > i {
  margin-top: 4px;
}

#santiye-app-root .schedule-pin-summary b,
#santiye-app-root .schedule-pin-summary small {
  display: block;
}

#santiye-app-root .schedule-pin-summary b {
  color: #d2b58d;
  font-size: 10px;
}

#santiye-app-root .schedule-pin-summary small {
  margin-top: 3px;
  color: #aaa59b;
  font-size: 9px;
}

#santiye-app-root .project-start-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #393939;
  background: #222;
}

#santiye-app-root .project-start-form > div {
  flex: 1;
}

#santiye-app-root .project-start-form label,
#santiye-app-root .project-start-form small {
  display: block;
}

#santiye-app-root .project-start-form label {
  margin: 4px 0;
  color: #eeeae2;
  font-size: 12px;
  font-weight: 600;
}

#santiye-app-root .project-start-form small {
  color: #a29e96;
  font-size: 10px;
}

#santiye-app-root .project-start-form input {
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #46433c;
  background: #1e1e1e;
  color: #eeeae2;
  color-scheme: dark;
}

#santiye-app-root .field-label small {
  display: block;
  margin-top: 5px;
  color: #a29e96;
  font-size: 10px;
}

@media (max-width: 820px) {
  #santiye-app-root .month-calendar-panel {
    padding: 16px;
  }

  #santiye-app-root .schedule-layout {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .calendar-day {
    min-height: 360px;
  }

  #santiye-app-root .calendar-slots {
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  #santiye-app-root .month-calendar-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #santiye-app-root .month-calendar-period {
    width: 100%;
    justify-content: space-between;
  }

  #santiye-app-root .calendar-pin-legend {
    gap: 10px;
    font-size: 9px;
  }

  #santiye-app-root .month-calendar-weekdays,
  #santiye-app-root .month-calendar-grid,
  #santiye-app-root .calendar-grid {
    min-width: 735px;
  }

  #santiye-app-root .month-calendar-day {
    min-height: 78px;
    padding: 7px;
  }

  #santiye-app-root .project-start-form {
    align-items: stretch;
    flex-direction: column;
  }

  #santiye-app-root .project-start-form input {
    min-height: 40px;
  }
}

#santiye-app-root .project-year-schedule {
  margin: 18px 0 24px;
  padding: 22px;
  border: 1px solid #393939;
  background: #222;
}

#santiye-app-root .project-year-heading,
#santiye-app-root .year-calendar-controls,
#santiye-app-root .upcoming-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#santiye-app-root .project-year-heading h2 {
  margin: 4px 0;
  color: #eeeae2;
  font: 500 21px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-year-heading p:not(.overline) {
  margin: 5px 0 0;
  color: #a29e96;
  font-size: 11px;
}

#santiye-app-root .year-calendar-controls {
  flex-shrink: 0;
  color: #e0c49b;
  font-size: 16px;
}

#santiye-app-root .year-calendar-controls .period-arrow {
  border-color: #46433c;
  background: #252525;
  color: #eeeae2;
}

#santiye-app-root .project-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 13px;
  color: #b7b2a8;
  font-size: 10px;
}

#santiye-app-root .project-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#santiye-app-root .project-calendar-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3b17e;
}

#santiye-app-root .project-calendar-legend .urgent i {
  background: #df7069;
}

#santiye-app-root .project-calendar-legend .normal i {
  background: #d3b17e;
}

#santiye-app-root .project-calendar-legend .low i {
  background: #7bad83;
}

#santiye-app-root .project-calendar-legend .process i {
  width: 9px;
  height: 9px;
  border: 2px solid #df7069;
  background: transparent;
}

#santiye-app-root .year-calendar-grid-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#santiye-app-root .year-calendar-month,
#santiye-app-root .mini-year-month {
  min-width: 0;
  padding: 11px;
  border: 1px solid #393939;
  background: #252525;
}

#santiye-app-root .year-calendar-month h3,
#santiye-app-root .mini-year-month h3 {
  margin: 0 0 8px;
  color: #e0c49b;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

#santiye-app-root .year-calendar-grid,
#santiye-app-root .mini-year-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

#santiye-app-root .year-calendar-grid > span:not(.year-calendar-date),
#santiye-app-root .mini-year-calendar-grid > span:not(.year-calendar-date) {
  min-height: 17px;
  color: #8e8a82;
  font-size: 8px;
  text-align: center;
}

#santiye-app-root .year-calendar-blank {
  min-height: 22px;
}

#santiye-app-root .year-calendar-date {
  display: block;
  min-width: 0;
  min-height: 35px;
  padding: 3px;
  overflow: hidden;
  border-radius: 2px;
  color: #d5d0c6;
  font-size: 9px;
}

#santiye-app-root .year-calendar-date.today {
  outline: 1px solid #d3b17e;
  outline-offset: -1px;
}

#santiye-app-root .year-calendar-date.has-milestone {
  background: #363129;
}

#santiye-app-root .year-calendar-date.urgent {
  background: #492c2a;
  color: #f0b0a9;
}

#santiye-app-root .year-calendar-date.low {
  background: #29382c;
  color: #b6d2b8;
}

#santiye-app-root .year-calendar-events {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

#santiye-app-root .year-calendar-event {
  display: block;
  overflow: hidden;
  color: #d3b17e;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .year-calendar-event.urgent {
  color: #ef9d94;
}

#santiye-app-root .year-calendar-event.low {
  color: #a9d0ad;
}

#santiye-app-root .year-calendar-event.project-start {
  color: #e0c49b;
}

#santiye-app-root .year-calendar-events small {
  color: #a29e96;
  font-size: 7px;
}

#santiye-app-root .project-upcoming-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  margin-top: 18px;
}

#santiye-app-root .upcoming-months-panel,
#santiye-app-root .upcoming-alerts-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid #393939;
  background: #252525;
}

#santiye-app-root .upcoming-panel-heading {
  margin-bottom: 11px;
}

#santiye-app-root .upcoming-panel-heading h3 {
  margin: 2px 0 0;
  color: #eeeae2;
  font-size: 14px;
  font-weight: 500;
}

#santiye-app-root .mini-year-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#santiye-app-root .mini-year-month {
  padding: 7px;
}

#santiye-app-root .mini-year-month h3 {
  font-size: 10px;
}

#santiye-app-root .mini-year-calendar-grid > span:not(.year-calendar-date) {
  min-height: 13px;
  font-size: 7px;
}

#santiye-app-root .mini-year-calendar-grid .year-calendar-date {
  position: relative;
  min-height: 19px;
  padding: 2px;
  font-size: 8px;
  text-align: center;
}

#santiye-app-root .mini-year-calendar-grid .year-calendar-date.has-milestone::after {
  position: absolute;
  right: 2px;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d3b17e;
  content: "";
}

#santiye-app-root .mini-year-calendar-grid .year-calendar-date.urgent::after {
  background: #df7069;
}

#santiye-app-root .mini-year-calendar-grid .year-calendar-date.low::after {
  background: #7bad83;
}

#santiye-app-root .upcoming-milestones {
  display: grid;
  gap: 7px;
}

#santiye-app-root .upcoming-milestone {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border-left: 3px solid #d3b17e;
  background: #302d28;
}

#santiye-app-root .upcoming-milestone.urgent {
  border-color: #df7069;
  background: #382a29;
}

#santiye-app-root .upcoming-milestone.low {
  border-color: #7bad83;
  background: #29342b;
}

#santiye-app-root .upcoming-milestone.overdue {
  box-shadow: inset 0 0 0 1px #df7069;
}

#santiye-app-root .milestone-date {
  color: #eeeae2;
  font-size: 10px;
  font-weight: 600;
}

#santiye-app-root .milestone-date small {
  display: block;
  margin-top: 3px;
  color: #aaa59b;
  font-size: 8px;
  font-weight: 400;
}

#santiye-app-root .upcoming-milestone > div > b {
  color: #eeeae2;
  font-size: 9px;
  line-height: 1.4;
}

#santiye-app-root .upcoming-milestone .urgency-badge {
  grid-column: 2;
  justify-self: start;
}

#santiye-app-root .milestone-impact {
  margin: 4px 0 0;
  color: #d2b58d;
  font-size: 9px;
  line-height: 1.4;
}

#santiye-app-root .upcoming-milestone.urgent .milestone-impact {
  color: #efaaa3;
}

#santiye-app-root .urgency-badge {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid #51483a;
  background: #37332d;
  color: #e0c49b;
  font-size: 8px;
  line-height: 1.3;
}

#santiye-app-root .urgency-badge.urgent {
  border-color: #73413d;
  background: #492c2a;
  color: #f0b0a9;
}

#santiye-app-root .urgency-badge.low {
  border-color: #405d45;
  background: #29382c;
  color: #b6d2b8;
}

#santiye-app-root .schedule-critical-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0;
  padding: 10px;
  border: 1px solid #73413d;
  background: #382a29;
  color: #eeeae2;
}

#santiye-app-root .schedule-critical-toggle input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: #df7069;
}

#santiye-app-root .schedule-critical-toggle b,
#santiye-app-root .schedule-critical-toggle small {
  display: block;
}

#santiye-app-root .schedule-critical-toggle b {
  font-size: 10px;
}

#santiye-app-root .schedule-critical-toggle small {
  margin-top: 4px;
  color: #c3a9a4;
  font-size: 9px;
}

#santiye-app-root .calendar-pin.urgent,
#santiye-app-root .week-calendar-pin.urgent,
#santiye-app-root .schedule-pin-summary.urgent,
#santiye-app-root .calendar-event.urgent,
#santiye-app-root .calendar-event.process-critical {
  border-color: #df7069;
  color: #efaaa3;
}

#santiye-app-root .calendar-pin.urgent i,
#santiye-app-root .week-calendar-pin.urgent i,
#santiye-app-root .schedule-pin-summary.urgent > i {
  background: #df7069;
}

#santiye-app-root .calendar-pin.low,
#santiye-app-root .week-calendar-pin.low,
#santiye-app-root .schedule-pin-summary.low,
#santiye-app-root .calendar-event.low {
  border-color: #7bad83;
  color: #b6d2b8;
}

#santiye-app-root .calendar-pin.low i,
#santiye-app-root .week-calendar-pin.low i,
#santiye-app-root .schedule-pin-summary.low > i {
  background: #7bad83;
}

#santiye-app-root .calendar-event.urgent,
#santiye-app-root .calendar-event.process-critical {
  background: #382a29;
}

#santiye-app-root .calendar-event.low {
  background: #29342b;
}

#santiye-app-root .work-process-note {
  display: block;
  margin-top: 4px;
  color: #efaaa3;
}

@media (max-width: 1000px) {
  #santiye-app-root .year-calendar-grid-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #santiye-app-root .project-upcoming-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #santiye-app-root .project-year-schedule {
    padding: 13px;
  }

  #santiye-app-root .project-year-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #santiye-app-root .year-calendar-grid-months {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .year-calendar-month {
    padding: 12px;
  }

  #santiye-app-root .year-calendar-date {
    min-height: 40px;
    font-size: 10px;
  }

  #santiye-app-root .year-calendar-event {
    font-size: 8px;
  }

  #santiye-app-root .mini-year-months {
    gap: 4px;
  }

  #santiye-app-root .mini-year-month {
    padding: 4px;
  }

  #santiye-app-root .mini-year-calendar-grid .year-calendar-date {
    min-height: 17px;
    font-size: 7px;
  }
}

#santiye-app-root .portfolio-home-section {
  margin: 0 0 26px;
}

#santiye-app-root .project-portfolio-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 230px;
  align-items: end;
  margin: 14px 0 12px;
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid #49443a;
  background: #242321;
  color: #f5f2eb;
  cursor: context-menu;
}

#santiye-app-root .project-portfolio-banner[hidden] {
  display: none;
}

#santiye-app-root .project-portfolio-banner::after,
#santiye-app-root .project-portfolio-banner > img {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

#santiye-app-root .project-portfolio-banner::after {
  z-index: 0;
  background: linear-gradient(90deg, rgb(22 22 21 / 83%), rgb(22 22 21 / 48%) 56%, rgb(22 22 21 / 12%)), linear-gradient(0deg, rgb(18 18 17 / 55%), transparent 75%);
  content: "";
}

#santiye-app-root .project-portfolio-banner > img {
  object-fit: cover;
  opacity: .84;
}

#santiye-app-root .project-portfolio-banner > div {
  position: relative;
  z-index: 1;
}

#santiye-app-root .project-portfolio-banner .overline {
  margin-bottom: 8px;
  color: #d3bb94;
}

#santiye-app-root .project-portfolio-banner h2 {
  margin: 0;
  color: #fffdf8;
  font: 300 clamp(30px, 4vw, 48px)/1 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-portfolio-banner small {
  display: block;
  margin-top: 12px;
  color: rgba(245, 242, 235, .76);
  font-size: 10px;
}

#santiye-app-root .portfolio-home-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

#santiye-app-root .portfolio-home-heading .overline {
  margin-bottom: 8px;
}

#santiye-app-root .portfolio-home-heading h2 {
  margin: 0;
  color: #f0ede6;
  font: 300 clamp(23px, 2.5vw, 32px)/1.15 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .portfolio-home-heading p:last-child {
  margin: 7px 0 0;
  color: #a5a198;
  font-size: 12px;
}

#santiye-app-root .portfolio-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#santiye-app-root .portfolio-home-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(250px, 27vw, 350px);
  overflow: hidden;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #3b3934;
  background: #22221f;
  color: #f5f2eb;
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  transition: border-color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

#santiye-app-root .portfolio-home-card:hover {
  transform: translateY(-3px);
  border-color: #8c7657;
}

#santiye-app-root .portfolio-home-architecture.has-cover .portfolio-home-architecture-art {
  display: none;
}

#santiye-app-root .portfolio-home-image,
#santiye-app-root .portfolio-home-image img,
#santiye-app-root .portfolio-home-shade,
#santiye-app-root .portfolio-home-architecture-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

#santiye-app-root .portfolio-home-image img {
  display: block;
  object-fit: cover;
  object-position: center 54%;
  opacity: .8;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}

#santiye-app-root .portfolio-home-card:hover .portfolio-home-image img {
  transform: scale(1.045);
  opacity: .94;
}

#santiye-app-root .portfolio-home-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 20, 19, .9), rgba(20, 20, 19, .42) 60%, rgba(20, 20, 19, .1)), linear-gradient(0deg, rgba(18, 18, 17, .7), transparent 68%);
}

#santiye-app-root .portfolio-home-architecture .portfolio-home-shade {
  background: linear-gradient(90deg, rgba(22, 22, 21, .94), rgba(22, 22, 21, .65) 60%, rgba(22, 22, 21, .3)), linear-gradient(0deg, rgba(18, 18, 17, .72), transparent 72%);
}

#santiye-app-root .portfolio-home-architecture-art {
  background: radial-gradient(ellipse at 68% 32%, rgba(190, 163, 121, .18), transparent 35%), linear-gradient(140deg, #30302b, #1d1d1b 68%);
}

#santiye-app-root .portfolio-home-architecture-art::before {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 57%;
  height: 73%;
  border: 1px solid rgba(202, 180, 145, .22);
  background: linear-gradient(90deg, transparent 0 17%, rgba(202, 180, 145, .17) 17.2% 17.7%, transparent 18% 47%, rgba(202, 180, 145, .17) 47.2% 47.7%, transparent 48%), linear-gradient(0deg, rgba(202, 180, 145, .12) 0 2px, transparent 2px 48%, rgba(202, 180, 145, .12) 48.5% 49%, transparent 49%);
  clip-path: polygon(0 16%, 64% 0, 100% 11%, 100% 100%, 0 100%);
  content: "";
}

#santiye-app-root .portfolio-home-architecture-art i {
  position: absolute;
  right: 17%;
  bottom: 17%;
  z-index: 1;
  width: 10%;
  height: 25%;
  border: 1px solid rgba(224, 206, 177, .2);
  background: rgba(224, 206, 177, .08);
}

#santiye-app-root .portfolio-home-architecture-art i:nth-child(2) {
  right: 35%;
  height: 32%;
}

#santiye-app-root .portfolio-home-architecture-art i:nth-child(3) {
  right: 53%;
  height: 27%;
}

#santiye-app-root .portfolio-home-content {
  display: grid;
  justify-items: start;
  gap: 13px;
  max-width: 100%;
}

#santiye-app-root .portfolio-home-content > small {
  color: #d3bb94;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

#santiye-app-root .portfolio-home-content > strong {
  color: #fffdf8;
  font: 300 clamp(34px, 4vw, 54px)/.98 "DM Sans", Arial, sans-serif;
  letter-spacing: -.035em;
}

#santiye-app-root .portfolio-home-content > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: #d0cbc1;
  font-size: 11px;
}

#santiye-app-root .portfolio-home-content > span b {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-weight: 500;
}

#santiye-app-root .portfolio-home-content > i {
  margin-top: 2px;
  color: #d4bb93;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .45px;
  transition: color .2s ease, transform .25s ease;
}

#santiye-app-root .portfolio-cover-edit-hint {
  opacity: 0;
  color: rgba(245, 242, 235, .72);
  font-size: 9px;
  letter-spacing: .3px;
  transition: opacity .2s ease;
}

#santiye-app-root .portfolio-home-card:hover .portfolio-cover-edit-hint,
#santiye-app-root .portfolio-home-card:focus-visible .portfolio-cover-edit-hint {
  opacity: 1;
}

#santiye-app-root .portfolio-home-card:hover .portfolio-home-content > i {
  transform: translateX(4px);
  color: #f5e1c0;
}

@media (max-width: 820px) {
  #santiye-app-root .portfolio-home-grid {
    gap: 10px;
  }

  #santiye-app-root .portfolio-home-card {
    min-height: 250px;
    padding: 22px;
  }
}

@media (max-width: 600px) {
  #santiye-app-root .portfolio-home-section {
    margin-bottom: 20px;
  }

  #santiye-app-root .portfolio-home-grid {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .portfolio-home-card {
    min-height: 235px;
  }
}

#santiye-app-root .project-render-gallery {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--line);
  background: #fcfaf6;
}

#santiye-app-root .project-render-gallery .panel-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

#santiye-app-root .project-render-gallery .panel-heading h2 span {
  color: #77786f;
  font: 500 11px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-render-help {
  margin: 6px 0 0;
  color: #85857b;
  font-size: 10px;
}

#santiye-app-root .project-render-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#santiye-app-root .project-render-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e6dc;
  color: #fff;
  cursor: zoom-in;
  text-align: left;
}

#santiye-app-root .project-render-room {
  margin-top: 20px;
}

#santiye-app-root .project-render-room-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

#santiye-app-root .project-render-room-heading h3 {
  margin: 0;
  font: 500 14px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .project-render-room-heading span {
  color: #85857b;
  font-size: 10px;
}

#santiye-app-root .project-render-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #4a4942;
  color: #85857b;
  font-size: 11px;
}

#santiye-app-root .project-render-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

#santiye-app-root .project-render-card:hover img {
  transform: scale(1.035);
}

#santiye-app-root .project-render-card > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 3px;
  padding: 22px 10px 9px;
  background: linear-gradient(transparent, rgba(28, 29, 25, .78));
}

#santiye-app-root .project-render-card b,
#santiye-app-root .project-render-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .project-render-card b {
  font-size: 10px;
  font-weight: 600;
}

#santiye-app-root .project-render-card small {
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
}

@media (max-width: 820px) {
  #santiye-app-root .project-render-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #santiye-app-root .project-render-gallery {
    padding: 14px;
  }

  #santiye-app-root .project-render-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}

body.project-lightbox-open {
  overflow: hidden;
}

.render-lightbox,
.render-lightbox * {
  box-sizing: border-box;
}

.render-lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  color: #f5f2eb;
  font-family: "DM Sans", Arial, sans-serif;
}

.render-lightbox[hidden] {
  display: none;
}

.render-context-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  min-width: 210px;
  padding: 5px;
  border: 1px solid #625744;
  background: #252525;
  box-shadow: 0 12px 32px rgb(0 0 0 / 40%);
}

.render-context-menu[hidden] {
  display: none;
}

.render-context-menu button {
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: #eeeae2;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.render-context-menu button:hover,
.render-context-menu button:focus-visible {
  outline: 0;
  background: #38332c;
  color: #e1c49b;
}

.portfolio-cover-backdrop {
  position: fixed;
  z-index: 2100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 72%);
}

.portfolio-cover-backdrop[hidden] {
  display: none;
}

.portfolio-cover-dialog {
  display: grid;
  gap: 16px;
  width: min(980px, 100%);
  max-height: min(820px, 92vh);
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid #49453d;
  background: #222;
  color: #eeeae2;
  box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
}

.portfolio-cover-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.portfolio-cover-dialog-heading h2 {
  margin: 4px 0;
  font: 400 22px "DM Sans", Arial, sans-serif;
}

.portfolio-cover-dialog-heading p:last-child {
  margin: 4px 0 0;
  color: #aaa59b;
  font-size: 11px;
}

.portfolio-cover-dialog > .field-label {
  max-width: 460px;
}

.portfolio-cover-render-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 120px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px;
}

.portfolio-cover-choice {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #45423c;
  background: #292929;
  color: #eeeae2;
  cursor: pointer;
  text-align: left;
}

.portfolio-cover-choice:hover,
.portfolio-cover-choice:focus-visible {
  outline: 1px solid #c6a676;
  border-color: #c6a676;
}

.portfolio-cover-choice img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portfolio-cover-choice span {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.portfolio-cover-choice b,
.portfolio-cover-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-cover-choice b {
  font-size: 10px;
}

.portfolio-cover-choice small {
  color: #aaa59b;
  font-size: 9px;
}

.render-lightbox-scrim {
  position: absolute;
  inset: 0;
  background: #11110f;
}

.render-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1240px, 100%);
  max-height: 100%;
  overscroll-behavior: contain;
  border: 1px solid #393832;
  background: #1d1d1b;
  box-shadow: 0 25px 100px rgba(0, 0, 0, .45);
}

.render-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 12px 18px;
  border-bottom: 1px solid #393832;
}

.render-lightbox-header p {
  margin: 0 0 4px;
  color: #c3a77f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.render-lightbox-header strong {
  color: #f5f2eb;
  font-size: 13px;
  font-weight: 500;
}

.render-lightbox-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.render-lightbox-header-actions > span {
  color: #aaa69c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.render-lightbox-close,
.render-lightbox-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #4a4942;
  background: #292925;
  color: #f5f2eb;
  cursor: pointer;
}

.render-lightbox-close {
  width: 38px;
  height: 38px;
  font-size: 28px;
  line-height: 1;
}

.render-lightbox-stage {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  touch-action: none;
}

.render-lightbox-stage figure {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.render-lightbox-stage img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 170px);
  object-fit: contain;
  user-select: none;
}

.render-lightbox-stage figcaption {
  color: #aaa69c;
  font-size: 11px;
  text-align: center;
}

.render-lightbox-arrow {
  width: 44px;
  height: 52px;
  font: 300 36px/1 Georgia, "Times New Roman", serif;
}

.render-lightbox-close:hover,
.render-lightbox-arrow:hover {
  border-color: #c3a77f;
  background: #35332d;
}

@media (max-width: 600px) {
  .render-lightbox {
    padding: 8px;
  }

  .render-lightbox-header {
    min-height: 58px;
    padding: 9px 11px;
  }

  .render-lightbox-header strong {
    font-size: 11px;
  }

  .render-lightbox-stage {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 4px;
    padding: 8px 4px;
  }

  .render-lightbox-stage img {
    max-height: calc(100dvh - 145px);
  }

  .render-lightbox-arrow {
    width: 34px;
    height: 44px;
    font-size: 30px;
  }
}

.render-lightbox {
  display: block;
  padding: 0;
  overflow: hidden;
}

.render-lightbox-dialog {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-height: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.render-lightbox-header {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  align-items: flex-start;
  min-height: 0;
  padding: 24px 28px;
  border: 0;
  pointer-events: none;
}

.render-lightbox-header > div:first-child {
  display: grid;
  gap: 5px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .72);
}

.render-lightbox-header p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  letter-spacing: 1.7px;
}

.render-lightbox-header strong {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  font-weight: 400;
}

.render-lightbox-header-actions {
  gap: 16px;
  pointer-events: auto;
}

.render-lightbox-header-actions > span {
  color: rgba(255, 255, 255, .76);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .72);
}

.render-lightbox-close {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .9);
  font-size: 34px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
  transition: opacity .2s ease, transform .2s ease;
}

.render-lightbox-close:hover {
  background: transparent;
  color: #fff;
  opacity: .8;
  transform: rotate(4deg);
}

.render-lightbox-stage {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  touch-action: none;
}

.render-lightbox-stage figure {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.render-lightbox-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  opacity: 0;
  transform: scale(.992);
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1), transform .42s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.render-lightbox-stage img.is-active {
  opacity: 1;
  transform: scale(1);
}

.render-lightbox-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 52px;
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font-size: 54px;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .78);
  transform: translateY(-50%) scale(.96);
  transition: opacity .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1), color .2s ease;
}

.render-lightbox-arrow-prev {
  left: clamp(14px, 3vw, 42px);
}

.render-lightbox-arrow-next {
  right: clamp(14px, 3vw, 42px);
}

.render-lightbox-stage[data-hover-side="left"] .render-lightbox-arrow-prev,
.render-lightbox-stage[data-hover-side="right"] .render-lightbox-arrow-next,
.render-lightbox-arrow:focus-visible {
  opacity: .62;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.render-lightbox-arrow:hover {
  background: transparent;
  color: #fff;
  opacity: .94 !important;
}

@media (max-width: 600px) {
  .render-lightbox-header {
    padding: 16px 16px;
  }

  .render-lightbox-header p {
    font-size: 10px;
  }

  .render-lightbox-header strong {
    font-size: 11px;
  }

  .render-lightbox-arrow {
    width: 40px;
    height: 56px;
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .render-lightbox-stage img,
  .render-lightbox-arrow,
  .render-lightbox-close {
    transition-duration: .01ms;
  }
}

#santiye-app-root .portfolio-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 0;
  border-top: 1px solid #3a3a3a;
  border-bottom: 1px solid #3a3a3a;
}

#santiye-app-root .portfolio-category-tab {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid #3a3a3a;
  background: transparent;
  color: #aaa59c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

#santiye-app-root .portfolio-category-tab:last-child {
  border-right: 0;
}

#santiye-app-root .portfolio-category-tab > span {
  color: #807a6f;
  font-size: 9px;
  font-weight: 400;
}

#santiye-app-root .portfolio-category-tab > b {
  margin-left: auto;
  color: #948d80;
  font-size: 10px;
  font-weight: 500;
}

#santiye-app-root .portfolio-category-tab:hover {
  background: #272624;
  color: #eeeae2;
}

#santiye-app-root .portfolio-category-tab.selected {
  box-shadow: inset 0 -2px #c3a47a;
  color: #e0c49b;
}

#santiye-app-root .portfolio-category-tab.selected > span,
#santiye-app-root .portfolio-category-tab.selected > b {
  color: #d0b38b;
}

#santiye-app-root .portfolio-category-hint {
  margin: 12px 0 16px;
  color: #969188;
  font-size: 10px;
  line-height: 1.6;
}

#santiye-app-root .filter-row {
  margin-bottom: 14px;
}

#santiye-app-root .portfolio-empty {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-height: 130px;
  padding: 27px 24px;
  border: 1px solid #393939;
  background: #252525;
  color: #a7a198;
  text-align: left;
}

#santiye-app-root .portfolio-empty b {
  color: #e6e1d8;
  font: 400 20px "DM Sans", Arial, sans-serif;
}

#santiye-app-root .portfolio-empty span {
  color: #a7a198;
  font-size: 10px;
}

@media (max-width: 600px) {
  #santiye-app-root .portfolio-category-tabs {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .portfolio-category-tab {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid #3a3a3a;
  }

  #santiye-app-root .portfolio-category-tab:last-child {
    border-bottom: 0;
  }
}

/* Dark architectural portfolio direction based on the supplied interface_1 reference. */
body {
  background: #1b1b1b;
  color: #eeeae2;
}

#santiye-app-root {
  --bg: #202020;
  --paper: #262626;
  --ink: #f0ede6;
  --muted: #a4a19a;
  --line: #383838;
  --green: #c3a47a;
  --green-soft: #332f29;
  --blue: #c3a47a;
  --blue-soft: #332f29;
  --amber: #c3a47a;
  --amber-soft: #332f29;
  --red: #d18476;
  --shadow: 0 12px 35px rgba(0, 0, 0, .2);
  background: #202020;
  color: #eeeae2;
}

#santiye-app-root .app-shell,
#santiye-app-root .main-area {
  background: #202020;
}

#santiye-app-root .sidebar {
  background: #181818;
  border-color: #333;
}

#santiye-app-root .brand-logo {
  filter: brightness(0) invert(1);
}

#santiye-app-root .workspace-label,
#santiye-app-root .nav-caption {
  color: #77746e;
}

#santiye-app-root .workspace-switch {
  border-color: #353535;
  border-radius: 2px;
  background: #202020;
}

#santiye-app-root .workspace-avatar,
#santiye-app-root .profile-avatar,
#santiye-app-root .avatar-small {
  background: #35312b;
  color: #d2b58d;
}

#santiye-app-root .workspace-switch b,
#santiye-app-root .profile-button b,
#santiye-app-root .weather-card b {
  color: #e7e3dc;
}

#santiye-app-root .workspace-switch small,
#santiye-app-root .profile-button small,
#santiye-app-root .weather-card small {
  color: #928f88;
}

#santiye-app-root .nav-item {
  border-radius: 2px;
  color: #a7a39c;
}

#santiye-app-root .nav-item:hover {
  background: #292929;
  color: #f1eee8;
}

#santiye-app-root .nav-item.active {
  background: #2e2b27;
  color: #d7bd99;
  box-shadow: inset 2px 0 #c3a47a;
}

#santiye-app-root .nav-count {
  background: #37332d;
  color: #d7bd99;
}

#santiye-app-root .weather-card {
  border: 1px solid #363636;
  border-radius: 2px;
  background: #222;
}

#santiye-app-root .weather-sun {
  background: #383128;
  color: #c9aa7c;
}

#santiye-app-root .profile-button {
  border-color: #353535;
  background: #181818;
}

#santiye-app-root .main-area {
  padding-right: clamp(18px, 2.8vw, 42px);
  padding-left: clamp(18px, 2.8vw, 42px);
}

#santiye-app-root .topbar {
  border-color: #383838;
}

#santiye-app-root .breadcrumbs {
  color: #8d8982;
}

#santiye-app-root .breadcrumbs b {
  color: #514e49;
}

#santiye-app-root .breadcrumbs strong {
  color: #dfdbd3;
}

#santiye-app-root .today-label {
  color: #9c9890;
}

#santiye-app-root .icon-button,
#santiye-app-root .avatar-small,
#santiye-app-root .mobile-menu {
  border-color: #3a3a3a;
  background: #292929;
  color: #d6bd99;
}

#santiye-app-root .overline {
  color: #b2a183;
  letter-spacing: 1.8px;
}

#santiye-app-root h1,
#santiye-app-root h2,
#santiye-app-root h3 {
  color: #f1eee8;
}

#santiye-app-root h1 {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.5px;
}

#santiye-app-root h2 {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .1px;
}

#santiye-app-root .subheading {
  color: #a5a198;
}

#santiye-app-root .button {
  border-radius: 2px;
}

#santiye-app-root .button-primary {
  background: #b99a70;
  color: #1d1b18;
  box-shadow: none;
}

#santiye-app-root .button-primary:hover {
  background: #cfb28a;
}

#santiye-app-root .button-outline {
  border-color: #4a4741;
  background: #252525;
  color: #ddd7cd;
}

#santiye-app-root .overview-hero {
  position: relative;
  grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
  min-height: 330px;
  overflow: hidden;
  border-color: #3a3a3a;
  background:
    radial-gradient(ellipse at 68% 32%, rgba(119, 111, 95, .18), transparent 40%),
    linear-gradient(125deg, #252525, #1d1d1d 67%, #252422);
}

#santiye-app-root .overview-hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 4vw, 52px);
}

#santiye-app-root .overview-hero-copy .overline {
  margin-bottom: 16px;
}

#santiye-app-root .overview-hero-copy h1 {
  max-width: 460px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.08;
}

#santiye-app-root .overview-hero-copy .subheading {
  max-width: 360px;
  color: #b4afa6;
}

#santiye-app-root .overview-project-link {
  color: #d2b58d;
}

#santiye-app-root .overview-hero-metric {
  border-color: #45413b;
}

#santiye-app-root .overview-hero-metric strong {
  color: #d2b58d;
}

#santiye-app-root .overview-hero-metric span {
  color: #9d998f;
}

#santiye-app-root .overview-hero-art {
  min-height: 330px;
  background:
    linear-gradient(90deg, #242424 0, rgba(36, 36, 36, .12) 34%, rgba(22, 22, 22, .1)),
    radial-gradient(ellipse at 45% 28%, #5d5c53 0, #343431 42%, #252525 78%);
}

#santiye-app-root .hero-art-architecture {
  right: 3%;
  width: 92%;
  height: 85%;
  background:
    linear-gradient(180deg, transparent 0 77%, rgba(19, 19, 19, .45) 78%),
    repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(21, 21, 21, .5) 10% 10.2%),
    linear-gradient(145deg, #66655d 0%, #3b3b37 52%, #252525);
  clip-path: polygon(0 26%, 58% 0, 100% 17%, 100% 100%, 0 100%);
  box-shadow: -25px 20px 70px rgba(0, 0, 0, .42);
}

#santiye-app-root .hero-art-architecture::before {
  inset: 18% 0 0 11%;
  background:
    repeating-linear-gradient(90deg, transparent 0 15%, rgba(13, 13, 13, .58) 15.2% 15.7%),
    repeating-linear-gradient(0deg, transparent 0 28%, rgba(228, 222, 209, .1) 28.2% 28.7%);
}

#santiye-app-root .hero-art-architecture::after {
  height: 26%;
  background: repeating-linear-gradient(173deg, transparent 0 15px, rgba(220, 216, 205, .18) 16px 17px);
}

#santiye-app-root .hero-art-architecture i {
  bottom: 20%;
  border-color: rgba(224, 218, 205, .14);
  background: rgba(17, 17, 17, .27);
}

#santiye-app-root .hero-art-caption {
  background: linear-gradient(90deg, rgba(17, 17, 17, .78), rgba(17, 17, 17, .1));
}

#santiye-app-root .hero-art-caption span {
  color: #d0bd9b;
}

#santiye-app-root .stat-grid {
  gap: 0;
  border-color: #3b3b3b;
  border-radius: 0;
  background: #242424;
}

#santiye-app-root .stat-card {
  min-height: 100px;
  border-right-color: #3b3b3b;
}

#santiye-app-root .stat-top {
  color: #aaa59c;
}

#santiye-app-root .stat-card > strong {
  color: #f1eee8;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 300;
}

#santiye-app-root .stat-card > small {
  color: #89867f;
}

#santiye-app-root .stat-icon,
#santiye-app-root .lavender,
#santiye-app-root .green,
#santiye-app-root .amber,
#santiye-app-root .blue {
  background: #37332d;
  color: #d0b38b;
}

#santiye-app-root .content-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

#santiye-app-root .panel,
#santiye-app-root .project-card,
#santiye-app-root .resource-card {
  border-color: #393939;
  border-radius: 2px;
  background: #252525;
  box-shadow: none;
}

#santiye-app-root .panel {
  padding: 18px;
}

#santiye-app-root .content-grid > .panel {
  border-top: 1px solid #3b3b3b;
  background: transparent;
}

#santiye-app-root .panel-heading .overline {
  color: #b2a183;
}

#santiye-app-root .project-count-pill,
#santiye-app-root .count-badge {
  background: #37332d;
  color: #d0b38b;
}

#santiye-app-root .quiet-link,
#santiye-app-root .panel-link {
  color: #d2b58d;
}

#santiye-app-root .overview-project-grid,
#santiye-app-root .projects-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #393939;
}

#santiye-app-root .project-card {
  overflow: hidden;
  border: 0;
  background: #232323;
}

#santiye-app-root .project-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

#santiye-app-root .project-cover {
  height: clamp(175px, 19vw, 250px);
  background:
    linear-gradient(180deg, rgba(21, 21, 21, .08), rgba(21, 21, 21, .58)),
    linear-gradient(145deg, #76756d, #42433f 54%, #282828);
}

#santiye-app-root .project-cover.cover-2 {
  background:
    linear-gradient(180deg, rgba(21, 21, 21, .06), rgba(21, 21, 21, .62)),
    linear-gradient(145deg, #89867c, #55534c 55%, #2c2b29);
}

#santiye-app-root .project-cover.cover-3 {
  background:
    linear-gradient(180deg, rgba(21, 21, 21, .06), rgba(21, 21, 21, .62)),
    linear-gradient(145deg, #666b68, #3e4240 55%, #252727);
}

#santiye-app-root .project-cover.cover-4 {
  background:
    linear-gradient(180deg, rgba(21, 21, 21, .08), rgba(21, 21, 21, .65)),
    linear-gradient(145deg, #77766d, #4a4b46 55%, #292a29);
}

#santiye-app-root .cover-architecture {
  right: 0;
  bottom: 0;
  left: 0;
  height: 91%;
  opacity: .8;
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(19, 19, 19, .48) 9.2% 9.7%),
    linear-gradient(160deg, #85847a 0%, #53544e 46%, #2d2e2d 100%);
  clip-path: polygon(0 29%, 61% 0, 100% 20%, 100% 100%, 0 100%);
}

#santiye-app-root .cover-architecture i {
  bottom: 13%;
  border-color: rgba(228, 222, 208, .15);
  background: rgba(15, 15, 15, .34);
}

#santiye-app-root .cover-label {
  top: 12px;
  left: 13px;
  border-radius: 0;
  background: transparent;
  color: #f0ece4;
  font-size: 9px;
  letter-spacing: 1.1px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

#santiye-app-root .cover-photo.loaded {
  display: block;
  filter: brightness(.78);
}

#santiye-app-root .card-body {
  padding: 13px 14px 15px;
}

#santiye-app-root .card-title-row h3 {
  color: #eeeae2;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
}

#santiye-app-root .project-status {
  border-radius: 1px;
  background: #34332e;
  color: #d8c29f;
}

#santiye-app-root .project-status.planning {
  background: #35312b;
  color: #c6a676;
}

#santiye-app-root .card-address,
#santiye-app-root .card-jobs,
#santiye-app-root .card-code {
  color: #aaa59b;
}

#santiye-app-root .card-bottom,
#santiye-app-root .project-row,
#santiye-app-root .agenda-item,
#santiye-app-root .day-task,
#santiye-app-root .resource-card .resource-line {
  border-color: #3a3a3a;
}

#santiye-app-root .project-open-link {
  border-color: #403d37;
  color: #d2b58d;
}

#santiye-app-root .agenda-item b,
#santiye-app-root .work-summary-heading h2,
#santiye-app-root .work-group-heading h3,
#santiye-app-root .project-meta b,
#santiye-app-root .resource-card h3 {
  color: #eeeae2;
}

#santiye-app-root .agenda-item small,
#santiye-app-root .work-meta,
#santiye-app-root .work-dates,
#santiye-app-root .project-meta small,
#santiye-app-root .resource-card p {
  color: #a29e96;
}

#santiye-app-root .agenda-item strong,
#santiye-app-root .work-location {
  color: #d2b58d;
}

#santiye-app-root .team-card-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

#santiye-app-root .resource-card > [data-team-profile] {
  width: 100%;
  margin-top: 12px;
}

#santiye-app-root .team-member-profile {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding: clamp(18px, 2.5vw, 28px);
}

#santiye-app-root .team-member-profile[hidden] {
  display: none;
}

#santiye-app-root .team-profile-heading,
#santiye-app-root .team-profile-project > header,
#santiye-app-root .team-profile-work > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#santiye-app-root .team-profile-heading h2 {
  margin: 0;
  color: #eeeae2;
  font-size: clamp(20px, 3vw, 28px);
}

#santiye-app-root .team-profile-heading p:last-child,
#santiye-app-root .team-profile-note {
  margin: 7px 0 0;
  color: #a29e96;
  font-size: 12px;
  line-height: 1.55;
}

#santiye-app-root .team-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
}

#santiye-app-root .team-profile-stats article {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 14px;
  background: #202020;
}

#santiye-app-root .team-profile-stats b {
  color: #e6b278;
  font-size: 22px;
  font-weight: 500;
}

#santiye-app-root .team-profile-stats span,
#santiye-app-root .team-profile-project > header > span {
  color: #aaa59b;
  font-size: 11px;
}

#santiye-app-root .team-profile-section {
  display: grid;
  gap: 12px;
}

#santiye-app-root .team-profile-section > h3,
#santiye-app-root .team-profile-project h3 {
  margin: 0;
  color: #eeeae2;
  font-size: 15px;
}

#santiye-app-root .team-profile-project {
  padding: 15px;
  border: 1px solid #3a3a3a;
  background: #202020;
}

#santiye-app-root .team-profile-project > header {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #393939;
}

#santiye-app-root .team-profile-project .overline {
  margin: 0 0 5px;
  color: #b2a183;
  font-size: 9px;
}

#santiye-app-root .team-profile-work-list {
  display: grid;
}

#santiye-app-root .team-profile-work {
  display: grid;
  gap: 7px;
  padding: 12px 0;
  border-bottom: 1px solid #393939;
}

#santiye-app-root .team-profile-work:last-child {
  border-bottom: 0;
}

#santiye-app-root .team-profile-work b {
  color: #eeeae2;
  font-size: 12px;
}

#santiye-app-root .team-profile-work p,
#santiye-app-root .team-profile-work small,
#santiye-app-root .team-profile-empty {
  margin: 0;
  color: #aaa59b;
  font-size: 11px;
  line-height: 1.5;
}

#santiye-app-root .team-profile-progress {
  height: 4px;
  overflow: hidden;
  background: #3a3a3a;
}

#santiye-app-root .team-profile-progress i {
  display: block;
  height: 100%;
  background: #b99a70;
}

#santiye-app-root .team-profile-unassigned {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#santiye-app-root .team-profile-unassigned span {
  padding: 8px 11px;
  border: 1px solid #45423c;
  background: #202020;
  color: #c3beb4;
  font-size: 11px;
}

#santiye-app-root .week-panel {
  border-color: #3a3a3a;
  background: #222;
}

#santiye-app-root .week-day {
  color: #aaa59b;
}

#santiye-app-root .week-day.current,
#santiye-app-root .calendar-day.selected .calendar-day-head {
  background: #37332d;
  color: #e0c49b;
}

#santiye-app-root .week-day-head,
#santiye-app-root .calendar-day-head {
  background: #252525;
  color: #aaa59b;
}

#santiye-app-root .work-summary {
  border-color: #393939;
  border-radius: 2px;
  background: #252525;
}

#santiye-app-root .work-summary-heading h2,
#santiye-app-root .work-group-heading h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
}

#santiye-app-root .work-group,
#santiye-app-root .work-row,
#santiye-app-root .work-row.compact {
  border-color: #393939;
}

#santiye-app-root .work-index {
  border-radius: 2px;
  background: #35312b;
  color: #d2b58d;
}

#santiye-app-root .work-title b {
  color: #eeeae2;
}

#santiye-app-root .work-progress strong {
  color: #eeeae2;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
}

#santiye-app-root .work-progress .progress-track {
  background: #3a3935;
}

#santiye-app-root .work-progress .progress-track i {
  background: #b99a70;
}

#santiye-app-root .work-action,
#santiye-app-root .filter-chip,
#santiye-app-root .period-arrow {
  border-color: #48443d;
  border-radius: 2px;
  background: #292929;
  color: #d1bd9d;
}

#santiye-app-root .work-action:hover,
#santiye-app-root .filter-chip:hover,
#santiye-app-root .period-arrow:hover {
  background: #37332d;
}

#santiye-app-root .filter-chip.selected,
#santiye-app-root .filter-chips .filter-chip.selected {
  border-color: #8b7658;
  background: #38332c;
  color: #e1c49b;
}

#santiye-app-root .calendar-hover-tooltip {
  position: fixed;
  z-index: 1000;
  width: min(320px, calc(100vw - 24px));
  max-height: min(260px, calc(100vh - 24px));
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid #625744;
  border-radius: 3px;
  background: #252525;
  box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
  color: #eeeae2;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
  pointer-events: none;
}

#santiye-app-root .calendar-hover-tooltip[hidden] {
  display: none;
}

#santiye-app-root .day-task-dates {
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .search-box,
#santiye-app-root .work-filters select,
#santiye-app-root .project-menu,
#santiye-app-root .calendar-panel,
#santiye-app-root .schedule-side,
#santiye-app-root .media-card,
#santiye-app-root .media-empty,
#santiye-app-root .empty-state,
#santiye-app-root .document-table,
#santiye-app-root .inventory-table {
  border-color: #393939;
  border-radius: 2px;
  background: #252525;
  color: #e7e3dc;
}

#santiye-app-root .search-box input,
#santiye-app-root .search-box input::placeholder {
  color: #a39e95;
}

#santiye-app-root .project-menu-item {
  border-radius: 2px;
  color: #aaa59c;
}

#santiye-app-root .project-menu-item:hover {
  background: #30302e;
  color: #eeeae2;
}

#santiye-app-root .project-menu-item.active {
  background: #38332d;
  color: #e0c49b;
}

#santiye-app-root .project-menu.has-overview-workflow {
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  scrollbar-color: #514a3e #252525;
  scrollbar-width: thin;
}

#santiye-app-root .project-overview-sidebar-workflow {
  display: grid;
  align-content: start;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 5px 5px;
  border-top: 1px solid #49443a;
}

#santiye-app-root .project-overview-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 5px;
  color: #c9ad83;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

#santiye-app-root .project-overview-sidebar-heading span {
  color: #aaa59b;
  font-size: 10px;
  letter-spacing: 0;
}

#santiye-app-root .project-overview-sidebar-area,
#santiye-app-root .project-overview-sidebar-group {
  display: grid;
  align-content: start;
  gap: 3px;
}

#santiye-app-root .project-overview-sidebar-area > h3 {
  margin: 0 5px 3px;
  color: #eeeae2;
  font: 600 11px/1.4 "Manrope", Arial, sans-serif;
}

#santiye-app-root .project-overview-sidebar-group > h4 {
  margin: 5px 5px 2px;
  color: #b7ad9c;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}

#santiye-app-root .project-overview-sidebar-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #c8c2b8;
  text-align: left;
  cursor: pointer;
}

#santiye-app-root .project-overview-sidebar-work:hover,
#santiye-app-root .project-overview-sidebar-work:focus-visible {
  outline: none;
  background: #38332d;
  color: #f0ede6;
}

#santiye-app-root .project-overview-sidebar-work span {
  min-width: 0;
  font-size: 9px;
  line-height: 1.4;
}

#santiye-app-root .project-overview-sidebar-work b {
  padding-top: 1px;
  color: #d0b38b;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

#santiye-app-root .project-module,
#santiye-app-root .module-heading,
#santiye-app-root .module-record,
#santiye-app-root .document-row {
  border-color: #3a3a3a;
  color: #e7e3dc;
}

@media (max-width: 760px) {
  #santiye-app-root .project-menu.has-overview-workflow {
    display: grid;
    max-height: 55vh;
    overflow-y: auto;
  }
}

#santiye-app-root .module-record > b,
#santiye-app-root .module-record > div > b,
#santiye-app-root .document-row {
  color: #e7e3dc;
}

#santiye-app-root .module-record p,
#santiye-app-root .document-row small {
  color: #a39e95;
}

#santiye-app-root .module-record a,
#santiye-app-root .document-file-link {
  color: #d2b58d;
}

#santiye-app-root .document-head {
  background: #302f2c;
  color: #d1bd9d;
}

#santiye-app-root .modal {
  border-color: #44413a;
  border-radius: 2px;
  background: #252525;
  color: #eeeae2;
  overscroll-behavior: contain;
}

#santiye-app-root .modal-header h2,
#santiye-app-root .field-label {
  color: #eeeae2;
}

#santiye-app-root .modal-close {
  background: #37332d;
  color: #d2b58d;
}

#santiye-app-root .field-label > input,
#santiye-app-root .field-label > select,
#santiye-app-root .field-label > textarea,
#santiye-app-root .location-input,
#santiye-app-root .assistant-form input {
  border-color: #46433c;
  border-radius: 2px;
  background: #1e1e1e;
  color: #eeeae2;
}

#santiye-app-root .field-label input::placeholder,
#santiye-app-root .field-label textarea::placeholder {
  color: #77736c;
}

#santiye-app-root .location-input input {
  color: #eeeae2;
}

#santiye-app-root .calendar-day,
#santiye-app-root .calendar-day-head,
#santiye-app-root .resource-summary,
#santiye-app-root .resource-line {
  border-color: #3a3a3a;
}

#santiye-app-root .calendar-slots {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, #333 42px, #333 43px);
}

#work-project-modal-backdrop .work-project-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

#work-project-modal-backdrop .work-project-member-remove {
  padding: 8px 10px;
  border: 1px solid #55413b;
  border-radius: 4px;
  background: #2a2422;
  color: #e2a99a;
  font-size: 10px;
}

#work-project-modal-backdrop .work-project-staff-editor {
  display: grid;
  gap: 12px;
  margin: 12px 0 18px;
  padding: 15px;
  border: 1px solid #45423c;
  border-radius: 5px;
  background: #202020;
}

#work-project-modal-backdrop .work-project-staff-editor > div:first-child p:last-child {
  margin: 4px 0 0;
  color: #aaa59b;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-staff-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

#work-project-modal-backdrop .work-project-staff-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #393939;
  border-radius: 4px;
  color: #e5e0d7;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-staff-choices input {
  accent-color: #b6a27f;
}

#santiye-app-root .meeting-nav-alert {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  width: 100%;
  margin: 4px 0;
  padding: 10px;
  border: 1px solid #b52e32;
  border-radius: 6px;
  background: linear-gradient(135deg, #a9252c, #6f171e);
  color: #fff;
  text-align: left;
  animation: meeting-alert-pulse 1.15s ease-in-out infinite;
}

#santiye-app-root .meeting-nav-alert[hidden] {
  display: none;
}

#santiye-app-root .meeting-nav-alert > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #9e2027;
  font-weight: 900;
}

#santiye-app-root .meeting-nav-alert b {
  font-size: 11px;
}

#santiye-app-root .meeting-nav-alert small {
  color: #f5d6d6;
  font-size: 9px;
}

#santiye-app-root .meeting-form-panel,
#santiye-app-root .meeting-list-panel {
  margin-bottom: 18px;
}

#santiye-app-root .meeting-form {
  display: grid;
  gap: 15px;
  max-width: 860px;
}

#santiye-app-root .meeting-form .form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#santiye-app-root .meeting-form-actions,
#santiye-app-root .meeting-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#santiye-app-root .meeting-list {
  display: grid;
  gap: 10px;
}

#santiye-app-root .meeting-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid #41403b;
  border-left: 3px solid #9a8060;
  border-radius: 5px;
  background: #202020;
}

#santiye-app-root .meeting-card.is-today {
  border-left-color: #d34b4b;
}

#santiye-app-root .meeting-card.is-tomorrow {
  border-left-color: #d49b4f;
}

#santiye-app-root .meeting-date-badge {
  display: grid;
  justify-items: center;
  padding: 7px 4px;
  border: 1px solid #4b463d;
  border-radius: 4px;
  color: #dbc29c;
}

#santiye-app-root .meeting-date-badge b {
  font: 700 22px/1.1 var(--display);
}

#santiye-app-root .meeting-date-badge span {
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
}

#santiye-app-root .meeting-card-body {
  min-width: 0;
}

#santiye-app-root .meeting-card-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 12px;
}

#santiye-app-root .meeting-card-heading h3 {
  margin: 0;
  color: #eeeae2;
  font-size: 15px;
}

#santiye-app-root .meeting-card-heading span,
#santiye-app-root .meeting-card-body small {
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .meeting-card-body p {
  margin: 6px 0;
  color: #d0cbc1;
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#santiye-app-root .meeting-card-body .meeting-card-time {
  color: #d5bb94;
  font-weight: 700;
}

#santiye-app-root .meeting-card-body .meeting-card-notes {
  padding-top: 7px;
  border-top: 1px solid #393939;
}

@keyframes meeting-alert-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198, 42, 48, .25); }
  50% { opacity: .7; box-shadow: 0 0 0 6px rgba(198, 42, 48, .14); }
}

@media (max-width: 680px) {
  #santiye-app-root .meeting-form .form-row {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .meeting-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  #santiye-app-root .meeting-card-actions {
    grid-column: 2;
  }
}

#santiye-app-root .calendar-event,
#santiye-app-root .calendar-event.event-blue,
#santiye-app-root .calendar-event.event-amber {
  border-color: #b99a70;
  background: #38332d;
  color: #e0c49b;
}

#santiye-app-root .media-card b,
#santiye-app-root .media-card small,
#santiye-app-root .media-empty,
#santiye-app-root .media-empty b {
  color: #e3ded4;
}

#santiye-app-root .assistant-toggle,
.assistant-toggle,
#santiye-app-root .assistant-form button,
.assistant-form button {
  background: #b99a70;
  color: #1d1b18;
}

.assistant-panel {
  border-color: #44413a;
  border-radius: 2px;
  background: #252525;
  color: #eeeae2;
}

.assistant-header,
.assistant-form {
  border-color: #3a3a3a;
}

.assistant-avatar,
.assistant-suggestions button {
  border-color: #49443b;
  background: #37332d;
  color: #e0c49b;
}

.assistant-header b,
.assistant-message {
  color: #eeeae2;
}

.assistant-message {
  background: #353535;
}

.assistant-message.user {
  background: #66573f;
}

.assistant-header small,
.assistant-disclaimer {
  color: #9e998f;
}

.assistant-form input {
  border-color: #46433c;
  background: #1e1e1e;
  color: #eeeae2;
}

.assistant-form input::placeholder {
  color: #77736c;
}

.toast {
  border: 1px solid #51483a;
  border-radius: 2px;
  background: #2e2b27;
  color: #eeeae2;
}

@media (max-width: 1100px) {
  #santiye-app-root .overview-project-grid,
  #santiye-app-root .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #santiye-app-root .overview-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr);
  }

  #santiye-app-root .overview-project-grid,
  #santiye-app-root .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #santiye-app-root .sidebar.open {
    background: #181818;
  }

  #santiye-app-root .overview-hero {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .overview-hero-art {
    min-height: 220px;
  }

  #santiye-app-root .overview-project-grid,
  #santiye-app-root .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #santiye-app-root .project-cover {
    height: 170px;
  }

  #santiye-app-root .stat-card {
    border-bottom: 1px solid #3b3b3b;
  }

  #santiye-app-root .stat-card:nth-child(2) {
    border-right: 0;
  }

  #santiye-app-root .stat-card:nth-child(n + 3) {
    border-bottom: 0;
  }

  .portfolio-cover-render-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-cover-dialog {
    padding: 15px;
  }
}

#santiye-app-root {
  font-size: 16px;
  line-height: 1.55;
}

#santiye-app-root :is(p:not(.overline), small, label, td, th, li, summary, figcaption, button, input, select, textarea) {
  font-size: 14px;
}

#santiye-app-root .page-heading h1 {
  font-size: clamp(29px, 3vw, 38px);
}

#santiye-app-root .panel-heading h2,
#santiye-app-root .overview-section-heading h2,
#santiye-app-root .work-summary-heading h2 {
  font-size: 22px;
}

#santiye-app-root .field-label > input,
#santiye-app-root .field-label > select,
#santiye-app-root .field-label > textarea,
#santiye-app-root .location-input,
#santiye-app-root .assistant-form input {
  font-size: 14px !important;
}

#santiye-app-root .nav-item {
  min-height: 46px;
  height: auto;
  font-size: 15px !important;
}

#santiye-app-root .nav-icon {
  font-size: 19px;
}

#santiye-app-root .workspace-label,
#santiye-app-root .nav-caption,
#santiye-app-root .overline {
  font-size: 11px !important;
}

#santiye-app-root .workspace-switch b,
#santiye-app-root .profile-button b,
#santiye-app-root .weather-card b {
  font-size: 15px !important;
}

#santiye-app-root .workspace-switch small,
#santiye-app-root .profile-button small,
#santiye-app-root .weather-card small {
  font-size: 13px !important;
}

#santiye-app-root .breadcrumbs,
#santiye-app-root .today-label,
#santiye-app-root .subheading,
#santiye-app-root .field-label,
#santiye-app-root .work-meta,
#santiye-app-root .work-dates,
#santiye-app-root .work-state,
#santiye-app-root .work-action,
#santiye-app-root .filter-chip,
#santiye-app-root .quiet-link,
#santiye-app-root .project-menu-item,
#santiye-app-root .module-hint,
#santiye-app-root .empty-note,
#santiye-app-root .resource-line,
#santiye-app-root .media-card b,
#santiye-app-root .media-card small,
#santiye-app-root .project-overview-sidebar-work span,
#santiye-app-root .project-overview-sidebar-work b {
  font-size: 13px !important;
}

#santiye-app-root .subheading,
#santiye-app-root .field-label {
  font-size: 14px !important;
}

#santiye-app-root .button,
#santiye-app-root .assistant-suggestions button {
  min-height: 42px;
  font-size: 14px !important;
}

#santiye-app-root .project-overview-sidebar-area > h3 {
  font-size: 14px;
}

#santiye-app-root .project-overview-sidebar-group > h4 {
  font-size: 12px;
}

#santiye-app-root .project-overview-sidebar-heading {
  font-size: 11px;
}

#santiye-app-root .leave-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
  gap: 18px;
  margin-bottom: 20px;
}

#santiye-app-root .leave-request-panel,
#santiye-app-root .leave-rules-panel,
#santiye-app-root .leave-list-panel {
  padding: clamp(18px, 2.5vw, 28px);
}

#santiye-app-root .leave-request-form {
  display: grid;
  gap: 16px;
}

#santiye-app-root .leave-type-picker {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#santiye-app-root .leave-type-picker legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

#santiye-app-root .leave-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#santiye-app-root .leave-type-option {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

#santiye-app-root .leave-type-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
}

#santiye-app-root .leave-type-option.is-active {
  border-color: var(--amber);
  background: var(--amber-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 24%, transparent);
}

#santiye-app-root .leave-type-option b {
  font-size: 14px;
}

#santiye-app-root .leave-type-option span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

#santiye-app-root .leave-date-choice:disabled {
  opacity: .48;
  cursor: not-allowed;
}

#santiye-app-root .leave-date-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#santiye-app-root .leave-date-picker {
  display: grid;
  gap: 14px;
}

#santiye-app-root .leave-date-choice {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #44413a;
  border-radius: 2px;
  background: #1e1e1e;
  color: #eeeae2;
  text-align: left;
  transition: border-color .18s ease, background .18s ease;
}

#santiye-app-root .leave-date-choice:hover,
#santiye-app-root .leave-date-choice.is-active {
  border-color: #b99a70;
  background: #302d28;
}

#santiye-app-root .leave-date-choice span {
  color: #b2a183;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 1px;
}

#santiye-app-root .leave-date-choice b {
  overflow: hidden;
  color: #f3efe7;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .leave-calendar {
  height: clamp(260px, 55vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  border: 1px solid #393939;
  background: #202020;
}

#santiye-app-root .leave-holiday-list {
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid #393939;
  background: #252523;
}

#santiye-app-root .leave-holiday-list > p {
  margin: 0 0 8px;
  color: #e6b278;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .8px;
}

#santiye-app-root .leave-holiday-list > span {
  color: #aaa59b;
  font-size: 11px !important;
}

#santiye-app-root .leave-holiday-list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#santiye-app-root .leave-holiday-list li {
  display: grid;
  grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  color: #eeeae2;
  font-size: 11px !important;
  line-height: 1.4;
}

#santiye-app-root .leave-holiday-list time {
  color: #b2a183;
  text-transform: capitalize;
}

#santiye-app-root .leave-calendar-header,
#santiye-app-root .leave-calendar-header > div,
#santiye-app-root .leave-calendar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#santiye-app-root .leave-calendar-header {
  margin-bottom: 15px;
}

#santiye-app-root .leave-calendar-header p {
  margin: 0;
  color: #b2a183;
  font-size: 12px !important;
  font-weight: 600;
}

#santiye-app-root .leave-calendar-header strong {
  min-width: 142px;
  color: #eeeae2;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
}

#santiye-app-root .leave-calendar-header button,
#santiye-app-root .leave-calendar-footer button {
  display: grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid #44413a;
  border-radius: 2px;
  background: #292825;
  color: #e0c49b;
  cursor: pointer;
}

#santiye-app-root .leave-calendar-header button {
  font-size: 22px !important;
  line-height: 1;
}

#santiye-app-root .leave-calendar-weekdays,
#santiye-app-root .leave-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

#santiye-app-root .leave-calendar-days {
  grid-auto-rows: 46px;
}

#santiye-app-root .leave-calendar-weekdays {
  margin-bottom: 6px;
}

#santiye-app-root .leave-calendar-weekdays span {
  padding: 7px 0;
  color: #89867f;
  font-size: 11px !important;
  font-weight: 600;
}

#santiye-app-root .leave-calendar-day {
  position: relative;
  z-index: 0;
  display: grid;
  min-width: 0;
  width: 42px;
  height: 42px;
  justify-self: center;
  align-self: center;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e7e3dc;
  font-size: 13px !important;
  cursor: pointer;
}

#santiye-app-root .leave-calendar-day:hover:not(:disabled) {
  background: #38332d;
}

#santiye-app-root .leave-calendar-day:disabled {
  color: #55534e;
  cursor: default;
}

#santiye-app-root .leave-calendar-day.is-conflict:disabled {
  color: #c1776e;
  background: color-mix(in srgb, #a46156 15%, transparent);
  text-decoration: line-through;
}

#santiye-app-root .leave-calendar-day.is-holiday:disabled:not(.is-conflict):not(.is-outside) {
  color: #e6b278;
  background: color-mix(in srgb, #b47a3c 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #b47a3c 42%, transparent);
  text-decoration: line-through;
  opacity: 1;
}

#santiye-app-root .leave-calendar-day.is-unavailable:disabled:not(.is-conflict) {
  opacity: .48;
}

#santiye-app-root .leave-conflict-hint {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

#santiye-app-root .leave-conflict-hint.is-warning {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: var(--amber-soft);
  color: var(--amber);
}

#santiye-app-root .leave-calendar-day.is-today:not(.is-selected) {
  color: #e0c49b;
  box-shadow: inset 0 0 0 1px #8f7756;
}

#santiye-app-root .leave-calendar-day.is-in-range {
  width: 100%;
  height: 42px;
  border-radius: 0;
  background: #3a342a;
  color: #f1dfbf;
}

#santiye-app-root .leave-calendar-day.is-range-start {
  border-radius: 50% 0 0 50%;
}

#santiye-app-root .leave-calendar-day.is-range-end {
  border-radius: 0 50% 50% 0;
}

#santiye-app-root .leave-calendar-day.is-selected {
  z-index: 1;
  border-radius: 50%;
  background: #b99a70;
  color: #1d1b18;
  font-weight: 700;
}

#santiye-app-root .leave-calendar-day.is-range-start.is-range-end {
  border-radius: 50%;
}

#santiye-app-root .leave-calendar-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #393939;
}

#santiye-app-root .leave-calendar-footer span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aaa59b;
  font-size: 11px !important;
}

#santiye-app-root .leave-calendar-legends {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#santiye-app-root .leave-calendar-footer .leave-calendar-legend-unavailable i {
  background: #77736a;
  opacity: .7;
}

#santiye-app-root .leave-calendar-footer .leave-calendar-legend-holiday i {
  background: #e6b278;
}

#santiye-app-root .leave-calendar-footer i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b99a70;
}

#santiye-app-root .leave-calendar-footer button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px !important;
}

#santiye-app-root .leave-request-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

#santiye-app-root .leave-notice {
  margin: -5px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--green);
  background: var(--green-soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

#santiye-app-root .leave-notice.is-warning {
  border-left-color: #e0a044;
  background: #463827;
  color: #ffe0aa;
  font-weight: 600;
  animation: leave-notice-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes leave-notice-pulse {
  from {
    opacity: .62;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #santiye-app-root .leave-notice.is-warning {
    animation: none;
  }
}

#santiye-app-root .leave-rules-panel h2 {
  margin: 0 0 18px;
  font-size: 23px;
}

#santiye-app-root .leave-rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#santiye-app-root .leave-rules li {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

#santiye-app-root .leave-rules li b {
  font-size: 14px;
}

#santiye-app-root .leave-rules li span,
#santiye-app-root .leave-rule-footnote {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

#santiye-app-root .leave-rule-footnote {
  margin: 14px 0 0;
}

#santiye-app-root .leave-request-list {
  display: grid;
  gap: 10px;
}

#santiye-app-root .leave-request-card {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}

#santiye-app-root .leave-request-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#santiye-app-root .leave-request-card-heading > div {
  display: grid;
  gap: 5px;
}

#santiye-app-root .leave-request-card-heading > div span,
#santiye-app-root .leave-request-card p,
#santiye-app-root .leave-manager-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

#santiye-app-root .leave-request-card p {
  margin: 14px 0 0;
  color: var(--ink);
  white-space: pre-wrap;
}

#santiye-app-root .leave-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 20px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
}

#santiye-app-root .leave-status.approved {
  background: var(--green-soft);
  color: var(--green);
}

#santiye-app-root .leave-status.rejected {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

#santiye-app-root .leave-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

#santiye-app-root .leave-request-actions .button {
  min-height: 38px;
  padding: 7px 12px;
}

#santiye-app-root .home-leave-alert {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#santiye-app-root .home-leave-alert-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

#santiye-app-root .home-leave-alert-heading > div {
  min-width: 0;
  flex: 1;
}

#santiye-app-root .home-leave-alert-heading .overline {
  margin: 0 0 2px;
  color: var(--amber);
}

#santiye-app-root .home-leave-alert-heading h3 {
  margin: 0;
  font-size: 15px;
}

#santiye-app-root .home-leave-alert-heading h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  font: 700 11px/1 "DM Sans", Arial, sans-serif;
}

#santiye-app-root .home-leave-alert-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  font-weight: 800;
}

#santiye-app-root .home-leave-alert.has-pending .home-leave-alert-icon {
  animation: home-leave-blink 1.25s ease-in-out infinite;
}

#santiye-app-root .home-leave-alert-list {
  display: grid;
  gap: 7px;
}

#santiye-app-root .home-leave-request {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}

#santiye-app-root .home-leave-request > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#santiye-app-root .home-leave-request > div > span,
#santiye-app-root .home-leave-more,
#santiye-app-root .home-leave-error {
  color: var(--muted);
  font-size: 12px;
}

#santiye-app-root .home-leave-request p {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

#santiye-app-root .home-leave-request .leave-status {
  font-size: 10px;
}

#santiye-app-root .home-leave-more,
#santiye-app-root .home-leave-error {
  margin: 0;
}

#santiye-app-root .work-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-items: start;
  gap: 14px;
}

#santiye-app-root .work-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#santiye-app-root .work-project-card[data-work-project-open] {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 12px;
  padding: 16px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 76%);
}

#santiye-app-root .work-project-card[data-work-project-open]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

#santiye-app-root .work-project-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}

#santiye-app-root .work-project-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 12px;
  overflow: hidden;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 76%);
}

#santiye-app-root .work-project-summary::-webkit-details-marker {
  display: none;
}

#santiye-app-root .work-project-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

#santiye-app-root .work-project-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#santiye-app-root .work-project-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 48%, transparent), color-mix(in srgb, var(--paper) 78%, transparent));
  content: "";
}

#santiye-app-root .work-project-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(.72);
}

#santiye-app-root .work-project-summary > :not(.work-project-art) {
  position: relative;
  z-index: 1;
}

#santiye-app-root .work-project-card[data-work-project-open] > :not(.work-project-art) {
  position: relative;
  z-index: 1;
}

#santiye-app-root .work-project-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#santiye-app-root .work-project-heading small {
  color: var(--blue);
  font: 600 10px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .12em;
}

#santiye-app-root .work-project-heading b {
  color: var(--ink);
  font: 650 18px/1.2 "Manrope", Arial, sans-serif;
  overflow-wrap: anywhere;
}

#santiye-app-root .work-project-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  grid-column: 2;
  grid-row: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
}

#santiye-app-root .work-project-toggle::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
}

#santiye-app-root .work-project-card[open] .work-project-toggle::before {
  content: "−";
}

#santiye-app-root .work-project-stats {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

#santiye-app-root .work-project-stats span {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}

#santiye-app-root .work-project-stats .work-project-late {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line));
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

#santiye-app-root .work-project-progress {
  height: 4px;
  overflow: hidden;
  grid-column: 1 / -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

#santiye-app-root .work-project-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 58%, var(--green)));
}

#santiye-app-root .work-project-body {
  padding: 0 12px 12px;
}

#santiye-app-root .work-project-body .work-row:first-child {
  border-top: 0;
}

#santiye-app-root .work-project-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

#santiye-app-root .work-project-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(96vw, 1440px);
  max-width: none;
  height: min(92vh, 1000px);
  max-height: 92vh;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

#santiye-app-root .work-project-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}

#santiye-app-root .work-project-detail-header h2,
#santiye-app-root .work-project-detail-summary h3,
#santiye-app-root .work-project-detail-section-heading h3,
#santiye-app-root .work-project-assignee h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
}

#santiye-app-root .work-project-detail-header h2 {
  font-size: clamp(20px, 3vw, 28px);
}

#santiye-app-root .work-project-detail-header p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

#santiye-app-root .work-project-detail-scroll {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 26px;
}

#santiye-app-root .work-project-detail-overview {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

#santiye-app-root .work-project-detail-cover {
  height: 118px;
  overflow: hidden;
  background: linear-gradient(145deg, #45443f, #252525);
}

#santiye-app-root .work-project-detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#santiye-app-root .work-project-detail-summary h3 {
  font-size: 20px;
}

#santiye-app-root .work-project-detail-summary > p:not(.overline) {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

#santiye-app-root .work-project-detail-summary .overline {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .12em;
}

#santiye-app-root .work-project-detail-section {
  display: grid;
  gap: 14px;
  padding-top: 22px;
}

#santiye-app-root .work-project-detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#santiye-app-root .work-project-detail-section-heading .overline {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .12em;
}

#santiye-app-root .work-project-assignee-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

#santiye-app-root .work-project-assignee {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
}

#santiye-app-root .work-project-assignee > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

#santiye-app-root .work-project-assignee > header > div {
  flex: 1 1 130px;
}

#santiye-app-root .work-project-assignee .overline {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 9px;
  letter-spacing: .12em;
}

#santiye-app-root .work-project-assignee > header > span {
  color: var(--muted);
  font-size: 11px;
}

#santiye-app-root .work-project-assignee .work-list {
  min-width: 0;
  overflow: hidden;
  padding: 0 12px 8px;
}

#santiye-app-root .work-project-assignee .work-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 0;
}

#santiye-app-root .work-project-assignee .work-dates,
#santiye-app-root .work-project-assignee .work-progress {
  grid-column: 2;
}

#santiye-app-root .work-project-assignee .work-progress {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-width: 48px;
}

#santiye-app-root .work-project-assignee .work-info,
#santiye-app-root .work-project-assignee .work-title {
  min-width: 0;
}

#santiye-app-root .work-project-assignee .work-title {
  flex-wrap: wrap;
}

#santiye-app-root .work-project-assignee .work-title b {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#santiye-app-root .work-project-assignee .work-meta {
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

#santiye-app-root .work-project-assignee .work-dates {
  grid-column: 2 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

#santiye-app-root .work-project-assignee .work-actions {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

@media (max-width: 680px) {
  #santiye-app-root .work-project-detail-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  #santiye-app-root .work-project-detail-header,
  #santiye-app-root .work-project-detail-scroll {
    padding-right: 16px;
    padding-left: 16px;
  }

  #santiye-app-root .work-project-detail-header {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #santiye-app-root .work-project-detail-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  #santiye-app-root .work-project-detail-cover {
    height: 150px;
  }

  #santiye-app-root .work-project-detail-overview > .button {
    width: 100%;
  }
}

#work-project-modal-backdrop {
  z-index: 30;
  padding: clamp(8px, 2vh, 18px);
}

#work-modal-backdrop {
  z-index: 40;
}

#work-project-modal-backdrop .work-project-detail-modal {
  --ink: #eeeae2;
  --muted: #aaa59b;
  --line: #3a3a3a;
  --blue: #d2b58d;
  --paper: #252525;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(96vw, 1440px);
  max-width: none;
  height: min(92vh, 1000px);
  max-height: 92vh;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  border-color: #44413a;
  border-radius: 4px;
  background: #252525;
  color: #eeeae2;
}

#work-project-modal-backdrop .work-project-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid #3a3a3a;
}

#work-project-modal-backdrop .work-project-detail-header .overline,
#work-project-modal-backdrop .work-project-detail-section-heading .overline {
  margin: 0 0 5px;
  color: #b2a183;
  font-size: 10px;
  letter-spacing: .12em;
}

#work-project-modal-backdrop .work-project-detail-header h2,
#work-project-modal-backdrop .work-project-detail-summary h3,
#work-project-modal-backdrop .work-project-detail-section-heading h3,
#work-project-modal-backdrop .work-project-assignee h3 {
  margin: 0;
  color: #eeeae2;
  font-family: "Manrope", Arial, sans-serif;
}

#work-project-modal-backdrop .work-project-detail-header h2 {
  font-size: clamp(20px, 3vw, 28px);
}

#work-project-modal-backdrop .work-project-detail-header p:last-child {
  margin: 6px 0 0;
  color: #aaa59b;
  font-size: 13px;
}

#work-project-modal-backdrop .work-project-detail-header .modal-close {
  flex: 0 0 auto;
}

#work-project-modal-backdrop .work-project-detail-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
}

#work-project-modal-backdrop .work-project-detail-overview {
  display: grid;
  grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #3a3a3a;
}

#work-project-modal-backdrop .work-project-detail-cover {
  height: 130px;
  overflow: hidden;
  background: linear-gradient(145deg, #45443f, #252525);
}

#work-project-modal-backdrop .work-project-detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#work-project-modal-backdrop .work-project-detail-summary {
  min-width: 0;
}

#work-project-modal-backdrop .work-project-detail-summary h3 {
  overflow-wrap: anywhere;
  font-size: 22px;
}

#work-project-modal-backdrop .work-project-detail-summary > p:not(.overline) {
  margin: 5px 0 12px;
  color: #aaa59b;
  font-size: 13px;
}

#work-project-modal-backdrop .work-project-detail-summary .overline {
  margin: 0 0 5px;
  color: #b2a183;
  font-size: 10px;
  letter-spacing: .12em;
}

#work-project-modal-backdrop .work-project-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #aaa59b;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-stats span {
  padding: 4px 8px;
  border: 1px solid #45423c;
  background: #202020;
}

#work-project-modal-backdrop .work-project-stats .work-project-late {
  color: #e58b7e;
}

#work-project-modal-backdrop .work-project-detail-section {
  display: grid;
  gap: 12px;
  padding-top: 20px;
}

#work-project-modal-backdrop .work-project-detail-section-heading h3 {
  font-size: 18px;
}

#work-project-modal-backdrop .work-project-detail-section-heading p:last-child {
  margin: 5px 0 0;
  color: #aaa59b;
  font-size: 12px;
}

#work-project-modal-backdrop .work-project-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
  gap: 6px;
}

#work-project-modal-backdrop .work-project-member {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #202020;
  color: #eeeae2;
  text-align: left;
  cursor: pointer;
}

#work-project-modal-backdrop .work-project-member:hover,
#work-project-modal-backdrop .work-project-member.is-selected {
  border-color: #9c8059;
  background: #2d2a25;
}

#work-project-modal-backdrop .work-project-member-avatar {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #534a3c;
  border-radius: 50%;
  background: #37332d;
  color: #d2b58d;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-member-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

#work-project-modal-backdrop .work-project-member-copy b {
  overflow-wrap: anywhere;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-member-copy small,
#work-project-modal-backdrop .work-project-member-chevron {
  color: #aaa59b;
  font-size: 10px;
}

#work-project-modal-backdrop .work-project-staff-toggle {
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}

#work-project-modal-backdrop .work-project-assignee {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #45423c;
  border-radius: 4px;
  background: #202020;
}

#work-project-modal-backdrop .work-project-assignee > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #393939;
}

#work-project-modal-backdrop .work-project-assignee > header > div {
  flex: 1 1 180px;
  min-width: 0;
}

#work-project-modal-backdrop .work-project-assignee .overline {
  margin: 0 0 4px;
  color: #b2a183;
  font-size: 9px;
  letter-spacing: .12em;
}

#work-project-modal-backdrop .work-project-assignee > header > span {
  color: #aaa59b;
  font-size: 11px;
}

#work-project-modal-backdrop .work-project-assignee .work-list {
  min-width: 0;
  padding: 0 14px 8px;
}

#work-project-modal-backdrop .work-project-assignee .work-row {
  grid-template-columns: 36px minmax(0, 1fr) 120px 64px minmax(0, auto);
  gap: 10px;
  min-width: 0;
  padding: 12px 0;
  border-color: #393939;
}

#work-project-modal-backdrop .work-project-assignee .work-info,
#work-project-modal-backdrop .work-project-assignee .work-title {
  min-width: 0;
}

#work-project-modal-backdrop .work-project-assignee .work-title {
  flex-wrap: wrap;
}

#work-project-modal-backdrop .work-project-assignee .work-title b {
  max-width: 100%;
  color: #eeeae2;
  white-space: normal;
  overflow-wrap: anywhere;
}

#work-project-modal-backdrop .work-project-assignee .work-meta {
  height: auto;
  color: #aaa59b;
  white-space: normal;
  overflow-wrap: anywhere;
}

#work-project-modal-backdrop .work-project-assignee .work-dates {
  color: #aaa59b;
  white-space: normal;
}

#work-project-modal-backdrop .work-project-assignee .work-dates b {
  color: #eeeae2;
}

#work-project-modal-backdrop .work-project-assignee .work-progress {
  min-width: 0;
}

#work-project-modal-backdrop .work-project-assignee .work-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 0;
}

#work-project-modal-backdrop .work-project-empty {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 16px;
  border: 1px dashed #45423c;
  color: #aaa59b;
  font-size: 12px;
  text-align: left;
}

#work-project-modal-backdrop .work-project-empty b {
  color: #eeeae2;
}

@media (max-width: 760px) {
  #work-project-modal-backdrop .work-project-detail-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  #work-project-modal-backdrop .work-project-detail-header,
  #work-project-modal-backdrop .work-project-detail-scroll {
    padding-right: 14px;
    padding-left: 14px;
  }

  #work-project-modal-backdrop .work-project-detail-header {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  #work-project-modal-backdrop .work-project-detail-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #work-project-modal-backdrop .work-project-detail-cover {
    height: 150px;
  }

  #work-project-modal-backdrop .work-project-detail-overview > .button {
    width: 100%;
  }

  #work-project-modal-backdrop .work-project-assignee .work-row {
    grid-template-columns: 30px minmax(0, 1fr) 54px;
    gap: 7px;
  }

  #work-project-modal-backdrop .work-project-assignee .work-info {
    grid-column: 2;
    grid-row: 1;
  }

  #work-project-modal-backdrop .work-project-assignee .work-progress {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  #work-project-modal-backdrop .work-project-assignee .work-dates {
    grid-column: 2 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  #work-project-modal-backdrop .work-project-assignee .work-actions {
    grid-column: 2 / -1;
    grid-row: 3;
  }
}

@keyframes home-leave-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 25%, transparent); }
  50% { opacity: .48; box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 12%, transparent); }
}

@media (max-width: 760px) {
  #santiye-app-root .leave-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #santiye-app-root .team-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #santiye-app-root .team-profile-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #santiye-app-root .leave-type-options {
    grid-template-columns: 1fr;
  }

  #santiye-app-root .leave-date-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #santiye-app-root .leave-date-choice {
    padding: 11px 9px;
  }

  #santiye-app-root .leave-date-choice b {
    font-size: 14px;
  }

  #santiye-app-root .leave-calendar {
    padding: 10px;
  }
}

#santiye-app-root .meeting-create-compact {
  margin-bottom: 16px;
  padding: 0;
  border: 1px solid #41403b;
  background: #202020;
}

#santiye-app-root .meeting-create-compact > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #eeeae2;
  list-style: none;
  cursor: pointer;
}

#santiye-app-root .meeting-create-compact > summary::-webkit-details-marker {
  display: none;
}

#santiye-app-root .meeting-create-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #38332d;
  color: #e0c49b;
  font-size: 19px;
}

#santiye-app-root .meeting-create-compact > summary b,
#santiye-app-root .meeting-create-compact > summary small {
  display: block;
}

#santiye-app-root .meeting-create-compact > summary b {
  font-size: 12px;
}

#santiye-app-root .meeting-create-compact > summary small {
  margin-top: 2px;
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .meeting-create-chevron {
  margin-left: auto;
  color: #d0b38b;
  transition: transform .18s ease;
}

#santiye-app-root .meeting-create-compact[open] .meeting-create-chevron {
  transform: rotate(180deg);
}

#santiye-app-root .meeting-create-compact[open] .meeting-form {
  display: grid;
  gap: 12px;
  max-width: 860px;
  padding: 0 16px 16px;
}

#santiye-app-root .meeting-calendar-panel {
  max-width: 940px;
}

#santiye-app-root .meeting-calendar {
  max-width: 760px;
  margin: 0 auto;
}

#santiye-app-root .meeting-calendar-day {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  width: 42px;
  height: 46px;
  border-radius: 7px;
  font-size: 12px !important;
}

#santiye-app-root .meeting-calendar-day.has-meetings {
  color: #f0d7b1;
  box-shadow: inset 0 0 0 1px #8f714c;
}

#santiye-app-root .meeting-calendar-day.is-selected {
  background: #514331;
  color: #fff;
  box-shadow: inset 0 0 0 1px #d0b38b;
}

#santiye-app-root .meeting-calendar-day i {
  display: block;
  min-width: 5px;
  height: 5px;
  border-radius: 9px;
  background: #d7a45e;
  color: transparent;
  font-size: 0;
}

#santiye-app-root .meeting-calendar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa59b;
  font-size: 10px;
}

#santiye-app-root .meeting-calendar-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #d7a45e;
}

#santiye-app-root .meeting-selected-day {
  max-width: 760px;
  margin: 20px auto 0;
  padding-top: 16px;
  border-top: 1px solid #393939;
}

#santiye-app-root .meeting-selected-day > .panel-heading {
  margin-bottom: 10px;
}

#santiye-app-root .meeting-card {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
}

#santiye-app-root .meeting-card-heading h3 {
  font-size: 13px;

  #santiye-app-root .leave-request-card-heading {
    flex-direction: column;
  }

  #santiye-app-root .home-leave-alert-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #santiye-app-root .home-leave-alert-heading .quiet-link {
    margin-left: 40px;
  }

  #santiye-app-root .home-leave-request {
    flex-direction: column;
  }

  #santiye-app-root .work-project-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #santiye-app-root .work-project-card,
  #santiye-app-root .home-leave-alert.has-pending .home-leave-alert-icon {
    animation: none;
    transition: none;
  }
}

@media (max-width: 820px) {
  #santiye-app-root .sidebar.open .nav-item {
    font-size: 15px !important;
  }
}

#santiye-app-root .media-photo-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #393939;
  border-radius: 2px;
  background: #252525;
  color: #eeeae2;
  text-align: left;
  cursor: zoom-in;
}

#santiye-app-root .media-photo-card img {
  display: block;
  width: 100%;
  height: clamp(190px, 22vw, 290px);
  object-fit: cover;
  transition: transform .35s ease;
}

#santiye-app-root .media-photo-card:hover img,
#santiye-app-root .media-photo-card:focus-visible img {
  transform: scale(1.035);
}

#santiye-app-root .media-photo-card:focus-visible {
  outline: 2px solid #c3a77f;
  outline-offset: 3px;
}

#santiye-app-root .media-caption-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 5px;
  padding: 36px 16px 15px;
  background: linear-gradient(180deg, transparent, rgb(12 12 12 / 80%));
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 9px rgb(0 0 0 / 65%);
}

#santiye-app-root .media-caption-overlay b {
  overflow: hidden;
  color: #fff;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
}

#santiye-app-root .media-caption-overlay small {
  overflow: hidden;
  color: rgb(255 255 255 / 78%);
  font-size: 12px !important;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#santiye-app-root .media-photo-data {
  display: none;
}

.photo-upload-modal {
  border-color: #44413a;
  border-radius: 2px;
  background: #252525;
  color: #eeeae2;
}

.photo-upload-modal .modal-header h2 {
  color: #eeeae2;
}

.photo-upload-modal .field-label {
  color: #eeeae2;
}

.photo-upload-modal .field-label > input,
.photo-upload-modal .field-label > textarea {
  border-color: #46433c;
  border-radius: 2px;
  background: #1e1e1e;
  color: #eeeae2;
}

.photo-upload-modal .modal-close {
  border-radius: 2px;
  background: #37332d;
  color: #d2b58d;
}

.photo-upload-modal .button-primary {
  border-radius: 2px;
  background: #b99a70;
  color: #1d1b18;
}

.photo-upload-modal .button-outline {
  border-color: #46433c;
  border-radius: 2px;
  background: #252525;
  color: #eeeae2;
}

#santiye-app-root .meeting-create-button {
  margin-bottom: 16px;
}

#santiye-app-root .meeting-create-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

#santiye-app-root .meeting-create-actions .meeting-create-button {
  margin-bottom: 0;
}

#santiye-app-root #site-visit-create-button {
  border-color: #9c8058;
  color: #e6d3b3;
}

#santiye-app-root .meeting-event-kind {
  display: block;
  margin-bottom: 4px;
  color: #c9a46e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

#santiye-app-root .meeting-card.is-site-visit {
  border-left: 3px solid #c9a46e;
}

#santiye-app-root .meeting-calendar-day.has-site-visits i {
  background: #88a98c;
}

#santiye-app-root .site-visit-calendar-legend i {
  background: #88a98c;
}

#santiye-app-root .site-visit-calendar-day.has-meetings {
  color: #d7ead8;
  box-shadow: inset 0 0 0 1px #66886b;
}

#santiye-app-root .meeting-card.is-site-visit {
  border-left-color: #88a98c;
}

#santiye-app-root #meeting-topic-fields[hidden],
#santiye-app-root #site-visit-title-wrap[hidden] {
  display: none !important;
}

#santiye-app-root .meeting-calendar-panel {
  max-width: none;
}

#santiye-app-root .meeting-calendar {
  max-width: none;
  height: auto;
  overflow: visible;
}

#santiye-app-root .meeting-calendar .leave-calendar-days {
  grid-auto-rows: clamp(58px, 8vw, 82px);
}

#santiye-app-root .meeting-calendar .meeting-calendar-day {
  width: min(100% - 8px, 84px);
  height: calc(100% - 8px);
  border-radius: 10px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-modal {
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  max-height: 92vh;
  padding: 28px;
  border-color: #d7d2c8;
  border-radius: 12px;
  background: #fffefa;
  color: #292a25;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#santiye-app-root #meeting-modal-backdrop .modal-header h2,
#santiye-app-root #meeting-modal-backdrop .field-label,
#santiye-app-root #meeting-modal-backdrop .meeting-picker legend {
  color: #292a25;
}

#santiye-app-root #meeting-modal-backdrop .field-label {
  font-size: 14px;
  line-height: 1.45;
}

#santiye-app-root #meeting-modal-backdrop .field-label > input,
#santiye-app-root #meeting-modal-backdrop .field-label > select,
#santiye-app-root #meeting-modal-backdrop .field-label > textarea {
  min-height: 48px;
  border-color: #c9c4b9;
  border-radius: 7px;
  background: #fff;
  color: #252621;
  font-size: 15px;
}

#santiye-app-root #meeting-modal-backdrop .field-label > textarea {
  min-height: 84px;
}

#santiye-app-root #meeting-modal-backdrop .field-label input::placeholder,
#santiye-app-root #meeting-modal-backdrop .field-label textarea::placeholder {
  color: #65665f;
  opacity: 1;
}

#santiye-app-root #meeting-modal-backdrop .meeting-form {
  display: grid;
  gap: 16px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-form .form-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker {
  min-width: 0;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid #c9c4b9;
  border-radius: 8px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
}

#santiye-app-root #meeting-modal-backdrop .meeting-chip-list,
#santiye-app-root #meeting-modal-backdrop .meeting-team-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
  padding: 3px 2px 7px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

#santiye-app-root #meeting-modal-backdrop .meeting-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #a9a397;
  border-radius: 999px;
  background: #f4f1eb;
  color: #252621;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#santiye-app-root #meeting-modal-backdrop .meeting-chip:hover,
#santiye-app-root #meeting-modal-backdrop .meeting-chip.is-selected {
  border-color: #b99a61;
  background: #f5e8c9;
  color: #111;
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker,
#santiye-app-root #meeting-modal-backdrop .meeting-picker legend,
#santiye-app-root #meeting-modal-backdrop .meeting-picker-actions,
#santiye-app-root #meeting-modal-backdrop .meeting-selection-empty {
  color: #111;
}

#santiye-app-root #meeting-modal-backdrop .meeting-selection-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  max-height: 84px;
  margin: 0 0 10px;
  overflow: auto;
  padding: 2px 1px 5px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #b99a61;
  border-radius: 999px;
  background: #fff7e6;
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#santiye-app-root #meeting-modal-backdrop .meeting-selected-chip span {
  color: #111;
  font-size: 17px;
  line-height: 1;
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker-actions button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b99a61;
  border-radius: 7px;
  background: #f5e8c9;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
  cursor: pointer;
}

#santiye-app-root #meeting-modal-backdrop .meeting-picker-actions button.is-applied {
  border-color: #3c7254;
  background: #e8f3eb;
  color: #111;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px 16px 10px;
  border: 1px solid #d5d0c5;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffefa, #f5f2eb);
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-fieldset > legend {
  padding: 0 7px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  height: 220px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #eeece7, #fff 42%, #fff 58%, #eeece7);
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-column {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 220px;
  overflow: hidden;
  perspective: 260px;
  transform-style: preserve-3d;
}

#santiye-app-root #meeting-modal-backdrop [data-meeting-wheel="meetingDate"] [data-wheel-part="day"] { flex: .7; }
#santiye-app-root #meeting-modal-backdrop [data-meeting-wheel="meetingDate"] [data-wheel-part="month"] { flex: 1.5; }
#santiye-app-root #meeting-modal-backdrop [data-meeting-wheel="meetingDate"] [data-wheel-part="year"] { flex: .9; }
#santiye-app-root #meeting-modal-backdrop [data-meeting-wheel="startTime"] .meeting-wheel-column,
#santiye-app-root #meeting-modal-backdrop [data-meeting-wheel="endTime"] .meeting-wheel-column { flex: 0 1 92px; }

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-list {
  box-sizing: content-box;
  height: 220px;
  padding: 88px 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 29%, #000 71%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 29%, #000 71%, transparent 100%);
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-list::-webkit-scrollbar { display: none; }

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-option {
  display: grid;
  height: 44px;
  place-items: center;
  overflow: hidden;
  padding: 0 5px;
  color: #000;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  scroll-snap-align: center;
  cursor: pointer;
  user-select: none;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform, opacity;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-option.is-selected {
  color: #000;
  font-size: 29px;
  font-weight: 800;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-focus {
  position: absolute;
  z-index: 2;
  top: 88px;
  right: 0;
  left: 0;
  height: 44px;
  border-top: 1px solid #b99a70;
  border-bottom: 1px solid #b99a70;
  background: rgb(185 154 112 / 8%);
  pointer-events: none;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-separator {
  z-index: 2;
  align-self: center;
  color: #876a44;
  font-size: 25px;
  font-weight: 700;
}

#santiye-app-root #meeting-modal-backdrop .meeting-wheel-hint {
  min-height: 18px;
  margin: 7px 0 0;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

#santiye-app-root #meeting-modal-backdrop .meeting-end-time-fieldset {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

#santiye-app-root #meeting-modal-backdrop .meeting-end-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

#santiye-app-root #meeting-modal-backdrop .meeting-end-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #88704e;
}

#santiye-app-root #meeting-modal-backdrop .meeting-end-wheel[hidden] { display: none; }

@media (max-width: 640px) {
  #santiye-app-root .meeting-calendar .leave-calendar-days {
    grid-auto-rows: 54px;
  }

  #santiye-app-root .meeting-calendar .meeting-calendar-day {
    width: calc(100% - 2px);
    height: calc(100% - 4px);
  }

  #santiye-app-root .meeting-calendar {
    padding: 10px;
  }

  #santiye-app-root #meeting-modal-backdrop .meeting-modal {
    width: calc(100vw - 20px);
    max-height: 94vh;
    padding: 16px;
  }

  #santiye-app-root #meeting-modal-backdrop .meeting-form .form-row {
    grid-template-columns: 1fr;
  }

  #santiye-app-root #meeting-modal-backdrop .meeting-wheel-grid {
    grid-template-columns: 1fr;
  }

  #santiye-app-root #meeting-modal-backdrop .meeting-end-time-fieldset {
    grid-template-columns: 1fr;
  }
}

.photo-upload-modal #photo-upload-work-title {
  margin: 4px 0 0;
  color: #aaa59b;
  font-size: 14px;
}

.photo-upload-modal #photo-upload-form {
  display: grid;
  gap: 16px;
}

.photo-upload-modal #work-photo-input {
  max-width: 100%;
  padding: 10px;
  border: 1px solid #46433c;
  background: #1e1e1e;
  color: #eeeae2;
}

#meeting-modal-backdrop .meeting-modal {
  background: #fffefa !important;
  color: #111 !important;
}

#meeting-modal-backdrop .meeting-modal .modal-header h2,
#meeting-modal-backdrop .meeting-modal .field-label,
#meeting-modal-backdrop .meeting-modal .field-label > input,
#meeting-modal-backdrop .meeting-modal .field-label > select,
#meeting-modal-backdrop .meeting-modal .field-label > textarea,
#meeting-modal-backdrop .meeting-modal .meeting-picker,
#meeting-modal-backdrop .meeting-modal .meeting-picker *,
#meeting-modal-backdrop .meeting-modal .meeting-end-toggle {
  color: #111 !important;
}

#meeting-modal-backdrop .meeting-modal .field-label input::placeholder,
#meeting-modal-backdrop .meeting-modal .field-label textarea::placeholder {
  color: #333 !important;
  opacity: 1 !important;
}

#meeting-modal-backdrop .meeting-modal .meeting-chip {
  border-color: #9b927f !important;
  background: #fff !important;
  color: #111 !important;
}

#meeting-modal-backdrop .meeting-modal .meeting-chip:hover,
#meeting-modal-backdrop .meeting-modal .meeting-chip.is-selected {
  border-color: #96743e !important;
  background: #f5e8c9 !important;
  color: #111 !important;
}

#meeting-modal-backdrop .meeting-modal .meeting-selected-chip,
#meeting-modal-backdrop .meeting-modal .meeting-picker-actions button {
  color: #111 !important;
}

#meeting-modal-backdrop .meeting-choice-dropdown {
  position: relative;
  margin-bottom: 10px;
}

#meeting-modal-backdrop .meeting-choice-dropdown > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid #8e887d;
  border-radius: 7px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

#meeting-modal-backdrop .meeting-choice-dropdown > summary::-webkit-details-marker {
  display: none;
}

#meeting-modal-backdrop .meeting-choice-dropdown > summary:focus-visible {
  outline: 2px solid #806538;
  outline-offset: 2px;
}

#meeting-modal-backdrop .meeting-choice-chevron {
  font-size: 18px;
  transition: transform .16s ease;
}

#meeting-modal-backdrop .meeting-choice-dropdown[open] .meeting-choice-chevron {
  transform: rotate(180deg);
}

#meeting-modal-backdrop .meeting-choice-dropdown > .meeting-chip-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 220px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #b8b0a1;
  border-radius: 8px;
  background: #fffefa;
  box-shadow: 0 12px 28px rgb(22 20 16 / 18%);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

#meeting-modal-backdrop .meeting-location-row {
  grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr);
}

#meeting-modal-backdrop #meeting-topic-other-wrap[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  #meeting-modal-backdrop .meeting-location-row {
    grid-template-columns: 1fr;
  }
}

.photo-upload-modal #photo-upload-form .field-label > small {
  display: block;
  margin-top: 6px;
  color: #aaa59b;
  font-size: 12px;
}

@media (max-width: 600px) {
  #santiye-app-root .media-photo-card img {
    height: 190px;
  }

  #santiye-app-root .media-caption-overlay {
    padding: 30px 12px 12px;
  }
}

#work-project-modal-backdrop .work-project-available {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

#work-project-modal-backdrop .work-project-available > .overline {
  margin: 4px 0 0;
  color: #b2a183;
  font-size: 9px;
  letter-spacing: .12em;
}

#work-project-modal-backdrop .work-project-available > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 7px;
}

#work-project-modal-backdrop .work-project-available-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #45423c;
  border-radius: 4px;
  background: #202020;
  color: #eeeae2;
  text-align: left;
  cursor: pointer;
}

#work-project-modal-backdrop .work-project-available-item:hover {
  border-color: #9c8059;
  background: #2d2a25;
}

#work-project-modal-backdrop .work-project-available-item span {
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 600;
}

#work-project-modal-backdrop .work-project-available-item small {
  color: #aaa59b;
  font-size: 10px;
}

.notification-item.is-unread {
  background: rgba(195, 164, 122, .12);
  box-shadow: inset 3px 0 0 #c3a47a;
}

.notification-push {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
}

.notification-push small {
  line-height: 1.4;
}

.notification-panel-heading .quiet-link {
  border: 0;
  background: none;
  color: #c3a47a;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.update-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #11161d;
  color: #fff;
  border: 1px solid #c3a47a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.update-banner button {
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  background: #c3a47a;
  color: #11161d;
  font-weight: 700;
  cursor: pointer;
}