:root {
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  color: #49372f;
  background: #d9c7b7;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
}

button {
  font: inherit;
}

.app {
  position: relative;
  isolation: isolate;
  width: min(100vw, 430px);
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  touch-action: pan-y;
  background-color: #f4e5d2;
  box-shadow: 0 0 50px rgb(74 48 38 / 24%);
}

.background-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.background-layer-day {
  background-image: url("assets/images/background-library-day.png");
}

.background-layer-night {
  background-image: url("assets/images/background-library-night.png");
}

.app.background-day .background-layer-day,
.app.background-night .background-layer-night {
  opacity: 1;
}

.app::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(to bottom, rgb(255 250 241 / 10%) 0%, transparent 33%),
    linear-gradient(to top, rgb(247 232 213 / 34%) 0%, transparent 30%);
}

.ambient-glow {
  position: absolute;
  z-index: 0;
  top: 24%;
  left: 50%;
  width: 86%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgb(255 246 231 / 42%);
  filter: blur(32px);
}

.chocolate-counters {
  position: absolute;
  z-index: 8;
  top: max(18px, env(safe-area-inset-top));
  right: 16px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.chocolate-counter {
  min-width: 46px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 999px;
  color: #6d5147;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 8px 18px rgb(88 55 42 / 14%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  -webkit-tap-highlight-color: transparent;
}

.menu-button {
  position: absolute;
  z-index: 8;
  top: max(11px, env(safe-area-inset-top));
  left: 15px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 56%);
  border-radius: 60%;
  padding-bottom: 2px;
  color: #6d5147;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 8px 18px rgb(88 55 42 / 10%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  -webkit-tap-highlight-color: transparent;
}

.main-menu {
  position: absolute;
  z-index: 12;
  top: max(65px, calc(env(safe-area-inset-top) + 48px));
  left: 10px;
  display: grid;
  width: min(218px, calc(100vw - 20px));
  gap: 5px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 16px;
  background: rgb(255 250 242 / 94%);
  box-shadow: 0 16px 34px rgb(88 55 42 / 18%);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  pointer-events: auto;
}

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

.menu-item {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 11px;
  color: #60483f;
  background: transparent;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
}

.menu-item:active {
  background: rgb(238 223 213 / 72%);
}

.menu-help {
  margin: -1px 2px 4px;
  color: #846c62;
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.25;
}

.menu-status {
  color: #6f594f;
}

.menu-config {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 12px;
  background: rgb(255 255 255 / 48%);
}

.menu-config h2 {
  margin: 0;
  color: #60483f;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.menu-config-label {
  color: #745c52;
  font-size: 0.64rem;
  font-weight: 800;
}

.menu-config-input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgb(139 105 93 / 18%);
  border-radius: 9px;
  color: #60483f;
  background: rgb(255 250 242 / 82%);
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
}

.menu-config-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.menu-config-button {
  min-height: 30px;
  padding: 5px 7px;
  border: 0;
  border-radius: 9px;
  color: #60483f;
  background: rgb(238 223 213 / 72%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.64rem;
  font-weight: 850;
}

.menu-config-button.is-muted {
  grid-column: 1 / -1;
  background: rgb(255 255 255 / 56%);
}

.menu-item[aria-current="page"] {
  background: rgb(238 223 213 / 58%);
}

.data-status {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgb(30 24 21 / 36%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.data-status[hidden] {
  display: none;
}

.data-status-text {
  margin: 0;
  color: #60483f;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.data-status.is-error .data-status-text {
  color: #74423f;
}

.data-status-card {
  width: min(100%, 330px);
  padding: 18px 16px 15px;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 18px;
  background: rgb(255 250 242 / 98%);
  box-shadow:
    0 18px 48px rgb(38 28 24 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  text-align: center;
}

.data-status-close {
  margin-top: 12px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  color: #fffaf4;
  background: #8f6a5d;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.data-status-close:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.menu-button:focus-visible,
.menu-item:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.app.is-work-room .character-stage,
.app.is-work-room .conversation,
.app.is-work-room .library-header,
.app.is-salon-room .character-stage,
.app.is-salon-room .conversation,
.app.is-salon-room .library-header,
.app.is-kitchen-room .character-stage,
.app.is-kitchen-room .conversation,
.app.is-kitchen-room .library-header,
.app.is-attic-room .character-stage,
.app.is-attic-room .conversation,
.app.is-attic-room .library-header {
  display: none;
}

.chocolate-counter:active,
.menu-button:active {
  transform: scale(0.96);
}

.chocolate-counter:focus-visible,
.menu-button:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.character-stage {
  position: absolute;
  z-index: 2;
  top: 22%;
  right: -5%;
  bottom: 18%;
  left: -5%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.owen-layer-frame {
  position: relative;
  display: grid;
  width: fit-content;
  line-height: 0;
  pointer-events: none;
}

.owen-layer-frame [data-owen-base] {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

.owen-shirt-layer {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
}

.owen-shirt-layer[hidden] {
  display: none;
}

.owen-shirt-layer.is-loaded {
  opacity: 1;
}

.app.background-day .owen-layer-frame.is-shirt-pending [data-owen-base] {
  opacity: 0;
}

.owen-layer-frame-library {
  max-width: 104%;
}

.owen-layer-frame-library .owen-shirt-layer {
  width: 104%;
}

.library-room[hidden],
.work-room[hidden],
.salon-room[hidden],
.kitchen-room[hidden],
.attic-room[hidden],
.task-modal[hidden],
.archives-modal[hidden],
.postpone-modal[hidden],
.timer-modal[hidden],
.chocolaterie-modal[hidden] {
  display: none;
}

.work-room,
.salon-room,
.kitchen-room,
.attic-room {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.work-room {
  padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
}

.salon-room {
  gap: 12px;
}

.room-lock-veil {
  position: fixed;
  z-index: 18;
  inset: 0;
  background: rgb(20 13 10 / 46%);
  backdrop-filter: blur(1.5px);
  pointer-events: none;
}

.room-lock-veil[hidden],
.room-lock-message[hidden] {
  display: none;
}

.room-lock-message {
  position: fixed;
  z-index: 19;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(82vw, 360px);
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 24px;
  color: #fff9ef;
  background:
    linear-gradient(145deg, rgb(78 55 49 / 92%), rgb(45 33 31 / 86%)),
    rgb(62 45 41 / 92%);
  box-shadow: 0 22px 54px rgb(22 14 10 / 36%);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.room-lock-message.has-action {
  pointer-events: auto;
}

.room-lock-message strong {
  color: #fff7df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  line-height: 1.1;
}

.room-lock-message span {
  color: rgb(255 247 235 / 86%);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.38;
}

.room-lock-action {
  justify-self: center;
  min-height: 42px;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 999px;
  color: #4f3b34;
  background: linear-gradient(180deg, #fff8ea, #ecdcc7);
  box-shadow: 0 10px 22px rgb(22 14 10 / 24%);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
}

.room-lock-action:active {
  transform: translateY(1px);
}

.work-room.has-room-lock-overlay .work-owen-note,
.salon-room.has-room-lock-overlay .salon-owen-note {
  position: relative;
  z-index: 20;
}

.attic-room {
  gap: 12px;
  padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 16px);
}

.menu-item:disabled,
.menu-item.is-disabled {
  cursor: default;
  opacity: 0.46;
}

.salon-header {
  justify-content: space-between;
  align-items: flex-start;
}

.attic-header {
  justify-content: flex-start;
}

.attic-intro {
  padding: 10px 12px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 14px;
  color: #60483f;
  background: rgb(255 250 242 / 68%);
  box-shadow: 0 12px 26px rgb(88 55 42 / 10%);
}

.attic-intro p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
}

.attic-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 14px;
  background: rgb(255 255 255 / 58%);
  box-shadow: 0 12px 26px rgb(88 55 42 / 10%);
}

.attic-panel h2 {
  margin: 0;
  color: #60483f;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.2;
}

.attic-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.attic-action-button {
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 12px;
  color: #60483f;
  background: rgb(245 234 217 / 86%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.15;
}

.attic-action-button:active,
.attic-config-button:active {
  transform: scale(0.98);
}

.attic-status {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgb(139 105 93 / 10%);
  border-radius: 12px;
  color: #6f594f;
  background: rgb(255 250 242 / 64%);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.35;
}

.attic-version-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgb(139 105 93 / 10%);
  border-radius: 12px;
  background: rgb(255 250 242 / 58%);
}

.attic-version-card h3 {
  margin: 0;
  color: #5d463e;
  font-size: 0.82rem;
  font-weight: 900;
}

.attic-version-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.attic-version-card dl > div {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.attic-version-card dt,
.attic-version-card dd {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.25;
}

.attic-version-card dt {
  color: #8b7166;
  font-weight: 850;
}

.attic-version-card dd {
  overflow-wrap: anywhere;
  color: #5f4a42;
  font-weight: 760;
}

.attic-catalog-sync {
  display: grid;
  gap: 8px;
}

.attic-catalog-sync .attic-action-button {
  width: 100%;
}

.attic-catalog-sync .attic-help[data-state="success"] {
  color: #56745f;
}

.attic-catalog-sync .attic-help[data-state="error"] {
  color: #9a514b;
}

.attic-config {
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 12px;
  background: rgb(255 250 242 / 46%);
}

.attic-config summary {
  min-height: 38px;
  padding: 10px 11px;
  color: #60483f;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  list-style-position: inside;
}

.attic-config-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.attic-config-body h3 {
  margin: 0;
  color: #60483f;
  font-size: 0.78rem;
  font-weight: 900;
}

.attic-config-label {
  color: #745c52;
  font-size: 0.68rem;
  font-weight: 800;
}

.attic-config-input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgb(139 105 93 / 18%);
  border-radius: 10px;
  color: #60483f;
  background: rgb(255 255 255 / 72%);
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.attic-config-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.attic-config-button {
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  color: #60483f;
  background: rgb(238 223 213 / 76%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.68rem;
  font-weight: 850;
}

.attic-config-button.is-muted {
  grid-column: 1 / -1;
  background: rgb(255 255 255 / 62%);
}

.attic-help {
  margin: 0;
  color: #846c62;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

.salon-owen-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.salon-owen-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 2px;
  align-items: center;
}

.salon-owen-note p,
.salon-summary,
.salon-panel,
.task-template-panel {
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 16px;
  background: rgb(255 250 242 / 70%);
  box-shadow: 0 14px 28px rgb(88 55 42 / 12%);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
}

.salon-quick-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
}

.salon-icon-button {
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 999px;
  background: rgb(255 250 242 / 56%);
  box-shadow: 0 8px 16px rgb(88 55 42 / 10%);
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.38;
  filter: grayscale(0.45);
}

.salon-day-off-button {
  width: auto;
  min-width: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #60483f;
  font-size: 0.8rem;
  font-weight: 900;
}

.salon-icon-button.is-active {
  opacity: 1;
  filter: none;
  background: rgb(219 238 221 / 82%);
}

.salon-icon-button:disabled {
  cursor: default;
  opacity: 0.25;
}

.salon-availability-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgb(70 132 88 / 22%);
  border-radius: 999px;
  color: #2f7a45;
  background:
    radial-gradient(circle at 12% 50%, rgb(104 173 116 / 24%) 0 10px, transparent 11px),
    linear-gradient(135deg, rgb(223 244 226 / 90%), rgb(241 250 237 / 76%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%), 0 8px 18px rgb(70 132 88 / 10%);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.salon-availability-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #48a05c;
  box-shadow: 0 0 0 4px rgb(72 160 92 / 14%);
}

.salon-availability-status.is-closed {
  border-color: rgb(162 73 73 / 18%);
  color: #a33d3d;
  background:
    radial-gradient(circle at 12% 50%, rgb(175 83 78 / 20%) 0 10px, transparent 11px),
    linear-gradient(135deg, rgb(255 229 225 / 88%), rgb(255 242 236 / 76%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%), 0 8px 18px rgb(162 73 73 / 10%);
}

.salon-availability-status.is-closed::before {
  background: #c4554f;
  box-shadow: 0 0 0 4px rgb(196 85 79 / 14%);
}

.salon-owen-note p {
  margin: 0;
  padding: 11px 63px 11px 18px;
  color: #60483f;
  font-size: 0.86rem;
  line-height: 1.35;
  margin-left: 20px;
  margin-right: -40px;
}

.owen-layer-frame-salon .salon-owen-avatar,
.owen-layer-frame-salon .owen-shirt-layer {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: 50% 10%;
  transform: scale(2);
  transform-origin: 50% 4%;
}

.salon-focus-card {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 16px;
  color: #60483f;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 14px 28px rgb(88 55 42 / 12%);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
}

.salon-focus-card[hidden] {
  display: none;
}

.salon-focus-eyebrow,
.salon-focus-meta,
.salon-focus-quota,
.salon-focus-done {
  margin: 0;
}

.salon-focus-eyebrow {
  color: #8a7167;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.salon-focus-title {
  padding: 0;
  border: 0;
  color: #513d36;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.salon-focus-title:disabled {
  cursor: default;
}

.salon-focus-meta,
.salon-focus-quota,
.salon-focus-done {
  color: #735b52;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.salon-focus-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.salon-focus-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 10px;
  color: #624a42;
  background: rgb(245 234 217 / 84%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 850;
}

.salon-focus-actions .salon-focus-list-button {
  flex: 1 1 auto;
}

.salon-focus-actions .salon-task-action {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  padding: 0 9px;
  font-size: 1rem;
}

.salon-focus-actions button:disabled {
  cursor: default;
  opacity: 0.42;
}

.owen-layer-frame-salon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 76%);
  border-radius: 50%;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 10px 24px rgb(88 55 42 / 14%);
}

.owen-layer-frame-salon img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.salon-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px 14px;
}

.salon-tasks-drawer {
  position: fixed;
  z-index: 28;
  right: 16px;
  bottom: 0;
  left: 16px;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  transform: translateY(calc(100% - 52px));
  transition: transform 280ms cubic-bezier(0.22, 0.78, 0.32, 1);
}

.salon-room.is-salon-tasks-open .salon-tasks-drawer {
  top: calc(max(18px, env(safe-area-inset-top)) + 214px);
  transform: translateY(0);
}

.salon-tasks-drawer > .salon-panel {
  min-height: 0;
  max-height: min(56dvh, 450px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.salon-room.is-salon-tasks-open .salon-tasks-drawer > .salon-panel {
  flex: 1 1 auto;
  max-height: none;
}

.salon-room.is-salon-tasks-open .salon-task-list {
  flex: 1 1 auto;
  max-height: none;
}

.salon-room.is-salon-tasks-open .salon-panel {
  gap: 8px;
}

.salon-summary p {
  margin: 0;
  color: #60483f;
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 800;
}

.task-template-header p {
  margin: 0;
  color: #735b52;
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 700;
}

.salon-panel h2,
.task-template-header h3 {
  margin: 0;
  color: #5f453c;
  font-size: 0.94rem;
}

.salon-panel {
  display: flex;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  flex-direction: column;
  overflow: hidden;
}

.salon-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.salon-panel-header p {
  margin: 4px 0 0;
  color: #8a7167;
  font-size: 0.72rem;
  font-weight: 700;
}

.salon-new-task-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.salon-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.salon-task-form {
  display: grid;
  width: min(100%, 390px);
  max-height: min(92dvh, 680px);
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 14px;
  background: rgb(255 250 242 / 58%);
  overflow-y: auto;
}

.salon-task-form[hidden] {
  display: none !important;
}

.salon-task-form label {
  display: grid;
  gap: 4px;
  color: #6f574e;
  font-size: 0.68rem;
  font-weight: 800;
}

.salon-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.salon-form-grid-memory {
  align-items: end;
}

.salon-task-form input,
.salon-task-form select,
.salon-task-form textarea {
  min-height: 36px;
  width: 100%;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 11px;
  color: #4f3b34;
  background: rgb(255 255 255 / 74%);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
}

.salon-task-form input,
.salon-task-form textarea {
  padding: 7px 9px;
}

.salon-task-form textarea {
  min-height: 48px;
  resize: vertical;
}

.salon-task-form select {
  padding: 7px 8px;
}

.salon-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.salon-task-gain-preview {
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  color: #5f453c;
  background: rgb(219 238 221 / 62%);
  font-size: 0.76rem;
  font-weight: 800;
}

.salon-task-list {
  max-height: min(36dvh, 340px);
}

.salon-task {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
}

.salon-task .work-task-title {
  font-size: 0.9rem;
}

.salon-task .work-task-meta {
  justify-content: flex-start;
}

.salon-gain-pill {
  color: #4d6543;
  background: rgb(219 238 221 / 78%);
}

.salon-task-gain-line {
  grid-column: 2 / 4;
  margin: -4px 0 0;
  color: #4d6543;
  font-size: 0.78rem;
  font-weight: 900;
}

.work-task.has-no-order-controls .salon-task-gain-line {
  grid-column: 1 / 3;
}

.salon-task .work-task-footer {
  align-items: center;
  justify-content: space-between;
}

.salon-task-action {
  min-width: 32px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
}

.salon-task-action-done {
  color: #624a42;
  background: rgb(245 234 217 / 74%);
}

.salon-task-action-danger {
  color: #624a42;
  background: rgb(245 234 217 / 74%);
}

.task-template-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.task-template-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.task-template-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-template-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 12px;
  background: rgb(255 255 255 / 48%);
}

.task-template-title {
  color: #513d36;
  font-size: 0.82rem;
  font-weight: 800;
}

.task-template-meta {
  grid-column: 1;
  color: #7d655c;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

.task-template-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
}

.task-template-actions button {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 10px;
  color: #624a42;
  background: rgb(245 234 217 / 74%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
}

.task-template-date-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 6px;
  border-top: 1px solid rgb(139 105 93 / 10%);
}

.task-template-date-picker label {
  display: grid;
  gap: 4px;
  color: #7d655c;
  font-size: 0.68rem;
  font-weight: 800;
}

.task-template-date-picker input {
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgb(139 105 93 / 18%);
  border-radius: 10px;
  padding: 6px 8px;
  color: #513d36;
  background: rgb(255 255 255 / 72%);
  font: inherit;
}

.task-template-date-actions {
  display: flex;
  gap: 6px;
}

.task-template-date-actions button {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 10px;
  color: #624a42;
  background: rgb(245 234 217 / 84%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  font-weight: 850;
}

.work-room.is-day-off-blocked .work-timer,
.work-room.is-day-off-blocked .work-panel {
  opacity: 0.54;
}

@media (max-width: 480px) {
  .salon-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salon-bottom-actions .work-archives-bottom-button:last-child {
    grid-column: 1 / -1;
  }

  .task-template-date-picker {
    grid-template-columns: 1fr;
  }

  .task-template-date-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .salon-form-grid,
  .salon-controls {
    grid-template-columns: 1fr;
  }

  .salon-panel-header,
  .task-template-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .salon-owen-note {
    grid-template-columns: minmax(0, 1fr) 94px;
  }

  .salon-owen-toolbar {
    flex-wrap: wrap;
  }

  .salon-availability-status {
    min-height: 28px;
    font-size: 0.7rem;
  }

  .salon-panel-actions {
    width: 100%;
  }

  .salon-task {
    grid-template-columns: 1fr;
  }

  .salon-task.has-no-order-controls .salon-task-title-row,
  .salon-task.has-no-order-controls .work-task-meta,
  .salon-task.has-no-order-controls .work-task-footer,
  .salon-task.has-no-order-controls .work-task-note,
  .salon-task.has-no-order-controls .salon-task-gain-line {
    grid-column: 1;
  }

  .salon-task .work-task-actions {
    width: 100%;
    justify-content: space-between;
  }

  .salon-task-action {
    flex: 1 1 0;
  }

  .task-template-item {
    grid-template-columns: 1fr;
  }

  .task-template-actions {
    grid-column: 1;
    grid-row: auto;
    flex-wrap: wrap;
  }
}

.room-header {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  min-height: 38px;
  align-items: center;
  padding: 0;
}

.library-header {
  position: absolute;
  z-index: 7;
  top: max(18px, env(safe-area-inset-top));
  right: 16px;
  left: 16px;
}

.room-header h1 {
  margin: 0;
  color: #5f453c;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}

.room-title-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(52vw, 260px);
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  padding: 8px 12px;
  color: inherit;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 8px 22px rgb(88 55 42 / 10%);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0;
}

.room-title-button::after {
  content: "⌄";
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.72;
}

.room-title-button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.room-title-button:active {
  transform: scale(0.98);
}

.room-title-button:focus-visible,
.room-dropdown-item:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.room-dropdown {
  position: absolute;
  z-index: 35;
  top: max(60px, calc(env(safe-area-inset-top) + 56px));
  left: 16px;
  display: grid;
  width: min(230px, calc(100vw - 32px));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 16px;
  background: rgb(255 250 242 / 94%);
  box-shadow: 0 16px 34px rgb(88 55 42 / 18%);
  backdrop-filter: blur(14px);
}

.room-dropdown[hidden] {
  display: none;
}

.room-dropdown-item {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  padding: 8px 10px;
  color: #5f453c;
  background: transparent;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.82rem;
  font-weight: 850;
  text-align: left;
}

.room-dropdown-item[aria-current="page"] {
  background: rgb(226 193 165 / 38%);
  color: #4d352f;
}

.room-dropdown-item:active {
  transform: scale(0.98);
}

.app.is-switching-forward.is-switching-to-work .work-room,
.app.is-switching-forward.is-switching-to-salon .salon-room,
.app.is-switching-forward.is-switching-to-kitchen .kitchen-room,
.app.is-switching-forward.is-switching-to-attic .attic-room,
.app.is-switching-forward.is-switching-to-library .library-room {
  animation: room-slide-in 260ms ease-out both;
}

.app.is-switching-backward.is-switching-to-work .work-room,
.app.is-switching-backward.is-switching-to-salon .salon-room,
.app.is-switching-backward.is-switching-to-kitchen .kitchen-room,
.app.is-switching-backward.is-switching-to-attic .attic-room,
.app.is-switching-backward.is-switching-to-library .library-room {
  animation: room-slide-in-reverse 260ms ease-out both;
}

@keyframes room-slide-in {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes room-slide-in-reverse {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app.is-switching-to-work .work-room,
  .app.is-switching-to-salon .salon-room,
  .app.is-switching-to-kitchen .kitchen-room,
  .app.is-switching-to-attic .attic-room,
  .app.is-switching-to-library .library-room {
    animation: none;
  }
}

.kitchen-room {
  gap: 14px;
  overflow: hidden;
}

.kitchen-scene {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: flex-end;
  padding-top: 8px;
}

.kitchen-scene::before {
  position: absolute;
  inset: 14% -28% 8% 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 35%, rgb(255 250 242 / 58%), transparent 34%),
    radial-gradient(circle at 54% 58%, rgb(180 122 114 / 16%), transparent 62%);
  content: "";
  filter: blur(4px);
}

.kitchen-chocolate-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 18px 18px 20px 20px;
  background: rgb(255 250 242 / 84%);
  box-shadow: 0 18px 34px rgb(88 55 42 / 14%);
  backdrop-filter: blur(14px) saturate(0.95);
  -webkit-backdrop-filter: blur(14px) saturate(0.95);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kitchen-panel-kicker {
  margin: 0;
  color: #9a7468;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kitchen-chocolate-panel h2,
.chocolaterie-header h2 {
  margin: 0;
  color: #563f38;
  font-size: 1.18rem;
}

.kitchen-favorite-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.kitchen-product-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(139 105 93 / 13%);
  border-radius: 14px;
  background: rgb(255 255 255 / 58%);
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
}

.kitchen-product-card.is-available-affordable {
  border-width: 2px;
  border-color: rgb(216 170 85 / 82%);
  background: rgb(255 246 231 / 84%);
  box-shadow: 0 12px 24px rgb(120 78 31 / 18%);
}

.kitchen-product-card.is-locked {
  opacity: 0.58;
  box-shadow: none;
}

.kitchen-product-card.is-locked.is-chef-pick {
  opacity: 1;
  box-shadow: none;
}

.kitchen-product-card.is-owned {
  border-color: rgb(190 142 48 / 50%);
  background: rgb(255 247 219 / 72%);
}

.kitchen-product-card.is-assets {
  border-color: rgb(111 159 181 / 28%);
}

.kitchen-product-card.is-empty {
  color: #8b6b60;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
}

.kitchen-product-card.is-empty:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.kitchen-product-card.is-favorite-summary {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "visual name"
    "visual footer";
  gap: 4px 9px;
  align-items: center;
  min-height: 68px;
  padding: 7px 8px;
  border-radius: 12px;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-visual {
  grid-area: visual;
  width: 58px;
  height: 58px;
  aspect-ratio: auto;
  padding: 5px;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-name {
  grid-area: name;
  align-self: end;
  font-size: 0.74rem;
  line-height: 1.12;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-empty {
  grid-area: footer;
  align-self: start;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-footer {
  grid-area: footer;
  grid-template-columns: auto minmax(72px, max-content);
  align-self: start;
  justify-content: space-between;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-cost {
  align-items: flex-start;
  min-width: 0;
  font-size: 0.72rem;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-action {
  min-height: 26px;
  padding: 5px 10px;
  font-size: 0.66rem;
  white-space: nowrap;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-promo {
  top: 4px;
  left: 4px;
  max-width: calc(100% - 8px);
  padding: 3px 5px;
  font-size: 0.52rem;
}

.kitchen-product-card.is-favorite-summary .kitchen-product-status-badge {
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 3px 5px;
  font-size: 0.52rem;
}

.kitchen-product-visual {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  padding: 9px;
  border: 1px dashed rgb(139 105 93 / 28%);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(255 246 231 / 82%), rgb(255 255 255 / 46%)),
    rgb(255 250 242 / 70%);
}

.kitchen-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 12px rgb(88 55 42 / 14%));
}

.kitchen-product-card.is-locked .kitchen-product-image {
  opacity: 0.72;
  filter: grayscale(0.18) drop-shadow(0 5px 10px rgb(88 55 42 / 10%));
}

.kitchen-product-lock {
  position: absolute;
  z-index: 2;
  font-size: 2.1rem;
  filter: drop-shadow(0 4px 8px rgb(88 55 42 / 18%));
}

.kitchen-product-assets {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  font-size: 1rem;
  opacity: 0.72;
}

.kitchen-product-status-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  max-width: calc(100% - 12px);
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 999px;
  color: #4f3b34;
  background: rgb(255 250 242 / 90%);
  box-shadow: 0 4px 10px rgb(88 55 42 / 12%);
  font-size: 0.6rem;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kitchen-product-status-badge.is-asset_required,
.kitchen-product-status-badge.is-pending_assets {
  color: #315160;
  background: rgb(202 231 240 / 92%);
}

.kitchen-product-status-badge.is-manual_required,
.kitchen-product-status-badge.is-pending_manual {
  color: #62421c;
  background: rgb(255 225 167 / 94%);
}

.kitchen-product-name {
  /*min-height: 2.2em;*/
  margin: 0;
  color: #4f3b34;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
}

.reward-card-rarity {
  display: flex;
  min-width: 0;
  min-height: 1.15rem;
  margin: -2px 0 0;
  gap: 4px;
  align-items: center;
  color: #8b6b60;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.reward-card-rarity-stars {
  flex: 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0;
}

.reward-card-rarity-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reward-card-inventory {
  margin: -1px 0 0;
  color: #7f6258;
  font-size: 0.61rem;
  font-weight: 850;
  line-height: 1.15;
}

.catalog-detail-card > .reward-card-inventory {
  margin: -2px 0 2px;
  color: #8b6b60;
  font-size: 0.68rem;
}

.kitchen-product-category {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  justify-self: auto;
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 999px;
  color: #4f3b34;
  background: rgb(255 250 242 / 84%);
  box-shadow: 0 4px 10px rgb(88 55 42 / 12%);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kitchen-product-category.category-phrases {
  background: rgb(111 159 128 / 20%);
}

.kitchen-product-category.category-brief-visuel {
  background: rgb(111 159 181 / 20%);
}

.kitchen-product-category.category-tenue {
  background: rgb(180 122 114 / 18%);
}

.kitchen-product-category.category-expression {
  background: rgb(216 170 85 / 22%);
}

.kitchen-product-category.category-piece {
  background: rgb(126 91 68 / 16%);
}

.kitchen-product-category.category-deco {
  background: rgb(126 91 68 / 16%);
}

.kitchen-product-category.category-socle {
  background: rgb(111 159 128 / 26%);
}

.kitchen-product-category.category-developpement {
  background: rgb(139 105 93 / 16%);
}

.kitchen-product-category.category-travaux {
  background: rgb(139 105 93 / 16%);
}

.kitchen-product-category.category-sante-future {
  background: rgb(111 159 181 / 16%);
}

.kitchen-product-empty {
  margin: 0;
  color: #8b6b60;
  font-size: 0.68rem;
  font-weight: 850;
}

.kitchen-product-footer {
  display: grid;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.kitchen-product-cost {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 42px;
  color: #60483f;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.kitchen-product-cost.is-discounted {
  gap: 1px;
  color: #7a3f2e;
}

.kitchen-product-cost del {
  color: #96756a;
  font-size: 0.64rem;
  font-weight: 850;
  text-decoration-thickness: 2px;
}

.kitchen-product-cost strong {
  color: #7a2f1e;
  font-size: 0.75rem;
  font-weight: 950;
}

.kitchen-product-promo {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  max-width: calc(100% - 14px);
  padding: 4px 7px;
  border-radius: 999px;
  color: #6f2f17;
  background: #ffe1a7;
  box-shadow: 0 6px 12px rgb(88 55 42 / 14%);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.kitchen-product-action {
  min-width: 0;
  min-height: 28px;
  padding: 5px 7px;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: 999px;
  color: #fff8f1;
  background: #7e5b44;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: normal;
}

.kitchen-product-action:disabled {
  opacity: 0.72;
}

.kitchen-product-card.is-available-missing .kitchen-product-action,
.kitchen-product-card.is-locked .kitchen-product-action,
.kitchen-product-card.is-assets .kitchen-product-action,
.kitchen-product-card.is-preorder-missing .kitchen-product-action,
.kitchen-product-card.is-pending-assets .kitchen-product-action,
.kitchen-product-card.is-pending-manual .kitchen-product-action {
  color: #755d54;
  background: rgb(139 105 93 / 14%);
}

.kitchen-product-card.is-owned .kitchen-product-action,
.kitchen-product-card.is-pending-assets .kitchen-product-action,
.kitchen-product-card.is-pending-manual .kitchen-product-action {
  color: #4f3517;
  background: #e5b850;
  opacity: 1;
}

.kitchen-product-card.is-available-affordable .kitchen-product-action,
.kitchen-product-card.is-preorder-affordable .kitchen-product-action {
  opacity: 1;
}

.catalog-favorite-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 50%;
  color: #806047;
  background: rgb(255 250 242 / 78%);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.kitchen-product-card > .catalog-favorite-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 28px;
  height: 28px;
  background: rgb(255 250 242 / 86%);
}

.catalog-favorite-toggle[aria-pressed="true"] {
  color: #6d4b16;
  background: rgb(216 170 85 / 30%);
}

.catalog-favorite-toggle:disabled {
  cursor: default;
  opacity: 0.38;
}

.catalog-favorite-toggle:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.kitchen-open-shop,
.chocolaterie-close {
  min-height: 42px;
  border: none;
  border-radius: 999px;
  color: #fff8f1;
  background: #7e5b44;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgb(88 55 42 / 18%);
}

.kitchen-chef-pick {
  position: absolute;
  bottom:370px;
  left: 14px;
  z-index: 2;
  width: min(calc((100% - 34px) / 2), 170px);
  display: grid;
  gap: 7px;
}

.kitchen-chef-bubble {
  position: relative;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 14px;
  color: #60483f;
  background: rgb(255 250 242 / 88%);
  box-shadow: 0 10px 22px rgb(88 55 42 / 12%);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.15;
}


.kitchen-chef-pick .kitchen-product-card {
  background: rgb(255 246 231 / 82%);
  box-shadow: 0 14px 26px rgb(88 55 42 / 14%);
}

.kitchen-owen-wrap {
position: absolute;
    right: -42%;
    bottom: 110px;
    z-index: 1;
    width: min(118dvw, 680px);
    height: calc(75dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    pointer-events: none;
}

.kitchen-owen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  transform: translateY(-3%) scale(1.08);
  transform-origin: bottom center;
  filter: drop-shadow(0 18px 26px rgb(88 55 42 / 22%));
}

.owen-layer-frame-kitchen .owen-shirt-layer {
  object-position: right bottom;
  transform: translateY(-3%) scale(1.08);
  transform-origin: bottom center;
}

.chocolaterie-modal {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: grid;
  background: rgb(43 36 32 / 34%);
  pointer-events: auto;
  animation: chocolaterieFadeIn 180ms ease-out both;
}

.chocolaterie-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 22px;
  background: rgb(255 250 242 / 96%);
  box-shadow: 0 18px 44px rgb(44 30 24 / 26%);
  animation: chocolaterieRiseIn 240ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
  transform-origin: bottom center;
}

.chocolaterie-modal.is-swipe-open .chocolaterie-panel {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 0.9, 0.22, 1);
}

.chocolaterie-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

@keyframes chocolaterieFadeIn {
  from {
    background: rgb(43 36 32 / 0%);
  }
  to {
    background: rgb(43 36 32 / 34%);
  }
}

@keyframes chocolaterieRiseIn {
  from {
    opacity: 0.82;
    transform: translateY(36px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chocolaterie-totals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.chocolaterie-totals span {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #60483f;
  background: rgb(139 105 93 / 12%);
  font-size: 0.82rem;
  font-weight: 900;
}

.chocolaterie-readonly-note {
  margin: 0;
  color: #72574d;
  font-size: 0.78rem;
  font-weight: 800;
}

.chocolaterie-catalog-sync {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  margin-top: -6px;
}

.chocolaterie-catalog-status {
  margin: 0;
  color: #86695f;
  font-size: 0.7rem;
  font-weight: 850;
}

.chocolaterie-sync-button {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgb(139 105 93 / 18%);
  border-radius: 999px;
  color: #fff8f1;
  background: #7e5b44;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
}

.chocolaterie-sync-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.chocolaterie-sync-button[data-state="success"] {
  color: #4f3517;
  background: #e5b850;
}

.chocolaterie-sync-button[data-state="error"] {
  color: #755d54;
  background: rgb(139 105 93 / 14%);
}

.chocolaterie-sync-feedback {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #72574d;
  font-size: 0.7rem;
  font-weight: 850;
}

.chocolaterie-sync-feedback[data-state="success"] {
  color: #6d4b16;
}

.chocolaterie-sync-feedback[data-state="error"] {
  color: #8f4438;
}

@media (max-width: 390px) {
  .chocolaterie-catalog-sync {
    grid-template-columns: 1fr;
  }

  .chocolaterie-sync-button {
    width: 100%;
  }
}

.chocolaterie-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 8px;
  align-items: start;
}

.chocolaterie-filter-menu,
.chocolaterie-filters select {
  min-width: 0;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 12px;
  background: rgb(255 255 255 / 62%);
  color: #60483f;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.chocolaterie-filter-menu {
  position: relative;
  z-index: 3;
}

.chocolaterie-filter-menu[open] {
  z-index: 5;
}

.chocolaterie-filter-menu summary {
  min-height: 34px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.chocolaterie-filter-menu summary::-webkit-details-marker {
  display: none;
}

.chocolaterie-filter-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 4;
  display: grid;
  gap: 6px;
  min-width: 190px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 14px;
  background: rgb(255 250 242 / 98%);
  box-shadow: 0 16px 30px rgb(88 55 42 / 18%);
}

.chocolaterie-filter-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #60483f;
  font-size: 0.76rem;
}

.chocolaterie-filters select {
  min-height: 36px;
  padding: 0 8px;
  appearance: none;
}

.chocolaterie-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.chocolaterie-list .kitchen-product-card {
  background: rgb(255 255 255 / 66%);
}

.chocolaterie-list .kitchen-product-name {
  font-size: 0.74rem;
}

.chocolaterie-list .kitchen-product-card.is-locked {
  background: rgb(255 255 255 / 34%);
}

.catalog-preview-content,
.catalog-detail-card {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.catalog-preview-visual,
.catalog-detail-visual {
  display: grid;
  place-items: center;
  width: min(72vw, 260px);
  aspect-ratio: 1;
  padding: 18px;
  border: 1px dashed rgb(139 105 93 / 28%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(255 246 231 / 82%), rgb(255 255 255 / 46%)),
    rgb(255 250 242 / 70%);
}

.catalog-preview-image,
.catalog-detail-visual .kitchen-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.catalog-detail-card {
  position: relative;
  justify-items: stretch;
  max-height: min(62dvh, 560px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 18px;
  background: rgb(255 255 255 / 58%);
  box-shadow: 0 14px 28px rgb(88 55 42 / 13%);
}

.catalog-detail-visual-shell {
  position: relative;
  justify-self: center;
  width: min(58vw, 230px);
}

.catalog-detail-nav {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: -26px;
  left: -26px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.catalog-detail-nav button {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 50%;
  color: #60483f;
  background: rgb(255 250 242 / 88%);
  box-shadow: 0 8px 18px rgb(88 55 42 / 14%);
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
}

.catalog-detail-nav button:disabled {
  cursor: default;
  opacity: 0.35;
}

.catalog-detail-visual {
  position: relative;
  width: 100%;
  border-radius: 16px;
}


.catalog-detail-visual .catalog-favorite-toggle.is-detail-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 32px;
  height: 32px;
  background: rgb(255 250 242 / 88%);
}

.catalog-detail-title {
  margin: 0;
  color: #4f3b34;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
}

.catalog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.catalog-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #60483f;
  background: rgb(255 250 242 / 88%);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
}

.catalog-detail-tag.is-rarity {
  color: #6d4b16;
  background: rgb(216 170 85 / 26%);
}

.catalog-detail-tag.is-type {
  color: #4d5e72;
  background: rgb(190 224 237 / 42%);
}

.catalog-detail-text {
  display: grid;
  gap: 7px;
}

.catalog-detail-text section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgb(139 105 93 / 11%);
  border-radius: 14px;
  background: rgb(255 250 242 / 58%);
}

.catalog-detail-text p {
  margin: 0;
}

.catalog-detail-text-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 10px;
  background: rgb(255 255 255 / 54%);
  font-size: 1rem;
}

.catalog-detail-text p {
  color: #72574d;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.catalog-detail-footer {
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding-top: 0;
}

.catalog-detail-footer .kitchen-product-cost {
  min-width: 72px;
  font-size: 1.5rem;
}

.catalog-detail-footer .kitchen-product-cost del {
  font-size: 0.72rem;
}

.catalog-detail-footer .kitchen-product-cost strong {
  font-size: 1.15rem;
}

@media (max-width: 480px) {
  .chocolaterie-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #chocolaterie-sort-mode {
    grid-column: 1 / -1;
  }
}

.catalog-item {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-left-width: 5px;
  border-radius: 14px;
  background: rgb(255 255 255 / 66%);
}

.catalog-item-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.catalog-item h3,
.catalog-item-meta {
  margin: 0;
}

.catalog-item h3 {
  color: #4f3b34;
  font-size: 0.92rem;
}

.catalog-item-meta {
  color: #765c52;
  font-size: 0.75rem;
  font-weight: 800;
}

.catalog-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
}

.catalog-item.is-available {
  border-left-color: #d8aa55;
}

.catalog-item.is-owned {
  border-left-color: #6f9f80;
}

.catalog-item.is-locked {
  border-left-color: #9a8a82;
  opacity: 0.78;
}

.catalog-item.is-assets {
  border-left-color: #6f9fb5;
}

.catalog-status.is-available {
  color: #694b26;
  background: rgb(216 170 85 / 24%);
}

.catalog-status.is-owned {
  color: #3d6749;
  background: rgb(111 159 128 / 20%);
}

.catalog-status.is-locked {
  color: #6c5a53;
  background: rgb(139 105 93 / 13%);
}

.catalog-status.is-assets {
  color: #426877;
  background: rgb(111 159 181 / 18%);
}

.work-owen-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 2px;
  align-items: center;
}

.work-owen-avatar-frame {
  display: grid;
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 76%);
  border-radius: 50%;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 10px 24px rgb(88 55 42 / 14%);
  margin-left:-20%;
  margin-top: -7px;
}

.work-owen-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 10%;
    transform: scale(2);
    transform-origin: 50% 4%;
    background: #ffeeee;
}

.owen-layer-frame-work .owen-shirt-layer {
    object-fit: cover;
    object-position: 50% 10%;
    transform: scale(2);
    transform-origin: 50% 4%;
}

.work-owen-note p {
  margin: 0;
  padding: 11px 63px 11px 18px;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 18px;
  color: #60483f;
  background: rgb(255 250 242 / 86%);
  box-shadow: 0 10px 24px rgb(88 55 42 / 12%);
  font-size: 0.88rem;
  line-height: 1.35;
  margin-left: 20px;
  margin-right: -40px;
}

.work-tasks-drawer {
  position: fixed;
  z-index: 28;
  right: 16px;
  bottom: 0;
  left: 16px;
  display: block;
  max-width: 520px;
  margin: 0 auto;
  transform: translateY(calc(100% - 52px));
  transition: transform 280ms cubic-bezier(0.22, 0.78, 0.32, 1);
}

.work-room.is-work-tasks-open .work-tasks-drawer {
  transform: translateY(0);
}

.work-tasks-drawer > .work-panel {
  min-height: 0;
  max-height: min(56dvh, 450px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.work-panel {
  display: flex;
  min-height: 0;
  padding: 14px;
  max-height: calc(100dvh - 168px);
  flex: 0 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 20px;
  background: rgb(255 250 242 / 70%);
  box-shadow: 0 16px 34px rgb(88 55 42 / 14%);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
}

.work-tasks-toggle {
  display: grid;
  width: 100%;
  min-height: 52px;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
  border: 1px solid rgb(139 105 93 / 16%);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  color: #60483f;
  background: rgb(255 250 242 / 92%);
  box-shadow: 0 12px 28px rgb(88 55 42 / 16%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: left;
  backdrop-filter: blur(12px) saturate(0.95);
  -webkit-backdrop-filter: blur(12px) saturate(0.95);
}

.work-tasks-toggle-icon {
  display: grid;
  width: 34px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #fffaf4;
  color: #9a7468;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.work-tasks-toggle-icon::before {
  content: "⌃";
}

.work-room.is-work-tasks-open .work-tasks-toggle-icon::before {
  content: "⌄";
}

.salon-room.is-salon-tasks-open .work-tasks-toggle-icon::before {
  content: "⌄";
}

.work-panel-header {
  display: grid;
  gap: 12px;
}

.work-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.work-panel-actions {
  display: block;
}

.work-panel-actions .work-controls-panel {
  width: 100%;
}

.work-panel-header h2 {
  margin: 0;
  color: #5f453c;
  font-size: 1rem;
}

.work-panel-header p {
  margin: 4px 0 0;
  color: #8a7167;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-add-button,
.work-secondary-button,
.work-reset-button,
.task-submit {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: #fffaf4;
  background: #9a7468;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.work-secondary-button,
.work-reset-button {
  color: #785d54;
  background: rgb(255 250 242 / 78%);
  border: 1px solid rgb(139 105 93 / 14%);
}

.work-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.work-controls-panel[hidden] {
  display: none;
}

.work-controls select {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 11px;
  color: #4f3b34;
  background: rgb(255 255 255 / 74%);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-controls select option {
  color: #4f3b34;
  background: #fffaf2;
}

.work-reset-button {
  min-height: 34px;
  align-self: end;
  padding: 7px 9px;
  font-size: 0.72rem;
}

.work-filter-summary {
  margin: 9px 2px 0;
  color: #8a7167;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-filter-summary[hidden] {
  display: none;
}

.work-advanced-filter[hidden] {
  display: none;
}

.work-task-list {
  display: grid;
  gap: 3px;
  margin: 13px 0 0;
  padding: 0 2px 2px 0;
  flex: 0 1 auto;
  max-height: min(38dvh, 360px);
  overflow-y: auto;
  list-style: none;
}

.work-empty {
  margin: 26px 6px 0;
  color: #8a7167;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.work-empty[hidden] {
  display: none;
}

.work-task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgb(139 105 93 / 15%);
  border-radius: 16px;
  background: rgb(255 255 255 / 54%);
}

.work-task.has-no-order-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

.work-order-controls {
  grid-row: 1 / span 3;
  display: grid;
  align-content: start;
  gap: 4px;
}

.work-order-controls button {
  display: grid;
  width: 26px;
  min-height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 9px;
  color: #7c6158;
  background: rgb(255 250 242 / 76%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}

.work-order-controls button:disabled {
  cursor: default;
  opacity: 0.42;
}

.work-task.day-lundi {
  border-left: 5px solid #b8c4ae;
}

.work-task.day-mardi {
  border-left: 5px solid #d9aba3;
}

.work-task.day-mercredi {
  border-left: 5px solid #b5cbd3;
}

.work-task.day-jeudi {
  border-left: 5px solid #d8bf8c;
}

.work-task.day-vendredi {
  border-left: 5px solid #c7aec5;
}

.work-task.day-samedi {
  border-left: 5px solid #a7b89e;
}

.work-task.day-dimanche {
  border-left: 5px solid #cda7a0;
}

.work-task.day-a-determiner {
  border-left: 5px solid rgb(139 105 93 / 28%);
}

.work-task-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: #513d36;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.32;
  min-width: 0;
}

.work-task.has-no-order-controls .work-task-title {
  grid-column: 1 / 3;
}

.work-task-title-button {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.work-task-note {
  grid-column: 2;
  grid-column-end: 4;
  margin: 0;
  color: #735b52;
  font-size: 0.82rem;
  line-height: 1.35;
}

.work-task-meta {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-self: start;
  gap: 6px;
  min-width: 0;
}

.work-task.has-no-order-controls .work-task-meta {
  grid-column: 1 / 3;
}

.work-task-footer {
  grid-column: 2;
  grid-row: 3;
  grid-column-end: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 14px;
}

.work-task.has-no-order-controls .work-task-footer {
  grid-column: 1 / 3;
}

.work-task-date-pill {
  flex: 0 0 auto;
  padding: 7px 10px !important;
  font-size: 0.8rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.work-task-pill {
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  color: #72574d;
  background: rgb(238 223 213 / 68%);
  cursor: default;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
}

.work-task-pill.is-editable {
  cursor: pointer;
}

.work-inline-editor {
  /*min-width: 92px;*/
  max-width: 150px;
  border: 0;
  color: #4f3b34;
  background: #fffaf2;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-task-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.work-task.has-no-order-controls .work-task-note {
  grid-column: 1 / 3;
}

.work-task-actions button {
  min-width: 34px;
  min-height: 34px;
  padding: 2px;
  border: none;
  border-radius: 11px;
  color: #624a42;
  background: rgb(245 234 217 / 74%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.salon-task .work-task-title {
  font-size: 0.9rem;
}

.salon-task .work-task-meta {
  justify-content: flex-start;
}

.salon-task .work-task-footer {
  align-items: center;
  justify-content: space-between;
}

.salon-gain-pill {
  color: #4d6543;
  background: rgb(219 238 221 / 78%);
}

.work-task-actions .salon-task-action {
  min-width: 32px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
}

.work-task-actions .salon-task-action-done {
  color: #624a42;
  background: rgb(245 234 217 / 74%);
}

.work-task-actions .salon-task-action-danger {
  color: #624a42;
  background: rgb(245 234 217 / 74%);
}

@media (max-width: 480px) {
  .salon-task {
    grid-template-columns: 1fr;
  }

  .salon-task.has-no-order-controls .salon-task-title-row,
  .salon-task.has-no-order-controls .work-task-meta,
  .salon-task.has-no-order-controls .work-task-footer,
  .salon-task.has-no-order-controls .work-task-note,
  .salon-task.has-no-order-controls .salon-task-gain-line {
    grid-column: 1;
  }

  .salon-task .work-task-actions {
    width: 100%;
    justify-content: space-between;
  }

  .work-task-actions .salon-task-action {
    flex: 1 1 0;
  }
}

.work-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.work-bottom-actions .work-add-button,
.work-bottom-actions .work-archives-bottom-button {
  margin-top: 0;
}

.salon-bottom-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.salon-bottom-actions .work-add-button,
.salon-bottom-actions .work-archives-bottom-button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

.salon-memory-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  min-height: 40px;
}

.salon-form-marker-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 999px;
  color: #6e544b;
  background: rgb(255 250 242 / 58%);
  box-shadow: 0 6px 14px rgb(119 83 48 / 8%);
  cursor: pointer;
  opacity: 0.36;
  filter: grayscale(0.85);
  font-size: 1rem;
  transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.salon-form-marker-button.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
  background: rgb(255 239 202 / 90%);
  box-shadow: 0 8px 18px rgb(119 83 48 / 14%);
}

@media (max-width: 480px) {
  .salon-form-grid,
  .salon-controls,
  .salon-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salon-bottom-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .salon-bottom-actions .work-archives-bottom-button:last-child {
    grid-column: auto;
  }
}

.salon-marker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
}

.salon-marker-button {
  display: inline-grid;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #6e544b;
  background: rgb(255 250 242 / 62%);
  cursor: pointer;
  opacity: 0.42;
  filter: grayscale(0.85);
  font-size: 0.88rem;
}

.salon-marker-button.is-active {
  opacity: 1;
  filter: none;
  background: rgb(255 239 202 / 88%);
  box-shadow: 0 6px 14px rgb(119 83 48 / 12%);
}

.salon-marker-button:disabled {
  cursor: default;
}

.salon-marker-protection {
  color: #7d655c;
  font-size: 0.68rem;
  font-weight: 800;
}

.salon-task {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 5px 8px;
  padding: 9px 10px;
  border-radius: 14px;
}

.salon-task.has-no-order-controls {
  grid-template-columns: minmax(0, 1fr);
}

.salon-task .work-order-controls {
  grid-row: 1 / span 3;
}

.salon-task .work-order-controls button {
  width: 24px;
  min-height: 24px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.salon-task .work-task-meta {
  grid-column: 2;
  grid-row: 1;
  gap: 4px;
}

.salon-task.has-no-order-controls .work-task-meta {
  grid-column: 1;
}

.salon-task .work-task-pill {
  padding: 3px 6px;
  font-size: 0.62rem;
  line-height: 1.18;
}

.salon-task-template-pill {
  margin-left: auto;
  min-width: 26px;
  min-height: 24px;
  color: #6e544b;
  background: rgb(255 250 242 / 72%);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
}

.salon-task-template-pill:disabled {
  cursor: default;
  opacity: 0.45;
}

.salon-task .work-task-title {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.88rem;
  line-height: 1.22;
}

.salon-task-title-row {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.salon-task-title-row .work-task-title {
  min-width: 0;
}

.salon-task.has-no-order-controls .salon-task-title-row {
  grid-column: 1;
}

.salon-task .work-task-footer {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.salon-task.has-no-order-controls .work-task-footer {
  grid-column: 1;
}

.salon-task .work-task-date-pill {
  white-space: nowrap;
}

.salon-task-gain-pill {
  justify-self: end;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 999px;
  color: #4d6543;
  background: rgb(219 238 221 / 78%);
  font-size: 0.66rem;
  font-weight: 900;
}

.salon-task .work-task-actions {
  display: flex;
  gap: 4px;
  justify-self: end;
}

.salon-task .salon-marker-controls {
  margin: 0;
  flex-wrap: nowrap;
  gap: 3px;
}

.salon-task .salon-marker-button {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  font-size: 0.76rem;
}

.salon-task .salon-task-action {
  min-width: 28px;
  min-height: 28px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 0.9rem;
}

.salon-task .work-task-note {
  grid-column: 2;
  margin-top: 0;
  font-size: 0.74rem;
  line-height: 1.25;
}

.salon-task.has-no-order-controls .work-task-note {
  grid-column: 1;
}

.work-timer {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 20px;
  background: rgb(255 250 242 / 70%);
  box-shadow: 0 14px 28px rgb(88 55 42 / 12%);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
}

.work-timer h2,
.work-timer p {
  margin: 0;
}

.work-timer h2 {
  color: #5f453c;
  font-size: 0.94rem;
}

.work-timer p {
  margin-top: 3px;
  color: #8a7167;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-timer-status {
  grid-column: 1 / -1;
  padding: 7px 9px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 12px;
  color: #72574d;
  background: rgb(238 223 213 / 52%);
  font-size: 0.76rem;
  font-weight: 800;
}

.work-timer-status[hidden] {
  display: none;
}

.work-timer-display {
  grid-column: 2;
  grid-row: 1;
  color: #513d36;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: clamp(2.8rem, 14vw, 4.1rem);
  letter-spacing: 2px;
  text-align: center;
  font-weight: 800;
}

.work-progress-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.work-progress-row {
  display: grid;
  color: #72574d;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.work-progress-track {
  position: relative;
  min-height: 26px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(139 105 93 / 14%);
  cursor: pointer;
}

.work-progress-track:focus-visible {
  outline: 2px solid rgb(111 159 181 / 70%);
  outline-offset: 2px;
}

.work-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #9a7468;
}

.work-progress-fill.is-serious {
  background: #d8aa55;
}

.work-progress-fill.is-complete {
  background: #6f9fb5;
}

.work-progress-marker {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 29%;
  background: rgb(56 54 51 / 14%);
  box-shadow: 0 0 0 1px rgb(139 105 93 / 20%);
}

.work-progress-label {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: #513d36;
  text-align: center;
  white-space: nowrap;
  font-weight:400;
}

.work-timer-actions {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.work-timer-actions button {
  padding: 0;
  border: none;
  border-radius: 12px;
  color: #624a42;
  background: transparent;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 2rem;
  font-weight: 800;
}

.work-timer-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.work-close-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: end;
}

.work-day-close-button,
.work-week-close-button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #785d54;
  background: rgb(255 250 242 / 78%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
}

.work-day-close-button:disabled,
.work-week-close-button:disabled {
  cursor: default;
  opacity: 0.64;
}

.work-progress-fill.is-weekend {
  background: #a7b89e;
}

.work-chocolate-summary {
  display: none;
}

.work-timer-settings {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #72574d;
  font-size: 0.7rem;
  font-weight: 800;
}

.work-timer-settings label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.work-archives-bottom-button {
  align-self: center;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #785d54;
  background: rgb(255 250 242 / 78%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
}

.work-task-actions button:disabled {
  cursor: default;
  opacity: 0.56;
}

.work-task.is-done,
.work-task.is-abandoned {
  opacity: 0.3;
}

.work-task-group {
  display: grid;
  gap: 8px;
}

.work-task-group-title {
  display: flex;
  margin: 4px 2px 0;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  color: #735b52;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
}

.work-task-group-summary {
  color: #9a7468;
  font-size: 0.7rem;
  font-weight: 750;
}

.work-task-group-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-modal {
  position: fixed;
  z-index: 22;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(30 24 21 / 34%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.archives-modal {
  position: fixed;
  z-index: 22;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(30 24 21 / 34%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.postpone-modal {
  position: fixed;
  z-index: 22;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(30 24 21 / 34%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.timer-modal {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(30 24 21 / 34%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.timer-modal-card {
  display: grid;
  width: min(100%, 360px);
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 20px;
  color: #5d453d;
  background: rgb(255 250 242 / 96%);
  box-shadow: 0 22px 52px rgb(54 35 30 / 24%);
}

.timer-modal-card h2,
.timer-modal-card p {
  margin: 0;
}

.timer-modal-card h2 {
  font-size: 1rem;
}

.timer-modal-card p {
  color: #72574d;
  font-size: 0.88rem;
  line-height: 1.4;
}

.timer-modal-content:empty {
  display: none;
}

.timer-session-content {
  display: grid;
  gap: 10px;
}

.timer-session-empty,
.timer-session-total {
  margin: 0;
}

.timer-session-list,
.timer-week-list {
  display: grid;
  max-height: min(42dvh, 320px);
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.timer-session-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 14px;
  background: rgb(238 223 213 / 40%);
}

.timer-session-item.is-canceled {
  opacity: 0.62;
}

.timer-session-summary {
  color: #513d36;
  font-size: 0.84rem;
  font-weight: 800;
}

.timer-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timer-session-actions button,
.timer-week-item button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #785d54;
  background: rgb(255 250 242 / 78%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
}

.timer-report-label {
  display: grid;
  gap: 7px;
  color: #72574d;
  font-size: 0.82rem;
  font-weight: 800;
}

.timer-report-label input {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 12px;
  color: #4f3b34;
  background: #fffaf2;
  font: inherit;
}

.timer-week-item button {
  width: 100%;
  text-align: left;
}

.timer-correction-form[hidden] {
  display: none;
}

.timer-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.timer-modal-actions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #785d54;
  background: rgb(255 250 242 / 78%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
}

.timer-modal-actions button.is-primary {
  color: #fffaf4;
  background: #9a7468;
}

.archives-modal[hidden] {
  display: none;
}

.archives-panel {
  display: flex;
  width: min(100%, 360px);
  max-height: min(78dvh, 620px);
  padding: 18px;
  flex-direction: column;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 20px;
  background: rgb(255 250 242 / 98%);
  box-shadow: 0 18px 48px rgb(38 28 24 / 30%);
}

.archives-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.archives-header h2 {
  margin: 0;
  color: #5f453c;
  font-size: 1.05rem;
}

.archives-empty {
  margin: 22px 5px 6px;
  color: #8a7167;
  font-size: 0.9rem;
  text-align: center;
}

.archives-empty[hidden] {
  display: none;
}

.archives-list {
  display: grid;
  gap: 9px;
  margin: 13px 0 0;
  padding: 0 2px 0 0;
  overflow-y: auto;
  list-style: none;
}

.salon-info-content {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
}

.salon-info-content p {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgb(139 105 93 / 12%);
  border-radius: 12px;
  color: #60483f;
  background: rgb(255 255 255 / 54%);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.salon-info-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.salon-info-action {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 10px;
  color: #624a42;
  background: rgb(245 234 217 / 88%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
}

.salon-info-action.is-danger {
  color: #8f3d3d;
  background: rgb(255 229 225 / 88%);
}

.archive-task {
  position: relative;
  padding: 11px 12px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 14px;
  background: rgb(255 255 255 / 54%);
}

.archive-task-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
}

.archive-task-actions button {
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgb(139 105 93 / 14%);
  border-radius: 999px;
  color: #785d54;
  background: rgb(255 250 242 / 82%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.archive-task h3 {
  padding-right: 112px;
  margin: 0;
  color: #513d36;
  font-size: 0.9rem;
}

.archive-task p {
  margin: 5px 0 0;
  color: #735b52;
  font-size: 0.76rem;
}

.archive-task-note {
  line-height: 1.35;
}

.task-form,
.postpone-form {
  display: grid;
  width: min(100%, 360px);
  max-height: min(86dvh, 650px);
  gap: 11px;
  padding: 18px;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 20px;
  background: rgb(255 250 242 / 98%);
  box-shadow: 0 18px 48px rgb(38 28 24 / 30%);
}

.task-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.postpone-form h2 {
  margin: 0;
  color: #5f453c;
  font-size: 1.05rem;
}

.task-form-header h2 {
  margin: 0;
  color: #5f453c;
  font-size: 1.05rem;
}

.task-form-close {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: #9a7468;
  background: #fffaf4;
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.task-form label,
.postpone-form label,
.timer-correction-form label {
  display: grid;
  gap: 6px;
  color: #60483f;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.task-duration-fields {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.task-duration-fields legend {
  grid-column: 1 / -1;
  padding: 0;
  color: #60483f;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.task-form input,
.task-form select,
.task-form textarea,
.postpone-form input,
.postpone-form select,
.timer-correction-form select {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid rgb(139 105 93 / 18%);
  border-radius: 12px;
  color: #4f3b34;
  background: rgb(255 255 255 / 78%);
  font: inherit;
  font-weight: 600;
}

.task-form select option,
.postpone-form select option,
.timer-correction-form select option {
  color: #4f3b34;
  background: #fffaf2;
}

.task-form textarea {
  resize: vertical;
}

.task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.postpone-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.character {
  display: block;
  width: auto;
  /*height: min(63.5dvh, 710px);*/
  max-width: 104%;
  object-fit: contain;
  object-position: top center;
  user-select: none;
  filter: drop-shadow(0 15px 18px rgb(93 55 40 / 18%));
  transform: translateZ(0);
}

.conversation {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.message-card {
  position: absolute;
  top: max(9.5%, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  width: min(78%, 330px);
  min-height: 78px;
  padding: 15px 44px 15px 24px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 24px;
  background: rgb(255 250 242 / 82%);
  box-shadow:
    0 14px 35px rgb(88 55 42 / 15%),
    inset 0 1px 0 rgb(255 255 255 / 84%);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.message-card.is-loading {
  opacity: 0;
  transform: translate(-50%, -5px);
  pointer-events: none;
}

.message-card.is-daily {
  border-color: rgb(128 157 159 / 34%);
  color: #4e5d5c;
  background: linear-gradient(135deg, rgb(255 249 238 / 92%), rgb(231 241 240 / 90%));
  box-shadow:
    0 14px 35px rgb(67 94 94 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
}

.message-card.is-daily::before {
  position: absolute;
  top: 9px;
  left: 13px;
  color: #9aaea9;
  content: "✦";
  font-size: 0.78rem;
}

.message {
  margin: 0;
  font-size: clamp(1rem, 4.2vw, 1.12rem);
  line-height: 1.42;
  text-align: center;
  text-wrap: balance;
  transition: opacity 150ms ease, transform 150ms ease;
}

.message.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

.favorite-button {
  position: absolute;
  top: 9px;
  right: 11px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #a46f68;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  pointer-events: auto;
  transition: color 120ms ease, transform 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.favorite-button:active {
  transform: scale(0.9);
}

.favorite-button[aria-pressed="true"] {
  color: #a85f5d;
  background: rgb(251 226 220 / 72%);
}

.favorite-button:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.favorites-list-button {
  position: absolute;
  top: 43px;
  right: 11px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #816b63;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  pointer-events: auto;
  transition: transform 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.favorites-list-button:active {
  transform: scale(0.9);
}

.favorites-list-button:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.favorite-feedback {
  position: absolute;
  top: calc(max(4.5%, env(safe-area-inset-top)) + 84px);
  left: 50%;
  padding: 5px 11px;
  border-radius: 999px;
  color: #75574e;
  background: rgb(255 250 242 / 84%);
  box-shadow: 0 5px 14px rgb(88 55 42 / 10%);
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.72rem;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.favorite-feedback.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.favorites-panel {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(84%, 350px);
  max-height: min(58dvh, 500px);
  padding: 19px;
  flex-direction: column;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 24px;
  background: rgb(255 250 243 / 96%);
  box-shadow: 0 20px 48px rgb(72 47 40 / 24%);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(15px) saturate(0.9);
  -webkit-backdrop-filter: blur(15px) saturate(0.9);
  pointer-events: auto;
}

.favorites-panel[hidden] {
  display: none;
}

.favorites-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.favorites-header h2 {
  margin: 0;
  color: #60483f;
  font-size: 1.14rem;
  font-weight: 600;
}

.favorites-close {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #795e55;
  background: rgb(238 223 213 / 72%);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.favorites-empty {
  margin: 22px 5px 12px;
  color: #917a70;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
}

.favorites-list {
  display: grid;
  gap: 9px;
  margin: 15px 0 0;
  padding: 0 3px 2px 0;
  overflow-y: auto;
  list-style: none;
}

.favorites-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgb(150 115 101 / 12%);
  border-radius: 15px;
  color: #59443c;
  background: rgb(255 255 255 / 58%);
  font-size: 0.9rem;
  line-height: 1.42;
}

.favorite-text {
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.favorite-text:active {
  opacity: 0.68;
}

.favorite-text:focus-visible {
  border-radius: 7px;
  outline: 3px solid rgb(180 122 114 / 28%);
  outline-offset: 3px;
}

.favorite-remove {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #9a6d67;
  background: rgb(241 221 214 / 64%);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 100ms ease, background-color 100ms ease;
}

.favorite-remove:active {
  background: rgb(234 205 196 / 82%);
  transform: scale(0.9);
}

.favorite-remove:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.action-dock {
  position: absolute;
  top: calc(19% + min(63.5dvh, 710px) - 10px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 3.2vw, 16px);
  width: min(90%, 382px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: auto;
}

.action-slot {
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: 84px;
}

.action-button {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 28%;
  color: #fffaf4;
  box-shadow:
    0 16px 28px rgb(88 55 42 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 24%);
  cursor: pointer;
  transition: transform 120ms ease, filter 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.action-button:active:not(:disabled) {
  transform: scale(0.95);
}

.action-button:focus-visible {
  outline: 3px solid rgb(255 250 241 / 92%);
  outline-offset: 3px;
}

.message-action {
  background: linear-gradient(145deg, #d9aba3, #b97871);
}

.water-button {
  background: linear-gradient(145deg, #b5cbd3, #8fafbb);
}

.menu-icon {
  width: 58%;
  height: 58%;
  overflow: visible;
  color: #fffaf4;
  filter: drop-shadow(0 4px 4px rgb(82 55 48 / 14%));
}

.menu-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-icon .menu-icon-fill {
  fill: currentColor;
  stroke: none;
}

.message-icon,
.sos-icon {
  width: 64%;
  height: 64%;
}

.water-icon {
  width: 56%;
  height: 56%;
}

.mood-icon {
  width: 65%;
  height: 65%;
}

.water-count {
  margin-top: 5px;
  color: #755a50;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 5px rgb(255 250 242 / 90%);
}

.water-button.is-full {
  background: linear-gradient(145deg, #aac7cf, #7fa8b4);
}

.mood-action {
  background: linear-gradient(145deg, #b8c4ae, #98a58f);
}

.sos-action {
  background: linear-gradient(145deg, #b98fa0, #9e7488);
}

.action-button:disabled {
  cursor: wait;
  filter: grayscale(0.15) saturate(0.82);
  opacity: 0.72;
}

.mood-panel {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(82%, 330px);
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 24px;
  background: rgb(255 250 243 / 94%);
  box-shadow: 0 18px 42px rgb(72 47 40 / 22%);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  pointer-events: auto;
}

.mood-panel[hidden] {
  display: none;
}

.mood-title {
  margin: 0 0 13px;
  color: #60483f;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

.mood-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mood-options button {
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid rgb(139 105 93 / 16%);
  border-radius: 13px;
  color: #674c43;
  background: rgb(255 255 255 / 72%);
  cursor: pointer;
  font-family: ui-rounded, "Avenir Next", Avenir, sans-serif;
  font-size: 0.85rem;
  transition: transform 100ms ease, background-color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mood-options button:last-child {
  grid-column: 1 / -1;
}

.mood-options button:active {
  background: #f4e6df;
  transform: scale(0.97);
}

.mood-options button:focus-visible {
  outline: 3px solid rgb(180 122 114 / 34%);
  outline-offset: 2px;
}

.app.background-night {
  color: #f3e8dc;
  background-color: #252834;
  box-shadow: 0 0 55px rgb(20 22 31 / 46%);
}

.app.background-night::after {
  background:
    linear-gradient(to bottom, rgb(33 40 57 / 16%) 0%, transparent 34%),
    linear-gradient(to top, rgb(29 31 42 / 38%) 0%, transparent 32%);
}

.app.background-night .ambient-glow {
  background:
    radial-gradient(circle, rgb(230 184 126 / 15%) 0%, rgb(14 17 28 / 30%) 62%, transparent 100%);
  filter: blur(38px);
}

.app.background-night .chocolate-counter,
.app.background-night .menu-button {
  border-color: rgb(255 239 220 / 22%);
  color: #f5e8dc;
  background: rgb(42 44 56 / 78%);
  box-shadow: 0 8px 18px rgb(10 13 21 / 28%);
}

.app.background-night .main-menu {
  border-color: rgb(255 239 220 / 22%);
  background: rgb(42 44 56 / 94%);
  box-shadow: 0 16px 34px rgb(10 13 21 / 34%);
}

.app.background-night .menu-item {
  color: #f5e8dc;
}

.app.background-night .menu-help {
  color: #d8c7b7;
}

.app.background-night .menu-config {
  border-color: rgb(255 239 220 / 16%);
  background: rgb(255 239 220 / 8%);
}

.app.background-night .menu-config h2,
.app.background-night .menu-config-label,
.app.background-night .menu-config-input,
.app.background-night .menu-config-button {
  color: #f5e8dc;
}

.app.background-night .menu-config-input {
  border-color: rgb(255 239 220 / 18%);
  background: rgb(30 31 42 / 72%);
}

.app.background-night .menu-config-button {
  background: rgb(255 239 220 / 14%);
}

.app.background-night .menu-config-button.is-muted {
  background: rgb(255 239 220 / 8%);
}

.app.background-night .attic-intro,
.app.background-night .attic-panel {
  border-color: rgb(255 239 220 / 16%);
  background: rgb(42 44 56 / 76%);
  box-shadow: 0 12px 26px rgb(10 13 21 / 24%);
}

.app.background-night .attic-intro,
.app.background-night .attic-panel h2,
.app.background-night .attic-config summary,
.app.background-night .attic-config-body h3,
.app.background-night .attic-config-label,
.app.background-night .attic-config-input,
.app.background-night .attic-action-button,
.app.background-night .attic-config-button {
  color: #f5e8dc;
}

.app.background-night .attic-status,
.app.background-night .attic-help {
  color: #d8c7b7;
}

.app.background-night .attic-version-card {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 239 220 / 8%);
}

.app.background-night .attic-version-card h3,
.app.background-night .attic-version-card dd {
  color: #f5e8dc;
}

.app.background-night .attic-version-card dt {
  color: #d8c7b7;
}

.app.background-night .attic-catalog-sync .attic-help[data-state="success"] {
  color: #a8d4b2;
}

.app.background-night .attic-catalog-sync .attic-help[data-state="error"] {
  color: #f0b2aa;
}

.app.background-night .attic-action-button,
.app.background-night .attic-config-button {
  border-color: rgb(255 239 220 / 16%);
  background: rgb(255 239 220 / 12%);
}

.app.background-night .attic-status,
.app.background-night .attic-config {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 239 220 / 8%);
}

.app.background-night .attic-config-input {
  border-color: rgb(255 239 220 / 18%);
  background: rgb(30 31 42 / 72%);
}

.app.background-night .attic-config-button.is-muted {
  background: rgb(255 239 220 / 8%);
}

.app.background-night .menu-item:active,
.app.background-night .menu-item[aria-current="page"] {
  background: rgb(255 242 230 / 12%);
}

.app.background-night .data-status {
  background: rgb(20 23 31 / 34%);
}

.app.background-night .data-status-card {
  border-color: rgb(255 239 220 / 20%);
  background: rgb(43 46 58 / 95%);
}

.app.background-night .data-status-text {
  color: #f5eadf;
}

.app.background-night .data-status.is-error .data-status-text {
  color: #ffd9d4;
}

.app.background-night .data-status-close,
.app.background-night .work-add-button,
.app.background-night .task-submit {
  color: #fff8f1;
  background: #604249;
}

.app.background-night .work-secondary-button,
.app.background-night .work-reset-button,
.app.background-night .work-archives-bottom-button,
.app.background-night .archive-task-actions button {
  color: #f1dfd1;
  background: rgb(255 242 230 / 12%);
  border-color: rgb(255 239 220 / 14%);
}

.app.background-night .room-header h1,
.app.background-night .kitchen-chocolate-panel h2,
.app.background-night .chocolaterie-header h2,
.app.background-night .work-panel-header h2,
.app.background-night .task-form-header h2,
.app.background-night .postpone-form h2 {
  color: #f5eadf;
}

.app.background-night .kitchen-chocolate-panel,
.app.background-night .chocolaterie-panel {
  border-color: rgb(255 239 220 / 16%);
  background: rgb(43 46 58 / 100%);
}


.app.background-night .kitchen-product-card,
.app.background-night .catalog-detail-card,
.app.background-night .catalog-item {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 10%);
}

.app.background-night .kitchen-product-card.is-available-affordable {
  border-color: rgb(229 184 80 / 78%);
  background: rgb(229 184 80 / 16%);
  box-shadow: 0 14px 26px rgb(10 13 21 / 28%);
}

.app.background-night .kitchen-product-card.is-owned {
  border-color: rgb(124 102 85 / 32%);
  background: rgb(149 177 121 / 12%);
}

.app.background-night .kitchen-product-card.is-locked {
  background: rgb(255 242 230 / 6%);
}

.app.background-night .chocolaterie-filter-menu,
.app.background-night .chocolaterie-filters select,
.app.background-night .chocolaterie-filter-options {
  border-color: rgb(255 239 220 / 14%);
  color: #f1dfd1;
  background: rgb(85 86 98);
}

.app.background-night .chocolaterie-sync-button {
  border-color: rgb(255 239 220 / 16%);
  color: #f1dfd1;
  background: rgb(124 102 85 / 46%);
}

.app.background-night .chocolaterie-sync-button[data-state="success"] {
  color: #3f3123;
  background: #e5b850;
}

.app.background-night .chocolaterie-sync-button[data-state="error"] {
  color: #d8c7b7;
  background: rgb(255 242 230 / 10%);
}

.app.background-night .chocolaterie-filter-option,
.app.background-night .kitchen-product-category {
  color: #4a453f;
}

.app.background-night .kitchen-chef-pick .kitchen-product-card
{
  background: rgb(255 242 230 / 100%);
}

.app.background-night .kitchen-chef-pick .kitchen-product-card h3,
.app.background-night .kitchen-chef-pick .kitchen-product-card .kitchen-product-cost
{
  color: #42434d;
}

.app.background-night .kitchen-chef-pick .kitchen-product-card .kitchen-product-category
{
  color: #42434d;
}



.app.background-night .kitchen-panel-kicker,
.app.background-night .kitchen-product-empty,
.app.background-night .chocolaterie-readonly-note,
.app.background-night .chocolaterie-catalog-status,
.app.background-night .chocolaterie-sync-feedback,
.app.background-night .catalog-item-meta {
  color: #d8c7b7;
}

.app.background-night .chocolaterie-sync-feedback[data-state="success"] {
  color: #e5b850;
}

.app.background-night .chocolaterie-sync-feedback[data-state="error"] {
  color: #f1b7aa;
}

.app.background-night .kitchen-product-name,
.app.background-night .catalog-detail-title,
.app.background-night .catalog-item h3 {
  color: #f5eadf;
}

.app.background-night .reward-card-rarity {
  color: #d8c7b7;
}

.app.background-night .reward-card-inventory {
  color: #d8c7b7;
}

.app.background-night .kitchen-product-visual,
.app.background-night .catalog-detail-text section {
  border-color: rgb(255 239 220 / 22%);
  background:
    linear-gradient(135deg, rgb(255 242 230 / 12%), rgb(255 255 255 / 4%)),
    rgb(255 242 230 / 6%);
}

.app.background-night .kitchen-product-cost,
.app.background-night .kitchen-chef-bubble {
  color: #f1dfd1;
}

.app.background-night .kitchen-product-cost del {
  color: #ceb49f;
}

.app.background-night .kitchen-product-cost strong {
  color: #7e5c45;
}

.app.background-night .kitchen-product-cost strong .catalog-detail-footer {
  color: #edd3c0;
}

.app.background-night .kitchen-product-promo {
  color: #5c2d17;
  background: #ffd488;
}

.app.background-night .catalog-detail-tag {
  color: #d8c7b7;
  background: rgb(255 242 230 / 10%);
}

.app.background-night .catalog-detail-tag.is-rarity {
  color: #f7d89a;
  background: rgb(216 170 85 / 18%);
}

.app.background-night .catalog-detail-tag.is-type {
  color: #cfe6ef;
  background: rgb(190 224 237 / 14%);
}

.app.background-night .catalog-detail-text-icon {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 10%);
}

.app.background-night .catalog-detail-text p {
  color: #d8c7b7;
}

.app.background-night .catalog-detail-nav button {
  border-color: rgb(255 239 220 / 16%);
  color: #f1dfd1;
  background: rgb(43 46 58 / 88%);
}

.app.background-night .kitchen-product-card.is-available-missing .kitchen-product-action,
.app.background-night .kitchen-product-card.is-locked .kitchen-product-action,
.app.background-night .kitchen-product-card.is-assets .kitchen-product-action,
.app.background-night .kitchen-product-card.is-preorder-missing .kitchen-product-action,
.app.background-night .kitchen-product-card.is-pending-assets .kitchen-product-action,
.app.background-night .kitchen-product-card.is-pending-manual .kitchen-product-action {
  color: #d8c7b7;
  background: rgb(255 242 230 / 13%);
}

.app.background-night .kitchen-product-status-badge {
  color: #42434d;
  background: rgb(255 242 230 / 88%);
}

.app.background-night .kitchen-product-status-badge.is-asset_required,
.app.background-night .kitchen-product-status-badge.is-pending_assets {
  color: #213f4e;
  background: rgb(190 224 237 / 92%);
}

.app.background-night .kitchen-product-status-badge.is-manual_required,
.app.background-night .kitchen-product-status-badge.is-pending_manual {
  color: #543812;
  background: rgb(255 212 136 / 92%);
}

.app.background-night .kitchen-chef-bubble,
.app.background-night .catalog-favorite-toggle {
  border-color: rgb(255 239 220 / 16%);
  background: rgb(43 46 58 / 88%);
}

.app.background-night .chocolaterie-totals span {
  color: #f5eadf;
  background: rgb(255 242 230 / 12%);
}

.app.background-night .room-title-button,
.app.background-night .room-dropdown {
  border-color: rgb(255 239 220 / 18%);
  color: #f1dfd1;
  background: rgb(43 46 58 / 88%);
  box-shadow: 0 8px 22px rgb(10 13 21 / 26%);
}

.app.background-night .room-dropdown-item {
  color: #f5eadf;
}

.app.background-night .room-dropdown-item[aria-current="page"] {
  background: rgb(255 242 230 / 12%);
  color: #fff2e7;
}

.app.background-night .work-owen-note p,
.app.background-night .salon-owen-note p,
.app.background-night .salon-focus-card,
.app.background-night .salon-summary,
.app.background-night .salon-panel,
.app.background-night .task-template-panel,
.app.background-night .work-panel,
.app.background-night .work-timer,
.app.background-night .work-tasks-toggle,
.app.background-night .archives-panel,
.app.background-night .task-form,
.app.background-night .postpone-form,
.app.background-night .timer-modal-card {
  border-color: rgb(39 34 34 / 94%);
  color: #f5eadf;
  background: rgb(36 34 45 / 88%);
  box-shadow: 0 16px 36px rgb(10 13 21 / 30%);
}

.app.background-night .work-tasks-toggle-icon {
  color: #f1dfd1;
}

.app.background-night .work-panel-header p,
.app.background-night .salon-summary p,
.app.background-night .salon-panel-header p,
.app.background-night .salon-focus-eyebrow,
.app.background-night .salon-focus-meta,
.app.background-night .salon-focus-quota,
.app.background-night .salon-focus-done,
.app.background-night .salon-task-form label,
.app.background-night .task-template-header p,
.app.background-night .task-template-date-picker label,
.app.background-night .task-template-meta,
.app.background-night .work-filter-summary,
.app.background-night .work-empty,
.app.background-night .archives-empty,
.app.background-night .archive-task p,
.app.background-night .work-task-note,
.app.background-night .work-progress-row,
.app.background-night .work-task-group-title,
.app.background-night .work-task-group-summary,
.app.background-night .work-timer-settings,
.app.background-night .task-form label,
.app.background-night .postpone-form label,
.app.background-night .timer-modal-card p,
.app.background-night .timer-modal-card label,
.app.background-night .timer-report-label,
.app.background-night .task-duration-fields legend {
  color: #d8c7b7;
}

.app.background-night .work-owen-avatar-frame {
  border-color: rgb(255 239 220 / 22%);
  background: rgb(43 46 58 / 82%);
  box-shadow: 0 10px 24px rgb(10 13 21 / 30%);
}

.app.background-night .work-task {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 9%);
}

.app.background-night .task-template-item {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 9%);
}

.app.background-night .task-template-date-picker {
  border-top-color: rgb(255 239 220 / 12%);
}

.app.background-night .task-template-date-picker input,
.app.background-night .task-template-date-actions button {
  border-color: rgb(255 239 220 / 18%);
  color: #f5eadf;
  background: rgb(25 27 36 / 78%);
}

.app.background-night .salon-form-marker-button,
.app.background-night .salon-marker-button {
  border-color: rgb(255 239 220 / 16%);
  color: #f5eadf;
  background: rgb(255 242 230 / 10%);
}

.app.background-night .salon-form-marker-button.is-active,
.app.background-night .salon-marker-button.is-active {
  background: rgb(255 224 163 / 20%);
  box-shadow: 0 6px 14px rgb(10 13 21 / 22%);
}

.app.background-night .salon-marker-protection {
  color: #d8c7b7;
}

.app.background-night .work-task.day-lundi {
  border-left-color: #b8c4ae;
}

.app.background-night .work-task.day-mardi {
  border-left-color: #d9aba3;
}

.app.background-night .work-task.day-mercredi {
  border-left-color: #b5cbd3;
}

.app.background-night .work-task.day-jeudi {
  border-left-color: #d8bf8c;
}

.app.background-night .work-task.day-vendredi {
  border-left-color: #c7aec5;
}

.app.background-night .work-task.day-samedi {
  border-left-color: #a7b89e;
}

.app.background-night .work-task.day-dimanche {
  border-left-color: #cda7a0;
}

.app.background-night .work-task.day-a-determiner {
  border-left-color: rgb(255 239 220 / 28%);
}

.app.background-night .archive-task {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 9%);
}

.app.background-night .timer-session-item {
  border-color: rgb(255 239 220 / 14%);
  background: rgb(255 242 230 / 9%);
}

.app.background-night .work-task-title,
.app.background-night .salon-focus-title,
.app.background-night .salon-panel h2,
.app.background-night .task-template-header h3,
.app.background-night .task-template-title,
.app.background-night .work-timer h2,
.app.background-night .work-timer-display,
.app.background-night .timer-modal-card h2,
.app.background-night .archive-task h3,
.app.background-night .archives-header h2 {
  color: #f5eadf;
}

.app.background-night .work-task-pill,
.app.background-night .work-task-actions button,
.app.background-night .task-template-actions button,
.app.background-night .work-order-controls button,
.app.background-night .work-timer-actions button,
.app.background-night .work-day-close-button,
.app.background-night .work-week-close-button,
.app.background-night .timer-modal-actions button,
.app.background-night .timer-session-actions button,
.app.background-night .timer-week-item button,
.app.background-night .task-form-close {
  color: #f1dfd1;
  background: rgb(255 242 230 / 12%);
  border-color: rgb(255 239 220 / 14%);
}

.app.background-night .timer-modal-actions button.is-primary {
  color: #fff8f1;
  background: #8d6874;
}

.app.background-night .work-timer p {
  color: #d8c7b7;
}

.app.background-night .timer-session-summary {
  color: #f5eadf;
}

.app.background-night .work-timer-status {
  color: #f1dfd1;
  background: rgb(255 242 230 / 12%);
  border-color: rgb(255 239 220 / 14%);
}

.app.background-night .work-chocolate-summary {
  color: #f5eadf;
  background: rgb(255 242 230 / 10%);
  border-color: rgb(255 239 220 / 14%);
}

.app.background-night .work-progress-track {
  background: rgb(255 239 220 / 14%);
}

.app.background-night .work-progress-track:focus-visible {
  outline-color: rgb(130 183 208 / 78%);
}

.app.background-night .work-progress-fill {
  background: #d9aba3;
}

.app.background-night .work-progress-fill.is-serious {
  background: #d8b86a;
}

.app.background-night .work-progress-fill.is-complete {
  background: #82b7d0;
}

.app.background-night .work-progress-fill.is-weekend {
  background: #a7b89e;
}

.app.background-night .work-progress-label {
  color: #fff8f1;
}

.app.background-night .task-form input,
.app.background-night .task-form select,
.app.background-night .task-form textarea,
.app.background-night .salon-task-form input,
.app.background-night .salon-task-form select,
.app.background-night .salon-task-form textarea,
.app.background-night .postpone-form input,
.app.background-night .postpone-form select,
.app.background-night .timer-correction-form select,
.app.background-night .timer-report-label input,
.app.background-night .work-inline-editor,
.app.background-night .work-controls select {
  border-color: rgb(255 239 220 / 16%);
  color: #342823;
  background: #fff8ee;
}

.app.background-night .task-form select option,
.app.background-night .salon-task-form select option,
.app.background-night .postpone-form select option,
.app.background-night .timer-correction-form select option,
.app.background-night .work-controls select option {
  color: #342823;
  background: #fff8ee;
}

.app.background-night .character {
  filter: drop-shadow(0 16px 20px rgb(12 15 24 / 35%));
}

.app.background-night .message-card {
  border-color: rgb(255 239 220 / 24%);
  color: #f5eadf;
  background: rgb(43 46 58 / 84%);
  box-shadow:
    0 15px 38px rgb(10 13 21 / 34%),
    inset 0 1px 0 rgb(255 244 229 / 16%);
  backdrop-filter: blur(14px) saturate(0.8);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
}

.app.background-night .message-card.is-daily {
  border-color: rgb(143 177 181 / 30%);
  color: #e8f0eb;
  background: linear-gradient(135deg, rgb(43 44 58 / 92%), rgb(36 35 45 / 90%));
  box-shadow:
    0 15px 38px rgb(10 13 21 / 32%),
    inset 0 1px 0 rgb(218 239 235 / 15%);
}

.app.background-night .message-card.is-daily::before {
  color: #a8c3bd;
}

.app.background-night .favorite-button,
.app.background-night .favorites-list-button {
  color: #ddbbb1;
  background: rgb(255 242 230 / 10%);
}

.app.background-night .favorite-button[aria-pressed="true"] {
  color: #f1c1b7;
  background: rgb(184 112 105 / 24%);
}

.app.background-night .favorite-feedback {
  color: #f0dfd2;
  background: rgb(47 48 59 / 92%);
  box-shadow: 0 6px 18px rgb(10 13 21 / 30%);
}

.app.background-night .action-dock {
  background: transparent;
  box-shadow: none;
}

.app.background-night .action-button {
  box-shadow:
    0 16px 30px rgb(9 12 20 / 34%),
    inset 0 1px 0 rgb(255 244 229 / 16%);
}

.app.background-night .message-action {
  color: #fff8f1;
  background: linear-gradient(145deg, #ef7a7e, #c5406d);
}

.app.background-night .water-button {
  color: #fff8f1;
  background: linear-gradient(145deg, #7db1c8, #19516e);
}

.app.background-night .water-button.is-full {
  color: #fff8f1;
  background: linear-gradient(145deg, #1797b6, #1c7085);
}

.app.background-night .water-count {
  color: #f2dfd1;
  text-shadow: 0 1px 6px rgb(10 13 21 / 80%);
}

.app.background-night .mood-action {
  color: #fff8f1;
  background: linear-gradient(145deg, #686868, #95a197);
}

.app.background-night .sos-action {
  color: #fff8f1;
  background: linear-gradient(145deg, #691d1d, #8f515a);
}

.app.background-night .mood-panel,
.app.background-night .favorites-panel {
  border-color: rgb(255 239 220 / 22%);
  color: #f3e7dc;
  background: rgb(42 44 56 / 96%);
  box-shadow: 0 22px 52px rgb(8 11 18 / 48%);
  backdrop-filter: blur(16px) saturate(0.8);
  -webkit-backdrop-filter: blur(16px) saturate(0.8);
}

.app.background-night .mood-title,
.app.background-night .favorites-header h2 {
  color: #f5e8dc;
}

.app.background-night .mood-options button,
.app.background-night .favorites-list li {
  border-color: rgb(255 237 218 / 12%);
  color: #eee1d7;
  background: rgb(255 244 231 / 8%);
}

.app.background-night .mood-options button:active {
  background: rgb(174 112 108 / 25%);
}

.app.background-night .favorites-empty {
  color: #c7b5aa;
}

.app.background-night .favorites-close,
.app.background-night .favorite-remove {
  color: #e0b1aa;
  background: rgb(173 105 103 / 20%);
}

@media (min-width: 431px) {
  .app {
    height: min(92dvh, 880px);
    border: 7px solid rgb(255 247 237 / 58%);
    border-radius: 34px;
  }
}

@media (max-height: 700px) {
  .character-stage {
    top: 22%;
  }

  /*.character {
    height: 60dvh;
  }*/

  .message-card {
    top: max(3.5%, env(safe-area-inset-top));
    min-height: 70px;
    padding-block: 12px;
  }

  .action-dock {
    top: calc(18% + 60dvh - 10px);
  }

  .action-slot {
    min-height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}