.lk-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--fx-primary), white 84%), transparent 30rem),
    linear-gradient(180deg, var(--fx-bg), color-mix(in srgb, var(--fx-surface), white 38%));
  color: var(--fx-ink);
  font-family: var(--fx-font-display);
}

.lk-shell,
.lk-shell *,
.lk-shell *::before,
.lk-shell *::after {
  box-sizing: border-box;
}

.lk-shell {
  width: min(100%, 1120px);
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 14px 96px;
}

.lk-app {
  display: grid;
  gap: 14px;
}

.lk-toolbar,
.lk-toolbar-actions,
.lk-brand,
.lk-section-title,
.lk-metrics,
.lk-bottom-nav,
.lk-feed-item,
.lk-order-row,
.lk-chat-bubble header {
  display: flex;
  align-items: center;
}

.lk-toolbar {
  justify-content: space-between;
  gap: 12px;
}

.lk-toolbar-actions {
  gap: 8px;
}

.lk-brand {
  gap: 9px;
  font-size: 21px;
  font-weight: 900;
}

.lk-brand-mark,
.lk-icon-button,
.lk-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.lk-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fx-primary), white 80%);
  color: color-mix(in srgb, var(--fx-primary), black 28%);
}

.lk-icon-button,
.lk-status,
.lk-text-button,
.lk-bottom-nav button,
.lk-action-grid button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.lk-icon-button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fx-warn), white 84%);
  color: color-mix(in srgb, var(--fx-warn), black 38%);
  font-weight: 900;
}

.lk-status,
.lk-order-state {
  border-radius: var(--fx-radius-pill);
  padding: 8px 11px;
  background: color-mix(in srgb, var(--fx-ok), white 88%);
  color: color-mix(in srgb, var(--fx-ok), black 28%);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.lk-organizer-only,
.lk-parent-only {
  display: block;
}

.lk-screen {
  display: none;
}

.lk-screen.is-active {
  display: grid;
  gap: 14px;
}

.lk-card {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--fx-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--fx-card), white 10%);
  box-shadow: var(--fx-shadow);
}

.lk-shell > .lk-card + .lk-card {
  margin-top: 14px;
}

.lk-card--hero {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--fx-primary), white 88%), var(--fx-card) 54%),
    var(--fx-card);
}

.lk-kicker {
  margin: 0 0 10px;
  color: var(--fx-ink-secondary);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.lk-card h1,
.lk-card h2 {
  margin: 0;
  letter-spacing: 0;
}

.lk-card h1 {
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.05;
}

.lk-card h2 {
  font-size: 22px;
}

.lk-lead,
.lk-muted,
.lk-empty,
.lk-order-row span,
.lk-chat-bubble time,
.lk-facts dt {
  color: var(--fx-ink-secondary);
}

.lk-lead {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.35;
}

.lk-muted,
.lk-empty {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
}

.lk-metrics,
.lk-stage-grid,
.lk-action-grid {
  display: grid;
  gap: 8px;
}

.lk-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.lk-metric,
.lk-stage-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--fx-border), white 18%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--fx-card), transparent 10%);
}

.lk-metric strong,
.lk-metric span,
.lk-stage-card strong,
.lk-stage-card span,
.lk-order-row strong,
.lk-order-row span {
  display: block;
}

.lk-metric strong,
.lk-stage-card strong {
  font-size: 24px;
}

.lk-metric span,
.lk-stage-card span {
  color: var(--fx-ink-secondary);
  font-size: 12px;
  font-weight: 900;
}

.lk-metric--warn {
  background: color-mix(in srgb, var(--fx-warn), white 86%);
}

.lk-metric--ok {
  background: color-mix(in srgb, var(--fx-ok), white 90%);
}

.lk-section-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lk-section-title span {
  color: var(--fx-ink-secondary);
  font-weight: 900;
}

.lk-text-button {
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--fx-primary), white 88%);
  color: color-mix(in srgb, var(--fx-primary), black 22%);
  font-weight: 900;
}

.lk-feed,
.lk-order-list,
.lk-chat-list,
.lk-todo-list,
.lk-document-list,
.lk-document-files {
  display: grid;
  gap: 8px;
}

.lk-feed-item {
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--fx-border);
  border-radius: 16px;
  background: var(--fx-card);
}

.lk-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--fx-ok);
}

.lk-dot--warn {
  background: var(--fx-warn);
}

.lk-stage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lk-order-row {
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fx-border);
  border-radius: 16px;
  background: var(--fx-card);
}

.lk-order-row--declined {
  background: color-mix(in srgb, var(--fx-err), white 90%);
}

.lk-order-row--photo_only {
  background: color-mix(in srgb, var(--fx-primary), white 90%);
}

.lk-order-main,
.lk-order-meta {
  min-width: 0;
}

.lk-order-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.lk-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.lk-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fx-border);
}

.lk-facts div:last-child {
  border-bottom: 0;
}

.lk-facts dt,
.lk-facts dd {
  margin: 0;
}

.lk-facts dd {
  font-weight: 900;
}

.lk-chat-bubble {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--fx-border);
  border-radius: 18px;
  background: var(--fx-card);
}

.lk-chat-bubble.is-client {
  background: color-mix(in srgb, var(--fx-primary), white 90%);
}

.lk-chat-bubble header {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.lk-chat-bubble p {
  margin: 0;
  line-height: 1.38;
}

.lk-document-card {
  padding: 12px;
  border: 1px solid var(--fx-border);
  border-radius: 18px;
  background: var(--fx-card);
}

.lk-document-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.lk-document-card time,
.lk-document-card p {
  color: var(--fx-ink-secondary);
}

.lk-document-card p {
  margin: 0 0 10px;
  line-height: 1.38;
}

.lk-document-file {
  display: block;
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--fx-primary), white 90%);
  color: color-mix(in srgb, var(--fx-primary), black 20%);
  font-weight: 900;
  text-decoration: none;
}

.lk-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fx-ink), white 88%);
  color: var(--fx-ink);
  font-weight: 900;
  overflow: hidden;
}

.lk-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.lk-chat-form,
.lk-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lk-label {
  color: var(--fx-ink-secondary);
  font-size: 13px;
  font-weight: 900;
}

.lk-input,
.lk-textarea {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--fx-border);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--fx-card);
  color: var(--fx-ink);
  font: inherit;
}

.lk-input {
  min-height: 48px;
}

.lk-textarea {
  resize: vertical;
}

.lk-button {
  max-width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: var(--fx-primary);
  color: white;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.lk-button--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lk-action-grid {
  grid-template-columns: 1fr;
}

.lk-action-grid button {
  min-height: 48px;
  border-radius: 16px;
  padding: 0 14px;
  background: var(--fx-card);
  color: var(--fx-ink);
  text-align: left;
  font-weight: 900;
}

.lk-flash {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fx-primary), white 86%);
  color: var(--fx-ink);
  font-weight: 800;
}

.lk-flash--alert {
  background: color-mix(in srgb, var(--fx-err), white 86%);
}

.lk-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 10;
  width: min(calc(100% - 24px), 430px);
  transform: translateX(-50%);
  justify-content: space-around;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--fx-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fx-card), white 10%);
  box-shadow: var(--fx-shadow);
}

.lk-bottom-nav button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-height: 46px;
  border-radius: 999px;
  background: transparent;
  color: var(--fx-ink-secondary);
  font-size: 12px;
  font-weight: 900;
}

.lk-bottom-nav button i {
  font-size: 16px;
  line-height: 1;
}

.lk-bottom-nav button.is-active {
  background: var(--fx-ink);
  color: var(--fx-card);
}

@media (min-width: 900px) {
  .lk-screen.is-active {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: start;
  }

  .lk-screen[data-lk-screen="orders"].is-active,
  .lk-screen[data-lk-screen="chat"].is-active {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .lk-shell {
    padding-inline: 10px;
  }

  .lk-card {
    padding: 15px;
  }

  .lk-metrics,
  .lk-stage-grid {
    grid-template-columns: 1fr;
  }

  .lk-facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .lk-order-row {
    align-items: flex-start;
  }
}