:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --panel-warm: #fbfbfd;
  --text: #111827;
  --muted: #667085;
  --muted-2: #8a93a3;
  --line: #e1e5ec;
  --line-strong: #cfd6e2;
  --primary: #111827;
  --active: #efe9ff;
  --active-text: #3d1f7a;
  --purple: #8b5cf6;
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --danger: #be123c;
  --radius: 10px;
  --shadow: 0 26px 70px rgba(15, 23, 42, 0.14);
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
}

body.access-checking,
body.access-locked {
  min-height: 100vh;
  overflow: hidden;
}

body.access-checking #appShell,
body.access-locked #appShell {
  display: none;
}

body.access-granted #accessGate {
  display: none;
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 100vh;
  overflow: auto;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(242, 250, 255, 0.88) 42%, rgba(255, 255, 255, 0.98)),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  color: #0f172a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.access-gate *,
.access-gate *::before,
.access-gate *::after {
  box-sizing: border-box;
}

.access-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.access-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(120deg, transparent 0%, #000 20%, #000 72%, transparent 100%);
}

.access-ribbon {
  position: absolute;
  width: 78vw;
  min-width: 760px;
  height: 220px;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 0.46;
  transform-origin: center;
  animation: accessRibbonDrift 16s ease-in-out infinite alternate;
}

.ribbon-one {
  top: 9%;
  left: -16%;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.48), rgba(37, 99, 235, 0.4), rgba(34, 211, 238, 0));
  transform: rotate(-14deg);
}

.ribbon-two {
  right: -18%;
  bottom: 8%;
  background: linear-gradient(90deg, rgba(248, 113, 113, 0), rgba(248, 113, 113, 0.28), rgba(20, 184, 166, 0.38), rgba(37, 99, 235, 0));
  animation-delay: -6s;
  transform: rotate(18deg);
}

.ribbon-three {
  top: 48%;
  left: 18%;
  height: 160px;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0), rgba(20, 184, 166, 0.22), rgba(251, 146, 60, 0.18), rgba(20, 184, 166, 0));
  animation-delay: -10s;
  transform: rotate(7deg);
}

.access-scanline {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.82) 50%, transparent 58%, transparent 100%);
  transform: translateX(-40%);
  animation: accessScan 8s ease-in-out infinite;
}

.access-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.38);
  opacity: 0.55;
  animation: accessParticle 7s ease-in-out infinite alternate;
}

.access-particle.p1 { top: 18%; left: 48%; background: #14b8a6; }
.access-particle.p2 { top: 28%; right: 16%; animation-delay: -2s; }
.access-particle.p3 { bottom: 18%; left: 12%; background: #f97316; animation-delay: -4s; }
.access-particle.p4 { bottom: 24%; right: 38%; background: #14b8a6; animation-delay: -6s; }
.access-particle.p5 { top: 66%; left: 56%; width: 4px; height: 4px; animation-delay: -3s; }
.access-particle.p6 { top: 13%; right: 34%; width: 4px; height: 4px; background: #fb7185; animation-delay: -5s; }

.access-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  align-items: center;
  gap: 54px;
  padding: 44px 0;
}

.access-hero {
  min-width: 0;
  display: grid;
  gap: 24px;
}

.access-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.access-brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.access-brand-mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.access-brand-logo {
  width: 148px;
  height: auto;
  display: block;
}

.access-hero h1 {
  max-width: 660px;
  margin: 0;
  color: #101828;
  font-size: 58px;
  font-weight: 920;
  letter-spacing: 0;
  line-height: 0.96;
}

.access-hero p {
  max-width: 560px;
  margin: 0;
  color: #475467;
  font-size: 17px;
  line-height: 1.62;
}

.access-actions,
.access-code-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.access-primary,
.access-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.access-primary {
  border: 1px solid rgba(15, 23, 42, 0.92);
  background: linear-gradient(135deg, #111827 0%, #0f766e 100%);
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 118, 110, 0.2);
}

.access-primary img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16));
}

.access-primary .access-connect-spinner {
  width: 22px;
  height: 22px;
  display: none;
}

.access-primary .access-connect-spinner::after {
  inset: 3.5px;
}

.access-primary.is-loading {
  cursor: wait;
  opacity: 0.92;
  pointer-events: none;
}

.access-primary.is-loading img {
  display: none;
}

.access-primary.is-loading .access-connect-spinner {
  display: block;
}

.access-primary:hover,
.access-secondary:hover {
  transform: translateY(-1px);
}

.access-primary.disabled,
.access-primary:disabled,
.access-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.access-secondary {
  border: 1px solid rgba(148, 163, 184, 0.44);
  background: rgba(255, 255, 255, 0.78);
  color: #344054;
}

.access-note {
  max-width: 520px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.access-note::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.12);
}

.access-version {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 4;
  margin: 0;
  color: rgba(100, 116, 139, 0.74);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
}

.access-version[hidden] {
  display: none;
}

.access-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.86)),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(22px);
  overflow: hidden;
}

.access-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.7), rgba(255, 255, 255, 0), rgba(248, 113, 113, 0.52));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.access-card-glow {
  position: absolute;
  inset: auto -18% -30% -18%;
  height: 160px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(20, 184, 166, 0.18), rgba(248, 113, 113, 0.14), rgba(37, 99, 235, 0));
  filter: blur(18px);
  transform: rotate(-4deg);
  animation: accessCardGlow 5s ease-in-out infinite alternate;
  pointer-events: none;
}

.access-orbit {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 92px;
  height: 92px;
  pointer-events: none;
}

.access-orbit span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 50%;
  transform: rotate(18deg) scaleX(0.68);
  animation: accessOrbit 9s linear infinite;
}

.access-orbit span:last-child {
  border-color: rgba(37, 99, 235, 0.2);
  transform: rotate(-34deg) scaleX(0.72);
  animation-duration: 12s;
  animation-direction: reverse;
}

.access-card-head,
.access-account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.access-lark-mark,
.access-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.access-lark-mark {
  border: 1px solid rgba(203, 213, 225, 0.68);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.access-lark-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.access-card-head strong,
.access-account strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 15px;
  font-weight: 920;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-card-head small,
.access-account small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-account {
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.access-avatar {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.access-code-form {
  position: relative;
  display: grid;
  gap: 12px;
}

.access-code-form[hidden],
.access-account[hidden],
.access-actions [hidden] {
  display: none;
}

.access-code-form label {
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.access-code-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.access-code-grid input {
  width: 100%;
  aspect-ratio: 1 / 1.06;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  outline: none;
  box-shadow: inset 0 -10px 18px rgba(15, 23, 42, 0.025);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.access-code-grid input:focus {
  border-color: rgba(20, 184, 166, 0.9);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14), inset 0 -10px 18px rgba(15, 23, 42, 0.025);
  transform: translateY(-1px);
}

.access-code-actions {
  margin-top: 2px;
}

.access-code-actions .access-primary,
.access-code-actions .access-secondary {
  flex: 1 1 160px;
}

.access-message {
  min-height: 40px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  color: #667085;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.access-message:empty {
  display: none;
}

.access-message-hero {
  width: min(380px, 100%);
}

.access-gate[data-access-stage="code"] .access-message-hero,
.access-gate:not([data-access-stage="code"]) .access-message-card {
  display: none;
}

.access-message[data-type="ok"] {
  border-color: rgba(20, 184, 166, 0.22);
  background: rgba(240, 253, 250, 0.82);
  color: #0f766e;
}

.access-message[data-type="error"] {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(255, 241, 242, 0.82);
  color: #be123c;
}

.access-gate.is-busy .access-card {
  cursor: progress;
}

@keyframes accessRibbonDrift {
  from { translate: 0 0; }
  to { translate: 44px -26px; }
}

@keyframes accessScan {
  0%, 22% { transform: translateX(-55%); opacity: 0; }
  44%, 58% { opacity: 0.42; }
  100% { transform: translateX(55%); opacity: 0; }
}

@keyframes accessParticle {
  from { translate: 0 0; opacity: 0.34; }
  to { translate: 18px -24px; opacity: 0.72; }
}

@keyframes accessCardGlow {
  from { opacity: 0.58; translate: -12px 0; }
  to { opacity: 0.96; translate: 16px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .access-ribbon,
  .access-scanline,
  .access-particle,
  .access-card-glow,
  .access-orbit span {
    animation: none;
  }
}

@media (max-width: 920px) {
  .access-gate {
    overflow: auto;
  }

  .access-shell {
    min-height: 100vh;
    width: min(620px, calc(100% - 28px));
    grid-template-columns: 1fr;
    gap: 26px;
    align-content: center;
    padding: 28px 0;
  }

  .access-hero {
    gap: 18px;
  }

  .access-hero h1 {
    font-size: 40px;
    line-height: 1.02;
  }

  .access-hero p {
    font-size: 15px;
  }

  .access-brand-mark {
    width: 48px;
    height: 48px;
  }

  .access-brand-logo {
    width: 128px;
  }
}

@media (max-width: 520px) {
  body.access-checking,
  body.access-locked {
    overflow: auto;
  }

  .access-shell {
    width: calc(100% - 22px);
    padding: 18px 0;
  }

  .access-hero h1 {
    font-size: 34px;
  }

  .access-actions,
  .access-code-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .access-primary,
  .access-secondary {
    width: 100%;
  }

  .access-card {
    padding: 18px;
  }

  .access-code-grid {
    gap: 6px;
  }

  .access-code-grid input {
    font-size: 22px;
  }
}

/* Access gate refinement: focused, quiet, and low-copy. */
.access-gate {
  background:
    radial-gradient(circle at 50% 18%, rgba(114, 196, 238, 0.22), transparent 34%),
    radial-gradient(circle at 18% 76%, rgba(20, 184, 166, 0.12), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(248, 113, 113, 0.09), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.access-ambient::before,
.access-scanline {
  display: none;
}

.access-ribbon {
  opacity: 0.18;
  filter: blur(34px);
}

.ribbon-one {
  top: 2%;
  left: 6%;
  width: 56vw;
  min-width: 520px;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0), rgba(125, 211, 252, 0.46), rgba(20, 184, 166, 0.2), rgba(125, 211, 252, 0));
}

.ribbon-two {
  right: 8%;
  bottom: 0;
  width: 48vw;
  min-width: 480px;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0), rgba(20, 184, 166, 0.26), rgba(244, 114, 182, 0.12), rgba(20, 184, 166, 0));
}

.ribbon-three {
  display: none;
}

.access-particle {
  opacity: 0.28;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.16);
}

.access-shell {
  width: min(520px, calc(100% - 34px));
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-content: center;
  gap: 18px;
  padding: 28px 0;
}

.access-hero {
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.access-brand-lockup {
  justify-content: center;
}

.access-brand-mark {
  width: 58px;
  height: 58px;
  border-color: rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.access-brand-mark img {
  width: 40px;
  height: 40px;
}

.access-brand-logo {
  display: none;
}

.access-hero h1 {
  max-width: 420px;
  font-size: 36px;
  line-height: 1.04;
}

.access-hero p {
  max-width: 350px;
  color: #5f6b7a;
  font-size: 14px;
  line-height: 1.45;
}

.access-actions {
  justify-content: center;
  margin-top: 2px;
}

.access-note {
  display: none;
}

.access-card {
  gap: 14px;
  padding: 20px;
  border-color: rgba(203, 213, 225, 0.82);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 62px rgba(15, 23, 42, 0.11);
}

.access-card::before {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0), rgba(148, 163, 184, 0.2));
}

.access-card-glow {
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0), rgba(20, 184, 166, 0.12), rgba(125, 211, 252, 0.13), rgba(20, 184, 166, 0));
}

.access-orbit {
  display: none;
}

.access-card-head {
  gap: 10px;
}

.access-lark-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: none;
}

.access-lark-mark img {
  width: 26px;
  height: 26px;
}

.access-card-head strong {
  font-size: 15px;
}

.access-card-head small {
  display: none;
}

.access-account {
  min-height: 56px;
  padding: 10px;
  border-color: rgba(226, 232, 240, 0.9);
  background: rgba(248, 250, 252, 0.72);
}

.access-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f766e, #3b82f6);
  font-size: 12px;
}

.access-account strong {
  font-size: 14px;
}

.access-account small {
  display: none;
}

.access-code-form {
  gap: 10px;
}

.access-code-form label {
  color: #5f6b7a;
  font-size: 11px;
  font-weight: 850;
}

.access-code-actions {
  gap: 8px;
}

.access-code-actions .access-primary,
.access-code-actions .access-secondary {
  min-height: 44px;
}

.access-code-grid input {
  border-color: rgba(203, 213, 225, 0.95);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.access-code-grid input:focus {
  border-color: rgba(20, 184, 166, 0.72);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.11);
}

.access-primary {
  border-color: rgba(15, 23, 42, 0.1);
  background: #2f3b4a;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(47, 59, 74, 0.16);
}

.access-primary:hover {
  background: #263241;
}

.access-code-actions .access-primary {
  background: #344054;
  box-shadow: 0 12px 24px rgba(52, 64, 84, 0.14);
}

.access-code-actions .access-primary:hover {
  background: #263241;
}

.access-secondary {
  border-color: rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.86);
  color: #344054;
  box-shadow: none;
}

.access-message {
  min-height: 36px;
  padding: 9px 11px;
  background: rgba(248, 250, 252, 0.74);
  font-size: 12px;
  font-weight: 720;
}

.access-message[data-type="ok"] {
  border-color: rgba(20, 184, 166, 0.18);
  background: rgba(240, 253, 250, 0.64);
}

/* Flowmo access motion: welcome panel -> code panel. */
.access-gate {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.96) 0 14%, transparent 34%),
    radial-gradient(circle at 44% 30%, rgba(45, 212, 191, 0.18), transparent 28%),
    radial-gradient(circle at 56% 70%, rgba(96, 165, 250, 0.14), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(167, 139, 250, 0.11), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #f6fbff 100%);
}

.access-gate::before,
.access-gate::after {
  content: "";
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(680px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
  z-index: 0;
}

.access-gate::before {
  border: 1px solid rgba(20, 184, 166, 0.12);
  background:
    linear-gradient(90deg, transparent 48%, rgba(20, 184, 166, 0.12) 49%, transparent 51%),
    linear-gradient(0deg, transparent 48%, rgba(96, 165, 250, 0.1) 49%, transparent 51%);
  filter: blur(0.2px);
  opacity: 0.62;
  animation: accessAuroraShift 14s ease-in-out infinite alternate;
}

.access-gate::after {
  width: min(440px, 68vw);
  border: 1px solid rgba(96, 165, 250, 0.12);
  box-shadow:
    0 0 80px rgba(20, 184, 166, 0.16),
    inset 0 0 64px rgba(96, 165, 250, 0.08);
  opacity: 0.74;
  animation: accessAuroraBreathe 9s ease-in-out infinite alternate;
}

.access-particle {
  opacity: 0.42;
  animation-duration: 8.5s;
}

.access-shell {
  width: min(520px, calc(100% - 34px));
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "access";
  place-items: center;
  padding: 28px 0;
  transition: width 0.64s cubic-bezier(0.18, 0.9, 0.18, 1);
}

.access-hero,
.access-card {
  grid-area: access;
  width: 100%;
  min-height: 322px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(249, 253, 255, 0.86)),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 26px 74px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

.access-hero {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 48px 44px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.34s ease, transform 0.54s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.access-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.9);
  transition: opacity 0.24s ease, transform 0.54s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.access-brand-lockup {
  position: relative;
  z-index: 1;
}

.access-welcome-logo {
  width: min(260px, 70vw);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.08));
}

.access-hero p:not(.access-message-hero) {
  display: none;
}

.access-actions {
  position: relative;
  z-index: 1;
  width: min(260px, 100%);
  display: grid;
  gap: 10px;
  justify-content: stretch;
}

.access-actions .access-primary,
.access-actions .access-secondary {
  width: 100%;
}

.access-enter-btn {
  min-height: 48px;
  background: #111827;
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.16);
}

.access-enter-btn:hover {
  background: #0f172a;
}

.access-card-head,
.access-account,
.access-code-form,
.access-message {
  position: relative;
  z-index: 1;
}

.access-card-head {
  padding-right: 34px;
}

.access-card::after {
  content: "";
  position: absolute;
  top: -88px;
  right: -78px;
  width: 186px;
  height: 186px;
  border-radius: 50%;
  border: 1px solid rgba(20, 184, 166, 0.16);
  box-shadow: inset 0 0 48px rgba(96, 165, 250, 0.1);
}

.access-code-grid {
  gap: 9px;
}

.access-code-grid input {
  min-height: 58px;
}

.access-gate[data-access-stage="code"] .access-hero {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px) scale(0.78);
}

.access-gate[data-access-stage="code"] .access-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.access-gate[data-access-stage="code"] .access-shell {
  width: min(760px, calc(100% - 34px));
}

.access-gate[data-access-stage="code"] .access-card {
  min-height: 310px;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 26px;
  align-items: center;
  animation: accessPanelOpen 0.72s cubic-bezier(0.18, 0.9, 0.18, 1) both;
}

.access-gate[data-access-stage="code"] .access-card-head {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  justify-content: end;
  gap: 11px;
  min-height: 128px;
  padding: 0 18px 16px 0;
  border-right: 1px solid rgba(203, 213, 225, 0.62);
  text-align: center;
}

.access-gate[data-access-stage="code"] .access-lark-mark {
  width: 54px;
  height: 54px;
}

.access-gate[data-access-stage="code"] .access-account {
  grid-column: 1;
  grid-row: 2;
  margin-right: 18px;
}

.access-gate[data-access-stage="code"] .access-code-form {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.access-gate[data-access-stage="code"] .access-message {
  grid-column: 2;
  grid-row: 3;
}

.access-gate[data-access-stage="connect"] .access-card,
.access-gate[data-access-stage="ready"] .access-card {
  visibility: hidden;
}

.access-gate[data-access-stage="connect"] .access-hero,
.access-gate[data-access-stage="ready"] .access-hero {
  animation: accessWelcomeIn 0.7s cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

@keyframes accessWelcomeIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes accessPanelOpen {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.58);
    clip-path: inset(43% 43% 43% 43% round 999px);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1.018);
    clip-path: inset(0 0 0 0 round 8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-gate::before,
  .access-gate::after,
  .access-card::after {
    animation: none;
  }

  .access-gate[data-access-stage="code"] .access-card,
  .access-gate[data-access-stage="connect"] .access-hero,
  .access-gate[data-access-stage="ready"] .access-hero {
    animation: none;
  }
}

@media (max-width: 920px) {
  .access-shell {
    width: min(520px, calc(100% - 28px));
    gap: 16px;
  }

  .access-hero h1 {
    font-size: 32px;
  }
}

@media (max-width: 520px) {
  .access-shell {
    width: calc(100% - 22px);
    gap: 14px;
  }

  .access-hero h1 {
    font-size: 29px;
  }

  .access-card {
    padding: 16px;
  }
}

@media (max-width: 720px) {
  .access-gate[data-access-stage="code"] .access-shell {
    width: min(520px, calc(100% - 24px));
  }

  .access-gate[data-access-stage="code"] .access-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .access-gate[data-access-stage="code"] .access-card-head,
  .access-gate[data-access-stage="code"] .access-account,
  .access-gate[data-access-stage="code"] .access-code-form,
  .access-gate[data-access-stage="code"] .access-message {
    grid-column: 1;
    grid-row: auto;
  }

  .access-gate[data-access-stage="code"] .access-card-head {
    min-height: 0;
    flex-direction: row;
    justify-content: start;
    padding: 0;
    border-right: none;
    text-align: left;
  }

  .access-gate[data-access-stage="code"] .access-account {
    margin-right: 0;
  }
}

/* Flowmo access polish: soft AI aurora, clearer panel, account context. */
.access-gate {
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.96) 0 18%, transparent 38%),
    linear-gradient(180deg, #fbfdff 0%, #f5fbff 100%);
}

.access-gate::before,
.access-gate::after {
  inset: -24% -16%;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  translate: 0 0;
  transform: none;
  opacity: 1;
  box-shadow: none;
  pointer-events: none;
}

.access-gate::before {
  background:
    radial-gradient(circle at 28% 22%, rgba(45, 212, 191, 0.2), transparent 24%),
    radial-gradient(circle at 72% 20%, rgba(167, 139, 250, 0.16), transparent 26%),
    radial-gradient(circle at 42% 72%, rgba(96, 165, 250, 0.18), transparent 30%),
    radial-gradient(circle at 74% 78%, rgba(20, 184, 166, 0.12), transparent 24%);
  filter: blur(30px);
  animation: accessAuroraShift 14s ease-in-out infinite alternate;
}

.access-gate::after {
  background:
    linear-gradient(115deg, transparent 0 20%, rgba(20, 184, 166, 0.08) 30%, transparent 42% 100%),
    linear-gradient(65deg, transparent 0 42%, rgba(96, 165, 250, 0.08) 52%, transparent 64% 100%);
  filter: blur(12px);
  animation: accessAuroraBreathe 9s ease-in-out infinite alternate;
}

.access-particle {
  display: none;
}

.access-ribbon {
  opacity: 0.12;
  filter: blur(46px);
}

.access-hero,
.access-card {
  border-color: rgba(125, 211, 252, 0.46);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfeff 100%),
    #ffffff;
  box-shadow:
    0 28px 82px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.76) inset;
  backdrop-filter: blur(10px);
}

.access-hero {
  padding: 44px 42px;
}

.access-card {
  border-color: rgba(20, 184, 166, 0.26);
}

.access-card::before {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.56), rgba(255, 255, 255, 0), rgba(96, 165, 250, 0.32));
}

.access-card-glow {
  opacity: 0.72;
}

.access-welcome-logo {
  width: min(250px, 68vw);
}

.access-welcome-account {
  position: relative;
  z-index: 1;
  width: min(260px, 100%);
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background: #f8fbff;
  text-align: left;
}

.access-welcome-account[hidden] {
  display: none;
}

.access-welcome-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.access-welcome-account strong,
.access-welcome-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-welcome-account strong {
  color: #101828;
  font-size: 13px;
  font-weight: 920;
}

.access-welcome-account small {
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
}

.access-gate[data-access-stage="code"] .access-lark-mark {
  border-color: rgba(203, 213, 225, 0.86);
  background: #ffffff;
}

.access-gate[data-access-stage="code"] .access-lark-mark img {
  width: 36px;
  height: 36px;
}

.access-gate[data-access-stage="code"] .access-card-head {
  min-height: 138px;
}

.access-message[data-type="ok"] {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.78);
}

@keyframes accessAuroraShift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 1.5%, 0) scale(1.05);
  }
}

@keyframes accessAuroraBreathe {
  from {
    opacity: 0.38;
    transform: translate3d(-1%, 1%, 0);
  }
  to {
    opacity: 0.76;
    transform: translate3d(1%, -1%, 0);
  }
}

/* Verification stage: softer composition, stronger focus. */
.access-gate[data-access-stage="code"] .access-shell {
  width: min(820px, calc(100% - 34px));
}

.access-gate[data-access-stage="code"] .access-card {
  min-height: 360px;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 28px;
  padding: 26px;
  border-color: rgba(45, 212, 191, 0.36);
  background:
    radial-gradient(circle at 22% 18%, rgba(20, 184, 166, 0.12), transparent 34%),
    radial-gradient(circle at 92% 94%, rgba(96, 165, 250, 0.12), transparent 36%),
    linear-gradient(145deg, #ffffff 0%, #f8fdff 100%);
  box-shadow:
    0 36px 110px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.86) inset;
}

.access-gate[data-access-stage="code"] .access-card::after {
  top: auto;
  right: -84px;
  bottom: -82px;
  width: 360px;
  height: 230px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(96, 165, 250, 0.08)),
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.28), transparent 38%);
  box-shadow: none;
  transform: rotate(-8deg);
}

.access-gate[data-access-stage="code"] .access-card-head {
  align-self: stretch;
  min-height: 190px;
  justify-content: center;
  gap: 12px;
  padding: 24px 18px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(45, 212, 191, 0.14), transparent 48%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.access-gate[data-access-stage="code"] .access-lark-mark {
  width: 68px;
  height: 68px;
  border-color: rgba(45, 212, 191, 0.24);
  box-shadow: 0 18px 42px rgba(20, 184, 166, 0.12);
}

.access-gate[data-access-stage="code"] .access-lark-mark img {
  width: 46px;
  height: 46px;
}

.access-gate[data-access-stage="code"] .access-card-head strong {
  font-size: 17px;
}

.access-gate[data-access-stage="code"] .access-account {
  min-height: 60px;
  margin-right: 0;
  padding: 11px;
  border-color: rgba(203, 213, 225, 0.78);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.access-gate[data-access-stage="code"] .access-code-form {
  gap: 14px;
  padding: 12px 0 0;
}

.access-gate[data-access-stage="code"] .access-code-form label {
  color: #475467;
  font-size: 12px;
}

.access-gate[data-access-stage="code"] .access-code-grid {
  gap: 10px;
}

.access-gate[data-access-stage="code"] .access-code-grid input {
  min-height: 66px;
  border-color: rgba(148, 163, 184, 0.62);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  font-size: 30px;
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.07),
    inset 0 -14px 24px rgba(20, 184, 166, 0.025);
}

.access-gate[data-access-stage="code"] .access-code-grid input:focus {
  border-color: rgba(20, 184, 166, 0.88);
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.12),
    0 18px 34px rgba(20, 184, 166, 0.1);
}

.access-gate[data-access-stage="code"] .access-code-actions {
  margin-top: 4px;
  gap: 10px;
}

.access-gate[data-access-stage="code"] .access-code-actions .access-primary,
.access-gate[data-access-stage="code"] .access-code-actions .access-secondary {
  min-height: 48px;
}

.access-gate[data-access-stage="code"] .access-code-actions .access-primary {
  background: linear-gradient(135deg, #111827 0%, #1f3f4d 100%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.access-gate[data-access-stage="code"] .access-message {
  align-self: end;
  min-height: 42px;
  display: flex;
  align-items: center;
  border-color: rgba(20, 184, 166, 0.22);
  background: rgba(240, 253, 250, 0.72);
}

@media (max-width: 720px) {
  .access-gate[data-access-stage="code"] .access-shell {
    width: min(520px, calc(100% - 24px));
  }

  .access-gate[data-access-stage="code"] .access-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .access-gate[data-access-stage="code"] .access-card-head {
    min-height: 0;
    flex-direction: row;
    justify-content: start;
    padding: 12px;
    text-align: left;
  }

  .access-gate[data-access-stage="code"] .access-lark-mark {
    width: 50px;
    height: 50px;
  }

  .access-gate[data-access-stage="code"] .access-lark-mark img {
    width: 34px;
    height: 34px;
  }
}

/* Verification code refinements: clearer timers and softer digit controls. */
.access-code-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.access-code-form label {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.access-code-timer {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.62);
  color: #0f766e;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.access-code-timer[hidden] {
  display: none;
}

.access-code-timer strong {
  min-width: 35px;
  display: inline-flex;
  justify-content: center;
  color: #0f3f3a;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.access-timer-icon {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1.7px solid currentColor;
  border-radius: 50%;
  opacity: 0.9;
}

.access-timer-icon::before,
.access-timer-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 0;
}

.access-timer-icon::before {
  height: 4px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.access-timer-icon::after {
  height: 3px;
  transform: translate(-50%, -50%) rotate(95deg);
}

.access-code-timer[data-warning="true"],
.access-code-timer[data-expired="true"] {
  border-color: rgba(244, 63, 94, 0.22);
  background: rgba(255, 241, 242, 0.82);
  color: #be123c;
}

.access-code-timer[data-warning="true"] strong,
.access-code-timer[data-expired="true"] strong {
  color: #9f1239;
}

.access-gate[data-access-stage="code"] .access-code-grid {
  grid-template-columns: repeat(6, minmax(52px, 1fr));
  gap: 11px;
}

.access-gate[data-access-stage="code"] .access-code-grid input {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 999px;
  caret-color: transparent;
  font-variant-numeric: tabular-nums;
}

.access-gate[data-access-stage="code"] .access-code-grid input:not(:placeholder-shown),
.access-gate[data-access-stage="code"] .access-code-grid input:focus {
  background:
    radial-gradient(circle at 50% 28%, rgba(45, 212, 191, 0.12), transparent 46%),
    #ffffff;
}

.access-gate[data-access-stage="code"] .access-hero {
  display: none;
}

.access-resend-btn {
  position: relative;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.access-resend-btn .access-send-label,
.access-resend-btn .access-send-countdown {
  display: block;
}

.access-resend-btn .access-send-countdown {
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #64748b;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.access-resend-btn .access-send-countdown:not([hidden]) {
  display: inline-flex;
}

.access-resend-btn .access-send-countdown[hidden] {
  display: none;
}

.access-resend-btn .access-send-countdown .access-timer-icon {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.access-resend-btn[data-cooldown="true"] {
  color: #64748b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(241, 245, 249, 0.84));
}

.access-cancel-code-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  padding: 0 11px;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.access-gate:not([data-access-stage="code"]) .access-cancel-code-btn {
  display: none;
}

.access-cancel-code-btn:hover {
  background: rgba(15, 23, 42, 0.045);
  color: #334155;
  transform: translateY(-1px);
}

.access-cancel-code-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.access-gate[data-access-stage="code"] .access-message {
  gap: 8px;
  font-size: 12px;
}

@media (max-width: 520px) {
  .access-gate[data-access-stage="code"] .access-shell {
    width: min(440px, calc(100% - 28px));
    align-content: center;
  }

  .access-gate[data-access-stage="code"] .access-card {
    width: 100%;
    row-gap: 14px;
  }

  .access-code-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .access-code-timer {
    align-self: flex-end;
  }

  .access-gate[data-access-stage="code"] .access-code-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
  }

  .access-gate[data-access-stage="code"] .access-code-grid input {
    font-size: 24px;
  }

  .access-gate[data-access-stage="code"] .access-code-actions {
    grid-template-columns: 1fr;
  }

  .access-gate[data-access-stage="code"] .access-code-actions .access-primary,
  .access-gate[data-access-stage="code"] .access-code-actions .access-secondary {
    width: 100%;
    min-height: 48px;
    flex: 0 0 auto;
  }

  .access-cancel-code-btn {
    top: 10px;
    right: 10px;
    min-height: 28px;
    padding: 0 10px;
  }
}

.lark-feed-layout[data-mode="tasks"] {
  grid-template-columns: minmax(0, 1fr) minmax(336px, 0.42fr);
  grid-template-rows: auto;
  align-items: stretch;
  align-content: start;
  overflow: auto;
}

.lark-feed-layout[data-mode="automation"] {
  grid-template-columns: minmax(248px, 0.28fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  overflow: hidden;
}

.lark-feed-layout[data-mode="automation"] .lark-chat-list,
.lark-feed-layout[data-mode="automation"] .lark-message-list {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.flowmo-automation-sidebar,
.flowmo-automation-builder,
.flowmo-automation-canvas,
.flowmo-automation-inspector {
  min-width: 0;
  min-height: 0;
}

.flowmo-automation-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 28%),
    #ffffff;
  padding: 12px;
  overflow: hidden;
}

.flowmo-automation-side-head,
.flowmo-automation-topbar,
.flowmo-inspector-head,
.flowmo-block-editor-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flowmo-automation-side-head > div,
.flowmo-automation-topbar > div,
.flowmo-inspector-head > div {
  min-width: 0;
}

.flowmo-automation-side-head strong,
.flowmo-automation-topbar strong,
.flowmo-inspector-head strong,
.flowmo-block-palette strong,
.flowmo-block-editor-head strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-side-head span,
.flowmo-automation-topbar span,
.flowmo-block-palette p {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-icon-btn,
.flowmo-block-editor-head button,
.flowmo-automation-topbar button,
.flowmo-automation-topbar select,
.flowmo-condition-row button,
.flowmo-action-row button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 820;
}

.flowmo-automation-topbar select {
  width: 152px;
  appearance: none;
  padding: 0 28px 0 10px;
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.25L9 11.25L13 7.25' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 8px) 50%;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.flowmo-save-status {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-save-status[data-status="saved"],
[data-automation-save-status][data-status="saved"] {
  background: #ecfdf3;
  color: #047857;
}

.flowmo-save-status[data-status="pending"],
[data-automation-save-status][data-status="pending"] {
  background: #fff7ed;
  color: #c2410c;
}

.flowmo-save-status[data-status="saving"],
[data-automation-save-status][data-status="saving"] {
  background: #eff6ff;
  color: #2563eb;
}

.flowmo-save-status[data-status="error"],
[data-automation-save-status][data-status="error"] {
  background: #fef2f2;
  color: #dc2626;
}

.flowmo-automation-icon-btn {
  width: 34px;
  padding: 0;
  color: #0f766e;
}

.flowmo-automation-icon-btn svg,
.flowmo-block-editor-head button svg,
.flowmo-automation-topbar button svg,
.flowmo-condition-row button svg,
.flowmo-action-row button svg,
.flowmo-automation-card svg,
.flowmo-diagram-icon svg,
.flowmo-diagram-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-automation-topbar button:disabled,
.flowmo-automation-topbar button[aria-disabled="true"],
.flowmo-automation-topbar button[data-run-ready="false"],
.flowmo-block-editor-head button:disabled,
.flowmo-condition-row button:disabled,
.flowmo-action-row button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.flowmo-automation-topbar button[data-run-ready="false"] {
  pointer-events: none;
}

.flowmo-automation-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.flowmo-automation-card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.flowmo-automation-card:hover,
.flowmo-automation-card.active {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.flowmo-automation-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfeff, #f3f0ff);
  color: #0f766e;
}

.flowmo-automation-card strong,
.flowmo-automation-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-card strong {
  font-size: 12px;
  font-weight: 900;
}

.flowmo-automation-card small {
  margin-top: 4px;
  color: #667085;
  font-size: 11px;
  line-height: 1.25;
}

.flowmo-automation-card em {
  align-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.flowmo-automation-card em[data-enabled="true"] {
  background: #ecfdf3;
  color: #047857;
}

.flowmo-automation-home {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
}

.flowmo-automation-home-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding-bottom: 28px;
}

.flowmo-automation-home-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.flowmo-home-kicker {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.82);
  color: #2563eb;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 940;
}

.flowmo-home-kicker svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-automation-home-head h3 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.1;
}

.flowmo-automation-home-head p {
  max-width: 680px;
  margin: 7px 0 0;
  color: #667085;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.flowmo-home-new-btn {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #1f5f93;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f5f93, #0f766e);
  color: #ffffff;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(31, 95, 147, 0.26);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.flowmo-home-new-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-home-new-btn:hover,
.flowmo-home-new-btn:focus-visible {
  background: linear-gradient(135deg, #245f91, #0f766e);
  box-shadow: 0 0 0 4px rgba(47, 95, 152, 0.12), 0 12px 24px rgba(15, 23, 42, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-home-overview {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.045);
  backdrop-filter: blur(12px);
}

.flowmo-home-overview-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.flowmo-home-overview-main strong,
.flowmo-home-overview-main small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-home-overview-main strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 930;
}

.flowmo-home-overview-main small {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 720;
}

.flowmo-home-overview-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12);
}

.flowmo-home-overview-dot[data-active="true"] {
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}

.flowmo-home-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 7px;
}

.flowmo-home-stats span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.flowmo-home-stats strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.flowmo-home-stats small {
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-home-list {
  display: grid;
  gap: 10px;
}

.flowmo-automation-home-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)),
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.07), transparent 32%);
  color: #0f172a;
  text-align: left;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(14px);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.flowmo-automation-home-card:hover,
.flowmo-automation-home-card:focus-within {
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.flowmo-automation-home-card.is-edit-menu-open {
  z-index: 80;
  transform: none;
}

.flowmo-automation-home-card[data-enabled="false"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.78)),
    radial-gradient(circle at 100% 0%, rgba(148, 163, 184, 0.1), transparent 32%);
}

.flowmo-automation-home-card[data-readiness="ready"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 254, 251, 0.9)),
    radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.08), transparent 32%);
}

.flowmo-automation-home-card--add {
  width: min(620px, 100%);
  min-height: 112px;
  justify-self: center;
  grid-template-columns: minmax(0, 1fr) auto;
  border-style: dashed;
  border-color: rgba(37, 99, 235, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.84)),
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.1), transparent 36%);
}

.flowmo-automation-home-card--add .flowmo-home-card-main {
  grid-template-columns: 44px minmax(0, 1fr);
}

.flowmo-automation-home-card--add .flowmo-home-card-controls {
  align-self: start;
}

.flowmo-home-card-main {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.flowmo-home-card-main:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.16);
  outline-offset: 5px;
}

.flowmo-home-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfeff, #eff6ff);
  color: #0f766e;
}

.flowmo-automation-home-card--add .flowmo-home-card-icon {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #2563eb;
}

.flowmo-home-card-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-home-card-content {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.flowmo-home-card-content small,
.flowmo-home-card-content strong,
.flowmo-home-card-content p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flowmo-home-card-content small {
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.flowmo-home-card-content strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.18;
  white-space: nowrap;
}

.flowmo-home-card-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.flowmo-home-card-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.flowmo-home-status-pill,
.flowmo-home-edit-btn,
.flowmo-home-enable-btn {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 920;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-home-edit-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 90;
}

.flowmo-home-edit-btn {
  border: 1px solid rgba(129, 140, 248, 0.24);
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  padding: 0 10px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.04);
}

.flowmo-home-edit-btn:hover,
.flowmo-home-edit-btn:focus-visible,
.flowmo-home-edit-btn[aria-expanded="true"] {
  border-color: rgba(14, 116, 144, 0.42);
  background: #eef8fb;
  color: #075985;
  outline: none;
}

.flowmo-home-edit-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 156px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

.flowmo-home-edit-menu[hidden] {
  display: none;
}

.flowmo-home-edit-menu button {
  min-height: 32px;
  justify-content: flex-start;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  cursor: pointer;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
}

.flowmo-home-edit-menu button:hover,
.flowmo-home-edit-menu button:focus-visible {
  background: #eef8fb;
  color: #075985;
  outline: none;
}

.flowmo-home-edit-menu [data-automation-delete-flow] {
  color: #b91c1c;
}

.flowmo-home-edit-menu [data-automation-delete-flow]:hover,
.flowmo-home-edit-menu [data-automation-delete-flow]:focus-visible {
  background: #fef2f2;
  color: #991b1b;
}

.flowmo-home-status-pill {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 9px;
  background: #f1f5f9;
  color: #64748b;
}

.flowmo-home-status-pill[data-enabled="true"],
.flowmo-home-status-pill[data-enabled="new"] {
  background: #ecfdf3;
  color: #047857;
}

.flowmo-home-enable-btn {
  min-width: 74px;
  border: 1px solid rgba(203, 213, 225, 0.96);
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  padding: 0 11px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.04);
}

.flowmo-home-enable-btn[aria-pressed="false"] {
  border-color: rgba(20, 184, 166, 0.28);
  color: #0f766e;
}

.flowmo-home-enable-btn:hover,
.flowmo-home-enable-btn:focus-visible {
  border-color: rgba(37, 99, 235, 0.36);
  background: #ffffff;
  color: #2563eb;
}

.flowmo-home-card-chips {
  grid-column: 1 / -1;
  align-self: end;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-home-card-chips b {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 850;
}

.flowmo-block-palette {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.86);
}

.flowmo-block-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.flowmo-block-palette-grid button {
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background: #fbfdff;
  color: #334155;
  text-align: left;
}

.flowmo-block-palette-grid span {
  color: #0f766e;
}

.flowmo-block-palette-grid strong {
  font-size: 11px;
}

.flowmo-automation-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  overflow: auto;
}

.flowmo-automation-canvas {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}

.flowmo-automation-canvas {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: visible;
}

.flowmo-automation-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(410px, 1.22fr);
  gap: 14px;
  min-height: 560px;
  padding: 14px;
  background:
    radial-gradient(circle at 78% 10%, rgba(96, 165, 250, 0.08), transparent 32%),
    radial-gradient(circle at 10% 88%, rgba(45, 212, 191, 0.08), transparent 34%),
    linear-gradient(180deg, #fbfdff, #ffffff);
}

.flowmo-automation-result-dock {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 12px;
  padding: 0 14px 14px;
}

.flowmo-automation-utility-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  padding: 0 14px 14px;
}

.flowmo-flow-health {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.08), transparent 28%),
    #ffffff;
}

.flowmo-flow-health-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.flowmo-flow-health-head > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ecfeff;
  color: #0f766e;
}

.flowmo-flow-health[data-readiness="blocked"] .flowmo-flow-health-head > span {
  background: #fef2f2;
  color: #dc2626;
}

.flowmo-flow-health[data-readiness="pending"] .flowmo-flow-health-head > span {
  background: #eff6ff;
  color: #2563eb;
}

.flowmo-flow-health-head svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-flow-health-head small,
.flowmo-flow-health-head strong,
.flowmo-flow-health-head p {
  min-width: 0;
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-flow-health-head small {
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-flow-health-head strong {
  color: #101828;
  font-size: 13px;
  font-weight: 930;
}

.flowmo-flow-health-head p {
  color: #667085;
  font-size: 11px;
  font-weight: 650;
}

.flowmo-flow-health-head em {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.flowmo-flow-health-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.flowmo-flow-health-grid article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #f8fafc;
}

.flowmo-flow-health-grid article > span {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.flowmo-flow-health-grid article[data-status="ready"] > span {
  background: #dcfce7;
  color: #047857;
}

.flowmo-flow-health-grid article[data-status="blocked"] > span {
  background: #fee2e2;
  color: #dc2626;
}

.flowmo-flow-health-grid article[data-status="pending"] > span {
  background: #dbeafe;
  color: #2563eb;
}

.flowmo-flow-health-grid strong,
.flowmo-flow-health-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-flow-health-grid strong {
  color: #101828;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-flow-health-grid small {
  color: #667085;
  font-size: 10px;
  font-weight: 650;
}

.flowmo-automation-result-inline {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.flowmo-automation-topbar {
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff, #fbfdff);
}

.flowmo-automation-topbar > div:last-child {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
}

.flowmo-automation-topbar button {
  padding: 0 10px;
}

.flowmo-automation-topbar small {
  display: block;
  max-width: min(560px, 58vw);
  margin-top: 4px;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-run-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background:
    radial-gradient(circle at 8% 20%, rgba(45, 212, 191, 0.09), transparent 30%),
    linear-gradient(180deg, #fbfdff, #ffffff);
}

.flowmo-automation-run-preview span {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.flowmo-automation-run-preview svg {
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  color: #0f766e;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-automation-run-preview strong,
.flowmo-automation-run-preview small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-run-preview strong {
  color: #101828;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-automation-run-preview small {
  color: #667085;
  font-size: 10px;
  font-weight: 800;
}

.flowmo-automation-diagram {
  position: relative;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 8px;
  overflow: auto;
  background:
    radial-gradient(circle at 72% 18%, rgba(96, 165, 250, 0.1), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(45, 212, 191, 0.1), transparent 32%),
    #fbfdff;
}

.flowmo-automation-test-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 28%),
    #ffffff;
}

.flowmo-automation-run-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fbfdff;
}

.flowmo-automation-run-panel.is-busy {
  animation: flowmoTestPulse 1.2s ease-in-out infinite;
}

.flowmo-automation-run-panel > strong,
.flowmo-automation-run-panel > span {
  display: block;
}

.flowmo-automation-run-panel > strong {
  color: #101828;
  font-size: 13px;
  font-weight: 920;
}

.flowmo-automation-run-panel > span {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

.flowmo-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flowmo-run-head strong,
.flowmo-run-empty strong,
.flowmo-run-item strong {
  display: block;
  color: #101828;
  font-size: 12px;
  font-weight: 920;
  line-height: 1.25;
}

.flowmo-run-head span,
.flowmo-run-empty small,
.flowmo-run-item span,
.flowmo-run-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-run-list {
  display: grid;
  gap: 8px;
}

.flowmo-run-empty,
.flowmo-run-item {
  min-width: 0;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #ffffff;
}

.flowmo-run-empty {
  padding: 10px;
}

.flowmo-run-item {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.flowmo-run-item > em {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.flowmo-run-item[data-status="skipped"] > em {
  background: #f1f5f9;
  color: #64748b;
}

.flowmo-run-actions {
  display: grid;
  gap: 6px;
}

.flowmo-run-actions p {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  padding: 7px;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 760;
}

.flowmo-run-actions p > span {
  grid-row: 1 / 3;
  padding: 3px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-run-actions p[data-status="executed"] > span {
  background: #ecfdf3;
  color: #047857;
}

.flowmo-run-actions p[data-status="pending_approval"] > span {
  background: #fff7ed;
  color: #c2410c;
}

.flowmo-run-actions p small {
  grid-column: 2;
}

.flowmo-automation-test-panel > strong {
  color: #101828;
  font-size: 13px;
  font-weight: 920;
}

.flowmo-automation-test-panel > span {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.flowmo-automation-test-panel.is-busy {
  animation: flowmoTestPulse 1.2s ease-in-out infinite;
}

@keyframes flowmoTestPulse {
  0%, 100% { background-color: #ffffff; }
  50% { background-color: #f0fdfa; }
}

.flowmo-test-head,
.flowmo-test-event {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.flowmo-test-head {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
}

.flowmo-test-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ecfdf3;
  color: #0f766e;
}

.flowmo-automation-test-panel.is-fail .flowmo-test-head > span,
.flowmo-automation-test-panel.is-error .flowmo-test-head > span {
  background: #fff1f2;
  color: #be123c;
}

.flowmo-test-head svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-test-head strong,
.flowmo-test-event strong,
.flowmo-test-grid strong {
  display: block;
  min-width: 0;
  color: #101828;
  font-size: 12px;
  font-weight: 920;
  line-height: 1.25;
}

.flowmo-test-head small,
.flowmo-test-event span,
.flowmo-test-event small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-test-event {
  padding: 9px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fbfdff;
}

.flowmo-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.flowmo-test-grid > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.flowmo-test-grid p {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.flowmo-test-grid p > span {
  grid-row: 1 / 3;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-test-grid p[data-pass="false"] > span {
  background: #fff1f2;
  color: #be123c;
}

.flowmo-test-grid p small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-diagram-block,
.flowmo-diagram-action-stack {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.flowmo-automation-stage .flowmo-diagram-block,
.flowmo-automation-stage .flowmo-diagram-action-stack {
  width: 100%;
}

.flowmo-diagram-block,
.flowmo-diagram-action-stack {
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.flowmo-diagram-block:hover,
.flowmo-diagram-action-stack:hover,
.flowmo-diagram-block.is-active,
.flowmo-diagram-action-stack.is-active {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 18px 44px rgba(15, 118, 110, 0.13);
  transform: translateY(-1px);
}

.flowmo-diagram-block.is-active::after,
.flowmo-diagram-action-stack.is-active::after {
  content: "";
  position: absolute;
  inset: 7px auto 7px 7px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(#14b8a6, #60a5fa);
}

.flowmo-diagram-block {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 44px 13px 13px;
}

.flowmo-diagram-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ccfbf1, #dbeafe);
  color: #0f766e;
}

.flowmo-diagram-block small,
.flowmo-diagram-action-stack > span {
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flowmo-diagram-block strong,
.flowmo-diagram-action strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-diagram-block p,
.flowmo-diagram-action small {
  margin: 3px 0 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-automation-connector {
  width: 3px;
  height: 30px;
  margin: -2px auto;
  border-radius: 999px;
  background: linear-gradient(#8ddfd3, #93c5fd);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.06);
}

.flowmo-diagram-action-stack {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.flowmo-diagram-toolbar {
  width: min(520px, 100%);
  margin: 2px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.flowmo-diagram-toolbar button {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-diagram-toolbar button:hover {
  border-color: rgba(20, 184, 166, 0.45);
  color: #0f766e;
}

.flowmo-diagram-toolbar svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-diagram-action {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 40px 9px 9px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.06), transparent 30%);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.flowmo-diagram-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.flowmo-diagram-delete:hover,
.flowmo-diagram-delete:focus-visible {
  border-color: rgba(239, 68, 68, 0.34);
  background: #fef2f2;
  color: #dc2626;
  outline: none;
  transform: translateY(-1px);
}

.flowmo-diagram-delete svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-diagram-action:hover,
.flowmo-diagram-action:focus-visible {
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-diagram-action > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f8fafc;
  color: #2563eb;
}

.flowmo-automation-inspector {
  display: grid;
  align-content: start;
  gap: 14px;
  max-height: min(700px, calc(100vh - 300px));
  padding: 16px;
  border: 1px solid rgba(125, 211, 252, 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.98));
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  overflow: auto;
}

.flowmo-inspector-head {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}

.flowmo-inspector-head > div > small {
  display: block;
  margin-bottom: 4px;
  color: #0f766e;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.flowmo-inspector-head > div > span {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.flowmo-inspector-head .flowmo-switch {
  flex: 0 0 auto;
  grid-template-columns: auto auto;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background: #f0fdfa;
}

.flowmo-inspector-head .flowmo-switch span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 8px;
  background: #f8fafc;
}

.flowmo-inspector-tabs button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-inspector-tabs button[aria-selected="true"] {
  border-color: rgba(20, 184, 166, 0.38);
  background: #ffffff;
  color: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.flowmo-inspector-section {
  display: none;
  min-width: 0;
}

.flowmo-inspector-section.is-active {
  display: grid;
  gap: 12px;
  animation: flowmoInspectorPageIn 220ms ease both;
}

@keyframes flowmoInspectorPageIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flowmo-automation-inspector label,
.flowmo-block-editor,
.flowmo-approval-toggle {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.flowmo-automation-inspector label > span,
.flowmo-block-editor-head strong {
  color: #475467;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-automation-inspector input,
.flowmo-automation-inspector select,
.flowmo-automation-inspector textarea {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.98);
  color: #101828;
  font-size: 12px;
  font-weight: 800;
  outline: none;
  padding: 0 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.flowmo-automation-inspector select {
  appearance: none;
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.25L9 11.25L13 7.25' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  cursor: pointer;
  padding-right: 38px;
}

.flowmo-automation-inspector input:focus,
.flowmo-automation-inspector select:focus,
.flowmo-automation-inspector textarea:focus {
  border-color: rgba(20, 184, 166, 0.72);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.flowmo-switch,
.flowmo-approval-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.flowmo-switch input,
.flowmo-approval-toggle input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: #0f766e;
}

.flowmo-block-editor {
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 34%),
    #fbfdff;
}

.flowmo-trigger-filter-editor {
  margin-top: 2px;
}

.flowmo-trigger-config-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.flowmo-block-editor-head button {
  min-height: 30px;
  padding: 0 8px;
  color: #0f766e;
}

.flowmo-condition-palette,
.flowmo-action-palette {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.flowmo-condition-palette {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flowmo-action-palette {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flowmo-condition-palette button,
.flowmo-action-palette button {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.75);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  padding: 7px 8px;
  text-align: left;
}

.flowmo-condition-palette button:hover,
.flowmo-action-palette button:hover {
  border-color: rgba(20, 184, 166, 0.45);
  background: #f8ffff;
}

.flowmo-action-palette span {
  flex: 0 0 auto;
  color: #0f766e;
}

.flowmo-action-palette svg {
  width: 14px;
  height: 14px;
}

.flowmo-condition-palette strong,
.flowmo-action-palette strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-condition-row,
.flowmo-action-row {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.flowmo-condition-row {
  grid-template-columns: minmax(0, 0.9fr) 94px minmax(0, 1fr) 32px;
}

.flowmo-action-row {
  grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr) 32px;
}

.flowmo-action-config {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.72);
}

.flowmo-action-config label {
  margin: 0;
}

.flowmo-action-config label:has(textarea),
.flowmo-action-config .flowmo-action-check,
.flowmo-action-config .flowmo-lark-recipient-picker {
  grid-column: 1 / -1;
}

.flowmo-action-config textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.flowmo-action-config--delivery {
  grid-template-columns: minmax(0, 1fr);
}

.flowmo-action-config-group {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 7px;
}

.flowmo-action-config-group-title {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.flowmo-automation-config-form .flowmo-action-config .flowmo-action-config-group-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
}

.flowmo-automation-config-form .flowmo-action-config-group-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
}

.flowmo-action-config-group-body {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flowmo-action-config-group-body > label:has(textarea),
.flowmo-action-config-group-body > .flowmo-lark-recipient-picker,
.flowmo-action-config-group-body > .flowmo-template-tokenbar,
.flowmo-action-config-group-body > .flowmo-approval-token-picker,
.flowmo-action-config-group-body > .flowmo-approval-extra-config,
.flowmo-action-config-group-body > .flowmo-inline-toggle--wide {
  grid-column: 1 / -1;
}

.flowmo-approval-extra-config {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.flowmo-approval-extra-config[hidden] {
  display: none;
}

.flowmo-approval-token-picker,
.flowmo-action-preview-stack {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.flowmo-action-preview-stack {
  grid-column: 1 / -1;
}

.flowmo-approval-token-picker > span {
  color: #111827;
  font-size: 17px;
  font-weight: 850;
}

.flowmo-approval-token-options {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
}

.flowmo-approval-token-options button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font-size: 11px;
  font-weight: 850;
  padding: 0 10px;
  white-space: nowrap;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.flowmo-approval-token-options button[aria-pressed="true"] {
  border-color: rgba(15, 118, 110, 0.52);
  background: #e6fffb;
  color: #075e57;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

.flowmo-approval-token-options button:hover,
.flowmo-approval-token-options button:focus-visible {
  border-color: rgba(47, 95, 152, 0.42);
  color: #204974;
  box-shadow: 0 0 0 3px rgba(47, 95, 152, 0.1);
}

.flowmo-condition-config {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.flowmo-condition-config .flowmo-action-config-group-body > label {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: max-content minmax(126px, max-content);
  align-items: center;
  column-gap: 15px;
}

.flowmo-condition-config .flowmo-action-config-group-body > label > span {
  min-width: 0;
  white-space: nowrap;
}

.flowmo-condition-value-field {
  grid-column: 1 / -1;
}

.flowmo-condition-value-empty {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px dashed #cfd9e8;
  border-radius: 7px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
  padding: 0 10px;
}

.flowmo-condition-value-compact {
  min-width: 0;
  display: block;
}

.flowmo-condition-preview {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 10px;
  background: #ffffff;
}

.flowmo-condition-preview[data-status="blocked"] {
  border-color: rgba(251, 113, 133, 0.36);
  background: #fff7f7;
}

.flowmo-condition-preview header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.flowmo-condition-preview header span {
  color: #667085;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.flowmo-condition-preview header strong {
  color: #667085;
  font-size: 11px;
  font-weight: 950;
}

.flowmo-condition-preview header strong[data-status="ready"] {
  color: #0f766e;
}

.flowmo-condition-preview header strong[data-status="blocked"] {
  color: #be123c;
}

.flowmo-condition-preview > p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.42;
}

.flowmo-condition-preview-rule {
  min-width: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.flowmo-condition-preview-rule small {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-condition-preview-rule span {
  min-width: 0;
  color: #111827;
  font-size: 12px;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.flowmo-condition-preview-result {
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  font-weight: 820;
  padding: 6px 8px;
}

.flowmo-condition-preview-result[data-status="ready"] {
  background: #f0fdfa;
  color: #0f766e;
}

.flowmo-condition-preview-result[data-status="blocked"] {
  background: #fff1f2;
  color: #be123c;
}

.flowmo-template-tokenbar {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
}

.flowmo-template-tokenbar span {
  flex: 0 0 auto;
  color: #111827;
  font-size: 17px;
  font-weight: 850;
}

.flowmo-template-tokenbar button {
  flex: 0 0 auto;
  min-height: 24px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font-size: 11px;
  font-weight: 850;
  padding: 0 9px;
  white-space: nowrap;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.flowmo-template-tokenbar button:hover,
.flowmo-template-tokenbar button:focus-visible {
  border-color: rgba(47, 95, 152, 0.42);
  color: #204974;
  box-shadow: 0 0 0 3px rgba(47, 95, 152, 0.1);
}

.flowmo-template-tokenbar button[aria-pressed="true"] {
  border-color: rgba(15, 118, 110, 0.52);
  background: #e6fffb;
  color: #075e57;
}

.flowmo-preview-open-button {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 95, 152, 0.18);
  border-radius: 8px;
  background: #f8fbff;
  color: #204974;
  text-align: left;
}

.flowmo-preview-open-button:hover,
.flowmo-preview-open-button:focus-visible {
  border-color: rgba(47, 95, 152, 0.36);
  background: #eef6ff;
  box-shadow: 0 0 0 3px rgba(47, 95, 152, 0.1);
}

.flowmo-preview-open-button--approval {
  justify-self: end;
  width: min(340px, 100%);
  min-height: 38px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 8px;
  padding: 7px 10px;
  border-color: rgba(20, 184, 166, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.98)),
    #f8fbff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.flowmo-preview-open-button--approval:hover,
.flowmo-preview-open-button--approval:focus-visible {
  border-color: rgba(20, 184, 166, 0.42);
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.98), rgba(204, 251, 241, 0.98)),
    #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1), 0 12px 24px rgba(15, 23, 42, 0.06);
}

.flowmo-preview-open-button > span {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8ffff);
  color: #0f766e;
}

.flowmo-preview-open-button--approval > span {
  width: 26px;
  height: 26px;
  border-color: rgba(20, 184, 166, 0.22);
  border-radius: 9px;
  background: #ecfdf5;
}

.flowmo-preview-open-button--approval strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-preview-open-button--approval small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-preview-open-button > span svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-preview-open-button strong,
.flowmo-preview-open-button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-preview-open-button strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-preview-open-button small {
  color: #667085;
  font-size: 11px;
  font-weight: 720;
}

.settings-modal.flowmo-preview-modal {
  width: min(590px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 16px;
  background: #fbfdff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.flowmo-preview-modal .modal-header {
  padding: 24px 28px 18px;
  border-bottom-color: rgba(226, 232, 240, 0.9);
  background: #fbfdff;
}

.flowmo-preview-modal .flowmo-modal-kicker {
  font-family: "Nunito", "Aptos Rounded", "Segoe UI Rounded", "Trebuchet MS", system-ui, sans-serif;
  color: #1f2a3a;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: none;
}

.flowmo-preview-modal .modal-header h2 {
  color: #111827;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.flowmo-preview-modal .modal-header .icon-button {
  border-color: rgba(45, 118, 145, 0.22);
  border-radius: 8px;
  background: #f8fafc;
  color: #1f2a3a;
}

.flowmo-preview-modal .modal-header .icon-button:hover,
.flowmo-preview-modal .modal-header .icon-button:focus-visible {
  border-color: rgba(14, 116, 144, 0.42);
  background: #eef8fb;
  color: #075985;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.11);
}

.flowmo-preview-modal-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 28px;
  overflow: auto;
  background: #f6f9fc;
}

.flowmo-preview-modal-body .flowmo-delivery-preview {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.flowmo-preview-modal-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px dashed rgba(203, 213, 225, 0.92);
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
}

.flowmo-preview-modal-empty span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f5f9;
  color: #2f5f98;
}

.flowmo-preview-modal-empty strong {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.flowmo-preview-modal-empty p {
  max-width: 340px;
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.flowmo-preview-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.86);
  background: #fbfdff;
}

.flowmo-preview-modal-footer .secondary-button {
  min-height: 42px;
  border-color: rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: #f8fafc;
  color: #1f2a3a;
  font-size: 12px;
  font-weight: 900;
  padding: 0 16px;
}

.flowmo-preview-modal-footer .secondary-button:hover,
.flowmo-preview-modal-footer .secondary-button:focus-visible {
  border-color: rgba(14, 116, 144, 0.34);
  background: #eef8fb;
  color: #075985;
  box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.11);
}

.flowmo-delivery-preview-card {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.flowmo-delivery-preview-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.flowmo-delivery-preview-heading span {
  color: #667085;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.flowmo-delivery-preview-heading strong {
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
}

.flowmo-delivery-preview {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background: #fbfdff;
}

.flowmo-delivery-preview--approval {
  border-color: rgba(14, 116, 144, 0.22);
  background: #fbfdff;
}

.flowmo-delivery-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flowmo-delivery-preview header span,
.flowmo-delivery-preview-files > small {
  color: #667085;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.flowmo-delivery-preview header strong {
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
}

.flowmo-delivery-preview-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.flowmo-delivery-preview-row small {
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.flowmo-delivery-preview-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 12px;
  font-weight: 820;
}

.flowmo-delivery-preview-message {
  min-width: 0;
  max-height: 168px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 7px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.flowmo-delivery-context-preview {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 9px;
  background: #f8fffd;
}

.flowmo-delivery-context-preview strong {
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
}

.flowmo-delivery-context-preview p {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}

.flowmo-delivery-context-preview span,
.flowmo-delivery-context-preview small {
  min-width: 0;
  color: #475467;
  font-size: 11px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.flowmo-delivery-context-preview span {
  color: #667085;
  font-weight: 900;
}

.flowmo-delivery-preview-files {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.flowmo-delivery-preview-files > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-delivery-preview-chip {
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 11px;
  font-weight: 850;
  padding: 0 9px;
  overflow-wrap: anywhere;
}

.flowmo-delivery-preview-chip[data-empty="true"] {
  border-color: rgba(203, 213, 225, 0.9);
  background: #f8fafc;
  color: #667085;
}

.flowmo-action-check {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 10px;
  background: #f8fffd;
}

.flowmo-action-check input {
  width: auto;
  min-height: auto;
}

.flowmo-lark-recipient-picker {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.flowmo-lark-recipient-search {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.flowmo-lark-recipient-selected {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 10px;
  background: #f8fffd;
}

.flowmo-lark-recipient-selected[data-empty="true"] {
  border-color: rgba(203, 213, 225, 0.84);
  background: #f8fafc;
}

.flowmo-lark-recipient-selected span,
.flowmo-lark-recipient-selected small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-lark-recipient-selected span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-lark-recipient-selected small {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.flowmo-lark-recipient-results {
  position: absolute;
  z-index: 30;
  top: 68px;
  left: 0;
  right: 0;
  max-height: 238px;
  overflow: auto;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.14);
}

.flowmo-lark-recipient-option {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  padding: 7px;
  text-align: left;
}

.flowmo-lark-recipient-option:hover,
.flowmo-lark-recipient-option:focus-visible {
  border-color: rgba(20, 184, 166, 0.2);
  background: #f0fdfa;
}

.flowmo-lark-recipient-option > span {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 950;
}

.flowmo-lark-recipient-option strong,
.flowmo-lark-recipient-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-lark-recipient-option strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-lark-recipient-option small,
.flowmo-lark-recipient-empty {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.flowmo-lark-recipient-empty {
  padding: 10px;
}

.flowmo-lark-recipient-empty[data-tone="error"] {
  color: #b42318;
}

.flowmo-automation-config-backdrop,
.flowmo-preview-modal-backdrop,
.flowmo-approval-modal-backdrop {
  z-index: 1200;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(5px) saturate(104%);
  cursor: default;
}

/* Flowmo automation builder: visual canvas redesign */
.automation-workspace:has(.flowmo-automation-builder) .automation-hero {
  display: none;
}

.automation-workspace .flowmo-automation-canvas--builder {
  min-height: 100%;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(59, 130, 246, 0.16), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(16, 185, 129, 0.18), transparent 34%),
    radial-gradient(circle at 88% 86%, rgba(168, 85, 247, 0.13), transparent 34%),
    linear-gradient(135deg, #f8fdff 0%, #f7fffb 48%, #fbf8ff 100%);
}

.automation-workspace .flowmo-automation-canvas--builder::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.16) 1px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(115deg, transparent 0 18%, rgba(59, 130, 246, 0.06) 34%, transparent 52% 100%);
  opacity: 0.72;
  animation: flowmoCanvasDotsDrift 18s ease-in-out infinite alternate;
}

.automation-workspace .flowmo-automation-canvas--builder::after {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 125deg at 18% 45%, transparent, rgba(20, 184, 166, 0.12), transparent 20%),
    conic-gradient(from 290deg at 92% 26%, transparent, rgba(96, 165, 250, 0.12), transparent 18%),
    conic-gradient(from 10deg at 72% 92%, transparent, rgba(168, 85, 247, 0.1), transparent 18%);
  filter: blur(8px);
  opacity: 0.85;
  animation: flowmoBuilderAura 12s ease-in-out infinite alternate;
}

.flowmo-builder-header {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.13), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(96, 165, 250, 0.1), transparent 34%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(16px);
}

.flowmo-builder-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.flowmo-builder-title {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.flowmo-builder-breadcrumb {
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #2563eb;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 950;
}

.flowmo-builder-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flowmo-builder-title-row strong {
  min-width: 0;
  max-width: min(520px, 100%);
  overflow: hidden;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-builder-title p {
  max-width: 720px;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-builder-state,
.flowmo-diagram-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 0 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-builder-state i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
}

.flowmo-builder-state[data-enabled="false"],
.flowmo-diagram-status[data-state="pending"],
.flowmo-diagram-status[data-state="paused"] {
  border-color: rgba(245, 158, 11, 0.18);
  background: #fff7ed;
  color: #b45309;
}

.flowmo-builder-header .flowmo-board-save-text {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  padding: 0 10px;
  font-size: 11px;
}

.flowmo-builder-header .flowmo-board-save-text svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-builder-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.flowmo-builder-switch {
  width: 54px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.flowmo-builder-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flowmo-builder-switch span {
  width: 54px;
  height: 30px;
  position: relative;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.flowmo-builder-switch span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transition: transform 180ms ease;
}

.flowmo-builder-switch input:checked + span {
  border-color: rgba(5, 150, 105, 0.52);
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.18);
}

.flowmo-builder-switch input:checked + span::before {
  transform: translateX(24px);
}

.flowmo-builder-control,
.flowmo-builder-more,
.flowmo-flow-start button,
.flowmo-flow-add-action,
.flowmo-flow-empty-action,
.flowmo-flow-plus-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.flowmo-builder-control {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 14px;
}

.flowmo-builder-control--ghost:hover:not(:disabled),
.flowmo-builder-control--ghost:focus-visible,
.flowmo-builder-more:hover,
.flowmo-builder-more:focus-visible,
.flowmo-flow-start button:hover,
.flowmo-flow-start button:focus-visible,
.flowmo-flow-add-action:hover,
.flowmo-flow-add-action:focus-visible {
  border-color: rgba(20, 184, 166, 0.48);
  background: #ffffff;
  color: #0f766e;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1), 0 12px 24px rgba(15, 23, 42, 0.07);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-builder-control--primary {
  border-color: rgba(5, 150, 105, 0.36);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.2);
}

.flowmo-builder-control--primary:hover:not(:disabled),
.flowmo-builder-control--primary:focus-visible {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 18px 34px rgba(5, 150, 105, 0.24);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-builder-control:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.flowmo-builder-more {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  padding: 0;
}

.flowmo-builder-control svg,
.flowmo-builder-more svg,
.flowmo-flow-start button svg,
.flowmo-flow-add-action svg,
.flowmo-flow-empty-action svg,
.flowmo-flow-plus-row button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-builder-control--ghost svg {
  fill: currentColor;
  stroke: none;
}

.automation-workspace .flowmo-automation-stage--builder {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
}

.automation-workspace .flowmo-automation-diagram--builder {
  position: relative;
  min-height: 100%;
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 30px clamp(18px, 4vw, 56px) 34px;
  border: 1px solid rgba(203, 213, 225, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
    radial-gradient(circle at 12% 8%, rgba(20, 184, 166, 0.08), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(96, 165, 250, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: auto;
}

.flowmo-canvas-toolrail,
.flowmo-canvas-minimap {
  position: sticky;
  z-index: 4;
  border: 1px solid rgba(203, 213, 225, 0.74);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.flowmo-canvas-toolrail {
  top: 28px;
  left: 0;
  width: 42px;
  display: grid;
  gap: 8px;
  border-radius: 14px;
  padding: 8px;
  margin: 204px 0 -330px;
}

.flowmo-canvas-toolrail span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
}

.flowmo-canvas-minimap {
  top: 28px;
  justify-self: end;
  width: 72px;
  display: grid;
  gap: 8px;
  border-radius: 16px;
  padding: 12px;
  margin: 0 0 -100px;
}

.flowmo-canvas-minimap span {
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
}

.flowmo-canvas-minimap span:nth-child(3) {
  height: 16px;
  border: 1px solid rgba(59, 130, 246, 0.7);
  background: rgba(219, 234, 254, 0.8);
}

.flowmo-flow-start {
  width: min(520px, 100%);
  margin: 0 auto 10px;
}

.flowmo-flow-start button,
.flowmo-flow-add-action {
  min-height: 34px;
  border-style: dashed;
  border-color: rgba(20, 184, 166, 0.46);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.72);
  color: #0f766e;
  padding: 0 14px;
}

.flowmo-flow-node {
  width: min(520px, 100%);
  margin: 0 auto;
}

.flowmo-automation-diagram--builder .flowmo-diagram-block {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 0% 0%, var(--flowmo-block-glow, rgba(20, 184, 166, 0.08)), transparent 42%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  padding: 16px 92px 16px 16px;
  animation: flowmoNodeReveal 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.flowmo-automation-diagram--builder .flowmo-diagram-block--action-card {
  animation-delay: calc(80ms * var(--flowmo-action-index, 0));
}

.flowmo-automation-diagram--builder .flowmo-diagram-block:hover,
.flowmo-automation-diagram--builder .flowmo-diagram-block:focus-visible,
.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active {
  border-color: rgba(59, 130, 246, 0.48);
  box-shadow:
    0 22px 52px rgba(59, 130, 246, 0.14),
    0 0 0 4px rgba(59, 130, 246, 0.08);
  outline: none;
  transform: translateY(-2px);
}

.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active::after {
  inset: auto auto -1px 18px;
  width: calc(100% - 36px);
  height: 3px;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
}

.flowmo-automation-diagram--builder .flowmo-diagram-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--flowmo-icon-bg, linear-gradient(135deg, #ede9fe, #dbeafe));
  color: var(--flowmo-icon-color, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.flowmo-automation-diagram--builder .flowmo-diagram-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-automation-diagram--builder .flowmo-diagram-block small {
  color: #0f766e;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.flowmo-automation-diagram--builder .flowmo-diagram-block strong {
  font-size: 15px;
  font-weight: 950;
}

.flowmo-automation-diagram--builder .flowmo-diagram-block p {
  max-width: 100%;
  font-size: 12px;
  white-space: nowrap;
}

.flowmo-diagram-block--violet {
  --flowmo-block-glow: rgba(139, 92, 246, 0.12);
  --flowmo-icon-bg: linear-gradient(135deg, #f3e8ff, #dbeafe);
  --flowmo-icon-color: #7c3aed;
}

.flowmo-diagram-block--blue {
  --flowmo-block-glow: rgba(59, 130, 246, 0.12);
  --flowmo-icon-bg: linear-gradient(135deg, #dbeafe, #eff6ff);
  --flowmo-icon-color: #2563eb;
}

.flowmo-diagram-block--teal {
  --flowmo-block-glow: rgba(20, 184, 166, 0.13);
  --flowmo-icon-bg: linear-gradient(135deg, #ccfbf1, #ecfeff);
  --flowmo-icon-color: #0f766e;
}

.flowmo-diagram-block--purple {
  --flowmo-block-glow: rgba(168, 85, 247, 0.12);
  --flowmo-icon-bg: linear-gradient(135deg, #f3e8ff, #ede9fe);
  --flowmo-icon-color: #8b5cf6;
}

.flowmo-diagram-block--amber {
  --flowmo-block-glow: rgba(245, 158, 11, 0.12);
  --flowmo-icon-bg: linear-gradient(135deg, #ffedd5, #fff7ed);
  --flowmo-icon-color: #ea580c;
}

.flowmo-automation-diagram--builder .flowmo-diagram-status {
  position: absolute;
  top: 16px;
  right: 46px;
}

.flowmo-flow-plus-row {
  position: relative;
  width: min(900px, 100%);
  min-height: 86px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  margin: 0 auto;
}

.flowmo-flow-plus-row > span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.9), rgba(96, 165, 250, 0.86));
  box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.06);
  transform-origin: top;
  animation: flowmoLineDrawY 700ms ease-out both;
}

.flowmo-flow-plus-row button {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border-color: rgba(96, 165, 250, 0.52);
  background: #ffffff;
  color: #2563eb;
  padding: 0;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
  animation: flowmoPlusPulse 2.6s ease-in-out infinite;
}

.flowmo-flow-plus-row em {
  position: relative;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #64748b;
  padding: 4px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.flowmo-flow-actions {
  position: relative;
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin: 0 auto;
  padding-top: 26px;
}

.flowmo-flow-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(12%, 28px);
  right: max(12%, 28px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.88), rgba(59, 130, 246, 0.86), rgba(139, 92, 246, 0.72));
  transform-origin: center;
  animation: flowmoLineDrawX 760ms 120ms ease-out both;
}

.flowmo-flow-actions[data-single="true"]::before,
.flowmo-flow-actions.is-empty::before {
  left: 50%;
  right: auto;
  width: 2px;
}

.flowmo-flow-actions .flowmo-diagram-block--action-card::before {
  content: "";
  position: absolute;
  top: -27px;
  left: 50%;
  width: 2px;
  height: 27px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.84), rgba(20, 184, 166, 0.72));
  transform-origin: top;
  animation: flowmoLineDrawY 520ms 180ms ease-out both;
}

.flowmo-flow-empty-action {
  min-height: 116px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  border-style: dashed;
  border-color: rgba(59, 130, 246, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  color: #0f172a;
  padding: 16px;
  text-align: left;
}

.flowmo-flow-empty-action span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #dbeafe;
  color: #2563eb;
}

.flowmo-flow-empty-action strong,
.flowmo-flow-empty-action small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flowmo-flow-empty-action strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.flowmo-flow-empty-action small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.flowmo-flow-add-action {
  width: max-content;
  margin: 28px auto 0;
}

.flowmo-automation-diagram--builder .flowmo-diagram-delete {
  top: 14px;
  right: 14px;
  border-radius: 10px;
}

.settings-modal.flowmo-automation-config-modal {
  width: min(720px, calc(100vw - 34px));
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.98)),
    radial-gradient(circle at 8% 0%, rgba(20, 184, 166, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 30%);
  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.18);
  animation: flowmoModalRise 220ms ease-out both;
}

.flowmo-automation-config-modal .modal-header {
  min-height: 92px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.1), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(139, 92, 246, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.62);
}

.flowmo-config-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.flowmo-config-title-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #ccfbf1, #dbeafe);
  color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 14px 24px rgba(15, 118, 110, 0.08);
}

.flowmo-config-title-icon--action,
.flowmo-config-title-icon--add {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #2563eb;
}

.flowmo-config-title-icon--trigger {
  background: linear-gradient(135deg, #f3e8ff, #dbeafe);
  color: #7c3aed;
}

.flowmo-config-title-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-automation-config-modal .modal-header h2 {
  font-size: 20px;
  font-weight: 950;
}

.flowmo-automation-config-modal .modal-header p {
  max-width: 560px;
  font-size: 12.5px;
}

.flowmo-automation-config-modal .modal-header .icon-button {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
}

.flowmo-automation-config-form {
  gap: 16px;
  padding: 18px 20px 0;
  background: rgba(255, 255, 255, 0.72);
}

.flowmo-automation-config-form input,
.flowmo-automation-config-form select,
.flowmo-automation-config-form textarea,
.flowmo-select-trigger {
  min-height: 44px;
  border-radius: 12px;
}

.flowmo-automation-config-form input:focus,
.flowmo-automation-config-form select:focus,
.flowmo-automation-config-form textarea:focus,
.flowmo-select-trigger:hover,
.flowmo-select-trigger:focus-visible,
.flowmo-select-menu[data-open="true"] .flowmo-select-trigger {
  border-color: rgba(59, 130, 246, 0.54);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.flowmo-automation-config-modal .modal-actions {
  margin: 4px -20px 0;
  padding: 14px 20px 18px;
  background: rgba(248, 250, 252, 0.78);
}

.flowmo-automation-config-modal .primary-button {
  border-color: rgba(5, 150, 105, 0.34);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.18);
}

.flowmo-automation-config-modal .secondary-button {
  background: rgba(255, 255, 255, 0.9);
}

@keyframes flowmoCanvasDotsDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 28px 18px, 42px -22px; }
}

@keyframes flowmoBuilderAura {
  0% { transform: translate3d(-1%, -1%, 0) rotate(0.001deg); opacity: 0.74; }
  100% { transform: translate3d(1.5%, 1%, 0) rotate(0.001deg); opacity: 0.92; }
}

@keyframes flowmoNodeReveal {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flowmoLineDrawY {
  0% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes flowmoLineDrawX {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes flowmoPlusPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16), 0 0 0 0 rgba(59, 130, 246, 0.12); }
  50% { box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2), 0 0 0 8px rgba(59, 130, 246, 0.06); }
}

@keyframes flowmoModalRise {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 1120px) {
  .flowmo-builder-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .flowmo-builder-controls {
    justify-content: flex-start;
  }

  .flowmo-canvas-toolrail,
  .flowmo-canvas-minimap {
    display: none;
  }

  .automation-workspace .flowmo-automation-diagram--builder {
    padding: 22px 14px 28px;
  }
}

@media (max-width: 720px) {
  .automation-workspace .flowmo-automation-canvas--builder {
    padding: 10px;
  }

  .flowmo-builder-header {
    border-radius: 16px;
    padding: 14px;
  }

  .flowmo-builder-title-row strong {
    white-space: normal;
  }

  .flowmo-builder-title p {
    white-space: normal;
  }

  .flowmo-builder-controls {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    width: 100%;
  }

  .flowmo-builder-control {
    padding: 0 10px;
  }

  .flowmo-automation-diagram--builder .flowmo-diagram-block {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px 48px 14px 14px;
  }

  .flowmo-automation-diagram--builder .flowmo-diagram-icon {
    width: 48px;
    height: 48px;
  }

  .flowmo-automation-diagram--builder .flowmo-diagram-status {
    position: static;
    width: max-content;
    grid-column: 2;
    margin-top: 8px;
  }

  .flowmo-flow-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-modal.flowmo-automation-config-modal {
    width: min(94vw, 720px);
  }

  .flowmo-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .automation-workspace .flowmo-automation-canvas--builder::before,
  .automation-workspace .flowmo-automation-canvas--builder::after,
  .flowmo-automation-diagram--builder .flowmo-diagram-block,
  .flowmo-flow-plus-row > span,
  .flowmo-flow-plus-row button,
  .flowmo-flow-actions::before,
  .flowmo-flow-actions .flowmo-diagram-block--action-card::before,
  .settings-modal.flowmo-automation-config-modal {
    animation: none !important;
  }
}

.settings-modal.flowmo-automation-config-modal {
  width: min(660px, calc(100vw - 36px));
  max-height: min(680px, calc(100vh - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.15);
  overflow: hidden;
}

.flowmo-automation-config-modal .modal-header {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  background: #ffffff;
}

.flowmo-automation-config-modal .modal-header h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
}

.flowmo-automation-config-modal .modal-header p {
  max-width: 620px;
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.flowmo-automation-config-modal .modal-header .icon-button {
  width: 36px;
  height: 36px;
  align-self: center;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  box-shadow: none;
}

.flowmo-automation-config-modal .modal-header .icon-button:hover,
.flowmo-automation-config-modal .modal-header .icon-button:focus-visible {
  border-color: rgba(14, 116, 144, 0.42);
  background: #eef8fb;
  color: #075985;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1);
}

.flowmo-automation-config-form {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px 22px 0;
  background: #ffffff;
  overflow: auto;
}

.flowmo-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 13px;
}

.flowmo-config-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.flowmo-automation-config-form [data-new-block-fields],
.flowmo-automation-config-form [data-action-config-fields],
.flowmo-automation-config-form [data-new-action-config-fields] {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.flowmo-config-grid label,
.flowmo-config-section {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.flowmo-config-grid label:has(select),
.flowmo-automation-config-form .flowmo-action-config label:has(select),
.flowmo-approval-edit-selector {
  gap: 15px;
}

.flowmo-config-grid label:has(textarea),
.flowmo-config-grid .flowmo-action-check {
  grid-column: 1 / -1;
}

.flowmo-config-grid label:not(.flowmo-inline-toggle) > span {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
}

.flowmo-config-section-label {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

.flowmo-config-section-label--soft {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.07em;
}

.flowmo-automation-config-form input,
.flowmo-automation-config-form select,
.flowmo-automation-config-form textarea {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
  outline: none;
  padding: 0 12px;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.flowmo-automation-config-form input:hover,
.flowmo-automation-config-form select:hover,
.flowmo-automation-config-form textarea:hover {
  border-color: rgba(100, 116, 139, 0.58);
  background: #fbfdff;
}

.flowmo-automation-config-form select,
.flowmo-approval-edit-selector select {
  appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.25L9 11.25L13 7.25' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  cursor: pointer;
  padding-right: 42px;
}

.flowmo-automation-config-form select option,
.flowmo-automation-inspector select option {
  color: #111827;
  background: #ffffff;
  font-weight: 750;
}

.flowmo-automation-config-form textarea {
  min-height: 98px;
  line-height: 1.45;
  padding: 11px 12px;
  resize: vertical;
}

.flowmo-automation-config-form input:focus,
.flowmo-automation-config-form select:focus,
.flowmo-automation-config-form textarea:focus {
  border-color: rgba(20, 184, 166, 0.62);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.11);
}

.flowmo-automation-config-form select.flowmo-select-native,
.flowmo-automation-inspector select.flowmo-select-native,
.applications-workspace select.flowmo-select-native,
.applications-workspace input.flowmo-month-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  border: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.flowmo-select-menu {
  position: relative;
  z-index: 3;
  min-width: 128px;
  width: 100%;
  max-width: 100%;
  display: block;
}

.flowmo-select-menu[data-open="true"] {
  z-index: 120;
}

.flowmo-select-trigger {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px 0 14px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.flowmo-select-trigger:hover,
.flowmo-select-trigger:focus-visible,
.flowmo-select-menu[data-open="true"] .flowmo-select-trigger {
  border-color: rgba(20, 184, 166, 0.56);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.11);
  color: #0f172a;
  outline: none;
}

.flowmo-select-trigger [data-flowmo-select-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-select-chevron {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #334155;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.flowmo-select-menu[data-open="true"] .flowmo-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.flowmo-select-options {
  position: fixed;
  left: var(--flowmo-select-left, 0);
  top: var(--flowmo-select-top, 0);
  width: var(--flowmo-select-width, 220px);
  z-index: 9999;
  max-height: var(--flowmo-select-max-height, 238px);
  display: grid;
  gap: 4px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: #fbfdff;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.13);
  padding: 6px;
  scrollbar-width: thin;
}

.flowmo-select-options[hidden] {
  display: none;
}

.flowmo-select-options button {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1f2a3a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  padding: 0 10px;
  text-align: left;
}

.flowmo-select-options button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-select-options button:hover,
.flowmo-select-options button:focus-visible {
  background: #eef8fb;
  color: #075985;
  outline: none;
}

.flowmo-select-options button[aria-selected="true"] {
  background: #e6f6f4;
  color: #0f766e;
}

.flowmo-select-options button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.flowmo-month-picker {
  position: relative;
  z-index: 3;
  min-width: 150px;
  width: 100%;
  max-width: 100%;
  display: block;
}

.flowmo-month-picker[data-open="true"] {
  z-index: 130;
}

.flowmo-month-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(45, 118, 145, 0.26);
  border-radius: 7px;
  background: #f8fafc;
  color: #111827;
  cursor: pointer;
  padding: 0 12px 0 14px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.flowmo-month-trigger:hover,
.flowmo-month-trigger:focus-visible,
.flowmo-month-picker[data-open="true"] .flowmo-month-trigger {
  border-color: rgba(14, 116, 144, 0.46);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.11);
  color: #0f172a;
  outline: none;
}

.flowmo-month-trigger [data-flowmo-month-label] {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-month-icon {
  width: 14px;
  height: 14px;
  position: relative;
  justify-self: center;
  border: 2px solid #334155;
  border-radius: 3px;
}

.flowmo-month-icon::before,
.flowmo-month-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  background: currentColor;
}

.flowmo-month-icon::before {
  top: 3px;
  height: 2px;
}

.flowmo-month-icon::after {
  top: -4px;
  height: 4px;
  border-radius: 999px;
  opacity: 0.7;
}

.flowmo-month-popover {
  position: fixed;
  left: var(--flowmo-month-left, 0);
  top: var(--flowmo-month-top, 0);
  width: var(--flowmo-month-width, 232px);
  z-index: 10000;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 10%, rgba(14, 165, 160, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
    #fbfdff;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.13);
  padding: 9px;
}

.flowmo-month-popover[hidden] {
  display: none;
}

.flowmo-month-head {
  min-height: 34px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.92);
  color: #0f172a;
}

.flowmo-month-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-month-nav {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.flowmo-month-nav:hover,
.flowmo-month-nav:focus-visible {
  border-color: rgba(14, 165, 160, 0.28);
  background: rgba(240, 253, 250, 0.95);
  outline: none;
}

.flowmo-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.flowmo-month-option {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #1f2a3a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-transform: lowercase;
}

.flowmo-month-option:hover,
.flowmo-month-option:focus-visible {
  border-color: rgba(14, 165, 160, 0.28);
  background: #eef8fb;
  color: #075985;
  outline: none;
}

.flowmo-month-option[aria-selected="true"] {
  border-color: rgba(15, 118, 110, 0.5);
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
}

.flowmo-month-option[data-current="true"]:not([aria-selected="true"]) {
  border-color: rgba(59, 130, 246, 0.34);
  background: rgba(239, 246, 255, 0.86);
  color: #1d4ed8;
}

.flowmo-month-option:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.flowmo-month-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 0;
}

.flowmo-month-actions button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.flowmo-month-actions button:hover,
.flowmo-month-actions button:focus-visible {
  background: rgba(240, 253, 250, 0.95);
  color: #047857;
  outline: none;
}

.flowmo-config-section {
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(226, 232, 240, 0.88);
  background: transparent;
}

.flowmo-automation-config-form .flowmo-action-config {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.flowmo-automation-config-form .flowmo-action-config label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.flowmo-automation-config-form .flowmo-action-config label > span {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
}

.flowmo-automation-config-form .flowmo-condition-config label > span {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.25;
}

.flowmo-automation-config-form .flowmo-action-config > .flowmo-template-tokenbar {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 7px;
  padding: 0;
}

.flowmo-automation-config-form .flowmo-action-config > .flowmo-template-tokenbar + label:has(select) {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.flowmo-automation-config-form .flowmo-action-config-group {
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 8px;
  background: #ffffff;
}

.flowmo-automation-config-form .flowmo-action-config-group:empty {
  display: none;
}

.flowmo-automation-config-form .flowmo-action-config-group-body {
  gap: 12px;
}

.flowmo-automation-config-form .flowmo-approval-extra-config {
  gap: 10px;
}

.flowmo-automation-config-form .flowmo-approval-token-picker,
.flowmo-automation-config-form .flowmo-action-preview-stack {
  gap: 7px;
}

.flowmo-automation-config-form .flowmo-approval-token-picker > span,
.flowmo-automation-config-form .flowmo-template-tokenbar span {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.flowmo-automation-config-form .flowmo-approval-token-options,
.flowmo-automation-config-form .flowmo-template-tokenbar {
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  padding: 0;
}

.flowmo-automation-config-form .flowmo-preview-open-button {
  min-height: 40px;
  border-color: rgba(203, 213, 225, 0.9);
  background: #fbfdff;
  color: #334155;
}

.flowmo-automation-config-form .flowmo-preview-open-button:hover,
.flowmo-automation-config-form .flowmo-preview-open-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 95, 152, 0.08);
}

.settings-modal.flowmo-approval-edit-modal {
  width: min(880px, calc(100vw - 32px));
  border: 1px solid rgba(203, 213, 225, 0.86);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%),
    #ffffff;
}

.flowmo-approval-edit-modal svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-approval-edit-modal .modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: auto;
  padding: 10px 32px 14px;
  border-bottom-color: rgba(167, 139, 250, 0.32);
  background:
    linear-gradient(135deg, rgba(245, 243, 255, 0.98), rgba(237, 233, 254, 0.98) 58%, rgba(224, 231, 255, 0.96)),
    #ede9fe;
}

.flowmo-approval-edit-titlebar {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4c1d95;
  padding: 9px 0;
  box-shadow: none;
}

.flowmo-approval-edit-back {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  border-radius: 8px;
  background: #e6f6f4;
  color: #0f766e;
  cursor: pointer;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.08);
}

.flowmo-approval-edit-back:hover,
.flowmo-approval-edit-back:focus-visible {
  border-color: rgba(20, 184, 166, 0.52);
  background: #dff3f0;
  box-shadow:
    0 0 0 4px rgba(14, 116, 144, 0.11),
    0 12px 24px rgba(15, 23, 42, 0.08);
  outline: none;
}

.flowmo-approval-edit-back svg {
  width: 14px;
  height: 14px;
  color: currentColor;
  stroke-width: 2.2;
}

.flowmo-approval-edit-title-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.flowmo-approval-edit-modal .flowmo-approval-edit-titlebar h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-edit-title-copy p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #6d5b9a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-edit-modal .modal-header .icon-button {
  display: inline-grid;
  place-items: center;
  align-self: center;
  border-color: rgba(124, 58, 237, 0.26);
  background: rgba(255, 255, 255, 0.68);
  color: #4c1d95;
}

.flowmo-approval-edit-modal .modal-header .icon-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.flowmo-approval-preview-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.flowmo-approval-preview-layout [data-flowmo-approval-edit-fields],
.flowmo-approval-preview-editor,
.flowmo-approval-preview-host {
  min-width: 0;
}

.flowmo-approval-preview-editor {
  display: grid;
  gap: 12px;
}

.flowmo-approval-edit-modal .flowmo-approval-preview-summary span,
.flowmo-approval-edit-modal .flowmo-action-config-group,
.flowmo-approval-edit-modal .flowmo-delivery-preview,
.flowmo-approval-edit-modal .flowmo-approval-attachment-editor[data-empty="true"] {
  border-color: rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
    #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.flowmo-approval-edit-modal .flowmo-action-config-group {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.flowmo-approval-edit-modal .flowmo-action-config-group-title {
  color: #0f172a;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.flowmo-approval-edit-modal .flowmo-automation-config-form .flowmo-action-config label > span {
  color: #111827;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

.flowmo-approval-edit-modal .flowmo-automation-config-form input,
.flowmo-approval-edit-modal .flowmo-automation-config-form textarea,
.flowmo-approval-edit-modal .flowmo-automation-config-form select,
.flowmo-approval-edit-modal .flowmo-select-trigger {
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 7px;
  background-color: #f8fafc;
}

.flowmo-approval-edit-modal .flowmo-automation-config-form textarea {
  min-height: 112px;
}

.flowmo-approval-edit-selector {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.flowmo-approval-edit-selector > span {
  color: #374151;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-approval-preview-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flowmo-approval-preview-summary span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px;
}

.flowmo-approval-preview-summary small,
.flowmo-approval-attachment-editor small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.35;
}

.flowmo-approval-preview-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}

.flowmo-approval-edit-modal .flowmo-template-tokenbar,
.flowmo-approval-edit-modal .flowmo-approval-token-options {
  flex-wrap: wrap;
  overflow: visible;
  gap: 7px;
  padding: 2px 0 0;
}

.flowmo-approval-edit-modal .flowmo-template-tokenbar span,
.flowmo-approval-edit-modal .flowmo-approval-token-picker > span {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.flowmo-approval-edit-modal .flowmo-template-tokenbar button,
.flowmo-approval-edit-modal .flowmo-approval-token-options button {
  min-height: 26px;
  border-color: rgba(148, 163, 184, 0.56);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.flowmo-approval-edit-modal .flowmo-template-tokenbar button:not([aria-pressed="true"]):hover,
.flowmo-approval-edit-modal .flowmo-template-tokenbar button:not([aria-pressed="true"]):focus-visible,
.flowmo-approval-edit-modal .flowmo-approval-token-options button:not([aria-pressed="true"]):hover,
.flowmo-approval-edit-modal .flowmo-approval-token-options button:not([aria-pressed="true"]):focus-visible {
  border-color: rgba(20, 184, 166, 0.42);
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(248, 250, 252, 0.96));
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.flowmo-approval-edit-modal .flowmo-template-tokenbar button[aria-pressed="true"],
.flowmo-approval-edit-modal .flowmo-approval-token-options button[aria-pressed="true"] {
  border-color: hsla(174, 52%, 34%, 0.48);
  background:
    linear-gradient(180deg, hsla(158, 72%, 94%, 0.98), hsla(152, 60%, 86%, 0.9));
  color: hsl(174, 62%, 24%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 0 0 1px hsla(174, 52%, 34%, 0.08);
}

.flowmo-approval-attachment-editor {
  min-width: 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  padding-top: 12px;
}

.flowmo-approval-attachment-editor > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-approval-attachment-editor strong {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-approval-attachment-editor[data-empty="true"] {
  border: 1px dashed rgba(203, 213, 225, 0.95);
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.flowmo-approval-attachment-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flowmo-approval-attachment-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  display: inline-grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  padding: 0 10px;
  cursor: pointer;
}

.flowmo-approval-attachment-chip[data-selected="true"],
.flowmo-approval-attachment-chip:has(input:checked) {
  border-color: rgba(20, 184, 166, 0.38);
  background: #ecfdf5;
  color: #047857;
}

.flowmo-approval-attachment-chip input {
  width: 14px;
  height: 14px;
  min-height: 0;
  border: 0;
  background: transparent;
  accent-color: #0f766e;
  padding: 0;
}

.flowmo-approval-attachment-chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flowmo-approval-attachment-chip strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-preview-host {
  display: grid;
  gap: 10px;
}

.flowmo-approval-preview-host .flowmo-delivery-preview {
  margin: 0;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview {
  position: relative;
  gap: 9px;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
    #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
  pointer-events: none;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview > * {
  position: relative;
  z-index: 1;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview header {
  z-index: 2;
  margin: 0 0 1px;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview header + .flowmo-delivery-preview-row {
  margin-top: 10px;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview header strong {
  color: #0f766e;
  font-size: 11px;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview header span {
  color: #0f172a;
  font-size: 11px;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview-message {
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 7px;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview-chip {
  border-color: rgba(199, 210, 254, 0.92);
  background:
    linear-gradient(180deg, rgba(235, 233, 255, 0.98), rgba(224, 229, 255, 0.98));
  color: #29389c;
}

.flowmo-approval-edit-modal .flowmo-delivery-preview-chip[data-empty="true"] {
  border-color: rgba(203, 213, 225, 0.9);
  background: #f8fafc;
  color: #667085;
}

.flowmo-approval-edit-modal .flowmo-approval-attachment-editor[data-empty="true"] {
  border-style: dashed;
}

.flowmo-approval-edit-modal .modal-actions .primary-button {
  border-color: rgba(20, 184, 166, 0.34);
  background: #e6f6f4;
  color: #0f766e;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.08);
}

.flowmo-approval-edit-modal .modal-actions .primary-button:hover,
.flowmo-approval-edit-modal .modal-actions .primary-button:focus-visible {
  border-color: rgba(20, 184, 166, 0.52);
  background: #dff3f0;
  color: #0f766e;
  box-shadow:
    0 0 0 4px rgba(14, 116, 144, 0.11),
    0 12px 24px rgba(15, 23, 42, 0.08);
}

.flowmo-approval-edit-modal .modal-actions .primary-button svg {
  color: currentColor;
  stroke-width: 2.2;
}

.flowmo-approval-edit-modal .modal-actions .secondary-button {
  border-color: rgba(148, 163, 184, 0.42);
  background: #f8fafc;
  color: #1f2a3a;
}

.flowmo-inline-toggle {
  position: relative;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 12px;
  font-weight: 850;
}

.flowmo-action-config-group--approval .flowmo-inline-toggle strong {
  color: #667085;
  font-weight: 850;
}

.flowmo-inline-toggle--field {
  align-self: end;
  justify-self: start;
  margin-bottom: 1px;
}

.flowmo-inline-toggle--wide {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
}

.flowmo-inline-toggle input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  border: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.flowmo-toggle-track {
  position: relative;
  width: 42px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.22);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.flowmo-toggle-track::before {
  content: attr(data-on-label);
  position: absolute;
  left: 7px;
  top: 50%;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.16s ease;
}

.flowmo-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  transition: transform 0.16s ease;
}

.flowmo-inline-toggle input:checked + .flowmo-toggle-track {
  background: #2f5f98;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 128, 0.24);
}

.flowmo-inline-toggle input:checked + .flowmo-toggle-track::before {
  opacity: 1;
}

.flowmo-inline-toggle input:checked + .flowmo-toggle-track::after {
  transform: translateX(22px);
}

.flowmo-inline-toggle input:focus-visible + .flowmo-toggle-track {
  box-shadow: 0 0 0 3px rgba(47, 95, 152, 0.16), inset 0 0 0 1px rgba(29, 78, 128, 0.24);
}

.flowmo-automation-config-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 4px -22px 0;
  padding: 12px 22px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.flowmo-automation-config-modal .secondary-button,
.flowmo-automation-config-modal .primary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  padding: 0 15px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.flowmo-automation-config-modal .secondary-button {
  border-color: rgba(203, 213, 225, 0.92);
  background: #ffffff;
  color: #334155;
}

.flowmo-automation-config-modal .primary-button {
  border-color: #0f766e;
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12);
}

.flowmo-automation-config-modal .secondary-button:hover,
.flowmo-automation-config-modal .secondary-button:focus-visible,
.flowmo-automation-config-modal .primary-button:hover,
.flowmo-automation-config-modal .primary-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.flowmo-automation-config-modal .secondary-button:hover,
.flowmo-automation-config-modal .secondary-button:focus-visible {
  border-color: rgba(14, 116, 144, 0.34);
  background: #eef8fb;
  color: #075985;
}

.flowmo-automation-config-modal .primary-button:hover,
.flowmo-automation-config-modal .primary-button:focus-visible {
  border-color: #115e59;
  background: #115e59;
  color: #ffffff;
}

.flowmo-automation-config-modal .primary-button svg,
.flowmo-automation-config-modal .secondary-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px) {
  .flowmo-automation-config-modal .modal-header {
    padding: 22px 18px 16px;
  }

  .flowmo-automation-config-form {
    padding: 18px 18px 0;
  }

  .flowmo-automation-config-modal .modal-actions {
    flex-wrap: wrap;
    margin: 10px -18px 0;
    padding: 14px 18px 16px;
  }

  .flowmo-automation-config-modal .secondary-button,
  .flowmo-automation-config-modal .primary-button {
    width: 100%;
  }

  .flowmo-condition-config .flowmo-action-config-group-body > label {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 15px;
  }

  .flowmo-condition-config .flowmo-action-config-group-body > label > span {
    white-space: normal;
  }

  .flowmo-config-grid,
  .flowmo-automation-config-form .flowmo-action-config,
  .flowmo-approval-preview-layout,
  .flowmo-approval-preview-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-action-config-group-body,
  .flowmo-delivery-preview-row,
  .flowmo-delivery-context-preview p,
  .flowmo-condition-preview-rule {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-inline-toggle--field {
    align-self: start;
  }
}

.flowmo-condition-row button,
.flowmo-action-row button {
  width: 32px;
  padding: 0;
  color: #be123c;
}

.flowmo-automation-empty {
  margin: 8px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
}

.flowmo-approval-toggle {
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  background: #f0fdfa;
}

.flowmo-approval-toggle strong,
.flowmo-approval-toggle small {
  display: block;
}

.flowmo-approval-toggle strong {
  color: #0f172a;
  font-size: 12px;
}

.flowmo-approval-toggle small {
  margin-top: 2px;
  color: #0f766e;
  font-size: 11px;
  line-height: 1.35;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="automation"] {
  grid-template-columns: 1fr;
  overflow: auto;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="automation"] .lark-chat-list,
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="automation"] .lark-message-list {
  overflow: visible;
}

.workspace-slot[data-slot="side"] .flowmo-automation-builder {
  grid-template-columns: 1fr;
}

.workspace-slot[data-slot="side"] .flowmo-automation-stage,
.workspace-slot[data-slot="side"] .flowmo-automation-result-dock {
  grid-template-columns: 1fr;
}

.workspace-slot[data-slot="side"] .flowmo-automation-stage {
  min-height: 0;
}

.workspace-slot[data-slot="side"] .flowmo-automation-inspector {
  max-height: none;
}

.workspace-slot[data-slot="side"] .flowmo-automation-run-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-slot[data-slot="side"] .flowmo-automation-sidebar {
  grid-template-rows: auto auto auto;
}

.workspace-slot[data-slot="side"] .flowmo-automation-list {
  max-height: 260px;
}

.workspace-slot[data-slot="side"] .flowmo-condition-row,
.workspace-slot[data-slot="side"] .flowmo-action-row {
  grid-template-columns: 1fr;
}

.workspace-slot[data-slot="side"] .flowmo-condition-palette,
.workspace-slot[data-slot="side"] .flowmo-action-palette {
  grid-template-columns: 1fr;
}

.workspace-slot[data-slot="side"] .flowmo-test-grid {
  grid-template-columns: 1fr;
}

.workspace-slot[data-slot="side"] .flowmo-condition-row button,
.workspace-slot[data-slot="side"] .flowmo-action-row button {
  width: 100%;
}

@media (max-width: 980px) {
  .lark-feed-layout[data-mode="automation"] {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .lark-feed-layout[data-mode="automation"] .lark-chat-list,
  .lark-feed-layout[data-mode="automation"] .lark-message-list {
    overflow: visible;
  }

  .flowmo-automation-builder {
    grid-template-columns: 1fr;
  }

  .flowmo-automation-stage,
  .flowmo-automation-result-dock,
  .flowmo-automation-utility-panel,
  .flowmo-automation-result-inline {
    grid-template-columns: 1fr;
  }

  .flowmo-automation-stage {
    min-height: 0;
  }

  .flowmo-automation-inspector {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .flowmo-automation-run-preview,
  .flowmo-flow-health-grid,
  .flowmo-test-grid,
  .flowmo-diagram-toolbar,
  .flowmo-condition-palette,
  .flowmo-action-palette {
    grid-template-columns: 1fr;
  }

  .flowmo-inspector-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flowmo-automation-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .flowmo-automation-topbar > div:last-child {
    width: 100%;
  }

  .flowmo-automation-topbar button {
    flex: 1 1 0;
  }
}

.lark-feed-layout[data-mode="tasks"] .lark-chat-list,
.lark-feed-layout[data-mode="tasks"] .lark-message-list {
  align-content: stretch;
  gap: 0;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}

.lark-module-shell[data-capability="tasks"] {
  gap: 10px;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar {
  min-height: 0;
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 253, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 30%);
  padding: 12px;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar p {
  max-width: 520px;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools {
  min-width: min(520px, 100%);
  grid-template-columns: minmax(220px, 1fr) auto;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools .secondary-button {
  display: none;
}

.lark-module-shell[data-capability="tasks"] .lark-search-wrap {
  min-height: 42px;
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.lark-module-shell[data-capability="tasks"] .lark-search-wrap input {
  min-height: 42px;
  font-size: 13px;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button {
  min-height: 42px;
  border-radius: 8px;
}

.flowmo-task-summary-card {
  border-color: rgba(203, 213, 225, 0.86);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.flowmo-task-summary-card strong {
  font-size: 18px;
  line-height: 1;
}

.flowmo-task-summary-card small {
  overflow: hidden;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-board,
.flowmo-task-detail {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 10px;
}

.flowmo-task-board {
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  overflow: hidden;
}

.flowmo-task-board-head,
.flowmo-task-editor-head,
.flowmo-reminder-head,
.flowmo-task-lane-head,
.flowmo-task-card-top {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flowmo-task-board-head > div:first-child,
.flowmo-task-editor-head > div,
.flowmo-reminder-head {
  min-width: 0;
}

.flowmo-task-board-head strong,
.flowmo-task-editor-head strong,
.flowmo-reminder-head strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.flowmo-task-board-head span,
.flowmo-task-editor-head span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-board-actions,
.flowmo-task-editor-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.flowmo-task-board-actions .primary-button,
.flowmo-task-board-actions .secondary-button,
.flowmo-task-editor-actions .primary-button,
.flowmo-task-editor-actions .secondary-button,
.flowmo-reminder-head .secondary-button,
.flowmo-task-delete {
  min-height: 32px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-task-delete {
  border: 1px solid rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-filters {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}

.flowmo-task-filter {
  min-height: 30px;
  flex: 0 0 auto;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 7px;
  background: #ffffff;
  color: #475467;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.flowmo-task-filter:hover,
.flowmo-task-filter[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.24);
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-task-lanes {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

.flowmo-task-lane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px;
  overflow: hidden;
}

.flowmo-task-lane[data-status="doing"] {
  background: #f8fbff;
}

.flowmo-task-lane[data-status="done"] {
  background: #f8fdfb;
}

.flowmo-task-lane-head strong {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-task-lane-head span {
  min-width: 23px;
  min-height: 23px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #667085;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-task-stack {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.flowmo-task-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.flowmo-task-card:hover,
.flowmo-task-card:focus-visible,
.flowmo-task-card[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.24);
  background: #fcfdff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-task-card[data-priority="low"] {
  border-left-color: #14b8a6;
}

.flowmo-task-card[data-priority="medium"] {
  border-left-color: #3b82f6;
}

.flowmo-task-card[data-priority="high"] {
  border-left-color: #8b5cf6;
}

.flowmo-task-card[data-priority="urgent"] {
  border-left-color: #be123c;
}

.flowmo-task-card[data-source="lark"] {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(20, 184, 166, 0.05));
}

.flowmo-task-check {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 7px;
  background: #ffffff;
  color: #2563eb;
  padding: 0;
}

.flowmo-task-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-task-source {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-task-card strong {
  overflow: hidden;
  color: #111827;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-card p {
  display: -webkit-box;
  min-height: 31px;
  margin: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11.2px;
  line-height: 1.38;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.flowmo-task-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.flowmo-task-meta span {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 999px;
  background: #ffffff;
  color: #667085;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.flowmo-task-meta span[data-tone="today"] {
  border-color: rgba(20, 184, 166, 0.22);
  background: #ecfdf5;
  color: #047857;
}

.flowmo-task-meta span[data-tone="danger"] {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-empty {
  margin: 0;
  border: 1px dashed rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: #667085;
  padding: 11px;
  font-size: 11.5px;
  line-height: 1.4;
}

.flowmo-task-detail {
  grid-template-rows: auto minmax(0, auto);
  overflow: auto;
}

.flowmo-task-editor,
.flowmo-reminder-rail {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.flowmo-task-editor label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.flowmo-task-editor label span,
.flowmo-task-quick-assignees > span {
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-task-contact-picker {
  min-width: 0;
}

.flowmo-task-contact-picker .flowmo-lark-recipient-results {
  top: 40px;
}

.flowmo-task-contact-selected {
  min-height: 45px;
}

.flowmo-task-contact-selected[data-empty="false"] {
  padding: 7px;
}

.flowmo-task-contact-chip-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-task-contact-chip {
  min-width: 0;
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 5px 6px;
}

.flowmo-task-contact-chip > span:not(.flowmo-avatar) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.flowmo-task-contact-chip strong,
.flowmo-task-contact-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-contact-chip strong {
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 900;
}

.flowmo-task-contact-chip small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 700;
}

.flowmo-task-contact-chip button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  padding: 0;
}

.flowmo-task-contact-chip button:hover,
.flowmo-task-contact-chip button:focus-visible {
  background: #f1f5f9;
  color: #be123c;
}

.flowmo-task-contact-chip button svg {
  width: 14px;
  height: 14px;
}

.flowmo-task-contact-suggestions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-task-contact-suggestions[hidden] {
  display: none;
}

.flowmo-task-contact-suggestions button {
  max-width: 100%;
  min-height: 30px;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 3px 9px 3px 3px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-task-contact-suggestions button:hover,
.flowmo-task-contact-suggestions button:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #dbeafe;
}

.flowmo-task-contact-suggestions button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-editor input,
.flowmo-task-editor select,
.flowmo-task-editor textarea {
  width: 100%;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.35;
  outline: none;
}

.flowmo-task-editor input,
.flowmo-task-editor select {
  min-height: 38px;
}

.flowmo-task-editor textarea {
  resize: vertical;
  min-height: 92px;
}

.flowmo-task-editor input:focus,
.flowmo-task-editor select:focus,
.flowmo-task-editor textarea:focus {
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

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

.flowmo-task-quick-assignees {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.flowmo-task-quick-assignees button {
  min-height: 27px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-task-editor-status {
  min-height: 16px;
  margin: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
}

.flowmo-task-editor-status[data-type="error"] {
  color: #be123c;
}

.flowmo-reminder-rail {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.flowmo-reminder-list {
  display: grid;
  gap: 7px;
}

.flowmo-reminder-composer {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.flowmo-reminder-note-input {
  width: 100%;
  min-height: 58px;
  max-height: 92px;
  outline: none;
  resize: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.flowmo-reminder-note-input::placeholder {
  color: #667085;
  opacity: 1;
}

.flowmo-reminder-note-input:focus {
  border-color: rgba(20, 184, 166, 0.42);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.flowmo-reminder-compose-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.flowmo-reminder-compose-actions[hidden] {
  display: none;
}

.flowmo-reminder-compose-actions label {
  min-width: 0;
  position: relative;
  display: grid;
}

.flowmo-reminder-compose-actions label > span {
  position: absolute;
  left: 9px;
  top: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #0f766e;
  transform: translateY(-50%);
  pointer-events: none;
}

.flowmo-reminder-compose-actions label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.flowmo-reminder-compose-actions input[type="datetime-local"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 0 7px 0 30px;
  font-size: 10.5px;
  outline: none;
}

.flowmo-reminder-compose-actions input[type="datetime-local"]:focus {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.flowmo-reminder-compose-actions .flowmo-task-action-button {
  min-height: 34px;
  white-space: nowrap;
}

.flowmo-reminder-compose-actions .flowmo-task-action-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.flowmo-reminder-compose-status {
  min-height: 14px;
  margin: 0;
  color: #667085;
  font-size: 10.5px;
  line-height: 1.25;
}

.flowmo-reminder-compose-status[data-type="error"] {
  color: #be123c;
}

.flowmo-task-group-detail {
  grid-template-rows: auto auto;
}

.flowmo-task-group-list-panel {
  background: #fbfdff;
}

.flowmo-task-group-list {
  display: grid;
  gap: 7px;
}

.flowmo-task-group-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
  cursor: pointer;
}

.flowmo-task-group-row[data-active="true"],
.flowmo-task-group-row:focus-visible {
  border-color: rgba(37, 99, 235, 0.3);
  background: #f8fbff;
  outline: none;
}

.flowmo-task-group-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-task-group-row strong {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-group-row small {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-group-row button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0;
}

.flowmo-task-group-row button:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-task-group-row button svg {
  width: 15px;
  height: 15px;
}

.flowmo-task-group-row .flowmo-task-group-delete-button,
.flowmo-task-group-row .flowmo-task-group-delete-button:hover {
  border-color: #dbe3ef;
  background: #ffffff;
  color: #be123c;
}

.flowmo-task-group-delete-button > span:first-child,
.flowmo-task-group-delete-button > svg {
  color: #be123c;
}

.flowmo-task-group-delete-button svg {
  color: #be123c;
  stroke: #be123c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-delete-button > span:first-child {
  color: #be123c;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-delete-button svg {
  color: #be123c;
  stroke: #be123c;
}

.flowmo-task-group-delete-button > span:last-child {
  color: #475467;
}

.flowmo-task-board-actions [data-task-action="groups"] {
  min-width: 108px;
  white-space: nowrap;
}

.flowmo-reminder-item {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
}

.flowmo-reminder-item span {
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-reminder-item strong {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-reminder-item small {
  color: #667085;
  font-size: 11px;
  line-height: 1.3;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="tasks"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="tasks"] .lark-chat-list,
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="tasks"] .lark-message-list {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .flowmo-task-lanes {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.workspace-slot[data-slot="side"] .flowmo-task-board {
  overflow: visible;
}

@media (max-width: 1180px) {
  .lark-feed-layout[data-mode="tasks"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-task-lanes {
    min-height: 520px;
  }
}

@media (max-width: 820px) {
  .flowmo-task-board-head,
  .flowmo-task-editor-head,
  .flowmo-reminder-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .flowmo-task-board-actions,
  .flowmo-task-editor-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .flowmo-task-lanes,
  .flowmo-task-editor-grid {
    grid-template-columns: 1fr;
  }

  .flowmo-task-lanes {
    min-height: auto;
    overflow: visible;
  }
}

.lark-module-shell[data-capability="tasks"] {
  container-type: inline-size;
}

@container (max-width: 980px) {
  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-board {
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-lanes,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-lane,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-stack {
    min-height: auto;
    overflow: visible;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-lane {
    grid-template-rows: auto auto;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-detail {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
    grid-template-rows: auto;
  }
}

@container (max-width: 760px) {
  .lark-module-shell[data-capability="tasks"] .flowmo-task-lanes,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-board {
    overflow: visible;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: #f8fafc;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.app-shell {
  --provider-rail-size: 94px;
  --sidebar-size: 258px;
  --sidebar-collapsed-size: 74px;
  --assistant-side-size: 386px;
  --inbox-side-size: 420px;
  --swap-rail-size: 0px;
  --swap-button-width: 38px;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(540px, 1fr) var(--swap-rail-size) var(--assistant-side-size);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "providers sidebar assistant swap discovery";
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  transition: grid-template-columns 180ms ease;
}

.app-shell.assistant-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar discovery discovery discovery";
}

.app-shell.side-panel-collapsed.view-assistant {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar assistant assistant assistant";
}

.app-shell.side-panel-collapsed.view-inbox {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar discovery discovery discovery";
}

.app-shell.assistant-collapsed .panel-swap-button,
.app-shell.side-panel-collapsed .panel-swap-button,
.app-shell.side-panel-collapsed .side-panel-collapse-button {
  display: none;
}

.app-shell.assistant-collapsed.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar discovery discovery discovery";
}

.app-shell.view-inbox.assistant-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar discovery discovery discovery";
}

.app-shell.view-inbox.assistant-collapsed.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) 0 0;
  grid-template-areas: "providers sidebar discovery discovery discovery";
}

.app-shell.side-panel-collapsed.view-assistant.sidebar-collapsed,
.app-shell.side-panel-collapsed.view-inbox.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) 0 0;
}

.panel-swap-button {
  position: absolute;
  top: var(--panel-swap-y, 50%);
  right: auto;
  left: var(--panel-swap-x, calc(100% - var(--assistant-side-size)));
  z-index: 30;
  width: var(--swap-button-width);
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(140deg, rgba(45, 212, 191, 0.8), rgba(139, 92, 246, 0.78), rgba(34, 211, 238, 0.72)) border-box;
  color: #223047;
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.15),
    0 12px 32px rgba(45, 212, 191, 0.14),
    0 10px 30px rgba(139, 92, 246, 0.1);
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity 170ms ease, transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

body.flowmo-approval-edit-open .panel-swap-button,
.app-shell.flowmo-approval-edit-open .panel-swap-button {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.side-panel-collapse-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 45;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  opacity: 0.76;
  transform: none;
  transition: opacity 170ms ease, transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.app-shell.view-inbox .panel-swap-button {
  right: auto;
  left: var(--panel-swap-x, calc(100% - var(--inbox-side-size)));
}

.app-shell.view-inbox .side-panel-collapse-button {
  right: 14px;
}

.side-panel-collapse-button:hover,
.side-panel-collapse-button:focus-visible {
  opacity: 1;
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(99, 179, 237, 0.36);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.side-panel-collapse-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-swap-button:hover,
.panel-swap-button:focus-visible {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 1px)) scale(1);
  border-color: rgba(139, 92, 246, 0.36);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.14),
    0 12px 32px rgba(45, 212, 191, 0.14),
    0 12px 32px rgba(139, 92, 246, 0.12);
}

.panel-swap-button[data-placement-ready="false"] {
  opacity: 0;
  pointer-events: none;
}

.panel-swap-button::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  width: max-content;
  max-width: 190px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #223047;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%) scale(0.96);
  transition: opacity 160ms ease, transform 160ms ease;
}

.app-shell.view-inbox .panel-swap-button::after {
  right: auto;
  left: calc(100% + 10px);
  transform: translate(-8px, -50%) scale(0.96);
}

.panel-swap-button:hover::after,
.panel-swap-button:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.panel-swap-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-swap-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.files-toggle-button {
  z-index: 24;
  min-width: 106px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(45, 212, 191, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.78), rgba(139, 92, 246, 0.66), rgba(34, 211, 238, 0.68)) border-box;
  color: #254155;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.1),
    0 6px 16px rgba(45, 212, 191, 0.1);
  opacity: 0.9;
  transform: scale(0.98);
  transition: opacity 170ms ease, transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.files-toggle-button[hidden] {
  display: none;
}

.files-toggle-button[data-state="collapsed"] {
  border-color: rgba(139, 92, 246, 0.34);
}

.files-toggle-button:hover,
.files-toggle-button:focus-visible {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.14),
    0 8px 20px rgba(45, 212, 191, 0.14),
    0 8px 20px rgba(139, 92, 246, 0.1);
}

.files-toggle-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.files-toggle-button[data-state="collapsed"] svg {
  transform: rotate(180deg);
}

.files-toggle-button span {
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(600px, 1fr) var(--swap-rail-size) var(--assistant-side-size);
}

.app-shell.view-inbox {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(680px, 1fr) var(--swap-rail-size) var(--inbox-side-size);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "providers sidebar discovery swap assistant";
}

.app-shell.view-inbox.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(720px, 1fr) var(--swap-rail-size) var(--inbox-side-size);
}

.app-shell.view-inbox .discovery-panel {
  border-left: 0;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.app-shell.view-inbox .assistant-panel {
  border-left: 1px solid var(--line);
}

.app-shell.view-inbox .assistant-workspace {
  padding: 18px 18px 14px;
}

.app-shell.view-inbox .assistant-messages {
  padding: 16px;
}

.app-shell.view-inbox .assistant-bubble {
  max-width: 96%;
}

.app-shell.view-inbox .assistant-welcome {
  width: min(340px, calc(100% - 28px));
  padding: 20px 18px 18px;
  border-radius: 16px;
}

.app-shell.view-inbox .assistant-welcome-orb {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

.app-shell.view-inbox .assistant-welcome-orb img {
  width: 41px;
  height: 41px;
}

.app-shell.view-inbox .assistant-welcome h3 {
  font-size: 20px;
}

.app-shell.view-inbox .assistant-welcome > p:not(.assistant-welcome-kicker) {
  font-size: 12px;
}

.app-shell.view-inbox .assistant-welcome-suggestions span {
  min-height: 25px;
  font-size: 11px;
}

.app-shell.compose-mode .discovery-panel {
  grid-template-rows: minmax(0, 1fr);
  background: #ffffff;
}

.app-shell.lark-mode .discovery-panel,
.app-shell.applications-mode .discovery-panel {
  grid-template-rows: minmax(0, 1fr);
  background: #ffffff;
}

.app-shell.view-transitioning .assistant-panel,
.app-shell.view-transitioning .discovery-panel {
  animation: panelSoftSwap 260ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.provider-rail,
.sidebar,
.assistant-panel,
.discovery-panel {
  min-width: 0;
  min-height: 0;
}

.provider-rail {
  grid-area: providers;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.provider-button {
  position: relative;
  width: 64px;
  min-height: 64px;
  display: grid;
  grid-template-rows: 36px auto;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #111827;
  font-size: 12px;
  line-height: 1.1;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.provider-unread-badge {
  position: absolute;
  top: -9px;
  right: 2px;
  z-index: 3;
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.28);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.provider-button:hover,
.provider-button.active {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.provider-button.active {
  color: #172033;
}

.provider-button.is-unavailable,
.provider-button.is-off {
  opacity: 0.62;
  filter: grayscale(0.25);
}

.provider-button.is-off .provider-logo {
  opacity: 0.7;
}

.provider-status-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 5px 12px rgba(34, 197, 94, 0.26);
  pointer-events: none;
}

.provider-button:has(.provider-unread-badge:not([hidden])) .provider-status-dot {
  top: 30px;
  right: 13px;
}

.provider-button.is-off .provider-status-dot {
  background: #94a3b8;
  box-shadow: 0 5px 12px rgba(100, 116, 139, 0.18);
}

.provider-button.is-unavailable .provider-status-dot {
  background: #f59e0b;
  box-shadow: 0 5px 12px rgba(245, 158, 11, 0.22);
}

.app-update-rail-button {
  margin-top: auto;
  isolation: isolate;
  overflow: hidden;
  display: none !important;
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
  color: #047857;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(4, 120, 87, 0.14);
}

.app-update-rail-button[hidden] {
  display: none !important;
}

body.flowmo-update-available .app-update-rail-button:not([hidden]) {
  display: grid !important;
}

.app-update-rail-button::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: conic-gradient(from 120deg, rgba(20, 184, 166, 0), rgba(20, 184, 166, 0.2), rgba(245, 158, 11, 0.16), rgba(20, 184, 166, 0));
  animation: flowmoUpdateSweep 3.8s linear infinite;
}

.app-update-rail-button svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.app-update-rail-button[data-mandatory="true"] {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
  color: #be123c;
}

.provider-logo {
  width: 31px;
  height: 31px;
  display: block;
  object-fit: contain;
}

.outlook-logo {
  width: 32px;
  height: 32px;
}

.lark-provider-logo {
  border-radius: 8px;
}

.dock-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: #263343;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
  pointer-events: none;
}

.dock-drag-ghost svg,
.dock-drag-ghost img {
  width: 23px;
  height: 23px;
}

.dock-drag-ghost span {
  display: none;
}

.dock-drag-ghost svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button[data-dock-section] {
  touch-action: none;
  user-select: none;
}

.nav-button[data-dock-section].is-dragging {
  opacity: 0.56;
  transform: scale(0.98);
}

.nav-lark-icon,
.nav-flowmo-icon {
  width: 19px;
  height: 19px;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  transition: padding 180ms ease;
}

.brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0;
  min-height: 112px;
  padding: 4px 0 8px;
}

.brand-icon {
  width: 34px;
  height: 34px;
  display: none;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(20, 184, 166, 0.18));
}

.brand-logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.account-switcher {
  min-height: 42px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: inherit;
  font: inherit;
  text-decoration: none;
  text-align: left;
}

.account-review-button {
  cursor: pointer;
}

.account-review-button[data-review-state="pending"] {
  border-color: rgba(20, 184, 166, 0.24);
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.96), rgba(239, 246, 255, 0.96)),
    #ffffff;
  box-shadow:
    0 12px 26px rgba(20, 184, 166, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

.account-review-button:hover,
.account-review-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.08);
  outline: none;
}

.account-switcher strong,
.account-switcher small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switcher strong {
  font-size: 12px;
  line-height: 1.2;
}

.account-switcher small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.account-switcher svg,
.nav-button svg,
.icon-button svg,
.composer-tool svg,
.mail-composer-tools svg,
.search-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7d5cf, #e6ecff);
  color: #111827;
  font-size: 10px;
  font-weight: 850;
}

.nav-actions,
.sidebar-footer {
  display: grid;
  gap: 8px;
}

.sidebar-footer {
  margin-top: auto;
}

.nav-button {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #313846;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.nav-button#adminBtn[hidden] {
  display: flex !important;
}

.nav-button:hover {
  background: #ffffff;
  border-color: var(--line);
}

.nav-button.active {
  border-color: #eee7ff;
  background: var(--active);
  color: var(--active-text);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.18);
}

.nav-button.subtle {
  color: #4b5563;
}

.nav-button.danger {
  color: var(--danger);
}

.nav-button.danger:hover {
  border-color: #f3d4dc;
  background: #fff7fa;
}

.sidebar-language-control {
  position: relative;
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  text-align: left;
  cursor: default;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sidebar-language-control:hover,
.sidebar-language-control:focus-within {
  border-color: var(--line);
  background: #ffffff;
}

.sidebar-language-control.language-menu-open {
  border-color: rgba(20, 184, 166, 0.45);
  background: linear-gradient(135deg, #f4fffb 0%, #ffffff 52%, #f7f1ff 100%);
  box-shadow: 0 14px 30px rgba(20, 184, 166, 0.12);
}

.sidebar-language-control > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-language-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sidebar-language-copy > span {
  color: inherit;
  font-size: 14px;
  line-height: 1.1;
}

.sidebar-language-copy strong {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
}

.sidebar-language-control select {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  border-radius: inherit;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

.sidebar-language-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sidebar-language-chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #667085;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  transition: transform 150ms ease, stroke 150ms ease;
}

.sidebar-language-control.language-menu-open .sidebar-language-chevron {
  stroke: var(--primary);
  transform: translateY(-50%) rotate(180deg);
}

.sidebar-language-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 4px;
  min-width: 166px;
  padding: 6px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
  backdrop-filter: blur(14px);
}

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

.sidebar-language-option {
  min-height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #24324a;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

.sidebar-language-option:hover,
.sidebar-language-option:focus-visible {
  outline: none;
  border-color: rgba(59, 130, 246, 0.18);
  background: #f5f8ff;
  color: #1d4ed8;
}

.sidebar-language-option[aria-selected="true"] {
  border-color: rgba(20, 184, 166, 0.32);
  background: linear-gradient(135deg, #e9fff8 0%, #f1efff 100%);
  color: #047267;
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.12);
}

.sidebar-language-option[aria-selected="true"]::after {
  content: "";
  width: 7px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(42deg) translateY(-1px);
}

.assistant-panel {
  position: relative;
  grid-area: assistant;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  transition: padding 180ms ease, border-color 180ms ease, background 180ms ease;
}

.app-shell.assistant-collapsed .assistant-panel {
  display: none;
}

.assistant-workspace {
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px 26px 14px;
  overflow: hidden;
}

.assistant-collapsed-view {
  min-width: 0;
  min-height: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.assistant-panel.is-collapsed .assistant-workspace {
  grid-template-rows: auto minmax(0, 1fr);
}

.assistant-panel.is-collapsed .assistant-collapsed-view {
  display: grid;
}

.assistant-panel.is-collapsed .assistant-workspace {
  display: none;
}

.assistant-panel.is-collapsed .assistant-messages,
.assistant-panel.is-collapsed .assistant-composer {
  display: none;
}

.assistant-panel.is-collapsed .header-actions .new-chat-button,
.assistant-panel.is-collapsed .header-actions .history-button {
  display: none;
}

.assistant-collapsed-copy {
  min-width: 0;
  max-width: 420px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.assistant-collapsed-kicker {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-collapsed-copy strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
}

.assistant-collapsed-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.assistant-panel::before,
.assistant-panel::after {
  pointer-events: none;
}

.assistant-panel.drag-over::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 5;
  border: 1px dashed rgba(15, 118, 110, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.34), rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.3)) border-box;
  box-shadow:
    0 22px 70px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.84) inset;
  backdrop-filter: blur(8px);
}

.assistant-panel.drag-over::after {
  content: "Suelta los archivos para adjuntarlos al chat";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(360px, calc(100% - 72px));
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid #bee6df;
  border-radius: 14px;
  background: #ffffff;
  color: #0f766e;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
  transform: translate(-50%, -50%);
}

.assistant-header,
.workspace-header,
.section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.assistant-header > div,
.workspace-header > div,
.section-heading > div {
  min-width: 0;
}

.workspace-slot[data-section="files"][data-slot="side"] > .file-manager > .section-heading {
  padding-right: 52px;
}

.assistant-header {
  min-height: 40px;
}

.assistant-header h2,
.workspace-header h2 {
  min-width: 0;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.assistant-header p,
.workspace-header p,
.download-panel p {
  min-width: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.download-panel p {
  max-width: 560px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.header-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-button,
.new-chat-button,
.pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.history-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  background: #ffffff;
  color: #263343;
  font-weight: 750;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.history-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.new-chat-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #cfe6ea;
  background: linear-gradient(135deg, #f6feff, #f7f3ff);
  color: #164e63;
  font-weight: 820;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.new-chat-button:hover {
  border-color: #a7dfe4;
  background: linear-gradient(135deg, #effdff, #f2ebff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.history-button svg,
.new-chat-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.history-button:hover {
  border-color: #b8dce1;
  background: #f8ffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.assistant-collapse-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
}

.assistant-collapse-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-collapse-button:hover {
  border-color: #b8dce1;
  background: #f8ffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.assistant-panel.is-collapsed {
  padding: 0;
  background: transparent;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .assistant-header {
  align-items: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .assistant-header p {
  display: none;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .assistant-header h2 {
  margin-bottom: 0;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .header-actions {
  gap: 7px;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .history-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .assistant-collapse-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.workspace-slot[data-section="assistant"][data-slot="side"] .new-chat-button {
  max-width: 134px;
  padding-inline: 10px;
}

@container (max-width: 520px) {
  .assistant-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .assistant-header p {
    display: none;
  }

  .assistant-header h2 {
    margin-bottom: 0;
  }

  .assistant-header .header-actions {
    gap: 7px;
  }

  .assistant-header .history-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .assistant-header .assistant-collapse-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}

@container (max-width: 390px) {
  .assistant-header .new-chat-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .assistant-header .new-chat-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.chat-history-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 12;
  width: min(370px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 92px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transform-origin: 92% -8px;
  animation: historyDropdownIn 180ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

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

.chat-history-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 26px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  transform: rotate(45deg);
}

.chat-history-dropdown-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.chat-history-dropdown-header strong {
  font-size: 13px;
  line-height: 1.2;
}

.chat-history-dropdown-header span {
  color: var(--muted);
  font-size: 12px;
}

@keyframes panelSoftSwap {
  from {
    opacity: 0.86;
    transform: translate3d(0, 8px, 0) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes surfaceReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes automationBackgroundDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
    transform: translate3d(-1.4%, -0.8%, 0) scale(1.02);
  }
  to {
    background-position: 36px -18px, -28px 20px, 18px 30px;
    transform: translate3d(1.2%, 0.9%, 0) scale(1.035);
  }
}

@keyframes automationSignalDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 44px 22px, 34px 0, -46px 0;
  }
}

@keyframes historyDropdownIn {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.assistant-messages {
  position: relative;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 62%, #f7faff 100%);
  scrollbar-gutter: stable;
}

.assistant-welcome {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100% - 44px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 28px 24px;
  border: 1px solid rgba(219, 226, 236, 0.92);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(139, 92, 246, 0.11), transparent 34%),
    #ffffff;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.08),
    0 18px 48px rgba(45, 212, 191, 0.08),
    0 18px 48px rgba(139, 92, 246, 0.07);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: assistantWelcomeIn 520ms cubic-bezier(0.2, 0.88, 0.2, 1) both;
}

.assistant-welcome::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.62), rgba(139, 92, 246, 0.5), rgba(34, 211, 238, 0.58));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.48;
  pointer-events: none;
}

.assistant-welcome::after {
  content: "";
  position: absolute;
  inset: auto 24% -18px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.22), rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.2));
  filter: blur(18px);
  opacity: 0.86;
  pointer-events: none;
  animation: assistantWelcomeAura 5.8s ease-in-out infinite alternate;
}

.assistant-welcome.is-dismissing {
  animation: assistantWelcomeOut 240ms ease forwards;
}

.assistant-welcome-orb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.1),
    0 12px 30px rgba(45, 212, 191, 0.14),
    0 0 0 1px rgba(219, 226, 236, 0.72) inset;
}

.assistant-welcome-orb img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(15, 118, 110, 0.18));
}

.assistant-welcome-kicker {
  margin: 2px 0 0;
  color: #0f766e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-welcome h3 {
  margin: 0;
  color: #0f172a;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0;
}

.assistant-welcome > p:not(.assistant-welcome-kicker) {
  max-width: 410px;
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.assistant-welcome-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.assistant-welcome-suggestions span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dde5ef;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #344054;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 750;
}

@keyframes assistantWelcomeIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px)) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes assistantWelcomeOut {
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 12px)) scale(0.98);
    filter: blur(4px);
  }
}

@keyframes assistantWelcomeAura {
  from {
    transform: translateX(-10px) scaleX(0.94);
  }
  to {
    transform: translateX(10px) scaleX(1.04);
  }
}

.assistant-bubble {
  min-width: 0;
  width: fit-content;
  max-width: min(92%, 720px);
  padding: 13px 15px;
  border-radius: 14px;
  color: #111827;
  font-size: 14px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  animation: assistantBubbleIn 220ms cubic-bezier(0.2, 0.86, 0.2, 1) both;
}

.assistant-bubble p {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.assistant-bubble p + p {
  margin-top: 8px;
}

.assistant-bubble.assistant {
  border: 1px solid transparent;
  background:
    linear-gradient(#fbfbff, #fbfbff) padding-box,
    linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(34, 211, 238, 0.55)) border-box;
}

.assistant-bubble.is-loading {
  min-width: 210px;
}

.assistant-bubble.is-typing::after {
  content: "";
  width: 6px;
  height: 16px;
  display: inline-block;
  margin-left: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.82), rgba(34, 211, 238, 0.82));
  transform: translateY(2px);
  animation: typingCursorBlink 760ms ease-in-out infinite;
}

.assistant-bubble.user {
  align-self: flex-end;
  border: 1px solid #dce8ff;
  background: #edf6ff;
  color: #23345f;
}

.assistant-attachment-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.assistant-attachment-label {
  flex: 0 0 auto;
}

.assistant-attachment-names {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghost-bubble {
  opacity: 0.78;
}

.assistant-list {
  margin: 0;
  padding-left: 18px;
}

.assistant-list li {
  margin: 0 0 7px;
  padding-left: 2px;
}

.assistant-typing-line {
  animation: assistantLineIn 160ms ease both;
}

@keyframes assistantBubbleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes typingCursorBlink {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 1;
  }
}

@keyframes assistantLineIn {
  from {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.assistant-composer {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, rgba(45, 212, 191, 0.72), rgba(139, 92, 246, 0.74), rgba(34, 211, 238, 0.72)) border-box;
  background-size: 100% 100%, 220% 220%;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.08),
    0 12px 30px rgba(45, 212, 191, 0.1),
    0 12px 34px rgba(139, 92, 246, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  overflow: visible;
  transition: box-shadow 180ms ease, transform 180ms ease;
  animation: composerBorder 7s ease-in-out infinite alternate, composerPulse 6.4s ease-in-out infinite;
}

.assistant-composer::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 50%, rgba(45, 212, 191, 0.34), transparent 34%),
    radial-gradient(circle at 58% 92%, rgba(139, 92, 246, 0.28), transparent 38%),
    radial-gradient(circle at 92% 34%, rgba(34, 211, 238, 0.26), transparent 34%);
  filter: blur(18px);
  opacity: 0.58;
  transform: translate3d(0, 0, 0) scale(0.99);
  pointer-events: none;
  animation: composerAura 6.8s ease-in-out infinite alternate;
}

.assistant-composer::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 11px;
  background: #ffffff;
  pointer-events: none;
}

.assistant-composer:focus-within {
  transform: translateY(-1px);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.09),
    0 14px 34px rgba(45, 212, 191, 0.14),
    0 14px 38px rgba(139, 92, 246, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

.assistant-composer:focus-within::before {
  opacity: 0.76;
  filter: blur(20px);
}

.composer-glow {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 11px;
  overflow: hidden;
  pointer-events: none;
}

.composer-glow::before {
  content: "";
  position: absolute;
  top: -42%;
  bottom: -42%;
  left: -34%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.5;
  transform: rotate(14deg);
  animation: composerSweep 6.2s ease-in-out infinite;
}

.assistant-composer textarea,
.composer-actions,
.composer-context-row,
.selected-action-agent,
.action-palette {
  position: relative;
  z-index: 1;
}

@keyframes composerBorder {
  from {
    background-position: 0 0, 0% 50%;
  }
  to {
    background-position: 0 0, 100% 50%;
  }
}

@keyframes composerAura {
  from {
    transform: translate3d(-8px, 3px, 0) scale(0.98);
  }
  to {
    transform: translate3d(8px, -2px, 0) scale(1.02);
  }
}

@keyframes composerPulse {
  0%,
  100% {
    box-shadow:
      0 18px 38px rgba(15, 23, 42, 0.08),
      0 12px 30px rgba(45, 212, 191, 0.1),
      0 12px 34px rgba(139, 92, 246, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  }
  50% {
    box-shadow:
      0 19px 42px rgba(15, 23, 42, 0.085),
      0 14px 36px rgba(45, 212, 191, 0.14),
      0 14px 40px rgba(139, 92, 246, 0.11),
      0 0 0 1px rgba(255, 255, 255, 0.92) inset;
  }
}

@keyframes composerSweep {
  0%,
  42% {
    transform: translateX(0) rotate(14deg);
    opacity: 0;
  }
  56% {
    opacity: 0.5;
  }
  72%,
  100% {
    transform: translateX(430%) rotate(14deg);
    opacity: 0;
  }
}

.assistant-composer textarea {
  width: 100%;
  min-height: 46px;
  max-height: 130px;
  resize: vertical;
  border: 0;
  outline: none;
  background: #ffffff;
  color: var(--text);
  padding: 4px 2px;
  font-size: 14px;
  line-height: 1.45;
}

.assistant-composer textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.composer-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.composer-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #43335f;
  padding: 3px 0;
  font-size: 13px;
}

.composer-tool:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.composer-hint {
  color: var(--muted-2);
  font-size: 12px;
  white-space: nowrap;
}

.action-palette {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfe4ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.16);
}

.mention-palette {
  border-color: #d8d9ff;
}

.action-palette-head {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
}

.action-palette-head span {
  color: #172033;
  font-size: 12px;
  font-weight: 800;
}

.action-palette-head input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  background: #f8fbff;
  color: #172033;
  padding: 7px 9px;
  font-size: 13px;
  outline: none;
}

.action-palette-list {
  display: grid;
  gap: 6px;
  max-height: min(320px, 48vh);
  overflow: auto;
}

.action-palette-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #172033;
  padding: 8px;
  text-align: left;
}

.action-palette-item:hover,
.action-palette-item:focus-visible {
  border-color: #b9dcff;
  background: #f3f9ff;
  outline: none;
}

.action-palette-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8f6ff;
  color: #0f7490;
  font-size: 15px;
  font-weight: 900;
}

.action-palette-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.action-palette-copy strong,
.selected-action-copy strong {
  min-width: 0;
  color: #142033;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.action-palette-copy span,
.selected-action-copy span,
.action-palette-group {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.action-palette-group {
  justify-self: end;
  max-width: 128px;
  padding: 4px 7px;
  border-radius: 8px;
  background: #eef7ff;
  color: #315b74;
  font-weight: 800;
  text-align: right;
}

.action-palette-empty {
  padding: 12px 8px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.selected-action-agent {
  min-width: 0;
  max-width: 100%;
}

.composer-context-row {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.composer-context-row[hidden] {
  display: none;
}

.composer-context-row .selected-action-agent {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.composer-context-row .selected-action-agent[hidden] {
  display: none;
}

.selected-action-chip {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid #bfe5ff;
  border-radius: 9px;
  background: #f3fbff;
  color: #172033;
}

.selected-action-chip[data-type="mention"] {
  border-color: #d8d9ff;
  background: #f7f6ff;
}

.selected-action-chip[data-type="followup"] {
  border-color: #f8d49c;
  background: #fff8ed;
}

.selected-action-marker {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #dff4ff;
  color: #0f7490;
  font-weight: 900;
}

.selected-action-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.selected-action-chip button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.selected-action-chip button:hover,
.selected-action-chip button:focus-visible {
  background: #e4f3ff;
  color: #0f172a;
  outline: none;
}

.selected-chat-files {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: hidden;
}

.selected-file-chip {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border: 1px solid #cfe6ea;
  border-radius: 9px;
  background: #f6feff;
  color: #263343;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.selected-file-chip.is-openable:hover {
  border-color: #afdce4;
  background: #f1fbfd;
  box-shadow: 0 8px 18px rgba(20, 79, 92, 0.08);
  transform: translateY(-1px);
}

.selected-file-chip.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.selected-file-body {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 1px 3px 1px 1px;
  font: inherit;
  text-align: left;
}

button.selected-file-body {
  cursor: pointer;
}

button.selected-file-body:focus-visible,
.selected-file-remove:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.36);
  outline-offset: 2px;
}

.selected-file-chip .file-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  font-size: 7px;
}

.selected-file-label {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-resource-chip {
  border-color: rgba(139, 92, 246, 0.24);
  background: #fbf9ff;
}

.selected-resource-chip.new-doc {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
}

.lark-resource-icon.doc {
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.lark-resource-icon.wiki {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.lark-resource-icon.drive-file {
  background: linear-gradient(135deg, #0f766e, #2563eb);
}

.lark-resource-icon.message-file {
  background: linear-gradient(135deg, #06b6d4, #0f766e);
}

.lark-resource-icon.sheet {
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.lark-resource-icon.base {
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.lark-resource-icon.new-doc {
  background: linear-gradient(135deg, #0f766e, #2dd4bf);
  font-size: 13px;
}

.selected-file-remove {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #778294;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.selected-file-remove svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selected-file-remove:hover {
  color: #be123c;
  background: rgba(244, 63, 94, 0.08);
  transform: translateY(-1px);
}

.selected-file-remove:active {
  transform: scale(0.94);
}

.discovery-panel {
  position: relative;
  grid-area: discovery;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: rgba(248, 249, 252, 0.9);
  transition: border-color 180ms ease, background 180ms ease;
}

.workspace-slot[data-section="inbox"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.workspace-slot[data-section="inbox"][data-slot="main"] #mailDiscoveryCollapseBtn {
  display: none;
}

.workspace-slot[data-section="inbox"][data-slot="side"] {
  min-width: 0;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .workspace-header {
  min-height: 52px;
  padding: 12px 12px 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .workspace-header h2 {
  margin-bottom: 2px;
  font-size: 15px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .workspace-header p {
  font-size: 11px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .workspace-header-actions {
  gap: 6px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .icon-button {
  width: 30px;
  height: 30px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-discovery {
  gap: 8px;
  padding: 11px 12px 12px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .section-heading {
  gap: 8px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .section-heading h3 {
  font-size: 13px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .pill {
  padding-inline: 8px;
  font-size: 11px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .search-bar {
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 6px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .search-bar input {
  padding-right: 8px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .quick-filters {
  gap: 6px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .quick-filters button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 11px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .quick-filters .compose-filter {
  flex: 1 1 100%;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-workspace {
  inset: 158px 10px 72px;
  max-height: none;
  border-radius: 13px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-header {
  min-height: 54px;
  padding: 9px 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-primary-actions {
  gap: 8px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-send-button {
  min-height: 31px;
  padding: 0 10px;
  font-size: 11px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-send-button svg {
  width: 15px;
  height: 15px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-from-line {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .provider-compose-badge {
  margin-left: 0;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-header h3 {
  font-size: 14px;
  gap: 6px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-from-line strong {
  display: none;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .provider-compose-badge {
  min-height: 21px;
  padding: 3px 7px;
  font-size: 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-composer-form {
  gap: 7px;
  padding: 0;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-composer-form input {
  height: 33px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-field {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 42px;
  padding: 0 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-field-row {
  grid-template-columns: 1fr;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-field-row .mail-compose-field + .mail-compose-field {
  border-top: 1px solid var(--line);
  border-left: 0;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-body-dropzone > label {
  padding: 9px 10px 0;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-compose-body-dropzone textarea {
  padding: 8px 10px 12px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-composer-tools {
  align-items: center;
  flex-direction: column;
  gap: 7px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-composer-tools span {
  text-align: center;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .messages {
  gap: 7px;
  padding-right: 2px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-card {
  padding: 10px 11px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-card-top {
  gap: 8px;
  margin-bottom: 5px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-card h3 {
  font-size: 13px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .from,
.workspace-slot[data-section="inbox"][data-slot="side"] .snippet {
  font-size: 11px;
  line-height: 1.35;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .snippet {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .attachments {
  gap: 4px;
  margin-top: 6px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .attachment {
  min-height: 24px;
  padding: 4px 7px;
  font-size: 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .card-actions {
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .card-actions .ghost {
  min-height: 26px;
  padding: 0 7px;
  font-size: 10px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-more-menu,
.workspace-slot[data-section="inbox"][data-slot="side"] .mail-quick-menu {
  right: 0;
  left: auto;
  width: min(190px, calc(100vw - 28px));
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-pagination {
  gap: 6px;
  padding-top: 8px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-page-center {
  gap: 5px;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-page-jump label {
  display: none;
}

.workspace-slot[data-section="inbox"][data-slot="side"] .mail-page-jump input {
  width: 38px;
}

.workspace-slot[data-section="files"] {
  grid-template-rows: minmax(0, 1fr) auto;
}

.workspace-slot[data-section="assistant"],
.workspace-slot[data-section="lark"],
.workspace-slot[data-section="applications"],
.workspace-slot[data-section="settings"] {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.files-mode .discovery-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.discovery-panel:has(.download-panel[hidden]) {
  grid-template-rows: auto minmax(0, 1fr);
}

.app-shell.view-assistant:not(.files-mode):not(.compose-mode):not(.settings-mode) .discovery-panel {
  grid-template-rows: auto minmax(0, 1fr) 38px;
}

.app-shell.view-assistant:not(.files-mode):not(.compose-mode):not(.settings-mode):not(.compact-files-collapsed) .discovery-panel:has(.compact-files-panel:not([hidden])) {
  grid-template-rows: auto minmax(0, 1fr) 220px;
}

.app-shell.lark-mode .discovery-panel,
.app-shell.lark-mode .discovery-panel:has(.download-panel[hidden]),
.app-shell.applications-mode .discovery-panel,
.app-shell.applications-mode .discovery-panel:has(.download-panel[hidden]) {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell .workspace-slot[data-section="inbox"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-shell .workspace-slot[data-section="files"] {
  grid-template-rows: minmax(0, 1fr) auto;
}

.app-shell .workspace-slot[data-section="assistant"],
.app-shell .workspace-slot[data-section="lark"],
.app-shell .workspace-slot[data-section="applications"],
.app-shell .workspace-slot[data-section="settings"] {
  grid-template-rows: minmax(0, 1fr);
}

.workspace-header {
  order: 0;
  min-height: 62px;
  padding: 17px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
}

.workspace-header-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #667085;
}

.icon-button:hover {
  border-color: var(--line);
  background: #ffffff;
  color: #111827;
}

.mail-discovery,
.file-manager,
.mail-compose-workspace,
.lark-workspace,
.applications-workspace,
.settings-workspace,
.compact-files-panel,
.download-panel {
  order: 1;
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  overflow: hidden;
}

.mail-discovery {
  position: relative;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.mail-discovery[hidden],
.file-manager[hidden],
.mail-compose-workspace[hidden],
.lark-workspace[hidden],
.applications-workspace[hidden],
.settings-workspace[hidden],
.compact-files-panel[hidden] {
  display: none;
}

.mail-discovery:not([hidden]),
.file-manager:not([hidden]),
.mail-compose-workspace:not([hidden]),
.lark-workspace:not([hidden]),
.applications-workspace:not([hidden]),
.settings-workspace:not([hidden]),
.compact-files-panel:not([hidden]) {
  animation: surfaceReveal 240ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.mail-discovery-collapsed {
  order: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 252, 0.96)),
    #ffffff;
}

.mail-discovery-collapsed:not([hidden]) {
  animation: surfaceReveal 240ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.mail-discovery-collapsed-card {
  width: min(320px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
  text-align: center;
}

.mail-discovery-collapsed-kicker {
  color: #667085;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mail-discovery-collapsed-card h3 {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.2;
}

.mail-discovery-collapsed-card p {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.mail-discovery-collapsed-card .secondary-button {
  min-height: 34px;
  padding-inline: 14px;
}

.file-manager {
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #ffffff;
}

.settings-workspace {
  grid-template-rows: minmax(0, 1fr);
  overflow: auto;
  background: #ffffff;
  scrollbar-gutter: stable;
}

.mail-compose-workspace {
  position: absolute;
  inset: 148px 16px 66px;
  z-index: 95;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  max-height: none;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.45), rgba(139, 92, 246, 0.42), rgba(34, 211, 238, 0.38)) border-box;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.18),
    0 10px 28px rgba(15, 23, 42, 0.1);
  isolation: isolate;
}

.mail-compose-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.mail-compose-primary-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mail-compose-send-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(15, 118, 110, 0.38);
  border-radius: 8px;
  background: linear-gradient(135deg, #0f766e, #115e59);
  color: #ffffff;
  padding: 0 13px;
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.2);
}

.mail-compose-send-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mail-compose-from-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.mail-compose-from-line strong {
  color: #111827;
  font-size: 16px;
  white-space: nowrap;
}

.mail-compose-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mail-compose-header h3 {
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mail-compose-header p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.mail-compose-collapse-button svg {
  width: 16px;
  height: 16px;
}

.provider-compose-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.provider-compose-badge[data-provider="gmail"][data-state="ready"] {
  background: #ecfdf5;
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}

.provider-compose-badge[data-provider="outlook"][data-state="ready"] {
  background: #eff6ff;
  color: #075985;
  border-color: rgba(0, 120, 212, 0.24);
}

.provider-compose-badge[data-state="needs-permission"] {
  background: #fff7ed;
  color: #9a3412;
  border-color: rgba(251, 146, 60, 0.28);
}

.mail-compose-workspace .mail-composer-form {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.mail-compose-field,
.mail-compose-field-row {
  min-width: 0;
  display: grid;
  border-bottom: 1px solid var(--line);
}

.mail-compose-field {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
}

.mail-compose-field-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mail-compose-field-row .mail-compose-field {
  border-bottom: 0;
}

.mail-compose-field-row .mail-compose-field + .mail-compose-field {
  border-left: 1px solid var(--line);
}

.mail-compose-field label,
.mail-compose-body-dropzone > label {
  min-width: 44px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}

.mail-compose-field--recipient label {
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  padding: 0 10px;
}

.mail-compose-workspace .mail-composer-form input,
.mail-compose-workspace .mail-composer-form textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mail-compose-workspace .mail-composer-form input:focus,
.mail-compose-workspace .mail-composer-form textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

.mail-compose-subject-field input {
  font-size: 14px;
}

.mail-compose-body-dropzone {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.mail-compose-body-dropzone > label {
  padding: 12px 18px 0;
}

.mail-compose-body-dropzone textarea {
  min-height: 0;
  height: 100%;
  resize: none;
  padding: 10px 18px 18px;
  line-height: 1.5;
}

.mail-compose-drop-overlay {
  pointer-events: none;
  position: absolute;
  inset: 14px 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #38bdf8;
  border-radius: 13px;
  background: rgba(2, 20, 38, 0.9);
  color: #dff6ff;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mail-compose-drop-overlay svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #38bdf8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mail-compose-drop-overlay strong {
  font-size: 15px;
}

.mail-compose-drop-overlay span {
  color: #94d9ff;
  font-size: 12px;
}

.mail-compose-body-dropzone.is-dragging {
  background: #f0f9ff;
}

.mail-compose-body-dropzone.is-dragging .mail-compose-drop-overlay {
  opacity: 1;
  transform: scale(1);
}

.mail-compose-workspace .mail-composer-tools {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  margin-top: -26px;
  padding: 0 24px;
  position: relative;
  z-index: 3;
}

.mail-compose-workspace .mail-composer-tools .secondary-button {
  justify-self: center;
  border-color: rgba(15, 118, 110, 0.22);
  background: #ffffff;
  color: #344054;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.08);
}

.mail-compose-workspace .mail-composer-tools span {
  max-width: 560px;
  color: #53627a;
  text-align: center;
}

.mail-compose-workspace .modal-actions {
  justify-content: flex-end;
  padding: 0 30px 18px;
}

@media (max-width: 720px) {
  .mail-compose-workspace {
    inset: 190px 10px 72px;
    border-radius: 14px;
  }

  .mail-compose-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .mail-compose-primary-actions,
  .mail-compose-from-line {
    flex-wrap: wrap;
  }

  .mail-compose-header-actions {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .mail-compose-field-row {
    grid-template-columns: 1fr;
  }

  .mail-compose-field-row .mail-compose-field + .mail-compose-field {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mail-compose-field {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 44px;
    padding: 0 12px;
  }

  .mail-compose-body-dropzone > label {
    padding: 10px 12px 0;
  }

  .mail-compose-body-dropzone textarea {
    padding: 8px 12px 14px;
  }

  .mail-compose-workspace .mail-composer-tools {
    margin-top: -12px;
    padding: 0 14px;
  }

  .mail-compose-workspace .modal-actions {
    padding: 0 18px 16px;
  }
}

.mail-compose-collapsed-view {
  min-width: 0;
  min-height: 0;
  display: none;
  place-items: center;
  align-content: center;
  padding: 28px 24px 32px;
  text-align: center;
}

.mail-compose-workspace.is-collapsed {
  grid-template-rows: auto minmax(0, 1fr);
}

.mail-compose-workspace.is-collapsed .mail-composer-form {
  display: none;
}

.mail-compose-workspace.is-collapsed .mail-compose-collapsed-view {
  display: grid;
}

.mail-compose-collapsed-copy {
  max-width: 360px;
  display: grid;
  gap: 8px;
}

.mail-compose-collapsed-kicker {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mail-compose-collapsed-copy strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.18;
}

.mail-compose-collapsed-copy p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.mail-discovery.is-disconnected {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  background: #ffffff;
}

.mail-discovery.is-disconnected > .section-heading,
.mail-discovery.is-disconnected > .search-bar,
.mail-discovery.is-disconnected > .quick-filters,
.mail-discovery.is-disconnected > .mail-compose-workspace,
.mail-discovery.is-disconnected > .messages,
.mail-discovery.is-disconnected > .mail-pagination {
  display: none;
}

.mail-discovery.is-connected .mail-connect-empty,
.mail-connect-empty[hidden] {
  display: none;
}

.mail-connect-empty {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 38px 24px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.82) 0%, #ffffff 100%);
}

.mail-connect-card {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px 34px 30px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
  text-align: center;
}

.mail-connect-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.mail-connect-logo img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.mail-connect-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 900;
}

.mail-connect-card[data-provider="gmail"] .mail-connect-badge {
  border-color: rgba(234, 67, 53, 0.22);
  background: #fff7f5;
  color: #b42318;
}

.mail-connect-card[data-provider="outlook"] .mail-connect-badge {
  border-color: rgba(0, 120, 212, 0.24);
  background: #eff6ff;
  color: #075985;
}

.mail-connect-card h3 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.14;
}

.mail-connect-card p {
  max-width: 430px;
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.55;
}

.mail-connect-features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.mail-connect-features span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: #344054;
  padding: 7px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.mail-connect-card .primary-button {
  min-width: 190px;
  justify-content: center;
  margin-top: 8px;
}

.lark-workspace {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.lark-workspace.is-disconnected {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

.lark-workspace.is-disconnected .lark-hero,
.lark-workspace.is-disconnected .lark-work-grid {
  display: none;
}

.lark-workspace.is-connected .lark-connect-empty {
  display: none;
}

.lark-connect-empty {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 38px 24px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.74) 0%, #ffffff 100%),
    radial-gradient(circle at 52% 38%, rgba(45, 212, 191, 0.12) 0, transparent 34%);
}

.lark-connect-card {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px 34px 30px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
  text-align: center;
}

.lark-connect-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.lark-connect-logo img {
  width: 44px;
  height: 44px;
  display: block;
}

.lark-connect-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 900;
}

.lark-connect-card h3 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.14;
}

.lark-connect-card p {
  max-width: 430px;
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.55;
}

.lark-connect-features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.lark-connect-features span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: #344054;
  padding: 7px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.lark-connect-card .primary-button {
  min-width: 190px;
  justify-content: center;
  margin-top: 8px;
}

.lark-hero {
  min-height: 88px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 44%, #f8fbf6 100%);
}

.workspace-slot[data-section="lark"][data-slot="side"] .lark-hero {
  padding-right: 62px;
}

.lark-hero-main {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 188px;
  gap: 12px;
}

.lark-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.lark-mark img {
  width: 34px;
  height: 34px;
}

.lark-hero h3 {
  margin: 4px 0 3px;
  font-size: 20px;
  line-height: 1.1;
}

.lark-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.lark-hero-actions {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lark-hero-account {
  width: min(280px, 100%);
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
}

.lark-hero-account strong,
.lark-hero-account span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-hero-account strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.15;
}

.lark-hero-account span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
}

.lark-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.lark-status-badge.ok {
  border-color: rgba(32, 214, 138, 0.28);
  background: #effaf5;
  color: #047857;
}

.lark-status-badge.pending {
  border-color: rgba(251, 146, 60, 0.28);
  background: #fff7ed;
  color: #9a3412;
}

.lark-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.lark-status-strip strong {
  color: #263343;
  font-size: 11px;
  white-space: nowrap;
}

.lark-account-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 12px;
  margin: 0 18px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #fbfcff;
}

.lark-account-panel.is-connected {
  border-color: rgba(34, 197, 94, 0.24);
  background: #f4fbf7;
}

.lark-account-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lark-account-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff center / cover no-repeat;
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
}

.lark-account-panel h4 {
  margin: 0 0 2px;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-account-panel p,
.lark-account-side small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.lark-account-side {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.lark-account-side span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.lark-work-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  padding: 12px 18px 100px;
  overflow: hidden;
}

.app-shell.view-assistant.lark-mode .lark-work-grid {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.view-assistant.lark-mode .lark-feed-panel {
  grid-column: auto;
}

.lark-module-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.lark-tabs {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 2px 1px;
}

.lark-action-card,
.lark-home-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 8px 10px;
  align-items: start;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 12px;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.lark-action-card:hover,
.lark-action-card.active {
  border-color: rgba(45, 212, 191, 0.5);
  background: #faffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.lark-action-card.active {
  box-shadow: 0 16px 42px rgba(20, 184, 166, 0.13);
}

.lark-action-copy,
.lark-home-card {
  min-width: 0;
}

.lark-action-copy {
  display: grid;
  gap: 4px;
}

.lark-action-copy strong,
.lark-home-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 13px;
  line-height: 1.18;
}

.lark-action-copy small,
.lark-home-card small {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lark-action-state {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  background: #effaf5;
  color: #047857;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 900;
}

.lark-action-card[data-state="planned"] .lark-action-state {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #1d4ed8;
}

.lark-action-card[data-state="support"] .lark-action-state {
  border-color: rgba(124, 58, 237, 0.22);
  background: #f5f3ff;
  color: #6d28d9;
}

.lark-workspace.is-capability-open .lark-tabs {
  min-height: 54px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 8px;
  scrollbar-gutter: stable;
}

.lark-workspace.is-capability-open .lark-action-card {
  min-width: max-content;
  min-height: 44px;
  grid-template-columns: 28px minmax(0, auto);
  grid-template-rows: auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.lark-workspace.is-capability-open .lark-action-copy {
  display: block;
}

.lark-workspace.is-capability-open .lark-action-copy small,
.lark-workspace.is-capability-open .lark-action-state {
  display: none;
}

.lark-workspace.is-capability-open .lark-capability-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.workspace-slot[data-slot="side"] .lark-tabs {
  min-height: 54px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 8px;
  scrollbar-gutter: stable;
}

.workspace-slot[data-slot="side"] .lark-action-card {
  min-width: max-content;
  min-height: 44px;
  grid-template-columns: 28px minmax(0, auto);
  grid-template-rows: auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.workspace-slot[data-slot="side"] .lark-action-copy {
  display: block;
}

.workspace-slot[data-slot="side"] .lark-action-copy small,
.workspace-slot[data-slot="side"] .lark-action-state {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-capability-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.lark-module-toolbar {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
  align-items: end;
  gap: 12px;
}

.lark-module-toolbar > div {
  min-width: 0;
}

.lark-module-shell[data-capability="docs"],
.lark-module-shell[data-capability="files"],
.lark-module-shell[data-capability="sheets"],
.lark-module-shell[data-capability="base"] {
  gap: 14px;
}

.lark-module-shell[data-capability="docs"] .lark-module-toolbar,
.lark-module-shell[data-capability="files"] .lark-module-toolbar,
.lark-module-shell[data-capability="sheets"] .lark-module-toolbar,
.lark-module-shell[data-capability="base"] .lark-module-toolbar {
  min-height: 0;
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 255, 0.98)),
    radial-gradient(circle at 12% 20%, rgba(45, 212, 191, 0.12), transparent 34%);
  padding: 14px;
}

.lark-module-toolbar h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 20px;
  line-height: 1.15;
}

.lark-module-toolbar p {
  min-width: 0;
  margin: 5px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.lark-module-shell[data-capability="docs"] .lark-module-toolbar p,
.lark-module-shell[data-capability="files"] .lark-module-toolbar p,
.lark-module-shell[data-capability="sheets"] .lark-module-toolbar p,
.lark-module-shell[data-capability="base"] .lark-module-toolbar p {
  max-width: 430px;
}

.lark-module-summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.lark-module-summary[hidden] {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-module-summary {
  min-height: 62px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-gutter: stable;
}

.lark-summary-card {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.workspace-slot[data-slot="side"] .lark-summary-card {
  min-width: 126px;
  min-height: 56px;
  padding: 8px;
}

.lark-summary-card.wide {
  grid-column: span 2;
}

.workspace-slot[data-slot="side"] .lark-summary-card.wide {
  min-width: 220px;
}

.lark-summary-card span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-summary-card strong {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.workspace-slot[data-slot="side"] .lark-summary-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lark-capability-panel,
.lark-capability-detail,
.lark-feed-panel {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow: visible;
}

.lark-capability-panel,
.lark-capability-detail,
.lark-feed-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px;
}

.lark-capability-panel {
  grid-template-rows: auto auto;
  align-self: start;
}

.lark-capability-detail {
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  align-self: start;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.lark-feed-panel {
  grid-column: 1 / -1;
  grid-template-rows: auto minmax(0, 1fr);
}

.lark-feed-panel .section-heading p,
.lark-capability-heading p {
  max-width: none;
  white-space: normal;
}

.lark-feed-tools {
  min-width: min(420px, 100%);
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.lark-module-shell[data-capability="docs"] .lark-feed-tools,
.lark-module-shell[data-capability="files"] .lark-feed-tools,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools,
.lark-module-shell[data-capability="base"] .lark-feed-tools {
  min-width: min(460px, 100%);
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.lark-module-shell[data-capability="docs"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="files"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="base"] .lark-feed-tools .secondary-button {
  display: none;
}

.lark-search-wrap {
  min-height: 38px;
}

.lark-module-shell[data-capability="docs"] .lark-search-wrap,
.lark-module-shell[data-capability="files"] .lark-search-wrap,
.lark-module-shell[data-capability="sheets"] .lark-search-wrap,
.lark-module-shell[data-capability="base"] .lark-search-wrap {
  min-height: 42px;
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.lark-search-wrap input {
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 0 12px 0 38px;
  font-size: 12px;
}

.lark-search-wrap:focus-within {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.06),
    0 0 0 3px rgba(45, 212, 191, 0.12);
}

.lark-module-shell[data-capability="docs"] .lark-search-wrap input,
.lark-module-shell[data-capability="files"] .lark-search-wrap input,
.lark-module-shell[data-capability="sheets"] .lark-search-wrap input,
.lark-module-shell[data-capability="base"] .lark-search-wrap input {
  min-height: 42px;
  font-size: 13px;
}

.lark-feed-tools .primary-button,
.lark-feed-tools .secondary-button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.lark-module-shell[data-capability="docs"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="files"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="base"] .lark-feed-tools .primary-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 15px;
}

.lark-capability-grid {
  min-height: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.lark-capability-card {
  min-width: 0;
  min-height: 106px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 10px;
  align-items: start;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  padding: 11px;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.lark-capability-card:hover,
.lark-capability-card.active {
  border-color: rgba(45, 212, 191, 0.5);
  background: #faffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.lark-capability-card.active {
  box-shadow: 0 16px 42px rgba(20, 184, 166, 0.13);
}

.lark-capability-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 11px;
  background: #ffffff;
  color: #0f766e;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.lark-capability-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-capability-card[data-state="planned"] .lark-capability-icon {
  color: #2563eb;
}

.lark-capability-card[data-state="support"] .lark-capability-icon {
  color: #7c3aed;
}

.lark-capability-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lark-capability-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
}

.lark-capability-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.lark-capability-state {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  background: #effaf5;
  color: #047857;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}

.lark-capability-card[data-state="planned"] .lark-capability-state,
.lark-capability-state[data-state="planned"] {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #1d4ed8;
}

.lark-capability-card[data-state="support"] .lark-capability-state,
.lark-capability-state[data-state="support"] {
  border-color: rgba(124, 58, 237, 0.22);
  background: #f5f3ff;
  color: #6d28d9;
}

.lark-detail-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lark-capability-detail h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
}

.lark-capability-detail > p {
  margin: 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.5;
}

.lark-detail-block {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.lark-detail-block strong,
.lark-detail-next span {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-detail-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lark-detail-block li {
  position: relative;
  margin: 0;
  padding-left: 17px;
  color: #475467;
  font-size: 12px;
  line-height: 1.4;
}

.lark-detail-block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
}

.lark-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lark-scope-list span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 850;
}

.lark-detail-next {
  display: grid;
  gap: 5px;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 10px;
  background: #f0fdfa;
}

.lark-detail-next p {
  margin: 0;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.42;
}

.lark-feed-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
  gap: 12px;
  overflow: hidden;
}

.lark-feed-layout[data-mode="cards"] {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
}

.lark-feed-layout[data-mode="cards"] .lark-chat-list {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.lark-feed-layout[data-mode="resources"] {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="loading"] {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="resources"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.workspace-slot[data-slot="main"] .lark-feed-layout[data-mode="resources"] .lark-chat-list {
  padding-right: 26px;
}

.lark-feed-layout[data-mode="loading"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="resources"] .lark-message-list {
  display: none;
}

.lark-feed-layout[data-mode="loading"] .lark-message-list {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-feed-layout,
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="cards"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="split"] {
  min-height: 190px;
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="resources"] {
  min-height: 260px;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="loading"] {
  min-height: 220px;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="cards"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="resources"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="split"] {
  grid-template-columns: minmax(260px, 0.35fr) minmax(0, 1fr);
}

.lark-chat-list,
.lark-message-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.lark-message-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px;
}

.lark-action-empty,
.lark-send-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.lark-action-empty {
  align-content: start;
}

.lark-action-empty strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
}

.lark-action-empty p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.lark-message-start {
  align-content: start;
}

.lark-message-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lark-message-start-grid span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  background: #f0fdfa;
  padding: 9px;
}

.lark-message-start-grid strong {
  color: #0f766e;
  font-size: 18px;
  line-height: 1;
}

.lark-message-start-grid small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.workspace-slot[data-slot="side"] .lark-module-toolbar {
  min-height: 0;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

.workspace-slot[data-slot="side"] .lark-module-toolbar h3 {
  font-size: 17px;
}

.workspace-slot[data-slot="side"] .lark-module-toolbar p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workspace-slot[data-slot="side"] .lark-feed-tools {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.workspace-slot[data-slot="side"] .lark-feed-tools .secondary-button {
  display: none;
}

.lark-send-target {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lark-send-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-send-target-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lark-send-target span:not(.lark-send-avatar) {
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-send-target strong,
.lark-send-target small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-send-target strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
}

.lark-send-target small {
  color: #64748b;
  font-size: 11px;
}

.lark-send-target-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.lark-target-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #2563eb;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.lark-target-action:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.lark-target-action:disabled {
  color: #98a2b3;
  background: #f8fafc;
  box-shadow: none;
  cursor: wait;
  transform: none;
}

.lark-target-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-target-action-muted {
  border-color: transparent;
  color: #667085;
  background: transparent;
}

.lark-conversation-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-bottom: 2px;
}

.lark-conversation-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.lark-conversation-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lark-conversation-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
}

.lark-conversation-head small {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lark-conversation-head .secondary-button {
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}

.lark-conversation-list {
  max-height: 285px;
  min-height: 0;
  display: grid;
  gap: 7px;
  overflow: auto;
  padding: 2px 3px 2px 0;
  scrollbar-gutter: stable;
}

.lark-chat-thread {
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.98));
}

.lark-message-list:has(.lark-send-panel.is-conversation-view) {
  align-content: stretch;
}

.lark-send-panel.is-conversation-view {
  min-height: 460px;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  animation: larkChatPanelIn 260ms ease both;
}

.lark-send-panel.is-conversation-view .lark-conversation-list {
  max-height: none;
  align-content: start;
  padding: 12px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.lark-send-panel.is-conversation-view .lark-conversation-message {
  width: min(88%, 520px);
  border-color: rgba(203, 213, 225, 0.88);
  border-radius: 14px 14px 14px 4px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  animation: larkMessageBubbleIn 220ms ease both;
}

.lark-send-panel.is-conversation-view .lark-conversation-message.mine {
  border-color: rgba(37, 99, 235, 0.18);
  border-radius: 14px 14px 4px 14px;
  background: #eff6ff;
}

.lark-send-panel.is-conversation-view .lark-compose-box textarea {
  height: 68px;
  min-height: 62px;
  max-height: 132px;
  padding-top: 10px;
}

.lark-conversation-message {
  width: min(92%, 520px);
  min-width: 0;
  justify-self: start;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px 10px;
}

.lark-conversation-message.mine {
  justify-self: end;
  border-color: rgba(20, 184, 166, 0.22);
  background: #ecfeff;
}

.lark-conversation-message span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
}

.lark-conversation-message p,
.lark-conversation-empty {
  margin: 0;
  color: #263343;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lark-message-attachments {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.lark-message-attachment {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.lark-message-attachment-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ecfeff;
  color: #0f766e;
}

.lark-message-attachment-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-message-attachment > div:not(.lark-message-attachment-actions) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lark-message-attachment strong,
.lark-message-attachment small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-message-attachment strong {
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
}

.lark-message-attachment small {
  color: #64748b;
  font-size: 10.5px;
}

.lark-message-attachment-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lark-message-attachment-actions .lark-card-action {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10.5px;
}

.lark-conversation-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  padding: 10px;
}

.lark-conversation-empty[data-type="error"] {
  border-color: rgba(239, 68, 68, 0.22);
  background: #fff7f7;
  color: #b42318;
  font-weight: 850;
}

.lark-conversation-loading {
  min-height: 74px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.lark-send-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.lark-send-field {
  display: grid;
  gap: 7px;
}

.lark-send-field span {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-compose-box {
  min-width: 0;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lark-compose-box:focus-within {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.lark-send-field textarea {
  width: 100%;
  min-height: 142px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.lark-compose-box textarea {
  min-height: 118px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 12px 4px;
  box-shadow: none;
}

.lark-compose-box textarea:focus {
  outline: 0;
}

.lark-compose-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 8px;
}

.lark-composer-icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.lark-composer-icon-button:hover {
  border-color: rgba(37, 99, 235, 0.12);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

.lark-composer-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-attach-icon-button {
  position: relative;
}

.lark-attach-icon-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.lark-send-icon-button {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.lark-send-icon-button:hover {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
  transform: translateY(-1px);
}

.lark-composer-icon-button:disabled,
.lark-composer-icon-button:has(input:disabled) {
  border-color: rgba(203, 213, 225, 0.7);
  background: #f8fafc;
  color: #98a2b3;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.lark-selected-files {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

.lark-selected-files span {
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-send-status {
  min-height: 18px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.lark-send-status[data-type="ok"] {
  color: #047857;
  font-weight: 850;
}

.lark-send-status[data-type="warning"] {
  color: #9a3412;
  font-weight: 850;
}

.lark-send-status[data-type="error"] {
  color: #b42318;
  font-weight: 850;
}

.lark-result-card,
.lark-detail-card,
.lark-table-card,
.lark-record-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.lark-resource-card {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.lark-resource-card:hover {
  border-color: rgba(20, 184, 166, 0.35);
  background: #fcffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.lark-resource-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, #f0fdfa, #eff6ff);
  color: #0f766e;
}

.lark-resource-card[data-kind="wiki"] .lark-resource-card-icon {
  border-color: rgba(139, 92, 246, 0.18);
  background: linear-gradient(135deg, #f5f3ff, #eff6ff);
  color: #6d28d9;
}

.lark-drive-file-card .lark-resource-card-icon,
.lark-resource-card[data-kind="file"] .lark-resource-card-icon {
  border-color: rgba(37, 99, 235, 0.16);
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  color: #2563eb;
}

.lark-sheet-card .lark-resource-card-icon,
.lark-resource-card[data-kind="sheet"] .lark-resource-card-icon {
  border-color: rgba(5, 150, 105, 0.16);
  background: linear-gradient(135deg, #ecfdf5, #eff6ff);
  color: #047857;
}

.lark-resource-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-resource-card-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lark-resource-card-copy strong {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lark-resource-card-copy span {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lark-resource-card-actions {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.lark-drive-file-card .lark-resource-card-actions {
  align-self: center;
  justify-self: end;
  flex-wrap: nowrap;
}

.lark-result-card {
  cursor: default;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.lark-result-card[data-type="chat"],
.lark-result-card[data-type="direct"] {
  cursor: pointer;
}

.lark-result-card[data-type="direct"] {
  border-color: rgba(14, 165, 233, 0.22);
  background: #f8fbff;
}

.lark-result-card[data-kind="wiki"] {
  border-color: rgba(139, 92, 246, 0.22);
  background: #fbf9ff;
}

.lark-create-doc-card {
  border-color: rgba(15, 118, 110, 0.24);
  background:
    linear-gradient(135deg, rgba(241, 255, 251, 0.92), rgba(255, 255, 255, 0.98)) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.45), rgba(139, 92, 246, 0.24)) border-box;
}

.lark-create-doc-card .lark-resource-card-icon {
  border-color: rgba(20, 184, 166, 0.18);
  background: #ffffff;
  color: #0f766e;
}

.lark-result-card[data-clickable="true"] {
  cursor: pointer;
}

.lark-result-card:hover {
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.lark-result-meta,
.lark-table-card span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-result-title,
.lark-detail-card strong,
.lark-table-card strong,
.lark-record-card strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.lark-result-subtitle,
.lark-detail-card p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 12px;
  line-height: 1.42;
}

.lark-card-action {
  width: fit-content;
  min-height: 30px;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 7px;
  background: #f0fdfa;
  color: #0f766e;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.lark-resource-card .lark-card-action {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 11px;
}

.lark-card-action:hover {
  background: #ccfbf1;
}

.lark-card-action.ghost {
  border-color: rgba(203, 213, 225, 0.85);
  background: #ffffff;
  color: #334155;
}

.lark-card-action.ghost:hover {
  border-color: rgba(148, 163, 184, 0.9);
  background: #f8fafc;
}

.lark-card-action.download {
  border-color: rgba(5, 150, 105, 0.2);
  background: #ecfdf5;
  color: #047857;
}

.lark-card-action.download:hover {
  background: #d1fae5;
}

.lark-card-action.attach {
  border-color: rgba(17, 24, 39, 0.12);
  background: #111827;
  color: #ffffff;
}

.lark-card-action.attach:hover {
  background: #263343;
}

.lark-doc-empty {
  grid-column: 1 / -1;
  min-height: 96px;
  display: grid;
  place-items: center;
  border-style: dashed;
  text-align: center;
}

.lark-resource-preview {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.lark-resource-preview strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.25;
}

.lark-resource-preview p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.lark-resource-flyer {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
  transition:
    transform 520ms cubic-bezier(0.18, 0.9, 0.2, 1),
    opacity 420ms ease;
}

.lark-record-card dl {
  display: grid;
  grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.lark-record-card dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.lark-record-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #263343;
  font-size: 11px;
  line-height: 1.35;
}

.lark-base-card .lark-resource-card-icon,
.lark-resource-card[data-kind="base"] .lark-resource-card-icon {
  border-color: rgba(37, 99, 235, 0.16);
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  color: #2563eb;
}

.lark-base-card {
  min-height: 72px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.lark-base-card .lark-resource-card-actions {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.lark-base-card .lark-card-action {
  min-height: 30px;
  padding: 0 9px;
  font-size: 10.5px;
}

.lark-base-start,
.lark-base-workspace {
  min-width: 0;
}

.lark-base-workspace {
  display: grid;
  gap: 12px;
}

.lark-base-header,
.lark-base-section,
.lark-base-help {
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  background: #ffffff;
}

.lark-base-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(240, 253, 250, 0.8)),
    #ffffff;
}

.lark-base-header-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lark-base-header-copy span,
.lark-base-section-head span,
.lark-base-field-pill small,
.lark-base-table-card span,
.lark-base-table-card small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.3;
}

.lark-base-header-copy span,
.lark-base-table-card span {
  color: #0f766e;
  text-transform: uppercase;
}

.lark-base-header-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.lark-base-header-copy p,
.lark-base-help p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #475467;
  font-size: 12px;
  line-height: 1.42;
}

.lark-base-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.lark-base-section {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.lark-base-section-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.lark-base-section-head strong,
.lark-base-help strong {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.lark-base-start-grid,
.lark-base-table-grid,
.lark-base-field-grid {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.lark-base-start-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lark-base-start-grid span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: #f8fbff;
  padding: 9px;
}

.lark-base-start-grid b {
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.lark-base-start-grid small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 850;
}

.lark-base-table-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.lark-base-table-card {
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
}

.lark-base-table-card:hover,
.lark-base-table-card:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #f8fbff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: 0;
}

.lark-base-table-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.lark-base-help {
  display: grid;
  gap: 5px;
  padding: 11px;
}

.lark-base-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(130px, 0.24fr) minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.lark-base-select,
.lark-base-filter {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
}

.lark-base-filter:focus,
.lark-base-select:focus {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  outline: 0;
}

.lark-base-field-grid {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}

.lark-base-field-pill {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #fbfcff;
  padding: 8px;
}

.lark-base-field-pill[data-primary="true"] {
  border-color: rgba(20, 184, 166, 0.28);
  background: #f0fdfa;
}

.lark-base-field-pill b {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 900;
}

.lark-base-records {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.lark-base-record-summary {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.lark-base-record-table-wrap {
  min-width: 0;
  max-height: 440px;
  overflow: auto;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 8px;
  background: #ffffff;
}

.lark-base-record-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.lark-base-record-table th,
.lark-base-record-table td {
  max-width: 220px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.lark-base-record-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #475467;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-base-record-table td {
  color: #263343;
}

.lark-base-record-table tr:hover td {
  background: #f8fbff;
}

.lark-base-record-title {
  color: #111827;
  font-weight: 900;
}

.lark-chat-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: #263343;
  padding: 10px;
  text-align: left;
}

.lark-chat-item.active,
.lark-chat-item:hover {
  border-color: rgba(45, 212, 191, 0.45);
  background: #f0fdfa;
}

.lark-contact-choice[data-type="direct"] {
  border-color: rgba(14, 165, 233, 0.2);
  background: #f8fbff;
}

.lark-contact-choice[data-sendable="false"] {
  border-style: dashed;
  background: #f8fafc;
  opacity: 0.78;
}

.lark-chat-item strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-chat-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-message-item {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}

.lark-message-item span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.lark-message-item p {
  margin: 0;
  color: #263343;
  font-size: 12px;
  line-height: 1.45;
}

.lark-history-empty {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.lark-loading-card {
  min-height: 128px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  animation: assistantBubbleIn 220ms cubic-bezier(0.2, 0.86, 0.2, 1) both;
}

.lark-loading-card .ai-loader {
  justify-content: center;
}

.lark-capability-result-summary {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 10px;
  background: #f8fffe;
  padding: 11px;
}

.lark-capability-result-summary strong {
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
}

.lark-capability-result-summary span,
.lark-capability-result-summary small,
.lark-capability-result-summary em {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

.lark-result-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.lark-result-scope-list span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 850;
}

.lark-result-item {
  align-content: start;
}

.lark-result-title {
  font-weight: 850;
}

.lark-result-item small,
.lark-result-item code {
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.lark-result-item code {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
  padding: 3px 6px;
  font-family: Consolas, monospace;
}

.settings-message[data-type="ok"] {
  color: #047857;
}

.settings-message[data-type="error"] {
  color: #be123c;
}

.download-panel {
  order: 2;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}

.compact-files-panel {
  order: 2;
  grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.compact-files-heading {
  align-items: center;
  gap: 10px;
}

.compact-files-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.compact-files-panel .section-heading button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #424b5b;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.compact-files-panel .section-heading button:hover {
  border-color: var(--line-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.app-shell.compact-files-collapsed .compact-files-panel {
  align-content: center;
  grid-template-rows: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.78), #ffffff 100%);
}

.app-shell.compact-files-collapsed .compact-files-heading {
  justify-content: center;
}

.app-shell.compact-files-collapsed .compact-files-heading h3,
.app-shell.compact-files-collapsed #openFilesPanelBtn,
.app-shell.compact-files-collapsed .compact-download-list {
  display: none;
}

.app-shell.files-mode .download-panel {
  grid-template-rows: auto auto;
  padding-top: 13px;
  padding-bottom: 13px;
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}

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

.layout-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 94px 258px minmax(540px, 1fr) 386px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: ". . main side";
  gap: 10px;
  padding: 14px;
  background: rgba(248, 250, 252, 0.58);
  backdrop-filter: blur(2px);
}

.app-shell.view-inbox .layout-drop-overlay {
  grid-template-columns: 94px 258px minmax(680px, 1fr) 420px;
}

.layout-drop-overlay[hidden] {
  display: none;
}

.sidebar-collapsed .layout-drop-overlay {
  grid-template-columns: 94px 74px minmax(600px, 1fr) 386px;
}

.app-shell.view-inbox.sidebar-collapsed .layout-drop-overlay {
  grid-template-columns: 94px 74px minmax(720px, 1fr) 420px;
}

.layout-drop-zone {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 2px dashed rgba(59, 130, 246, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 18px 42px rgba(15, 23, 42, 0.12);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.layout-drop-zone.main {
  grid-area: main;
}

.layout-drop-zone.side {
  grid-area: side;
}

.layout-drop-overlay[data-drag-section="automation"] {
  grid-template-areas: ". . main main";
}

.layout-drop-overlay[data-drag-section="automation"] .layout-drop-zone.main {
  border-color: rgba(37, 99, 235, 0.48);
  background: rgba(239, 246, 255, 0.9);
}

.layout-drop-overlay[data-drag-section="automation"] .layout-drop-zone.side {
  display: none;
}

.layout-drop-zone span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 13px;
  font-weight: 900;
}

.layout-drop-zone small {
  max-width: min(230px, calc(100% - 28px));
  color: inherit;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.25;
}

.layout-drop-zone small[hidden] {
  display: none !important;
}

.layout-drop-zone.is-over {
  border-color: #2563eb;
  background: rgba(239, 246, 255, 0.88);
  transform: scale(0.99);
}

.layout-drop-zone.is-blocked {
  border-color: rgba(148, 163, 184, 0.56);
  background: rgba(248, 250, 252, 0.78);
  color: #64748b;
}

.layout-drop-zone.is-blocked span {
  color: #475569;
}

.layout-drop-zone.is-blocked.is-over {
  border-color: rgba(220, 38, 38, 0.62);
  background: rgba(254, 242, 242, 0.9);
  color: #991b1b;
}

.section-heading h3 {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.25;
}

.section-heading p {
  max-width: 255px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-panel .section-heading p {
  max-width: 560px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
}

.file-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 78px;
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.search-input-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: #7a8393;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-bar input,
.file-search-bar input,
.file-search-bar select {
  width: 100%;
  height: 32px;
  border: 0;
  outline: none;
  border-radius: 7px;
  background: #f9fafb;
  color: var(--text);
  padding: 0 10px 0 34px;
  font-size: 13px;
}

.file-search-bar select {
  padding: 0 9px;
  color: #475467;
  appearance: none;
}

.search-bar input:focus,
.file-search-bar input:focus,
.file-search-bar select:focus {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #cdd5e2;
}

.search-bar button,
.file-search-bar button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
  transition: transform 150ms ease, background 150ms ease;
}

.search-bar button:hover,
.file-search-bar button:hover {
  background: #0f172a;
  transform: translateY(-1px);
}

.quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mail-quick-dropdown {
  position: relative;
  display: inline-flex;
}

.quick-filters button,
.folder-actions button,
.file-action {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #424b5b;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.quick-filters button:hover,
.folder-actions button:hover,
.file-action:hover {
  border-color: var(--line-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.quick-filters .scope-toggle {
  margin-left: auto;
  color: #0f766e;
  border-color: #b7e4db;
  background: linear-gradient(135deg, #ffffff, #f1fcf9);
}

.quick-filters .refresh-filter {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.quick-filters .quick-filter-toggle {
  color: #9a3412;
  border-color: #fed7aa;
  background: linear-gradient(135deg, #ffffff, #fff7ed);
}

.quick-filters .compose-filter {
  color: #ffffff;
  border-color: #0f766e;
  background: linear-gradient(135deg, #0f766e, #115e59);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

.quick-filters .compose-filter:hover {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.quick-filters .quick-filter-toggle[aria-expanded="true"] {
  color: #ffffff;
  border-color: #c2410c;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  box-shadow: 0 10px 22px rgba(194, 65, 12, 0.14);
}

.quick-filters .refresh-filter:hover {
  border-color: #93c5fd;
  background: #dbeafe;
}

.quick-filters .scope-toggle.is-active {
  color: #ffffff;
  border-color: #0f766e;
  background: linear-gradient(135deg, #0f766e, #164e63);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16);
}

.quick-filters .scope-toggle.is-active:hover {
  background: linear-gradient(135deg, #115e59, #0f172a);
}

.mail-quick-menu,
.mail-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  width: 216px;
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
}

.mail-quick-menu[hidden],
.mail-more-menu[hidden] {
  display: none;
}

.mail-quick-menu button,
.mail-more-menu button {
  min-height: 32px;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.mail-quick-menu button:hover,
.mail-more-menu button:hover {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #075985;
  transform: translateY(-1px);
}

.messages,
.download-list {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.messages {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-right: 3px;
}

.mail-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mail-page-center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mail-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
}

.mail-page-jump label {
  color: var(--muted);
  padding-left: 4px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mail-page-jump input {
  width: 46px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: #f8fafc;
  color: #263343;
  padding: 0 6px;
  outline: none;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.mail-page-jump input:focus {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #cdd5e2;
}

.mail-pagination[hidden] {
  display: none;
}

.mail-pagination button,
.mail-page-jump button {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #263343;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.mail-page-jump button {
  min-height: 24px;
  padding: 0 8px;
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.mail-pagination button:hover:not(:disabled),
.mail-page-jump button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.mail-page-jump button:hover:not(:disabled) {
  border-color: #111827;
  background: #111827;
}

.mail-pagination button:disabled,
.mail-page-jump input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.mail-pagination span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.app-shell.view-assistant .mail-pagination {
  gap: 6px;
}

.app-shell.view-assistant .mail-page-center {
  gap: 5px;
}

.app-shell.view-assistant .mail-page-jump label {
  display: none;
}

.app-shell.view-assistant .mail-page-jump input {
  width: 38px;
}

.app-shell.view-assistant .mail-pagination button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.system-message {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}

.system-message.ai-loading {
  border-color: rgba(139, 92, 246, 0.18);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(34, 211, 238, 0.3), rgba(16, 185, 129, 0.24)) border-box;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.ai-loader {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ai-spinner {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(139, 92, 246, 0.18),
    var(--purple),
    var(--cyan),
    #10b981,
    rgba(139, 92, 246, 0.18)
  );
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.28),
    0 0 22px rgba(139, 92, 246, 0.18);
  animation: aiLoaderSpin 900ms linear infinite;
}

.ai-spinner::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.85);
}

.assistant-bubble .ai-spinner::after {
  background: #fbfbff;
}

.ai-loader-text {
  min-width: 0;
  color: #475467;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  white-space: pre-line;
}

.assistant-bubble .ai-loader-text {
  color: #27324a;
}

@keyframes aiLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.download-result-message {
  color: #344054;
  background: #f8fafc;
}

.mail-card {
  position: relative;
  z-index: 0;
  overflow: visible;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.mail-card:hover {
  z-index: 1;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.mail-card.is-menu-open {
  z-index: 60;
  border-color: #bfdbfe;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  transform: none;
}

.mail-card-top {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
}

.mail-provider-icon {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.mail-provider-image {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  object-fit: contain;
}

.mail-subject-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  justify-content: start;
  gap: 6px;
}

.mail-card h3 {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.important-button {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.important-button:hover {
  background: #fef3c7;
  color: #d97706;
  transform: translateY(-1px);
}

.important-button.is-important {
  color: #f59e0b;
  text-shadow: 0 4px 14px rgba(245, 158, 11, 0.24);
}

.from,
.snippet,
.mail-card time {
  color: var(--muted);
}

.from {
  margin-bottom: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-card time {
  font-size: 11px;
  white-space: nowrap;
}

.snippet {
  display: -webkit-box;
  margin: 9px 0 10px;
  overflow: hidden;
  color: #3f4756;
  font-size: 12px;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.attachments {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.attachment {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #313846;
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.attachment-label {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ghost {
  border: 0;
  background: transparent;
  color: #4c1d95;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

.ghost:disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}

.mail-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 -1px;
}

.mail-card-badges[hidden] {
  display: none;
}

.mail-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  border-radius: 999px;
  padding: 0 7px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.mail-status-chip.info {
  background: #dbeafe;
  color: #1d4ed8;
}

.mail-status-chip.hot {
  background: #fee2e2;
  color: #b91c1c;
}

.mail-status-chip.file {
  background: #dcfce7;
  color: #166534;
}

.mail-status-chip.quiet {
  background: #fef3c7;
  color: #92400e;
}

.mail-status-chip.promo {
  background: #fae8ff;
  color: #86198f;
}

.mail-status-chip.social {
  background: #e0f2fe;
  color: #0369a1;
}

.mail-status-chip.business {
  background: #ede9fe;
  color: #5b21b6;
}

.mail-more-dropdown {
  position: relative;
  display: inline-flex;
}

.detail {
  display: none;
  max-height: 210px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
  color: #344054;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
}

.detail.visible {
  display: block;
}

.summary-detail {
  border-color: #bae6fd;
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
  color: #0f172a;
}

.mail-reader-summary {
  margin: 0;
}

.mail-action-toast {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.98);
  color: #1e3a8a;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.mail-action-toast button {
  min-height: 28px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.mail-action-toast.is-passive {
  justify-content: center;
}

.mail-reader {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.mail-reader-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mail-reader-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mail-reader-back,
.mail-reader-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #263343;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.mail-reader-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(244, 63, 94, 0.26);
  background: linear-gradient(180deg, #fff7f7 0%, #fff1f2 100%);
  color: #be123c;
  box-shadow: 0 8px 18px rgba(244, 63, 94, 0.1);
}

.mail-reader-back svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.mail-reader-back:hover,
.mail-reader-actions button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.mail-reader-back:hover {
  border-color: rgba(225, 29, 72, 0.42);
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.14);
}

.mail-reader-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.app-shell.view-assistant .mail-reader-top {
  gap: 8px;
}

.app-shell.view-assistant .mail-reader-back {
  width: 34px;
  min-width: 34px;
  padding: 0;
  justify-content: center;
}

.app-shell.view-assistant .mail-reader-back span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.app-shell.view-assistant .mail-reader-actions {
  flex: 1;
  flex-wrap: nowrap;
}

.app-shell.view-assistant .mail-reader-actions button {
  min-width: 0;
  padding: 0 9px;
  white-space: nowrap;
}

.mail-reader-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.mail-reader-header h3 {
  margin-bottom: 10px;
  color: #111827;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mail-reader-meta {
  display: grid;
  gap: 4px;
}

.mail-reader-meta p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mail-reader-meta strong {
  color: #344054;
}

.mail-reader-attachments {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mail-reader-attachments > strong {
  font-size: 12px;
  color: #344054;
}

.mail-reader-body {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  color: #1f2937;
  scrollbar-gutter: stable;
}

.mail-reader-body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.folder-actions.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.folder-actions.inline button:first-child {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.download-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-right: 3px;
}

.compact-download-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 58px;
  gap: 8px;
  overflow: hidden;
}

.app-shell.files-mode .download-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
}

.download-list .download-result-message {
  grid-column: 1 / -1;
}

.download-item {
  min-height: 98px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.compact-download-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.download-file-content {
  min-width: 0;
}

.compact-download-content {
  min-width: 0;
}

.download-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  text-align: center;
}

.download-empty strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.download-empty span {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.download-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.download-empty-actions .file-action:first-child {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.download-item strong,
.download-file-content span,
.download-empty {
  font-size: 12px;
  line-height: 1.25;
}

.compact-download-item strong,
.compact-download-content span,
.compact-download-empty {
  font-size: 11px;
  line-height: 1.25;
}

.download-item strong {
  display: block;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-download-item strong {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-file-content span {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-download-content span {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 46px 55px 32px;
  gap: 5px;
  align-items: center;
  justify-content: end;
}

.compact-download-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.file-action {
  min-height: 28px;
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-file-action {
  min-height: 26px;
  min-width: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: #424b5b;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 800;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.compact-file-action:hover {
  border-color: var(--line-strong);
  background: #f8fafc;
  transform: translateY(-1px);
}

.compact-file-action.attach-file-action {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.compact-file-action svg {
  width: 15px;
  height: 15px;
}

.attach-file-action,
.primary-file-action {
  border-color: #bee6df;
  background: #f1fffb;
  color: #0f766e;
}

.attach-file-action {
  width: 32px;
  padding: 0;
  display: grid;
  place-items: center;
}

.attach-file-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attach-file-action:hover,
.primary-file-action:hover {
  border-color: #8ddbd0;
  background: #e8fbf7;
}

.attach-file-action.is-loading svg {
  opacity: 0.45;
}

.file-action:disabled {
  cursor: wait;
  opacity: 0.7;
}

.file-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.compact-download-item .file-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 8px;
}

.compact-download-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  text-align: center;
}

.attachment .file-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  font-size: 7px;
}

.file-icon.pdf {
  background: linear-gradient(135deg, #ef4444, #fca5a5);
}

.download-item .file-icon,
.attachment .file-icon {
  color: #ffffff;
}

.file-icon.sheet {
  background: linear-gradient(135deg, #16a34a, #86efac);
}

.file-icon.doc {
  background: linear-gradient(135deg, #2563eb, #93c5fd);
}

.file-icon.xml {
  background: linear-gradient(135deg, #f59e0b, #fde68a);
  color: #5f370e;
}

.download-item .file-icon.xml,
.attachment .file-icon.xml {
  color: #5f370e;
}

.file-icon.image {
  background: linear-gradient(135deg, #7c3aed, #c4b5fd);
}

.file-icon.file {
  background: linear-gradient(135deg, #64748b, #cbd5e1);
}

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

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}

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

.mail-toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.mail-toast {
  position: relative;
  width: min(360px, calc(100vw - 44px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 14px 12px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.76) inset;
  animation: mailToastIn 260ms cubic-bezier(0.2, 0.86, 0.2, 1) both;
  overflow: hidden;
}

.mail-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.13), rgba(139, 92, 246, 0.12), rgba(251, 113, 133, 0.12));
}

.mail-toast-icon,
.mail-toast-content {
  position: relative;
  z-index: 1;
}

.mail-toast-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.mail-toast-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mail-toast-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-review-bell {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
}

.account-review-bell[data-count]:not([data-count="0"]) {
  border-color: rgba(37, 99, 235, 0.25);
  background: #eff6ff;
  color: #1d4ed8;
}

.account-review-bell[data-state="pending"] {
  border-color: rgba(20, 184, 166, 0.5);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.92), transparent 34%),
    linear-gradient(135deg, #14b8a6, #2563eb);
  color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.1),
    0 12px 24px rgba(37, 99, 235, 0.18);
  animation: flowmoReviewBellPulse 1.9s ease-in-out infinite;
}

.account-review-bell[data-state="pending"] svg {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.42));
}

.account-review-bell span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.account-review-bell[data-state="pending"] span {
  border-color: #ffffff;
  background: linear-gradient(135deg, #f43f5e, #f97316);
  box-shadow: 0 6px 14px rgba(244, 63, 94, 0.25);
}

@keyframes flowmoReviewBellPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 4px rgba(20, 184, 166, 0.1),
      0 12px 24px rgba(37, 99, 235, 0.18);
  }
  50% {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 7px rgba(20, 184, 166, 0.08),
      0 16px 28px rgba(37, 99, 235, 0.22);
  }
}

.flowmo-automation-toast[data-tone="success"] .mail-toast-icon {
  background: #ecfdf3;
  color: #047857;
}

.flowmo-automation-toast[data-tone="error"] .mail-toast-icon {
  background: #fff1f2;
  color: #be123c;
}

.flowmo-automation-toast[data-tone="success"]::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(37, 99, 235, 0.1));
}

.flowmo-automation-toast[data-tone="error"]::before {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(251, 146, 60, 0.1));
}

.mail-toast-content strong,
.mail-toast-content span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-toast-content strong {
  margin-bottom: 3px;
  color: #111827;
  font-size: 13px;
}

.mail-toast-content span {
  color: var(--muted);
  font-size: 12px;
}

.flowmo-automation-toast .mail-toast-content span {
  white-space: normal;
  overflow-wrap: anywhere;
}

@keyframes mailToastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.settings-modal {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.modal-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.2;
}

.modal-header p,
.settings-form p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-form {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.settings-form label {
  font-size: 12px;
  font-weight: 850;
  color: #344054;
}

.settings-form input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--text);
  padding: 0 11px;
  outline: none;
}

.settings-form input:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.lark-draft-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d7f3ef;
  border-radius: 10px;
  background: #f8fffe;
}

.lark-draft-actions.is-muted {
  opacity: 0.62;
}

.lark-draft-actions strong,
.lark-draft-actions span {
  display: block;
}

.lark-draft-actions strong {
  margin-bottom: 3px;
  color: #0f172a;
  font-size: 13px;
}

.lark-draft-actions span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.ai-action-confirmation {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #bfd7ff;
  border-radius: 10px;
  background: #f7fbff;
}

.ai-action-confirmation[data-state="working"] {
  opacity: 0.78;
}

.ai-action-confirmation[data-state="confirmed"] {
  border-color: #bbf7d0;
  background: #f8fff9;
}

.ai-action-confirmation[data-state="cancelled"] {
  opacity: 0.68;
}

.ai-action-confirmation[data-state="editing"] {
  border-color: #f8d49c;
  background: #fff8ed;
}

.ai-action-confirmation[data-state="error"] {
  border-color: #fecaca;
  background: #fffafa;
}

.ai-action-confirmation-head strong,
.ai-action-confirmation-head span {
  display: block;
}

.ai-action-confirmation-head strong {
  margin-bottom: 3px;
  color: #0f172a;
  font-size: 13px;
}

.ai-action-confirmation-head span,
.ai-action-confirmation li {
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
}

.ai-action-confirmation ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.ai-action-confirmation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-action-confirmation-result {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.lark-draft-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lark-destination-modal {
  width: min(520px, calc(100vw - 32px));
}

.lark-destination-form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.lark-destination-form label,
.lark-wiki-fields {
  display: grid;
  gap: 6px;
}

.lark-wiki-fields {
  padding: 12px;
  border: 1px solid #e5e9f0;
  border-radius: 11px;
  background: #fbfcff;
}

.lark-destination-form label span {
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.lark-destination-form input,
.lark-destination-form select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 10px;
  outline: none;
  font-size: 13px;
}

.lark-destination-form input:focus,
.lark-destination-form select:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.lark-wiki-fields small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.primary-button,
.secondary-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.primary-button {
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
}

.secondary-button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: #424b5b;
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-message {
  min-height: 16px;
  color: var(--muted);
  font-size: 12px;
}

.settings-message[data-type="error"] {
  color: var(--danger);
}

.settings-page-grid {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}

.settings-profile-card,
.settings-connections {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.settings-workspace .settings-form {
  padding: 16px;
}

.settings-card-header,
.settings-section-title,
.connection-card-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.settings-card-header > div,
.connection-card-main > div {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-card-header {
  margin-bottom: 4px;
}

.settings-card-header h3,
.settings-section-title h3,
.connection-card h4 {
  min-width: 0;
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  line-height: 1.2;
}

.settings-card-header h3,
.settings-section-title h3 {
  font-size: 15px;
}

.settings-card-header p,
.settings-section-title p,
.connection-card p,
.connection-meta {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d7f3ef;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fffd, #f3f0ff);
  color: #0f766e;
  box-shadow: 0 12px 24px rgba(20, 184, 166, 0.1);
}

.settings-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.settings-connections {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.settings-section-title {
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.settings-section-title > div {
  min-width: 0;
}

.connection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #ffffff;
}

.connection-card.is-disabled {
  background: #fbfcff;
}

.connection-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 10px;
}

.connection-logo.outlook {
  padding: 2px;
}

.connection-card h4 {
  font-size: 14px;
}

.connection-badge {
  max-width: 112px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 0 9px;
  border: 1px solid var(--line);
  color: #475467;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.connection-badge.ok {
  border-color: #a7f3d0;
  color: #047857;
  background: #ecfdf5;
}

.connection-badge.bad {
  border-color: #fecdd3;
  color: #be123c;
  background: #fff1f2;
}

.connection-badge.pending,
.connection-badge.neutral {
  border-color: #dbeafe;
  color: #1d4ed8;
  background: #eff6ff;
}

.connection-meta {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-left: 47px;
}

.connection-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-workspace {
  padding-inline: 12px;
  padding-top: 58px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-page-grid {
  gap: 10px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-workspace .settings-form,
.workspace-slot[data-section="settings"][data-slot="side"] .settings-connections,
.workspace-slot[data-section="settings"][data-slot="side"] .settings-notifications {
  padding: 12px;
  border-radius: 12px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-section-title {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-section-title h3,
.workspace-slot[data-section="settings"][data-slot="side"] .settings-section-title p {
  max-width: 100%;
}

.workspace-slot[data-section="settings"][data-slot="side"] .settings-card-header p,
.workspace-slot[data-section="settings"][data-slot="side"] .settings-section-title p,
.workspace-slot[data-section="settings"][data-slot="side"] .connection-card p,
.workspace-slot[data-section="settings"][data-slot="side"] .connection-meta,
.workspace-slot[data-section="settings"][data-slot="side"] .notification-provider-title small,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-manager-copy small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.workspace-slot[data-section="settings"][data-slot="side"] .connection-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .connection-badge {
  justify-self: start;
  max-width: 100%;
  margin-left: 47px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .connection-actions {
  justify-content: flex-start;
  padding-left: 47px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .connection-actions .primary-button,
.workspace-slot[data-section="settings"][data-slot="side"] .connection-actions .secondary-button {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-rule-badge {
  justify-self: start;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-provider-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-card {
  gap: 10px;
  padding: 10px;
  border-radius: 11px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-card-head {
  min-width: 0;
  gap: 9px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-rule-groups {
  gap: 8px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-rule-manager {
  gap: 8px;
  padding: 9px;
  border-radius: 10px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-provider-title {
  gap: 8px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-provider-title img {
  width: 26px;
  height: 26px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-lark-control {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
  border-radius: 11px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-lark-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-lark-icon img {
  width: 16px;
  height: 16px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-lark-copy small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.workspace-slot[data-section="settings"][data-slot="side"] .rule-manager-copy strong,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-manager-copy small {
  min-width: 0;
}

.workspace-slot[data-section="settings"][data-slot="side"] .rule-builder {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .rule-builder select,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-builder input,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-builder button {
  min-height: 30px;
  font-size: 11.5px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .rule-chip,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-chip.is-editing {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.workspace-slot[data-section="settings"][data-slot="side"] .rule-type,
.workspace-slot[data-section="settings"][data-slot="side"] .rule-chip strong {
  width: 100%;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-box {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px 9px;
  padding: 8px;
  border-radius: 11px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-icon svg {
  width: 15px;
  height: 15px;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-box p {
  min-width: 0;
  overflow: visible;
  color: #526071;
  font-size: 11px;
  line-height: 1.36;
  text-overflow: clip;
  white-space: normal;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  justify-content: stretch;
}

.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-actions .primary-button,
.workspace-slot[data-section="settings"][data-slot="side"] .notification-help-actions .secondary-button {
  min-width: 0;
  min-height: 30px;
  overflow: hidden;
  padding-inline: 8px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-notifications {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.notification-rule-badge {
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #bee6df;
  border-radius: 999px;
  background: #f1fffb;
  color: #0f766e;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.notification-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.notification-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #ffffff;
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.notification-card:hover {
  border-color: #cfe6ea;
  transform: translateY(-1px);
}

.notification-card.is-muted {
  border-style: dashed;
  background: #f8fafc;
  opacity: 0.72;
}

.notification-lark-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #d7f3ef;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfffe 100%) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.24), rgba(139, 92, 246, 0.16)) border-box;
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
}

.notification-lark-control.is-muted {
  border-color: #e5e9f0;
  background: #f8fafc;
  opacity: 0.74;
}

.notification-lark-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #c6f1ea;
  border-radius: 11px;
  background: #f1fffb;
}

.notification-lark-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.notification-lark-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-lark-copy strong,
.notification-lark-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-lark-copy strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
}

.notification-lark-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.notification-lark-toggle {
  justify-self: end;
}

.notification-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-provider-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-provider-title > span {
  min-width: 0;
}

.notification-provider-title img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.notification-provider-title strong,
.notification-provider-title small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-provider-title strong {
  margin-bottom: 2px;
  color: #111827;
  font-size: 13px;
  line-height: 1.2;
}

.notification-provider-title small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.notification-rule-groups {
  display: grid;
  gap: 10px;
}

.notification-rule-manager {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  background: #fbfcff;
}

.notification-rule-manager.quiet {
  background: #fffdf7;
}

.notification-rule-manager.hidden-view {
  background: #fff7f8;
}

.rule-manager-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rule-manager-copy strong {
  color: #111827;
  font-size: 12px;
  line-height: 1.2;
}

.rule-manager-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.rule-builder {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
}

.rule-builder select,
.rule-builder input,
.rule-chip select,
.rule-chip input {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 9px;
  outline: none;
  font-size: 12px;
}

.rule-builder select:focus,
.rule-builder input:focus,
.rule-chip select:focus,
.rule-chip input:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.rule-builder button,
.rule-chip button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #263343;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
}

.rule-builder button {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.rule-builder button:hover,
.rule-chip button:hover {
  transform: translateY(-1px);
}

.rule-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}

.rule-empty {
  width: 100%;
  padding: 7px 9px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.rule-chip {
  max-width: 100%;
  display: inline-grid;
  grid-template-columns: auto minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #d7f3ef;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.rule-chip.is-editing {
  width: 100%;
  grid-template-columns: 120px minmax(0, 1fr) auto auto;
}

.rule-type {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  background: #f1fffb;
  color: #0f766e;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.rule-chip strong {
  min-width: 0;
  overflow: hidden;
  color: #263343;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.rule-chip button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

.notification-card.is-muted .notification-rule-manager {
  background: #f3f4f6;
}

.toggle-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.toggle-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.toggle-switch span {
  width: 44px;
  height: 24px;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #e5e7eb;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.toggle-switch span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transition: transform 160ms ease;
}

.toggle-switch input:checked + span {
  border-color: #99f6e4;
  background: linear-gradient(135deg, #2dd4bf, #8b5cf6);
  box-shadow: 0 8px 18px rgba(45, 212, 191, 0.18);
}

.toggle-switch input:checked + span::before {
  transform: translateX(20px);
}

.toggle-switch input:focus-visible + span {
  outline: 3px solid rgba(45, 212, 191, 0.18);
  outline-offset: 2px;
}

.notification-help-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #d7f3ef;
  border-radius: 12px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.28), rgba(139, 92, 246, 0.18)) border-box;
}

.notification-help-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notification-help-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-help-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f1fffb;
  color: #0f766e;
}

.notification-help-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-modal {
  width: min(720px, calc(100vw - 32px));
}

.download-options-form {
  display: grid;
  gap: 10px;
  max-height: min(74vh, 720px);
  overflow: auto;
  padding: 16px 18px 18px;
}

.download-option-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
  color: #1f2937;
}

.download-option-card input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
}

.download-option-card strong,
.download-option-card small {
  display: block;
}

.download-option-card strong {
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.2;
}

.download-option-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.download-option-card:has(input:checked) {
  border-color: #b8dce1;
  background: linear-gradient(135deg, #f9ffff, #fbf9ff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.download-option-card select,
.download-search-tools input,
.date-range-grid input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 0 10px;
  outline: none;
  font-size: 12px;
}

.download-option-card select:focus,
.download-search-tools input:focus,
.date-range-grid input:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.download-search-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 8px;
  padding-left: 28px;
}

.download-search-tools button {
  min-height: 34px;
  border: 1px solid #111827;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.download-search-tools button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.download-preview-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow: auto;
  padding-left: 28px;
}

.download-preview-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.download-preview-item input {
  margin-top: 2px;
  accent-color: #0f766e;
}

.download-preview-item span,
.download-preview-item strong,
.download-preview-item small,
.download-preview-item em {
  min-width: 0;
  display: block;
}

.download-preview-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
}

.download-preview-item small,
.download-preview-item em,
.download-preview-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.download-preview-item em {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.download-preview-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #f8fafc;
}

.date-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-left: 28px;
}

.date-range-grid label {
  display: grid;
  gap: 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.mail-composer-form {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 0;
  max-height: none;
  align-content: start;
  overflow: auto;
  padding: 16px 18px 18px;
}

.mail-composer-form label {
  color: #344054;
  font-size: 12px;
  font-weight: 850;
}

.mail-composer-form input,
.mail-composer-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--text);
  outline: none;
  font-size: 13px;
}

.mail-composer-form input {
  height: 38px;
  padding: 0 11px;
}

.mail-composer-form textarea {
  min-height: 150px;
  resize: vertical;
  padding: 11px;
  line-height: 1.45;
}

.mail-composer-form input:focus,
.mail-composer-form textarea:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.mail-permission-notice {
  padding: 10px 12px;
  border: 1px solid #f2d4a7;
  border-radius: 10px;
  background: #fffaf0;
  color: #8a4b0f;
  font-size: 12px;
  line-height: 1.4;
}

.mail-permission-notice a {
  color: #713f12;
  font-weight: 850;
}

.recipient-combobox {
  position: relative;
}

.recipient-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.recipient-suggestions[hidden] {
  display: none;
}

.recipient-suggestions button {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.recipient-suggestions button:hover {
  border-color: #cfe6ea;
  background: #f6feff;
}

.recipient-suggestions strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.recipient-suggestions span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.selected-mail-files {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: hidden;
}

.selected-mail-files[hidden] {
  display: none;
}

.mail-composer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-composer-tools .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mail-composer-tools span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.chat-history-list {
  max-height: 390px;
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: auto;
}

.chat-history-item {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.chat-history-item:hover,
.chat-history-item.active {
  border-color: #b8dce1;
  background: #f8ffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.chat-history-item.active {
  border-color: #b8dce1;
}

.chat-history-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.25;
}

.chat-history-item span {
  color: var(--muted);
  font-size: 12px;
}

.chat-history-item p {
  min-width: 0;
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #475467;
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chat-history-empty {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.history-more-button {
  min-height: 38px;
  margin: 0 10px 10px;
  border: 1px solid #bee6df;
  border-radius: 10px;
  background: #f1fffb;
  color: #0f766e;
  font-size: 12px;
  font-weight: 850;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.history-more-button:hover {
  border-color: #8ddbd0;
  background: #e8fbf7;
  transform: translateY(-1px);
}

.history-more-button[hidden] {
  display: none;
}

.sidebar-collapsed .sidebar {
  align-items: center;
  padding: 24px 11px;
}

.sidebar-collapsed .brand {
  min-height: auto;
  grid-template-columns: 1fr;
  justify-content: center;
}

.sidebar-collapsed .brand-logo,
.sidebar-collapsed .account-switcher,
.sidebar-collapsed .nav-button span,
.sidebar-collapsed .sidebar-language-copy {
  display: none;
}

.sidebar-collapsed .brand-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.sidebar-collapsed .nav-button {
  width: 44px;
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .sidebar-language-control {
  width: 44px;
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .sidebar-footer {
  align-items: center;
}

.sidebar-collapsed .nav-button svg,
.sidebar-collapsed .nav-button img,
.sidebar-collapsed .sidebar-language-control > svg {
  width: 19px;
  height: 19px;
}

.sidebar-collapsed .sidebar-language-chevron {
  display: none;
}

.sidebar-collapsed .sidebar-language-menu {
  left: 0;
  right: auto;
  width: 174px;
}

#sidebarToggle svg {
  transform-origin: center;
  transition: transform 160ms ease;
}

.sidebar-collapsed #sidebarToggle svg {
  transform: rotate(180deg);
}

/* Lark workspace refresh */
.lark-hero {
  min-height: 70px;
  align-items: center;
  padding: 14px 18px;
  background: #ffffff;
}

.workspace-slot[data-slot="side"] .lark-hero {
  min-height: 50px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.workspace-slot[data-slot="side"] .lark-hero-main {
  flex: 1 1 auto;
  gap: 9px;
}

.workspace-slot[data-slot="side"] .lark-hero-actions {
  flex: 0 1 min(46%, 168px);
  justify-content: flex-end;
}

.workspace-slot[data-slot="side"] .lark-hero-account {
  width: auto;
  max-width: 168px;
  gap: 2px;
  text-align: right;
}

.workspace-slot[data-slot="side"] .lark-hero-account strong {
  font-size: 12px;
}

.workspace-slot[data-slot="side"] .lark-hero-account span {
  font-size: 10.5px;
}

.lark-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: none;
}

.lark-mark img {
  width: 29px;
  height: 29px;
}

.lark-hero h3 {
  margin: 3px 0 2px;
  font-size: 18px;
  letter-spacing: 0;
}

.lark-hero p {
  font-size: 12px;
}

.workspace-slot[data-slot="side"] .lark-hero h3 {
  font-size: 16px;
}

.workspace-slot[data-slot="side"] .lark-hero p {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-status-badge {
  display: none;
}

.lark-status-badge {
  min-height: 20px;
  border-radius: 6px;
  padding: 3px 7px;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
}

.lark-work-grid {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px 100px;
}

.app-shell.view-assistant.lark-mode .lark-work-grid {
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-work-grid {
  padding: 2px 12px 10px;
}

.lark-module-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
}

.lark-tabs,
.lark-workspace.is-capability-open .lark-tabs,
.workspace-slot[data-slot="side"] .lark-tabs {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  overflow: visible;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  scrollbar-gutter: auto;
}

.workspace-slot[data-slot="side"] .lark-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lark-action-card,
.lark-workspace.is-capability-open .lark-action-card,
.workspace-slot[data-slot="side"] .lark-action-card {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #344054;
  padding: 8px 9px;
  box-shadow: none;
  transform: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.lark-action-card:hover,
.lark-action-card.active,
.lark-workspace.is-capability-open .lark-action-card:hover,
.lark-workspace.is-capability-open .lark-action-card.active,
.workspace-slot[data-slot="side"] .lark-action-card:hover,
.workspace-slot[data-slot="side"] .lark-action-card.active {
  border-color: var(--line-strong);
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transform: none;
}

.lark-action-copy,
.lark-workspace.is-capability-open .lark-action-copy,
.workspace-slot[data-slot="side"] .lark-action-copy {
  min-width: 0;
  display: block;
}

.lark-action-copy strong,
.lark-workspace.is-capability-open .lark-action-copy strong,
.workspace-slot[data-slot="side"] .lark-action-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: currentColor;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lark-action-copy small,
.lark-action-state,
.lark-workspace.is-capability-open .lark-action-copy small,
.lark-workspace.is-capability-open .lark-action-state,
.workspace-slot[data-slot="side"] .lark-action-copy small,
.workspace-slot[data-slot="side"] .lark-action-state {
  display: none;
}

.lark-capability-icon,
.lark-workspace.is-capability-open .lark-capability-icon,
.workspace-slot[data-slot="side"] .lark-capability-icon {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  box-shadow: none;
}

.lark-action-card.active .lark-capability-icon,
.lark-action-card:hover .lark-capability-icon {
  color: #111827;
}

.lark-capability-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.lark-home-card {
  min-height: 68px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: none;
}

.lark-home-card .lark-capability-icon {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
}

.lark-home-card small {
  grid-column: 2;
  -webkit-line-clamp: 1;
}

.lark-module-toolbar,
.lark-module-shell[data-capability="docs"] .lark-module-toolbar,
.lark-module-shell[data-capability="files"] .lark-module-toolbar,
.lark-module-shell[data-capability="sheets"] .lark-module-toolbar,
.lark-module-shell[data-capability="base"] .lark-module-toolbar {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.workspace-slot[data-slot="side"] .lark-module-toolbar {
  grid-template-columns: 1fr;
  gap: 8px;
}

.lark-module-toolbar h3 {
  font-size: 18px;
  font-weight: 820;
  letter-spacing: 0;
}

.workspace-slot[data-slot="side"] .lark-module-toolbar h3 {
  font-size: 16px;
}

.lark-module-toolbar p,
.lark-module-shell[data-capability="docs"] .lark-module-toolbar p,
.lark-module-shell[data-capability="files"] .lark-module-toolbar p,
.lark-module-shell[data-capability="sheets"] .lark-module-toolbar p,
.lark-module-shell[data-capability="base"] .lark-module-toolbar p {
  max-width: none;
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.lark-module-summary,
.workspace-slot[data-slot="side"] .lark-module-summary {
  min-height: 0;
}

.lark-feed-tools,
.lark-module-shell[data-capability="docs"] .lark-feed-tools,
.lark-module-shell[data-capability="files"] .lark-feed-tools,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools,
.lark-module-shell[data-capability="base"] .lark-feed-tools {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.lark-module-shell[data-capability="docs"] .lark-feed-tools,
.lark-module-shell[data-capability="files"] .lark-feed-tools,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools,
.lark-module-shell[data-capability="base"] .lark-feed-tools,
.workspace-slot[data-slot="side"] .lark-feed-tools {
  grid-template-columns: minmax(0, 1fr) auto;
}

.workspace-slot[data-slot="side"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="docs"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="files"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="base"] .lark-feed-tools .secondary-button {
  display: none;
}

.lark-search-wrap,
.lark-module-shell[data-capability="docs"] .lark-search-wrap,
.lark-module-shell[data-capability="files"] .lark-search-wrap,
.lark-module-shell[data-capability="sheets"] .lark-search-wrap,
.lark-module-shell[data-capability="base"] .lark-search-wrap {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.lark-search-wrap input,
.lark-module-shell[data-capability="docs"] .lark-search-wrap input,
.lark-module-shell[data-capability="files"] .lark-search-wrap input,
.lark-module-shell[data-capability="sheets"] .lark-search-wrap input,
.lark-module-shell[data-capability="base"] .lark-search-wrap input {
  min-height: 36px;
  color: #111827;
  font-size: 12px;
}

.lark-feed-tools .primary-button,
.lark-feed-tools .secondary-button,
.lark-module-shell[data-capability="docs"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="files"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="sheets"] .lark-feed-tools .primary-button,
.lark-module-shell[data-capability="base"] .lark-feed-tools .primary-button {
  min-height: 36px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}

.lark-feed-layout,
.lark-feed-layout[data-mode="cards"] {
  gap: 10px;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
}

.lark-feed-layout[data-mode="resources"],
.lark-feed-layout[data-mode="loading"] {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="split"] {
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-feed-layout,
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="cards"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="split"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="resources"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="loading"] {
  min-height: 220px;
  grid-template-columns: minmax(0, 1fr);
}

.lark-chat-list,
.lark-message-list {
  gap: 7px;
}

.lark-message-list {
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.lark-action-empty,
.lark-send-panel {
  gap: 10px;
  border-color: var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: none;
}

.lark-action-empty strong {
  font-size: 14px;
  font-weight: 820;
}

.lark-action-empty p {
  color: #667085;
}

.lark-message-start-grid {
  display: none;
}

.lark-resource-card {
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: none;
  transform: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.lark-resource-card:hover {
  border-color: var(--line-strong);
  background: #fbfcff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transform: none;
}

.workspace-slot[data-slot="side"] .lark-resource-card {
  min-height: 96px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.lark-resource-card-icon,
.lark-resource-card[data-kind="wiki"] .lark-resource-card-icon,
.lark-drive-file-card .lark-resource-card-icon,
.lark-resource-card[data-kind="file"] .lark-resource-card-icon,
.lark-sheet-card .lark-resource-card-icon,
.lark-resource-card[data-kind="sheet"] .lark-resource-card-icon,
.lark-create-doc-card .lark-resource-card-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
}

.workspace-slot[data-slot="side"] .lark-resource-card-icon {
  width: 32px;
  height: 32px;
}

.lark-resource-card-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.lark-resource-card-copy {
  gap: 3px;
}

.lark-resource-card-copy strong {
  font-size: 13px;
  font-weight: 820;
  line-height: 1.22;
  -webkit-line-clamp: 1;
}

.lark-resource-card-copy span {
  color: #667085;
  font-size: 11.5px;
  line-height: 1.32;
  -webkit-line-clamp: 1;
}

.workspace-slot[data-slot="side"] .lark-resource-card-copy strong,
.workspace-slot[data-slot="side"] .lark-resource-card-copy span {
  -webkit-line-clamp: 2;
}

.lark-resource-card-actions {
  grid-column: 3;
  grid-row: 1;
  gap: 6px;
}

.workspace-slot[data-slot="side"] .lark-resource-card-actions {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  grid-column: 2;
  grid-row: auto;
  justify-content: flex-start;
}

.workspace-slot[data-slot="side"] .lark-card-action,
.workspace-slot[data-slot="side"] .lark-resource-card .lark-card-action {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-slot[data-slot="side"] .lark-create-doc-card > .lark-card-action {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

.workspace-slot[data-slot="side"] .lark-create-doc-card {
  min-height: auto;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  row-gap: 8px;
  padding-bottom: 12px;
}

.workspace-slot[data-slot="side"] .lark-create-doc-card .lark-resource-card-copy {
  grid-column: 2;
  grid-row: 1;
}

.workspace-slot[data-slot="side"] .lark-create-doc-card .lark-resource-card-copy span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

.workspace-slot[data-slot="side"] .lark-create-doc-card > .lark-card-action {
  min-width: 73px;
  min-height: 30px;
  grid-column: 2;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0 10px;
}

.lark-base-card,
.workspace-slot[data-slot="side"] .lark-base-card {
  min-height: 72px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
}

.lark-base-card .lark-resource-card-actions,
.workspace-slot[data-slot="side"] .lark-base-card .lark-resource-card-actions {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.lark-card-action,
.lark-resource-card .lark-card-action {
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #ffffff;
  color: #344054;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 820;
}

.lark-card-action:hover,
.lark-card-action.ghost:hover,
.lark-card-action.download:hover {
  background: #f8fafc;
}

.lark-card-action.download {
  border-color: var(--line-strong);
  background: #ffffff;
  color: #344054;
}

.lark-card-action.attach {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.lark-card-action.attach:hover {
  background: #263343;
}

.lark-create-doc-card {
  border-color: var(--line);
  background: #ffffff;
}

.lark-chat-item {
  border-color: var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.lark-chat-item.active,
.lark-chat-item:hover {
  border-color: var(--line-strong);
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.lark-chat-item.active {
  border-color: #111827;
}

.lark-contact-choice[data-type="direct"] {
  border-color: var(--line);
  background: #ffffff;
}

.lark-chat-item strong {
  color: #111827;
  font-size: 12.5px;
  font-weight: 820;
}

.lark-chat-item span {
  color: #667085;
}

.lark-history-empty {
  border-radius: 8px;
  background: #ffffff;
  color: #667085;
  padding: 12px;
}

.lark-doc-empty {
  min-height: 78px;
}

.workspace-slot[data-slot="main"] .lark-module-shell {
  gap: 12px;
}

.workspace-slot[data-slot="main"] .lark-tabs,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-tabs {
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  gap: 4px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.workspace-slot[data-slot="main"] .lark-action-card,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card {
  position: relative;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 19px auto;
  justify-items: center;
  gap: 2px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: #667085;
  padding: 6px 5px;
  text-align: center;
  box-shadow: none;
  transform: none;
}

.workspace-slot[data-slot="main"] .lark-action-card:hover,
.workspace-slot[data-slot="main"] .lark-action-card.active,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card:hover,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card.active {
  transform: none;
}

.workspace-slot[data-slot="main"] .lark-action-card:not(.active):hover,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card:not(.active):hover {
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.9);
  color: #111827;
  box-shadow: none;
}

.workspace-slot[data-slot="main"] .lark-action-card.active,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card.active {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.1);
}

.workspace-slot[data-slot="main"] .lark-action-card.active::after,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card.active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -8px;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: #2563eb;
}

.workspace-slot[data-slot="main"] .lark-action-card .lark-capability-icon {
  width: 19px;
  height: 19px;
  border-radius: 7px;
  color: currentColor;
}

.workspace-slot[data-slot="main"] .lark-action-card.active .lark-capability-icon {
  background: transparent;
  color: currentColor;
}

.workspace-slot[data-slot="main"] .lark-action-copy strong {
  display: block;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.workspace-slot[data-slot="main"] .lark-action-card.active .lark-action-copy strong,
.workspace-slot[data-slot="main"] .lark-workspace.is-capability-open .lark-action-card.active .lark-action-copy strong {
  color: currentColor;
}

.workspace-slot[data-slot="side"] .lark-tabs,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  position: sticky;
  top: 0;
  z-index: 80;
  gap: 4px;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.workspace-slot[data-slot="side"] .lark-action-card,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card {
  position: relative;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 16px auto;
  justify-items: center;
  gap: 2px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: #667085;
  padding: 5px 3px 4px;
  text-align: center;
  box-shadow: none;
  transform: none;
}

.workspace-slot[data-slot="side"] .lark-action-card:hover,
.workspace-slot[data-slot="side"] .lark-action-card.active,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card:hover,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card.active {
  transform: none;
}

.workspace-slot[data-slot="side"] .lark-action-card:not(.active):hover,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card:not(.active):hover {
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.9);
  color: #111827;
  box-shadow: none;
}

.workspace-slot[data-slot="side"] .lark-action-card.active,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card.active {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.workspace-slot[data-slot="side"] .lark-action-card.active::after,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card.active::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -8px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: #2563eb;
}

.workspace-slot[data-slot="side"] .lark-action-card .lark-capability-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.workspace-slot[data-slot="side"] .lark-action-copy strong {
  display: block;
  font-size: 9.5px;
  line-height: 1.08;
  white-space: nowrap;
}

.workspace-slot[data-slot="side"] .lark-action-card.active .lark-action-copy strong,
.workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card.active .lark-action-copy strong {
  color: currentColor;
}

.lark-chat-item {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

.lark-chat-avatar,
.lark-send-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(135deg, rgba(236, 254, 255, 0.95), rgba(245, 243, 255, 0.95));
  color: #0f766e;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lark-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 11px;
}

.lark-send-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.11);
}

.lark-chat-avatar img,
.lark-send-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lark-chat-avatar.is-fallback[data-type="group"],
.lark-send-avatar.is-fallback[data-type="group"] {
  color: #2563eb;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(240, 253, 250, 0.96));
}

.lark-chat-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.workspace-slot[data-slot="main"] .lark-chat-item {
  min-height: 58px;
  border-radius: 12px;
  padding: 10px;
}

.workspace-slot[data-slot="main"] .lark-chat-item.active {
  border-color: rgba(17, 24, 39, 0.22);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.workspace-slot[data-slot="main"] .lark-message-list {
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 12px;
}

.workspace-slot[data-slot="main"] .lark-message-list:has(.lark-send-panel.is-conversation-view) {
  align-content: stretch;
  overflow: hidden;
}

.workspace-slot[data-slot="main"] .lark-send-panel {
  gap: 12px;
  border-color: rgba(203, 213, 225, 0.88);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 14px;
}

.workspace-slot[data-slot="main"] .lark-send-target {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(240, 253, 250, 0.88)),
    radial-gradient(circle at 95% 0%, rgba(139, 92, 246, 0.12), transparent 28%);
  padding: 12px;
}

.workspace-slot[data-slot="main"] .lark-send-target span:not(.lark-send-avatar) {
  color: #0f766e;
}

.workspace-slot[data-slot="main"] .lark-send-target strong {
  font-size: 16px;
  font-weight: 900;
}

.workspace-slot[data-slot="main"] .lark-conversation-panel {
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 13px;
  background: #ffffff;
  padding: 10px;
}

.workspace-slot[data-slot="main"] .lark-conversation-head .secondary-button {
  min-height: 32px;
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.workspace-slot[data-slot="main"] .lark-conversation-list {
  max-height: 320px;
  padding: 2px 2px 2px 0;
}

.workspace-slot[data-slot="main"] .lark-send-field textarea {
  min-height: 126px;
  border-radius: 12px;
}

.workspace-slot[data-slot="main"] .lark-compose-box {
  border-radius: 14px;
}

.workspace-slot[data-slot="main"] .lark-compose-box textarea {
  min-height: 112px;
  border-radius: 0;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-compose-box textarea {
  height: 50px;
  min-height: 46px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view {
  height: 100%;
  min-height: 0;
  gap: 7px;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-send-target {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-send-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: none;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-send-target strong {
  font-size: 14px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-send-target small {
  display: none;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-chat-thread {
  min-height: 0;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-conversation-list {
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-content: normal;
  align-items: flex-start;
  gap: 7px;
  padding: 10px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-compose-toolbar {
  padding: 2px 8px 7px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-composer-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-conversation-list::before {
  content: "";
  flex: 1 0 auto;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-conversation-message,
.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-conversation-empty {
  flex: 0 0 auto;
}

.workspace-slot[data-slot="main"] .lark-send-panel.is-conversation-view .lark-conversation-message.mine {
  align-self: flex-end;
}

.workspace-slot[data-slot="side"] .lark-message-list {
  border-radius: 12px;
  padding: 9px;
}

.workspace-slot[data-slot="side"] .lark-send-panel {
  gap: 10px;
  border-radius: 12px;
  padding: 10px;
}

.workspace-slot[data-slot="side"] .lark-send-target {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 12px;
  background: #ffffff;
}

.workspace-slot[data-slot="side"] .lark-send-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: none;
}

.workspace-slot[data-slot="side"] .lark-send-target strong {
  font-size: 13px;
}

.workspace-slot[data-slot="side"] .lark-send-field textarea {
  min-height: 132px;
  border-radius: 10px;
}

.workspace-slot[data-slot="side"] .lark-compose-box {
  border-radius: 12px;
}

.workspace-slot[data-slot="side"] .lark-compose-box textarea {
  min-height: 116px;
  border-radius: 0;
}

.workspace-slot[data-slot="side"] .lark-feed-layout.is-lark-conversation-view {
  min-height: 420px;
}

.workspace-slot[data-slot="side"] .lark-feed-layout.is-lark-conversation-view .lark-chat-list {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-feed-layout.is-lark-conversation-view .lark-message-list {
  min-height: 420px;
  align-content: stretch;
}

.workspace-slot[data-slot="side"] .lark-send-panel.is-conversation-view {
  min-height: 400px;
}

.workspace-slot[data-slot="side"] .lark-send-panel.is-conversation-view .lark-compose-box textarea {
  height: 64px;
  min-height: 58px;
}

.workspace-slot[data-slot="side"] .lark-composer-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.workspace-slot[data-slot="side"] .lark-send-target-actions {
  gap: 4px;
}

.workspace-slot[data-slot="side"] .lark-target-action {
  min-height: 32px;
  padding: 0 8px;
}

.workspace-slot[data-slot="side"] .lark-target-action span {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-conversation-panel {
  display: none;
}

.workspace-slot[data-slot="side"] .lark-module-shell[data-capability="messages"] .lark-feed-tools .secondary-button {
  display: inline-flex;
}

@media (max-width: 820px) {
  .lark-tabs,
  .lark-workspace.is-capability-open .lark-tabs,
  .workspace-slot[data-slot="side"] .lark-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-slot[data-slot="side"] .lark-tabs,
  .workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-tabs {
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  }

  .workspace-slot[data-slot="side"] .lark-action-card,
  .workspace-slot[data-slot="side"] .lark-workspace.is-capability-open .lark-action-card {
    min-height: 42px;
    grid-template-rows: 16px auto;
    padding: 5px 3px 4px;
  }

  .workspace-slot[data-slot="side"] .lark-action-card .lark-capability-icon {
    width: 16px;
    height: 16px;
  }

  .workspace-slot[data-slot="side"] .lark-action-copy strong {
    font-size: 9.5px;
  }
}

@keyframes larkChatPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes larkMessageBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@media (min-width: 1241px) and (max-width: 1500px) {
  .app-shell {
    --assistant-side-size: clamp(318px, 27vw, 386px);
    --inbox-side-size: clamp(318px, 29vw, 380px);
    --swap-button-width: 36px;
    grid-template-columns: var(--provider-rail-size) minmax(220px, var(--sidebar-size)) minmax(0, 1fr) var(--swap-rail-size) var(--assistant-side-size);
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) var(--swap-rail-size) var(--assistant-side-size);
  }

  .app-shell.view-inbox {
    grid-template-columns: var(--provider-rail-size) minmax(220px, var(--sidebar-size)) minmax(0, 1fr) var(--swap-rail-size) var(--inbox-side-size);
  }

  .app-shell.view-inbox.sidebar-collapsed {
    grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) var(--swap-rail-size) var(--inbox-side-size);
  }

  .app-shell.applications-mode {
    --assistant-side-size: clamp(318px, 27vw, 358px);
  }

  .app-shell.applications-mode .applications-workspace {
    gap: 10px;
    padding: 12px;
  }

  .app-shell.applications-mode .applications-workspace.is-finance-open {
    overflow: hidden;
  }

  .app-shell.applications-mode .applications-hero {
    min-height: 66px;
    gap: 12px;
    padding: 11px 14px;
  }

  .app-shell.applications-mode .applications-hero h2 {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.05;
  }

  .app-shell.applications-mode .applications-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell.applications-mode .applications-tabs::-webkit-scrollbar {
    display: none;
  }

  .app-shell.applications-mode .finance-upload-panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    border-radius: 14px;
    padding: 30px clamp(18px, 3vw, 34px) 24px;
  }

  .app-shell.applications-mode .finance-upload-panel.finance-preview-open {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.applications-mode .finance-budget-context,
  .app-shell.applications-mode .finance-drop-zone,
  .app-shell.applications-mode .finance-preview-panel {
    width: 100%;
  }

  .app-shell.applications-mode .finance-drop-zone {
    grid-template-columns: 44px minmax(0, 1fr) minmax(138px, 184px);
    gap: 10px 12px;
    padding: 18px;
  }

  .app-shell.applications-mode .finance-drop-icon {
    width: 42px;
    height: 42px;
  }

  .app-shell.applications-mode .finance-drop-copy > span {
    font-size: 17px;
  }

  .app-shell.applications-mode .finance-drop-copy p {
    max-width: 100%;
  }

  .app-shell.applications-mode .finance-upload-button {
    width: min(170px, 100%);
  }

  .app-shell.applications-mode .finance-preview-panel {
    min-height: min(360px, calc(100vh - 300px));
    max-height: min(500px, calc(100vh - 260px));
  }

  .app-shell.settings-mode {
    --assistant-side-size: clamp(318px, 27vw, 358px);
  }

  .app-shell.settings-mode .settings-workspace {
    padding: 12px;
    overflow-x: hidden;
  }

  .app-shell.settings-mode .settings-page-grid {
    gap: 12px;
  }

  .app-shell.settings-mode .settings-workspace .settings-form,
  .app-shell.settings-mode .settings-connections,
  .app-shell.settings-mode .settings-notifications {
    padding: 14px;
    border-radius: 12px;
  }

  .app-shell.settings-mode .settings-section-title {
    gap: 8px 10px;
  }

  .app-shell.settings-mode .settings-card-header p,
  .app-shell.settings-mode .settings-section-title p,
  .app-shell.settings-mode .connection-card p,
  .app-shell.settings-mode .connection-meta,
  .app-shell.settings-mode .notification-provider-title small,
  .app-shell.settings-mode .notification-lark-copy small,
  .app-shell.settings-mode .rule-manager-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .app-shell.settings-mode .notification-provider-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .app-shell.settings-mode .notification-card {
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }

  .app-shell.settings-mode .notification-rule-manager {
    gap: 8px;
    padding: 10px;
  }

  .app-shell.settings-mode .rule-builder {
    grid-template-columns: minmax(112px, 128px) minmax(0, 1fr) auto;
  }

  .app-shell.settings-mode .notification-help-box {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .app-shell.settings-mode .notification-help-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .app-shell.settings-mode .notification-help-actions .primary-button,
  .app-shell.settings-mode .notification-help-actions .secondary-button {
    min-width: 0;
  }

  .panel-swap-button {
    height: 48px;
  }

  .panel-swap-button::after {
    display: none;
  }

  .app-shell.view-inbox .assistant-workspace {
    padding-inline: 14px;
  }

  .app-shell.view-inbox .assistant-messages {
    padding-inline: 12px;
  }

  .app-shell.view-inbox .assistant-welcome {
    width: min(310px, calc(100% - 20px));
  }
}

@media (max-width: 1240px) {
  html,
  body {
    overflow: auto;
  }

  .app-shell {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    margin: 0;
    grid-template-columns: 88px 230px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "providers sidebar assistant"
      "providers sidebar discovery";
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 88px 72px minmax(0, 1fr);
  }

  .app-shell.view-inbox,
  .app-shell.view-inbox.sidebar-collapsed {
    grid-template-columns: 88px 230px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "providers sidebar discovery"
      "providers sidebar assistant";
  }

  .app-shell.view-inbox.sidebar-collapsed {
    grid-template-columns: 88px 72px minmax(0, 1fr);
  }

  .app-shell.side-panel-collapsed.view-assistant,
  .app-shell.side-panel-collapsed.view-inbox,
  .app-shell.side-panel-collapsed.view-inbox.sidebar-collapsed {
    grid-template-areas:
      "providers sidebar assistant";
  }

  .app-shell.side-panel-collapsed.view-inbox,
  .app-shell.side-panel-collapsed.view-inbox.sidebar-collapsed {
    grid-template-areas:
      "providers sidebar discovery";
  }

  .panel-swap-button,
  .side-panel-collapse-button {
    display: none;
  }

  .layout-drop-overlay {
    grid-template-columns: 88px 230px minmax(0, 1fr);
    grid-template-areas:
      ". . main"
      ". . side";
  }

  .layout-drop-overlay[data-drag-section="automation"] {
    grid-template-areas: ". . main";
  }

  .app-shell.view-inbox .layout-drop-overlay {
    grid-template-columns: 88px 230px minmax(0, 1fr);
  }

  .sidebar-collapsed .layout-drop-overlay,
  .app-shell.view-inbox.sidebar-collapsed .layout-drop-overlay {
    grid-template-columns: 88px 72px minmax(0, 1fr);
  }

  .files-toggle-button {
    display: none;
  }

  .assistant-panel {
    min-height: 560px;
  }

  .discovery-panel {
    min-height: 620px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .app-shell.files-mode .download-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lark-work-grid,
  .lark-account-panel {
    grid-template-columns: 1fr;
  }

  .lark-work-grid {
    grid-template-rows: auto auto minmax(280px, 1fr);
  }

  .lark-feed-panel {
    grid-column: auto;
  }

  .mail-connect-card,
  .lark-connect-card {
    padding: 28px 20px 24px;
  }

  .mail-connect-features,
  .lark-connect-features {
    grid-template-columns: 1fr;
  }

  .lark-account-side {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    width: 100vw;
    grid-template-columns: 1fr;
    grid-template-areas:
      "providers"
      "sidebar"
      "assistant"
      "discovery";
  }

  .app-shell.view-inbox,
  .app-shell.view-inbox.sidebar-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "providers"
      "sidebar"
      "discovery"
      "assistant";
  }

  .app-shell.side-panel-collapsed.view-assistant,
  .app-shell.side-panel-collapsed.view-inbox,
  .app-shell.side-panel-collapsed.view-inbox.sidebar-collapsed {
    grid-template-areas:
      "providers"
      "sidebar"
      "assistant";
  }

  .app-shell.side-panel-collapsed.view-inbox,
  .app-shell.side-panel-collapsed.view-inbox.sidebar-collapsed {
    grid-template-areas:
      "providers"
      "sidebar"
      "discovery";
  }

  .provider-rail {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .provider-button {
    width: 56px;
    min-height: 56px;
    font-size: 11px;
  }

  .sidebar,
  .sidebar-collapsed .sidebar {
    align-items: stretch;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-collapsed .brand {
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
  }

  .sidebar-collapsed .brand-logo,
  .sidebar-collapsed .account-switcher,
  .sidebar-collapsed .nav-button span,
  .sidebar-collapsed .sidebar-language-copy {
    display: block;
  }

  .sidebar-collapsed .sidebar-language-copy {
    display: grid;
  }

  .sidebar-collapsed .brand-icon {
    display: none;
  }

  .sidebar-collapsed .nav-button {
    width: 100%;
    justify-content: flex-start;
    padding: 0 11px;
  }

  .sidebar-collapsed .sidebar-language-control {
    width: 100%;
    justify-content: flex-start;
    padding: 0 11px;
  }

  .assistant-panel {
    padding: 16px;
  }

  .assistant-header,
  .workspace-header,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .download-list {
    grid-template-columns: 1fr;
  }

  .mail-pagination,
  .mail-page-center {
    align-items: stretch;
    flex-direction: column;
  }

  .mail-page-jump {
    justify-content: space-between;
  }

  .app-shell.files-mode .download-list,
  .file-search-bar,
  .lark-capability-grid,
  .lark-module-toolbar,
  .lark-module-summary,
  .lark-feed-layout,
  .lark-feed-tools,
  .download-search-tools,
  .date-range-grid,
  .notification-provider-grid,
  .notification-help-box,
  .notification-help-actions,
  .rule-builder,
  .rule-chip,
  .rule-chip.is-editing {
    grid-template-columns: 1fr;
  }

  .lark-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .lark-hero-main {
    flex: 0 1 auto;
  }

  .lark-hero-account {
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .lark-hero-actions {
    width: 100%;
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .download-search-tools,
  .date-range-grid {
    padding-left: 0;
  }

  .search-bar {
    grid-template-columns: 1fr;
  }

  .lark-resource-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .lark-resource-card-actions {
    grid-column: 2;
    grid-row: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .layout-drop-overlay {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "side";
    padding: 10px;
  }

  .layout-drop-overlay[data-drag-section="automation"] {
    grid-template-areas: "main";
  }

  .app-shell.view-inbox .layout-drop-overlay,
  .sidebar-collapsed .layout-drop-overlay,
  .app-shell.view-inbox.sidebar-collapsed .layout-drop-overlay {
    grid-template-columns: 1fr;
  }
}

/* Flowmo tasks: calmer, people-first task planning surface. */
.lark-module-shell[data-capability="tasks"] {
  gap: 8px;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar h3 {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar p {
  max-width: none;
  margin-top: 2px;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
}

.lark-module-shell[data-capability="tasks"] .lark-module-summary {
  display: none;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools {
  min-width: 0;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 7px;
}

.lark-module-shell[data-capability="tasks"] .lark-search-wrap {
  min-height: 38px;
  border: 1px solid #d8e0eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.lark-module-shell[data-capability="tasks"] .lark-search-wrap input {
  min-height: 38px;
  font-size: 12px;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11.5px;
}

.lark-feed-layout[data-mode="tasks"] {
  grid-template-columns: minmax(0, 1fr) minmax(304px, 0.36fr);
  grid-template-rows: auto;
  align-items: start;
  gap: 12px;
  overflow: auto;
}

.lark-feed-layout[data-mode="tasks"] .lark-chat-list,
.lark-feed-layout[data-mode="tasks"] .lark-message-list {
  gap: 0;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}

.flowmo-task-board,
.flowmo-task-detail {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.flowmo-task-board {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

.flowmo-task-board-head,
.flowmo-task-editor-head,
.flowmo-reminder-head,
.flowmo-task-lane-head,
.flowmo-task-card-top,
.flowmo-task-board-title,
.flowmo-task-owner,
.flowmo-task-editor-title,
.flowmo-reminder-title,
.flowmo-task-action-button,
.flowmo-task-filter,
.flowmo-task-insight,
.flowmo-task-meta span,
.flowmo-task-priority {
  min-width: 0;
  display: flex;
  align-items: center;
}

.flowmo-task-board-head,
.flowmo-task-editor-head,
.flowmo-reminder-head,
.flowmo-task-lane-head,
.flowmo-task-card-top {
  justify-content: space-between;
  gap: 10px;
}

.flowmo-task-board-title,
.flowmo-task-editor-title,
.flowmo-reminder-title {
  gap: 10px;
}

.flowmo-task-editor-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
}

.flowmo-task-editor-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor-title > .flowmo-task-editor-icon {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  margin: 0;
  overflow: hidden;
  line-height: 1;
  text-align: center;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor-title > .flowmo-task-editor-icon svg {
  display: block;
  margin: auto;
  transform: none;
}

.flowmo-task-head-icon,
.flowmo-task-welcome-icon,
.flowmo-reminder-title > span {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #ecfeff;
  color: #0f766e;
}

.flowmo-task-head-icon {
  width: 36px;
  height: 36px;
}

.flowmo-task-head-icon svg,
.flowmo-task-welcome-icon svg,
.flowmo-reminder-title > span svg,
.flowmo-task-action-button svg,
.flowmo-task-filter svg,
.flowmo-task-insight svg,
.flowmo-task-meta svg,
.flowmo-task-priority svg,
.flowmo-task-editor label i svg,
.flowmo-task-check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.flowmo-task-board-head strong,
.flowmo-task-editor-head strong,
.flowmo-reminder-head strong {
  display: block;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.flowmo-task-board-head span,
.flowmo-task-editor-head span,
.flowmo-reminder-head small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.flowmo-task-board-actions,
.flowmo-task-editor-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.flowmo-task-action-button {
  justify-content: center;
  gap: 7px;
}

.flowmo-task-action-button > span:first-child {
  display: inline-grid;
  place-items: center;
}

.flowmo-task-board-actions .primary-button,
.flowmo-task-board-actions .secondary-button,
.flowmo-task-editor-actions .primary-button,
.flowmo-task-editor-actions .secondary-button,
.flowmo-reminder-head .secondary-button,
.flowmo-task-delete {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-task-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(190, 18, 60, 0.22);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-group-detail .flowmo-task-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.flowmo-task-group-detail .flowmo-task-editor-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.flowmo-task-group-detail .flowmo-task-editor-title > .flowmo-avatar {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  overflow: visible;
  line-height: 1;
  text-align: center;
}

.flowmo-task-group-detail .flowmo-task-editor-title > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.flowmo-task-group-detail .flowmo-task-editor-title strong,
.flowmo-task-group-detail .flowmo-task-editor-title > div > span {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-group-detail .flowmo-task-delete {
  flex: 0 0 auto;
  justify-self: end;
  white-space: nowrap;
}

.flowmo-task-group-detail.is-quick-edit {
  grid-template-rows: auto;
}

.flowmo-task-group-detail.is-quick-edit .flowmo-task-editor {
  gap: 10px;
  padding: 12px;
}

.flowmo-task-group-detail.is-quick-edit .flowmo-task-editor-head {
  min-height: 42px;
}

.flowmo-task-group-detail.is-quick-edit .flowmo-task-editor-actions {
  justify-content: flex-end;
}

.flowmo-task-group-detail.is-quick-edit .flowmo-task-editor-status {
  min-height: 0;
}

.flowmo-task-insights {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.flowmo-task-insight {
  min-height: 28px;
  flex: 0 0 auto;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  padding: 0 9px;
}

.flowmo-task-insight i,
.flowmo-task-filter-icon,
.flowmo-task-meta i,
.flowmo-task-priority svg,
.flowmo-task-editor label i {
  display: inline-grid;
  place-items: center;
  font-style: normal;
  color: currentColor;
}

.flowmo-task-insight strong {
  color: #101828;
  font-size: 12px;
  font-weight: 920;
}

.flowmo-task-insight small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 820;
  line-height: 1;
}

.flowmo-task-insight[data-tone="today"] {
  border-color: rgba(20, 184, 166, 0.24);
  background: #ecfdf5;
  color: #047857;
}

.flowmo-task-insight[data-tone="danger"] {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-filters {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.flowmo-task-groups {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.flowmo-task-groups::-webkit-scrollbar {
  display: none;
}

.flowmo-task-group-chip {
  min-width: 148px;
  max-width: 210px;
  min-height: 48px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  padding: 7px 10px;
  text-align: left;
  box-shadow: none;
}

.flowmo-task-group-chip:hover,
.flowmo-task-group-chip[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.3);
  background: #f8fbff;
  color: #1d4ed8;
}

.flowmo-task-group-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.flowmo-task-group-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-task-group-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-group-copy small {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-group-chip[data-color="teal"] .flowmo-task-group-dot,
.flowmo-task-group-row[data-color="teal"] .flowmo-task-group-dot {
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1);
}

.flowmo-task-group-chip[data-color="violet"] .flowmo-task-group-dot,
.flowmo-task-group-row[data-color="violet"] .flowmo-task-group-dot {
  background: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.flowmo-task-group-chip[data-color="rose"] .flowmo-task-group-dot,
.flowmo-task-group-row[data-color="rose"] .flowmo-task-group-dot {
  background: #e11d48;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.1);
}

.flowmo-task-group-chip[data-color="amber"] .flowmo-task-group-dot,
.flowmo-task-group-row[data-color="amber"] .flowmo-task-group-dot {
  background: #d97706;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.11);
}

.flowmo-task-group-chip[data-color="slate"] .flowmo-task-group-dot,
.flowmo-task-group-row[data-color="slate"] .flowmo-task-group-dot {
  background: #64748b;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.11);
}

.flowmo-task-filter {
  min-height: 31px;
  flex: 0 0 auto;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.flowmo-task-filter strong {
  min-width: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  font-size: 10px;
}

.flowmo-task-filter:hover,
.flowmo-task-filter[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-task-filter[data-active="true"] strong {
  background: #dbeafe;
  color: #1d4ed8;
}

.flowmo-task-body {
  min-width: 0;
  min-height: 0;
}

.flowmo-task-welcome {
  min-height: 284px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(236, 254, 255, 0.64), rgba(255, 255, 255, 0.92)),
    linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 28px;
  text-align: center;
}

.flowmo-task-welcome-icon {
  width: 46px;
  height: 46px;
}

.flowmo-task-welcome-icon svg {
  width: 21px;
  height: 21px;
}

.flowmo-task-welcome strong {
  color: #101828;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.flowmo-task-welcome p {
  max-width: 320px;
  margin: 0;
  color: #667085;
  font-size: 12.5px;
  line-height: 1.45;
}

.flowmo-task-lanes {
  min-height: 350px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

.flowmo-task-lane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px;
  overflow: hidden;
}

.flowmo-task-lane[data-status="doing"] {
  background: #f8fbff;
}

.flowmo-task-lane[data-status="done"] {
  background: #f7fdfa;
}

.flowmo-task-lane-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.flowmo-task-lane-head strong svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flowmo-task-lane-head > span {
  min-width: 23px;
  min-height: 23px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #667085;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-task-stack {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.flowmo-task-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid #dbe3ef;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.flowmo-task-card:hover,
.flowmo-task-card:focus-visible,
.flowmo-task-card[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.28);
  background: #fcfdff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-task-card[data-priority="low"] {
  border-left-color: #14b8a6;
}

.flowmo-task-card[data-priority="medium"] {
  border-left-color: #3b82f6;
}

.flowmo-task-card[data-priority="high"] {
  border-left-color: #8b5cf6;
}

.flowmo-task-card[data-priority="urgent"] {
  border-left-color: #be123c;
}

.flowmo-task-owner {
  gap: 8px;
}

.flowmo-task-owner div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.flowmo-task-owner span:not(.flowmo-avatar) {
  overflow: hidden;
  color: #101828;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-owner small {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 920;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
}

.flowmo-avatar[data-size="xs"] {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.flowmo-avatar[data-size="sm"] {
  width: 31px;
  height: 31px;
}

.flowmo-avatar[data-size="lg"] {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.flowmo-avatar[data-tone="teal"] {
  background: linear-gradient(135deg, #0f766e, #2dd4bf);
}

.flowmo-avatar[data-tone="blue"] {
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}

.flowmo-avatar[data-tone="violet"] {
  background: linear-gradient(135deg, #6d28d9, #a78bfa);
}

.flowmo-avatar[data-tone="rose"] {
  background: linear-gradient(135deg, #be123c, #fb7185);
}

.flowmo-avatar[data-tone="amber"] {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.flowmo-avatar[data-tone="slate"] {
  background: linear-gradient(135deg, #334155, #94a3b8);
}

.flowmo-task-check {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #2563eb;
  padding: 0;
}

.flowmo-task-card strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-task-card p {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.flowmo-task-card-footer,
.flowmo-task-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.flowmo-task-priority,
.flowmo-task-done-dot,
.flowmo-task-meta span {
  min-height: 24px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.flowmo-task-priority {
  gap: 5px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475467;
  padding: 0 7px;
}

.flowmo-task-priority[data-priority="high"],
.flowmo-task-priority[data-priority="urgent"] {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-done-dot {
  display: inline-flex;
  align-items: center;
  background: #ecfdf5;
  color: #047857;
  padding: 0 8px;
}

.flowmo-task-meta span {
  gap: 5px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #667085;
  padding: 0 7px;
}

.flowmo-task-meta span[data-tone="today"],
.flowmo-task-meta span[data-tone="reminder"] {
  border-color: rgba(20, 184, 166, 0.24);
  background: #ecfdf5;
  color: #047857;
}

.flowmo-task-meta span[data-tone="danger"] {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-task-empty {
  margin: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: #667085;
  padding: 12px;
  font-size: 11.5px;
  line-height: 1.4;
}

.flowmo-task-detail {
  grid-template-rows: auto auto;
  align-content: start;
  overflow: visible;
}

.flowmo-task-editor,
.flowmo-reminder-rail {
  min-width: 0;
  display: grid;
  gap: 11px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 13px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.flowmo-task-editor label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.flowmo-task-editor label span,
.flowmo-task-quick-assignees > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.flowmo-task-editor input,
.flowmo-task-editor select,
.flowmo-task-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.35;
  outline: none;
}

.flowmo-task-editor input,
.flowmo-task-editor select {
  min-height: 38px;
}

.flowmo-task-editor input[type="datetime-local"] {
  max-width: 100%;
  padding-right: 6px;
  font-size: 10.5px;
  letter-spacing: 0;
}

.flowmo-task-editor input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-left: 2px;
}

.flowmo-task-editor textarea {
  min-height: 86px;
  resize: vertical;
}

.flowmo-task-editor textarea[name="notes"] {
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  overflow-y: auto;
  resize: none;
  scrollbar-gutter: stable;
}

.flowmo-task-editor input:focus,
.flowmo-task-editor select:focus,
.flowmo-task-editor textarea:focus {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

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

.flowmo-task-choice-field {
  position: relative;
  z-index: 2;
}

.flowmo-task-choice {
  position: relative;
  min-width: 0;
}

.flowmo-task-choice-button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 0 9px 0 10px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  box-shadow: none;
}

.flowmo-task-choice-button:hover,
.flowmo-task-choice-button[aria-expanded="true"],
.flowmo-task-choice-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.38);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.flowmo-task-choice-button span {
  min-width: 0;
  display: block;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.flowmo-task-choice-button i {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #0f172a;
  transform: translateY(-2px) rotate(45deg);
}

.flowmo-task-choice-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 30;
  display: grid;
  gap: 3px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 5px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.flowmo-task-choice-menu[hidden] {
  display: none;
}

.flowmo-task-choice-menu button {
  min-height: 31px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

.flowmo-task-choice-menu button:hover,
.flowmo-task-choice-menu button:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.flowmo-task-choice-menu button[aria-selected="true"] {
  background: #ecfdf5;
  color: #047857;
  font-weight: 900;
}

.flowmo-task-detail.is-new-task {
  gap: 8px;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor,
.flowmo-task-detail.is-new-task .flowmo-reminder-rail {
  gap: 9px;
  padding: 11px;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor-head {
  min-height: 38px;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor-grid {
  gap: 6px;
}

.flowmo-task-detail.is-new-task .flowmo-task-editor-status {
  display: none;
}

.flowmo-task-detail.is-new-task .flowmo-reminder-rail {
  margin-top: -2px;
}

.flowmo-task-assignee-field {
  position: relative;
}

.flowmo-task-assignee-control {
  min-width: 0;
  position: relative;
  display: grid;
}

.flowmo-task-assignee-control input {
  padding-right: 86px;
}

.flowmo-task-quick-trigger {
  min-width: 70px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 7px;
  background: #f0fdfa;
  color: #0f766e;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}

.flowmo-task-quick-trigger:hover,
.flowmo-task-quick-trigger[aria-expanded="true"] {
  border-color: #5eead4;
  background: #ccfbf1;
  color: #0f766e;
}

.flowmo-task-quick-trigger > span:first-child {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.flowmo-task-quick-trigger span,
.flowmo-task-quick-assignees button span:not(.flowmo-avatar) {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-transform: none;
}

.flowmo-task-quick-assignees {
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.flowmo-task-quick-assignees button {
  min-height: 29px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 6px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background: #f0fdfa;
  color: #0f766e;
  padding: 3px 8px 3px 4px;
  font-size: 10.5px;
  font-weight: 900;
  text-align: left;
}

.flowmo-task-quick-assignees button:hover {
  border-color: #5eead4;
  background: #ccfbf1;
}

.flowmo-task-editor-status {
  min-height: 16px;
  margin: 0;
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
}

.flowmo-task-editor-status[data-type="error"] {
  color: #be123c;
}

.flowmo-reminder-rail {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.flowmo-reminder-list {
  display: grid;
  gap: 7px;
}

.flowmo-reminder-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
}

.flowmo-reminder-item div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-reminder-item span:not(.flowmo-avatar) {
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-reminder-item strong {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-reminder-item small {
  color: #667085;
  font-size: 11px;
  line-height: 1.3;
}

@container (max-width: 980px) {
  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-lanes {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-lane,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-stack {
    min-height: auto;
    overflow: visible;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-detail {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
    grid-template-rows: auto;
  }
}

@container (max-width: 760px) {
  .lark-module-shell[data-capability="tasks"] .lark-module-toolbar,
  .lark-module-shell[data-capability="tasks"] .lark-feed-tools,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-detail,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-board-head,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-head,
  .lark-module-shell[data-capability="tasks"] .flowmo-reminder-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions,
  .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title > .flowmo-avatar {
  display: inline-grid;
  place-items: center;
  margin: 0;
  overflow: visible;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-insights {
  display: none;
}

@container (max-width: 760px) {
  .lark-module-shell[data-capability="tasks"] .lark-feed-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button {
    width: auto;
    min-width: 112px;
    justify-self: end;
  }
}

@container (max-width: 520px) {
  .lark-module-shell[data-capability="tasks"] .lark-feed-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button {
    width: 100%;
    justify-self: stretch;
  }
}

/* Flowmo tasks button polish: softer actions, aligned controls, hidden filter scrollbar. */
.lark-module-shell[data-capability="tasks"] .lark-feed-tools {
  align-items: center;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button {
  min-width: 112px;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
  box-shadow: none;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-tools .primary-button:hover {
  border-color: #7dd3fc;
  background: #e0f2fe;
  color: #075985;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button {
  min-height: 34px;
  border-radius: 8px;
  line-height: 1;
  box-shadow: none;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button svg {
  width: 14px;
  height: 14px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .primary-button,
.lark-module-shell[data-capability="tasks"] .flowmo-task-welcome .primary-button,
.lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions .primary-button {
  border: 1px solid #99f6e4;
  background: #ecfdf5;
  color: #047857;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .primary-button:hover,
.lark-module-shell[data-capability="tasks"] .flowmo-task-welcome .primary-button:hover,
.lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions .primary-button:hover {
  border-color: #5eead4;
  background: #d1fae5;
  color: #065f46;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .secondary-button,
.lark-module-shell[data-capability="tasks"] .flowmo-reminder-head .secondary-button,
.lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions .secondary-button {
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #475467;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .secondary-button:hover,
.lark-module-shell[data-capability="tasks"] .flowmo-reminder-head .secondary-button:hover,
.lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions .secondary-button:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-filters {
  align-items: center;
  padding-bottom: 0;
  scrollbar-width: none;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-filters::-webkit-scrollbar {
  display: none;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > .flowmo-task-head-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  border: 1px solid #b6f2e6;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.08);
  place-items: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1;
  text-align: center;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > .flowmo-task-head-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  margin: 0;
  overflow: visible;
  stroke-width: 1.9;
  transform: none;
  vector-effect: non-scaling-stroke;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > .flowmo-task-head-icon::before {
  content: none;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > .flowmo-task-head-icon::after {
  content: none;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button > span:first-child {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.68);
  color: currentColor;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button > span:first-child svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .secondary-button > span:first-child,
.lark-module-shell[data-capability="tasks"] .flowmo-reminder-head .secondary-button > span:first-child,
.lark-module-shell[data-capability="tasks"] .flowmo-task-editor-actions .secondary-button > span:first-child {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.app-shell.lark-mode .lark-work-grid:has(.lark-module-shell[data-capability="tasks"]) {
  padding-bottom: 5px;
}

.lark-module-shell[data-capability="tasks"] .lark-module-toolbar {
  display: none;
}

.lark-module-shell[data-capability="tasks"] {
  padding-top: 8px;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  margin-top: 8px;
  min-height: clamp(700px, calc(100dvh - 92px), 1100px);
  overflow: auto;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-chat-list,
.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-message-list {
  grid-area: 1 / 1;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-chat-list {
  width: 100%;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-message-list {
  width: min(360px, calc(100% - 24px));
  max-height: min(720px, calc(100vh - 168px));
  justify-self: end;
  align-self: start;
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.96);
  padding: 10px;
  overflow: auto;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  transform-origin: top right;
  animation: flowmoTaskDrawerIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: opacity, transform;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-message-list.is-closing {
  pointer-events: none;
  animation: flowmoTaskDrawerOut 180ms ease both;
}

.lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-message-list[hidden] {
  display: none !important;
}

.flowmo-task-drawer-close {
  width: 32px;
  height: 32px;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.flowmo-task-drawer-close:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-task-drawer-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board {
  position: relative;
  z-index: 1;
  min-height: clamp(680px, calc(100dvh - 108px), 1080px);
  height: 100%;
  gap: 14px;
  padding: 18px 16px 16px;
  background: #ffffff;
  overflow: visible;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-head {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 0 4px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  align-self: center;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > div {
  min-height: 46px;
  display: grid;
  align-content: center;
  gap: 3px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title strong {
  margin: 0;
  line-height: 1.18;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-board-title > div > span {
  margin: 0;
  line-height: 1.35;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-groups {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  max-height: 116px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 6px 4px 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-groups::-webkit-scrollbar,
.lark-module-shell[data-capability="tasks"] .flowmo-task-stack::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-groups::-webkit-scrollbar-thumb,
.lark-module-shell[data-capability="tasks"] .flowmo-task-stack::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  background-clip: padding-box;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-group-chip {
  width: auto;
  min-width: 154px;
  max-width: 220px;
  flex: 0 1 184px;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-lanes {
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-lane {
  min-height: 0;
  overflow: hidden;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-stack {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button > span:first-child,
.flowmo-task-check {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-action-button.is-opening > span:first-child,
.flowmo-task-check:active {
  transform: rotate(90deg) scale(1.08);
}

@keyframes flowmoTaskDrawerIn {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes flowmoTaskDrawerOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(14px) scale(0.985);
  }
}

@container (max-width: 760px) {
  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"] .lark-message-list {
    width: 100%;
    max-height: none;
    position: relative;
  }

  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"],
  .lark-module-shell[data-capability="tasks"] .flowmo-task-board {
    min-height: auto;
    height: auto;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-groups {
    max-height: 172px;
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-board-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="tasks"] .flowmo-task-group-chip {
    max-width: none;
    flex-basis: 100%;
  }

  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"].is-task-detail-open {
    grid-template-rows: auto auto;
  }

  .lark-module-shell[data-capability="tasks"] .lark-feed-layout[data-mode="tasks"].is-task-detail-open .lark-message-list {
    grid-area: 2 / 1;
  }
}

.lark-module-shell[data-capability="calendar"] {
  gap: 12px;
  container-type: inline-size;
}

.lark-module-shell[data-capability="calendar"] .lark-module-toolbar {
  min-height: 0;
  align-items: center;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.98)),
    radial-gradient(circle at 95% 0%, rgba(20, 184, 166, 0.12), transparent 32%);
  padding: 13px;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools {
  min-width: 0;
  grid-template-columns: minmax(180px, 1fr) auto;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools .secondary-button {
  display: none;
}

.lark-module-shell[data-capability="calendar"] .lark-search-wrap {
  min-height: 42px;
  border-color: #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.lark-module-shell[data-capability="calendar"] .lark-search-wrap input {
  min-height: 42px;
  font-size: 13px;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools .primary-button {
  min-height: 42px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  box-shadow: none;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools .primary-button:hover {
  border-color: #5eead4;
  background: #d1fae5;
  color: #065f46;
}

.lark-feed-layout[data-mode="calendar"] {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  overflow: auto;
}

.lark-feed-layout[data-mode="calendar"] .lark-chat-list,
.lark-feed-layout[data-mode="calendar"] .lark-message-list {
  min-height: 0;
  overflow: auto;
}

.lark-feed-layout[data-mode="calendar"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
  padding-right: 2px;
}

.lark-feed-layout[data-mode="calendar"] .lark-message-list {
  display: none;
}

.flowmo-calendar-workspace,
.flowmo-calendar-modal {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.flowmo-calendar-upcoming {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

.flowmo-calendar-side-head,
.flowmo-calendar-board-head,
.flowmo-calendar-inspector-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flowmo-calendar-side-head > div,
.flowmo-calendar-board-head > div,
.flowmo-calendar-inspector-head {
  min-width: 0;
}

.flowmo-calendar-side-head strong,
.flowmo-calendar-board-head strong,
.flowmo-calendar-inspector-head strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-side-head span,
.flowmo-calendar-board-head span,
.flowmo-calendar-inspector-head span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-icon-button,
.flowmo-calendar-controls button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  box-shadow: none;
}

.flowmo-calendar-icon-button {
  width: 36px;
  height: 36px;
}

.flowmo-calendar-icon-button svg,
.flowmo-calendar-controls svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-calendar-icon-button:hover,
.flowmo-calendar-controls button:hover {
  border-color: #99f6e4;
  background: #ecfdf5;
  color: #047857;
}

.flowmo-calendar-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flowmo-calendar-mini-stats span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.flowmo-calendar-mini-stats b {
  color: #101828;
  font-size: 18px;
  font-weight: 920;
  line-height: 1;
}

.flowmo-calendar-mini-stats small {
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.flowmo-calendar-timeline {
  position: relative;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 2px 12px;
}

.flowmo-calendar-timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #dbe3ef;
}

.flowmo-calendar-timeline-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.flowmo-calendar-timeline-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin: 16px 0 0 1px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #64748b;
  box-shadow: 0 0 0 3px #edf2f7;
}

.flowmo-calendar-timeline-item[data-source="local"] .flowmo-calendar-timeline-dot {
  background: #2563eb;
}

.flowmo-calendar-timeline-item[data-source="gmail"] .flowmo-calendar-timeline-dot {
  background: #d93025;
  box-shadow: 0 0 0 3px #fff1ee;
}

.flowmo-calendar-timeline-item[data-source="outlook"] .flowmo-calendar-timeline-dot {
  background: #2563eb;
  box-shadow: 0 0 0 3px #eff6ff;
}

.flowmo-calendar-timeline-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 11px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.065);
}

.flowmo-calendar-timeline-item:hover .flowmo-calendar-timeline-copy,
.flowmo-calendar-timeline-item:focus-visible .flowmo-calendar-timeline-copy {
  border-color: rgba(20, 184, 166, 0.36);
  background: #fbfefd;
  outline: none;
}

.flowmo-calendar-timeline-copy small,
.flowmo-calendar-timeline-copy em {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-timeline-copy small {
  color: #475467;
  text-transform: uppercase;
}

.flowmo-calendar-timeline-copy strong {
  overflow: hidden;
  color: #101828;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-empty {
  margin: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #667085;
  padding: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.flowmo-calendar-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  overflow: visible;
  padding: 14px;
}

.flowmo-calendar-board {
  min-width: 0;
  min-height: 475px;
  display: grid;
  grid-template-rows: auto minmax(395px, 1fr);
  gap: 12px;
  overflow: visible;
}

.flowmo-calendar-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flowmo-calendar-controls button {
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-calendar-controls .flowmo-calendar-today-button {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.flowmo-calendar-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(88px, 1fr));
  grid-template-rows: 28px repeat(6, minmax(60px, 1fr));
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #dbe3ef;
  gap: 1px;
}

.flowmo-calendar-weekday {
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.flowmo-calendar-cell {
  position: relative;
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  background: #ffffff;
  color: #101828;
  padding: 9px;
  outline: none;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.flowmo-calendar-cell[data-outside="true"] {
  background: #f4f6fa;
  color: #98a2b3;
}

.flowmo-calendar-cell[data-today="true"] {
  background: #f0fdfa;
}

.flowmo-calendar-cell[data-selected="true"] {
  z-index: 1;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.28), 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.flowmo-calendar-cell:hover,
.flowmo-calendar-cell:focus-visible {
  background: #fbfdff;
  box-shadow: inset 0 0 0 2px rgba(20, 184, 166, 0.24);
}

.flowmo-calendar-day-number {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.flowmo-calendar-cell[data-today="true"] .flowmo-calendar-day-number {
  background: #0f766e;
  color: #ffffff;
}

.flowmo-calendar-event-stack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: hidden;
}

.flowmo-calendar-event-pill {
  min-width: 0;
  min-height: 24px;
  overflow: hidden;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 7px;
  background: #0f9f76;
  color: #ffffff;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 7px 14px rgba(15, 118, 110, 0.18);
}

.flowmo-calendar-event-pill[data-source="local"] {
  border-color: rgba(37, 99, 235, 0.2);
  background: #2563eb;
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.17);
}

.flowmo-calendar-event-pill[data-source="gmail"] {
  border-color: rgba(217, 48, 37, 0.22);
  background: #d93025;
  box-shadow: 0 7px 14px rgba(217, 48, 37, 0.17);
}

.flowmo-calendar-event-pill[data-source="outlook"] {
  border-color: rgba(37, 99, 235, 0.22);
  background: #2563eb;
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.17);
}

.flowmo-calendar-event-pill[data-active="true"],
.flowmo-calendar-event-pill:hover,
.flowmo-calendar-event-pill:focus-visible {
  outline: none;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.flowmo-calendar-more {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-agenda-strip {
  min-width: 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.flowmo-calendar-strip-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(160px, 0.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.flowmo-calendar-strip-head > div {
  min-width: 0;
}

.flowmo-calendar-strip-head strong,
.flowmo-calendar-detail-inline-head strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-strip-date > span,
.flowmo-calendar-detail-inline-head span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-add-button {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #0f172a;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: none;
}

.flowmo-calendar-add-button:hover,
.flowmo-calendar-add-button:focus-visible {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.flowmo-calendar-add-button > span:first-child {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.flowmo-calendar-add-button span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.flowmo-calendar-add-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.flowmo-calendar-strip-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.flowmo-calendar-quick-events {
  min-width: 0;
  max-height: 88px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  align-content: start;
  gap: 7px;
  overflow: auto hidden;
  padding-right: 2px;
}

.flowmo-calendar-quick-event {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  padding: 8px 9px;
  text-align: left;
}

.flowmo-calendar-quick-event[data-active="true"],
.flowmo-calendar-quick-event:hover,
.flowmo-calendar-quick-event:focus-visible {
  border-color: rgba(20, 184, 166, 0.38);
  background: #f0fdfa;
  outline: none;
}

.flowmo-calendar-quick-event[data-source="local"] {
  border-color: rgba(37, 99, 235, 0.24);
}

.flowmo-calendar-quick-event[data-source="gmail"] {
  border-color: rgba(217, 48, 37, 0.24);
  background: #fff7f5;
}

.flowmo-calendar-quick-event[data-source="gmail"] span {
  color: #b42318;
}

.flowmo-calendar-quick-event[data-source="outlook"] {
  border-color: rgba(37, 99, 235, 0.24);
  background: #f5f9ff;
}

.flowmo-calendar-quick-event[data-source="outlook"] span {
  color: #1d4ed8;
}

.flowmo-calendar-quick-event span,
.flowmo-calendar-quick-event em {
  overflow: hidden;
  color: #667085;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-quick-event span {
  color: #047857;
  text-transform: uppercase;
}

.flowmo-calendar-quick-event strong {
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-detail-inline {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  border-left: 1px solid #e2e8f0;
  padding-left: 12px;
}

.flowmo-calendar-detail-inline-head {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-calendar-detail-inline-head--empty {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.flowmo-calendar-detail-inline-head--empty strong {
  flex: 0 0 auto;
}

.flowmo-calendar-detail-inline-head--empty span {
  margin-top: 0;
}

.flowmo-calendar-inspector {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 15px;
  overflow: auto;
}

.flowmo-calendar-inspector-head {
  display: grid;
  justify-content: start;
  gap: 3px;
}

.flowmo-calendar-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-calendar-detail-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
}

.flowmo-calendar-detail-text {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.flowmo-calendar-detail-text b {
  display: block;
  margin-bottom: 3px;
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-calendar-day-list {
  display: grid;
  gap: 7px;
}

.flowmo-calendar-day-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  padding: 9px;
  text-align: left;
}

.flowmo-calendar-day-row[data-active="true"],
.flowmo-calendar-day-row:hover {
  border-color: rgba(20, 184, 166, 0.34);
  background: #f0fdfa;
}

.flowmo-calendar-day-row span {
  color: #047857;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-calendar-day-row strong {
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flowmo-calendar-wide-action,
.flowmo-calendar-detail-actions button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-calendar-invitations {
  min-width: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.flowmo-calendar-invitations-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flowmo-calendar-invitations-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-calendar-invitations-head strong {
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-invitations-head span {
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-invitation-tabs {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flowmo-calendar-invitation-tabs button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-calendar-invitation-tabs button[data-active="true"] {
  border-color: rgba(20, 184, 166, 0.36);
  background: #f0fdfa;
  color: #0f766e;
}

.flowmo-calendar-invitation-tabs strong {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  color: inherit;
  font-size: 10px;
  line-height: 1;
}

.flowmo-calendar-invitation-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.flowmo-calendar-invitation-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.flowmo-calendar-invitation-card[data-status="pending"] {
  border-color: rgba(20, 184, 166, 0.28);
}

.flowmo-calendar-invitation-card[data-status="success"] {
  border-color: rgba(22, 163, 74, 0.24);
}

.flowmo-calendar-invitation-card[data-status="danger"] {
  border-color: rgba(190, 18, 60, 0.2);
}

.flowmo-calendar-invitation-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.flowmo-calendar-invitation-status {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.flowmo-calendar-invitation-card[data-status="pending"] .flowmo-calendar-invitation-status {
  border-color: rgba(20, 184, 166, 0.24);
  background: #ecfdf5;
  color: #047857;
}

.flowmo-calendar-invitation-card[data-status="success"] .flowmo-calendar-invitation-status {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f0fdf4;
  color: #15803d;
}

.flowmo-calendar-invitation-card[data-status="danger"] .flowmo-calendar-invitation-status {
  border-color: rgba(190, 18, 60, 0.18);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-calendar-invitation-main strong,
.flowmo-calendar-invitation-main small,
.flowmo-calendar-invitation-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-invitation-main strong {
  color: #101828;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.25;
}

.flowmo-calendar-invitation-main small,
.flowmo-calendar-invitation-main em {
  color: #667085;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.25;
}

.flowmo-calendar-invitation-main p {
  margin: 2px 0 0;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.35;
}

.flowmo-calendar-invitation-main p[data-tone="error"] {
  color: #be123c;
}

.flowmo-calendar-invitation-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-calendar-invitation-actions button {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-calendar-provider-host {
  position: relative;
}

.flowmo-calendar-provider-chooser {
  width: 100%;
  min-width: min(280px, 100%);
  flex: 1 0 100%;
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.84);
  transform-origin: top center;
  animation: flowmoCalendarProviderReveal 190ms ease-out both;
  z-index: 8;
}

.flowmo-calendar-provider-chooser small {
  color: #475569;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
}

.flowmo-calendar-provider-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.flowmo-calendar-provider-options button {
  --provider-accent: #0f766e;
  --provider-bg: #ecfdf5;
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--provider-accent) 26%, #dbe4ef);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, var(--provider-bg));
  color: #0f172a;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.flowmo-calendar-provider-options button[data-provider="gmail"] {
  --provider-accent: #d93025;
  --provider-bg: #fff5f3;
}

.flowmo-calendar-provider-options button[data-provider="outlook"] {
  --provider-accent: #2563eb;
  --provider-bg: #eff6ff;
}

.flowmo-calendar-provider-options button:hover,
.flowmo-calendar-provider-options button:focus-visible {
  border-color: color-mix(in srgb, var(--provider-accent) 58%, #ffffff);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--provider-accent) 18%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-calendar-provider-options button[data-selected="true"] {
  border-color: color-mix(in srgb, var(--provider-accent) 72%, #ffffff);
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 72%, var(--provider-bg)), color-mix(in srgb, var(--provider-bg) 88%, var(--provider-accent)));
  box-shadow: 0 13px 24px color-mix(in srgb, var(--provider-accent) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--provider-accent) 18%, #ffffff);
}

.flowmo-calendar-provider-options button:disabled {
  cursor: progress;
  opacity: 0.66;
  transform: none;
}

.flowmo-calendar-provider-logo {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.flowmo-calendar-provider-logo svg,
.flowmo-calendar-provider-logo img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.flowmo-calendar-provider-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--provider-accent);
  color: #ffffff;
  box-shadow: 0 7px 14px color-mix(in srgb, var(--provider-accent) 26%, transparent);
  opacity: 0;
  transform: scale(0.72) rotate(-12deg);
  transition: opacity 150ms ease, transform 150ms ease;
}

.flowmo-calendar-provider-check svg {
  width: 11px;
  height: 11px;
}

.flowmo-calendar-provider-options button[data-selected="true"] .flowmo-calendar-provider-check {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.flowmo-calendar-provider-options strong {
  min-width: 0;
  max-width: 100%;
  color: #101828;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.flowmo-calendar-provider-options button small {
  min-width: 0;
  max-width: 100%;
  color: #667085;
  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
}

.agenda-provider-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agenda-provider-options button {
  min-height: 74px;
}

.agenda-provider-options button:disabled {
  cursor: not-allowed;
}

.flowmo-calendar-provider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flowmo-calendar-provider-footer [data-calendar-provider-help] {
  min-width: 0;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.flowmo-calendar-provider-footer [data-calendar-provider-confirm] {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

@keyframes flowmoCalendarProviderReveal {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .flowmo-calendar-provider-options {
    grid-template-columns: 1fr;
  }

  .flowmo-calendar-provider-options button {
    min-height: 44px;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    padding: 7px 9px;
  }

  .flowmo-calendar-provider-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .flowmo-calendar-provider-footer [data-calendar-provider-confirm] {
    width: 100%;
  }

  .agenda-provider-statusbar {
    grid-template-columns: 1fr;
  }

  .agenda-provider-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agenda-provider-card > a {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.agenda-workspace {
  min-width: 0;
  min-height: 0;
}

.agenda-module-shell {
  min-height: 0;
}

.agenda-calendar-host {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.agenda-provider-statusbar {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 14px 0;
}

.agenda-provider-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.055);
}

.agenda-provider-card[data-provider="gmail"] {
  border-color: rgba(217, 48, 37, 0.18);
}

.agenda-provider-card[data-provider="outlook"] {
  border-color: rgba(37, 99, 235, 0.18);
}

.agenda-provider-card[data-state="ready"] {
  background: #f8fffc;
}

.agenda-provider-card[data-state="reconnect"] {
  background: #fffbeb;
}

.agenda-provider-card[data-state="disconnected"] {
  background: #f8fafc;
}

.agenda-provider-logo {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.agenda-provider-logo img,
.agenda-provider-logo svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.agenda-provider-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agenda-provider-copy strong,
.agenda-provider-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-provider-copy strong {
  color: #101828;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.2;
}

.agenda-provider-copy small {
  color: #667085;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.25;
}

.agenda-provider-card > a {
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.agenda-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.agenda-status-badge {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #1d4ed8;
}

.agenda-status-badge[data-state="ready"],
.agenda-status-badge.ready {
  border-color: rgba(5, 150, 105, 0.22);
  background: #ecfdf5;
  color: #047857;
}

.agenda-status-badge[data-state="partial"],
.agenda-status-badge.partial {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fffbeb;
  color: #b45309;
}

.agenda-status-badge[data-state="disconnected"],
.agenda-status-badge.disconnected {
  border-color: rgba(225, 29, 72, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-calendar-delete {
  border: 1px solid rgba(190, 18, 60, 0.2);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-calendar-form {
  display: grid;
  gap: 11px;
}

.flowmo-calendar-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.flowmo-calendar-form label span {
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.flowmo-calendar-form input,
.flowmo-calendar-form textarea {
  width: 100%;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.35;
  outline: none;
}

.flowmo-calendar-form input {
  min-height: 38px;
}

.flowmo-calendar-form textarea {
  min-height: 92px;
  resize: vertical;
}

.flowmo-calendar-form input:focus,
.flowmo-calendar-form textarea:focus {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.11);
}

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

.flowmo-calendar-checkline {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 8px !important;
  width: fit-content;
}

.flowmo-calendar-checkline input {
  width: 16px;
  min-height: 16px;
}

.flowmo-calendar-attendee-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-calendar-attendee-list:empty {
  display: none;
}

.flowmo-calendar-attendee-chip {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 5px 7px 5px 9px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

.flowmo-calendar-attendee-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-attendee-chip button {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 58, 138, 0.1);
  color: #1e3a8a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.flowmo-calendar-attendee-suggestions {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.flowmo-calendar-attendee-suggestions[hidden] {
  display: none;
}

.flowmo-calendar-attendee-suggestion {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #101828;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

.flowmo-calendar-attendee-suggestion:hover,
.flowmo-calendar-attendee-suggestion:focus-visible {
  background: #f0fdfa;
  outline: none;
}

.flowmo-calendar-attendee-suggestion strong,
.flowmo-calendar-attendee-suggestion span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-calendar-attendee-suggestion strong {
  color: #101828;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.flowmo-calendar-attendee-suggestion span,
.flowmo-calendar-form-hint {
  color: #667085;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.3;
}

@media (max-width: 1180px) {
  .lark-feed-layout[data-mode="calendar"],
  .flowmo-calendar-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-feed-layout[data-mode="calendar"] .lark-chat-list,
  .lark-feed-layout[data-mode="calendar"] .lark-message-list {
    overflow: auto;
  }

  .flowmo-calendar-upcoming,
  .flowmo-calendar-board,
  .flowmo-calendar-inspector {
    overflow: visible;
  }
}

@container (max-width: 980px) {
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-grid {
    min-width: 660px;
    grid-template-columns: repeat(7, minmax(88px, 1fr));
    grid-template-rows: 26px repeat(6, minmax(56px, 1fr));
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-cell {
    min-height: 56px;
    padding: 7px;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-event-pill {
    min-height: 21px;
    padding: 0 6px;
    font-size: 9.5px;
  }
}

@container (min-width: 621px) and (max-width: 980px) {
  .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
}

@container (max-width: 680px) {
  .lark-module-shell[data-capability="calendar"] .lark-module-toolbar,
  .lark-module-shell[data-capability="calendar"] .lark-feed-tools,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board-head,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-side-head,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board-head,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-controls {
    width: 100%;
    justify-content: space-between;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitations-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitation-tabs {
    width: 100%;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitation-tabs button {
    flex: 1 1 0;
    justify-content: center;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitation-list,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitation-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitation-actions {
    justify-content: flex-start;
  }
}

@container (max-width: 620px) {
  .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list,
  .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] .lark-message-list,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-upcoming,
  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-inspector {
    overflow: auto;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .lark-module-shell[data-capability="calendar"] .flowmo-calendar-detail-inline {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .lark-module-shell[data-capability="calendar"] .lark-module-toolbar,
  .lark-module-shell[data-capability="calendar"] .lark-feed-tools,
  .flowmo-calendar-board-head,
  .flowmo-calendar-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-calendar-side-head,
  .flowmo-calendar-board-head,
  .flowmo-calendar-strip-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .flowmo-calendar-controls {
    width: 100%;
    justify-content: space-between;
  }

  .flowmo-calendar-grid {
    min-width: 720px;
  }

  .flowmo-calendar-board {
    overflow: visible;
  }

  .flowmo-calendar-invitations-head {
    align-items: stretch;
    flex-direction: column;
  }

  .flowmo-calendar-invitation-tabs {
    width: 100%;
  }

  .flowmo-calendar-invitation-tabs button {
    flex: 1 1 0;
    justify-content: center;
  }

  .flowmo-calendar-invitation-list,
  .flowmo-calendar-invitation-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-calendar-invitation-actions {
    justify-content: flex-start;
  }
}

.lark-module-shell[data-capability="calendar"] {
  gap: 0;
  overflow: auto;
}

.lark-module-shell[data-capability="calendar"] .lark-module-toolbar {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 12px 5px;
}

.lark-module-shell[data-capability="calendar"] .lark-module-toolbar p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools {
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.98)),
    radial-gradient(circle at 95% 0%, rgba(20, 184, 166, 0.1), transparent 32%);
  margin: 0 0 12px;
  padding: 0 12px 10px;
}

.lark-module-shell[data-capability="calendar"] .lark-search-wrap {
  box-shadow: none;
}

.lark-module-shell[data-capability="calendar"] .lark-feed-tools .primary-button {
  width: auto;
  white-space: nowrap;
}

.lark-module-shell[data-capability="calendar"] .flowmo-calendar-board-head {
  align-items: flex-start;
  flex-direction: row;
}

.lark-module-shell[data-capability="calendar"] .flowmo-calendar-controls {
  width: auto;
  justify-content: flex-end;
}

.app-shell.lark-mode .lark-work-grid:has(.lark-module-shell[data-capability="calendar"]) {
  padding-bottom: 5px;
}

.workspace-slot[data-slot="main"] .lark-module-shell[data-capability="calendar"] {
  min-height: calc(100dvh - 158px);
  overflow: hidden;
}

.workspace-slot[data-slot="main"] .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] {
  min-height: calc(100dvh - 292px);
  height: 100%;
  overflow: hidden;
}

.workspace-slot[data-slot="main"] .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list {
  min-height: calc(100dvh - 292px);
  height: 100%;
  overflow: auto;
  padding-bottom: 4px;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-workspace {
  height: calc(100dvh - 304px);
  min-height: 640px;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 12px 14px 8px;
  overflow: hidden;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-board {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-grid {
  grid-template-rows: 28px repeat(6, minmax(66px, 1fr));
}

.workspace-slot[data-slot="main"] .flowmo-calendar-cell {
  min-height: 66px;
  gap: 4px;
  padding: 7px 8px;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-agenda-strip {
  gap: 6px;
  padding-top: 8px;
  padding-bottom: 0;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-strip-head {
  gap: 10px;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-quick-events {
  max-height: 54px;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-quick-events:has(.flowmo-calendar-empty) {
  max-height: 34px;
  overflow: visible;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-quick-events .flowmo-calendar-empty {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.25;
}

.workspace-slot[data-slot="main"] .flowmo-calendar-invitations {
  max-height: min(180px, 28dvh);
  overflow: auto;
}

.workspace-slot[data-slot="side"] .lark-module-shell[data-capability="calendar"] {
  gap: 10px;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="calendar"],
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list {
  min-height: 0;
  overflow: auto;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-workspace {
  padding: 12px;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-invitations-head {
  align-items: stretch;
  flex-direction: column;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-invitation-tabs {
  width: 100%;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-invitation-tabs button {
  flex: 1 1 0;
  justify-content: center;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-invitation-list,
.workspace-slot[data-slot="side"] .flowmo-calendar-invitation-card {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .flowmo-calendar-invitation-actions {
  justify-content: flex-start;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-board-head {
  flex-direction: column;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-controls {
  width: auto;
  justify-content: flex-start;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-board {
  min-height: 430px;
  grid-template-rows: auto minmax(350px, 1fr);
}

.workspace-slot[data-slot="side"] .flowmo-calendar-grid {
  min-width: 680px;
  grid-template-rows: 26px repeat(6, minmax(54px, 1fr));
}

.workspace-slot[data-slot="side"] .flowmo-calendar-cell {
  min-height: 54px;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-strip-body {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .flowmo-calendar-strip-head {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.workspace-slot[data-slot="side"] .flowmo-calendar-detail-inline {
  border-left: 0;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  padding-left: 0;
}

@container (max-width: 420px) {
  .lark-module-shell[data-capability="calendar"] .lark-feed-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="calendar"] .lark-feed-tools .primary-button {
    width: 100%;
  }
}

.lark-module-shell[data-capability="approval"] {
  overflow: auto;
}

.lark-module-shell[data-capability="approval"] .lark-module-toolbar {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
}

.lark-module-shell[data-capability="approval"] .lark-module-toolbar p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-module-shell[data-capability="approval"] .lark-feed-tools {
  grid-template-columns: minmax(180px, 1fr) auto;
}

.lark-module-shell[data-capability="approval"] .lark-feed-tools .primary-button {
  width: auto;
  white-space: nowrap;
}

.lark-feed-layout[data-mode="approval"] {
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.lark-feed-layout[data-mode="approval"] .lark-chat-list,
.lark-feed-layout[data-mode="approval"] .lark-message-list {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.flowmo-approval-queue,
.flowmo-approval-detail {
  min-width: 0;
  min-height: 0;
  display: grid;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  overflow: hidden;
}

.flowmo-approval-queue {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.flowmo-approval-head,
.flowmo-approval-detail-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.flowmo-approval-head {
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.flowmo-approval-head-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ecfeff;
  color: #0f766e;
}

.flowmo-approval-head-icon svg,
.flowmo-approval-action svg,
.flowmo-approval-detail-empty span svg,
.flowmo-approval-empty span svg {
  width: 17px;
  height: 17px;
}

.flowmo-approval-head strong,
.flowmo-approval-detail-head strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.flowmo-approval-head small,
.flowmo-approval-detail-head small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-filters {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.flowmo-approval-filter {
  min-height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 7px;
  background: #ffffff;
  color: #475467;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.flowmo-approval-filter strong {
  min-width: 21px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 10px;
}

.flowmo-approval-filter:hover,
.flowmo-approval-filter[data-active="true"] {
  border-color: rgba(20, 184, 166, 0.3);
  background: #f0fdfa;
  color: #0f766e;
}

.flowmo-approval-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 10px;
}

.flowmo-approval-card {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  padding: 10px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.flowmo-approval-card:hover,
.flowmo-approval-card[data-selected="true"] {
  border-color: rgba(37, 99, 235, 0.28);
  border-left-color: #2563eb;
  background: #f8fbff;
}

.flowmo-approval-card[data-status="success"] {
  border-left-color: #0f766e;
}

.flowmo-approval-card[data-status="danger"] {
  border-left-color: #be123c;
}

.flowmo-approval-card[data-status="pending"] {
  border-left-color: #d97706;
}

.flowmo-approval-card[data-kind="notification"] {
  border-left-color: #0ea5e9;
  background: #f8fcff;
}

.flowmo-review-card[data-kind="notification"] {
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(180deg, #ffffff, #f8fcff);
}

.flowmo-approval-card-status {
  width: fit-content;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-approval-card strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-card small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-card-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-approval-card-meta span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-detail {
  align-content: start;
  gap: 12px;
  padding: 12px;
  overflow: auto;
}

.flowmo-approval-detail-head {
  padding: 0;
}

.flowmo-approval-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-approval-status[data-tone="pending"] {
  background: #fffbeb;
  color: #b45309;
}

.flowmo-approval-status[data-tone="success"] {
  background: #ecfdf5;
  color: #047857;
}

.flowmo-approval-status[data-tone="danger"] {
  background: #fff1f2;
  color: #be123c;
}

.flowmo-approval-permission {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 8px;
  background: #fffbeb;
  padding: 10px;
}

.flowmo-approval-permission strong,
.flowmo-approval-permission a {
  color: #92400e;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-approval-permission span {
  color: #78350f;
  font-size: 11.5px;
  line-height: 1.4;
}

.flowmo-approval-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.flowmo-approval-kpis span,
.flowmo-approval-data-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
}

.flowmo-approval-kpis strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
}

.flowmo-approval-kpis small,
.flowmo-approval-data-item small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
}

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

.flowmo-approval-data-item strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-approval-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 12px;
}

.flowmo-approval-action {
  gap: 7px;
  justify-content: center;
}

.flowmo-approval-detail .flowmo-approval-actions .primary-button {
  flex: 1 1 100%;
}

.flowmo-approval-detail .flowmo-approval-actions .secondary-button {
  flex: 1 1 160px;
}

.flowmo-approval-action > span:first-child {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.flowmo-approval-actions small {
  flex: 1 1 220px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}

.secondary-button.danger {
  border-color: rgba(190, 18, 60, 0.22);
  background: #fff1f2;
  color: #be123c;
}

.flowmo-approval-empty,
.flowmo-approval-detail-empty {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(203, 213, 225, 0.95);
  border-radius: 8px;
  background: #fbfdff;
  padding: 18px;
  text-align: center;
}

.flowmo-approval-empty span,
.flowmo-approval-detail-empty span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ecfeff;
  color: #0f766e;
}

.flowmo-approval-empty strong,
.flowmo-approval-detail-empty strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.flowmo-approval-empty small,
.flowmo-approval-detail-empty p {
  max-width: 320px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.flowmo-approval-modal {
  width: min(520px, calc(100vw - 32px));
}

.flowmo-approval-form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.flowmo-approval-modal-summary {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.flowmo-approval-modal-summary span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.flowmo-approval-modal-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-review-popup {
  position: fixed;
  z-index: 34;
  max-height: min(620px, calc(100vh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)),
    #ffffff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18);
  animation: dropdownReveal 150ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.flowmo-review-popup::before {
  content: "";
  position: absolute;
  top: 21px;
  left: -6px;
  width: 11px;
  height: 11px;
  border-left: 1px solid rgba(203, 213, 225, 0.88);
  border-bottom: 1px solid rgba(203, 213, 225, 0.88);
  background: #ffffff;
  transform: rotate(45deg);
}

.flowmo-review-popup svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-review-popup-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.68), rgba(239, 246, 255, 0.74) 58%, rgba(255, 255, 255, 0.96)),
    #ffffff;
}

.flowmo-review-popup-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  flex: 0 0 42px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98), transparent 39%),
    linear-gradient(135deg, #ecfeff, #eef2ff);
  color: #0f766e;
  box-shadow: 0 12px 25px rgba(15, 118, 110, 0.12);
}

.flowmo-review-popup-mark svg {
  width: 18px;
  height: 18px;
}

.flowmo-review-popup-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.flowmo-review-popup-kicker {
  width: fit-content;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  align-self: start;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.82);
  color: #0f766e;
  padding: 0 7px;
  font-size: 9.5px;
  font-weight: 920;
  line-height: 1;
}

.flowmo-review-popup-header strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  font-weight: 940;
  line-height: 1.2;
}

.flowmo-review-popup-title > span:not(.flowmo-review-popup-kicker) {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.flowmo-review-popup-body {
  min-height: 0;
  overflow: auto;
  background: #f8fafc;
  padding: 13px;
}

.flowmo-review-popup-list {
  display: grid;
  gap: 10px;
}

.flowmo-review-popup-list-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  padding: 11px 12px;
  text-align: left;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.flowmo-review-popup-list-item:hover,
.flowmo-review-popup-list-item:focus-visible {
  border-color: rgba(20, 184, 166, 0.32);
  background:
    linear-gradient(180deg, #ffffff, #f8fffd);
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-review-popup-list-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(135deg, #ecfeff, #f3f4ff);
  color: #0f766e;
  box-shadow: 0 9px 18px rgba(15, 118, 110, 0.08);
}

.flowmo-review-popup-list-icon svg {
  width: 16px;
  height: 16px;
}

.flowmo-review-popup-list-icon--check svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

.flowmo-review-popup-list-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.flowmo-review-popup-list-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.flowmo-review-popup-list-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 920;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-review-popup-list-heading em {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  padding: 0 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-review-popup-list-copy small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-review-popup-card,
.flowmo-review-popup-empty {
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.flowmo-review-popup-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.flowmo-review-popup-card[data-kind="notification"] {
  border-color: rgba(14, 165, 233, 0.26);
  background:
    linear-gradient(180deg, #ffffff, #f8fcff);
}

.flowmo-review-popup-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  border-radius: 9px;
  cursor: pointer;
}

.flowmo-review-popup-card-main:hover,
.flowmo-review-popup-card-main:focus-visible {
  outline: 0;
  background: rgba(240, 253, 250, 0.52);
}

.flowmo-review-popup-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.flowmo-review-popup-card-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.flowmo-review-popup-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  align-self: start;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(135deg, #ecfeff, #f3f4ff);
  color: #0f766e;
  box-shadow: 0 9px 18px rgba(15, 118, 110, 0.08);
}

.flowmo-review-popup-icon svg,
.flowmo-review-popup-actions svg,
.flowmo-review-popup-empty svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.flowmo-review-popup-icon--check svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

.flowmo-review-popup-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 20px;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(217, 119, 6, 0.08);
}

.flowmo-review-popup-card-main strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  font-weight: 920;
  line-height: 1.25;
}

.flowmo-review-popup-card-main p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.flowmo-review-popup-meta,
.flowmo-review-popup-next {
  display: grid;
  gap: 8px;
}

.flowmo-review-popup-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.flowmo-review-popup-meta span:nth-child(3) {
  grid-column: 1 / -1;
}

.flowmo-review-popup-meta span.flowmo-review-popup-meta--with-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.flowmo-review-popup-meta span.flowmo-review-popup-meta--with-action small {
  grid-column: 1 / -1;
}

.flowmo-review-popup-meta span.flowmo-review-popup-meta--with-action strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-review-popup-meta span,
.flowmo-review-popup-next span {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px;
}

.flowmo-review-popup-meta small,
.flowmo-review-popup-next > small,
.flowmo-review-popup-next span small,
.flowmo-review-popup-actions small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 820;
  line-height: 1.35;
}

.flowmo-review-popup-meta strong,
.flowmo-review-popup-next span strong {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  color: #1f2937;
  font-size: 12px;
  font-weight: 860;
  line-height: 1.35;
}

.flowmo-review-popup-next p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.flowmo-review-popup-attachment-view {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 7px;
  background: #ffffff;
  color: #0f766e;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.flowmo-review-popup-attachment-view:hover,
.flowmo-review-popup-attachment-view:focus-visible {
  border-color: rgba(20, 184, 166, 0.42);
  background: #ecfdf5;
  color: #065f46;
  outline: none;
}

.flowmo-review-popup-attachment-view svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.flowmo-review-popup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.flowmo-review-popup-actions .primary-button,
.flowmo-review-popup-actions .secondary-button {
  min-height: 36px;
  min-width: 0;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.flowmo-review-popup-actions .primary-button span,
.flowmo-review-popup-actions .secondary-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flowmo-review-popup-actions .primary-button {
  grid-column: 1 / -1;
  border-color: rgba(199, 210, 254, 0.92);
  background:
    linear-gradient(180deg, rgba(235, 233, 255, 0.98), rgba(224, 229, 255, 0.98));
  color: #29389c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.flowmo-review-popup-actions .primary-button:hover,
.flowmo-review-popup-actions .primary-button:focus-visible {
  border-color: rgba(129, 140, 248, 0.42);
  background:
    linear-gradient(180deg, rgba(229, 227, 255, 1), rgba(216, 224, 255, 1));
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.flowmo-review-popup-actions .primary-button svg {
  color: #29389c;
}

.flowmo-review-popup-actions .secondary-button {
  color: #344054;
}

.flowmo-review-popup-actions .secondary-button[data-flowmo-review-decision="approve"] {
  border-color: rgba(20, 184, 166, 0.28);
  background: #ffffff;
  color: #0f766e;
}

.flowmo-review-popup-actions .secondary-button.danger {
  border-color: rgba(244, 63, 94, 0.32);
  background: #fff7f8;
  color: #be123c;
}

.flowmo-review-popup-actions .secondary-button svg {
  color: currentColor;
}

.flowmo-review-popup-actions > small {
  grid-column: 1 / -1;
}

.flowmo-review-context-tools {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flowmo-review-context-tools > button,
.flowmo-review-context-files > button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.flowmo-review-context-tools > button:hover,
.flowmo-review-context-files > button:hover {
  border-color: rgba(37, 99, 235, 0.32);
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-review-context-tools svg,
.flowmo-review-context-files svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #0f766e;
}

.flowmo-review-context-tools > button:hover svg,
.flowmo-review-context-files > button:hover svg,
.flowmo-review-context-tools > button:focus-visible svg,
.flowmo-review-context-files > button:focus-visible svg {
  color: #1d4ed8;
}

.flowmo-review-context-files {
  min-width: 0;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowmo-review-context-files > button span {
  max-width: 180px;
  overflow: hidden;
  color: #64748b;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-review-context-files > button strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-review-popup-empty {
  min-height: 158px;
  display: grid;
  align-content: center;
  place-items: center;
  gap: 7px;
  padding: 24px;
  text-align: center;
}

@keyframes dropdownReveal {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.flowmo-review-popup-empty-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  margin: 0 auto 2px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 50%;
  background: #ecfeff;
  color: #020617;
}

.flowmo-review-popup-empty-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-review-popup-empty strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 920;
}

.flowmo-review-popup-empty p {
  max-width: 280px;
  margin: 0 auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.flowmo-review-popup-empty--error {
  border-color: rgba(244, 63, 94, 0.2);
  background:
    linear-gradient(180deg, #ffffff, #fffafb),
    #ffffff;
}

.flowmo-review-popup-empty--error .flowmo-review-popup-empty-icon {
  border-color: rgba(244, 63, 94, 0.18);
  background: #fff1f2;
  color: #0f172a;
}

.flowmo-review-popup-retry {
  gap: 7px;
  margin-top: 6px;
}

.flowmo-review-popup-retry svg {
  width: 14px;
  height: 14px;
}

.flowmo-review-popup-skeleton {
  width: min(300px, 100%);
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.flowmo-review-popup-skeleton i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0);
  background-size: 220% 100%;
  animation: flowmoReviewSkeleton 1050ms linear infinite;
}

.flowmo-review-popup-skeleton i:last-child {
  width: 72%;
  justify-self: center;
}

@keyframes flowmoReviewSkeleton {
  to {
    background-position: -220% 0;
  }
}

.flowmo-approval-form label {
  display: grid;
  gap: 6px;
}

.flowmo-approval-form label span {
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-approval-form textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 10px;
  outline: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.flowmo-approval-form textarea:focus {
  border-color: #8ddbd0;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13);
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="approval"] {
  grid-template-columns: minmax(0, 1fr);
  overflow: auto;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="approval"] .lark-chat-list,
.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="approval"] .lark-message-list {
  overflow: visible;
}

@container (max-width: 760px) {
  .lark-feed-layout[data-mode="approval"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .lark-feed-layout[data-mode="approval"] .lark-chat-list,
  .lark-feed-layout[data-mode="approval"] .lark-message-list {
    overflow: visible;
  }

  .flowmo-approval-data-grid,
  .flowmo-approval-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 420px) {
  .lark-module-shell[data-capability="approval"] .lark-feed-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="approval"] .lark-feed-tools .primary-button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .lark-feed-layout[data-mode="approval"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .lark-feed-layout[data-mode="approval"] .lark-chat-list,
  .lark-feed-layout[data-mode="approval"] .lark-message-list {
    overflow: visible;
  }

  .flowmo-approval-data-grid,
  .flowmo-approval-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="approval"] .lark-feed-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-module-shell[data-capability="approval"] .lark-feed-tools .primary-button {
    width: 100%;
  }
}

.lark-feed-layout[data-mode="team"] {
  grid-template-columns: minmax(0, 1fr);
}

.lark-feed-layout[data-mode="team"] .lark-chat-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-right: 18px;
}

.lark-feed-layout[data-mode="team"] .lark-message-list {
  display: none;
}

.lark-team-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.lark-team-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.lark-team-head-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.lark-team-head-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.lark-team-head-icon svg,
.lark-team-row-actions svg,
.lark-team-selected-actions svg,
.lark-team-detail-empty svg,
.lark-team-org-row > span svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lark-team-head-copy strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.lark-team-head-copy span:not(.lark-team-head-icon) {
  display: block;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
}

.lark-team-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 8px;
}

.lark-team-stat {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px 10px;
}

.lark-team-stat strong {
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.lark-team-stat small {
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.lark-team-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
}

.lark-team-body.has-detail {
  grid-template-columns: minmax(180px, 0.24fr) minmax(340px, 0.48fr) minmax(260px, 0.28fr);
}

.lark-team-sidebar,
.lark-team-directory,
.lark-team-detail {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 12px;
  background: #ffffff;
}

.lark-team-sidebar {
  align-content: start;
  display: grid;
  gap: 12px;
  padding: 10px;
  overflow: auto;
}

.lark-team-tabs {
  display: grid;
  gap: 6px;
}

.lark-team-tabs button,
.lark-team-filter-group button {
  min-width: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
}

.lark-team-tabs button {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.lark-team-tabs button[data-active="true"],
.lark-team-filter-group button[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.34);
  background: #eff6ff;
  color: #1d4ed8;
}

.lark-team-tabs button strong {
  min-width: 24px;
  color: inherit;
  font-size: 12px;
  text-align: right;
}

.lark-team-filter-group {
  display: grid;
  gap: 6px;
}

.lark-team-filter-group > span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lark-team-filter-group:not(.lark-team-departments) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lark-team-filter-group:not(.lark-team-departments) > span {
  grid-column: 1 / -1;
}

.lark-team-filter-group:not(.lark-team-departments) button {
  min-height: 32px;
  padding: 0 8px;
  text-align: center;
}

.lark-team-departments button {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
}

.lark-team-departments button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-team-departments button small {
  color: inherit;
  font-size: 11px;
  font-weight: 900;
}

.lark-team-permission-note {
  margin: 0;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  padding: 9px;
  font-size: 11.5px;
  line-height: 1.4;
}

.lark-team-directory {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.lark-team-directory-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  padding: 12px;
}

.lark-team-directory-head strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 900;
}

.lark-team-directory-head span {
  display: block;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.lark-team-add-person {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.lark-team-add-person:hover,
.lark-team-add-person:focus-visible {
  border-color: rgba(37, 99, 235, 0.38);
  background: #dbeafe;
  outline: none;
}

.lark-team-add-person span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  color: inherit;
}

.lark-team-add-person svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.lark-team-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 10px;
}

.lark-team-person-row,
.lark-team-org-row {
  min-width: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  background: #ffffff;
}

.lark-team-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.lark-team-person-row[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}

.lark-team-person-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.lark-team-person-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lark-team-person-copy strong,
.lark-team-person-copy span,
.lark-team-person-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-team-person-copy strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.lark-team-person-copy span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}

.lark-team-person-copy small {
  color: #64748b;
  font-size: 11px;
}

.lark-team-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lark-team-row-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
}

.lark-team-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.lark-team-org-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: inherit;
  text-align: left;
}

button.lark-team-org-row {
  cursor: pointer;
}

.lark-team-org-row > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 10px;
  background: #f0fdfa;
  color: #0f766e;
}

.lark-team-org-row strong,
.lark-team-org-row small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-team-org-row strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.lark-team-org-row small {
  color: #64748b;
  font-size: 11.5px;
}

.lark-team-org-row em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.lark-team-detail {
  overflow: auto;
  padding: 10px;
}

.lark-team-detail-empty,
.lark-team-selected {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.lark-team-detail-empty {
  align-content: center;
  min-height: 220px;
  justify-items: center;
  color: #64748b;
  text-align: center;
}

.lark-team-detail-empty > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.lark-team-detail-empty strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.lark-team-detail-empty p {
  max-width: 240px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.lark-team-selected-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  padding-bottom: 12px;
}

.lark-team-selected-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.lark-team-selected-head span,
.lark-team-selected-head strong,
.lark-team-selected-head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lark-team-selected-head span {
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-team-selected-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.lark-team-selected-head small {
  color: #64748b;
  font-size: 12px;
}

.lark-team-selected-info {
  display: grid;
  gap: 8px;
}

.lark-team-selected-info div {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #f8fafc;
  padding: 9px;
}

.lark-team-selected-info span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.lark-team-selected-info strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
}

.lark-team-selected-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lark-team-selected-actions .primary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
}

.lark-team-selected-actions .primary-button span:first-child {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.lark-team-empty {
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  padding: 14px;
  font-size: 12px;
  line-height: 1.45;
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="team"] {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-feed-layout[data-mode="team"] .lark-chat-list {
  padding-right: 0;
}

.workspace-slot[data-slot="side"] .lark-team-head,
.workspace-slot[data-slot="side"] .lark-team-body {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .lark-team-directory-head {
  gap: 8px;
  padding: 11px;
}

.workspace-slot[data-slot="side"] .lark-team-add-person {
  min-height: 32px;
  padding: 0 9px;
}

.workspace-slot[data-slot="side"] .lark-team-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-slot[data-slot="side"] .lark-team-sidebar,
.workspace-slot[data-slot="side"] .lark-team-directory,
.workspace-slot[data-slot="side"] .lark-team-detail {
  max-height: none;
}

@media (max-width: 980px) {
  .lark-team-head,
  .lark-team-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lark-team-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.applications-workspace {
  position: relative;
  order: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  background: #ffffff;
  container-type: inline-size;
}

.applications-workspace,
.applications-workspace * {
  box-sizing: border-box;
}

.applications-workspace[hidden] {
  display: none;
}

.applications-workspace:not([hidden]) {
  animation: surfaceReveal 240ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.applications-workspace.is-finance-open {
  overflow: auto;
}

.applications-workspace.is-finance-open .applications-board {
  display: none;
}

.finance-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.app-shell.finance-modal-open .assistant-float-toggle,
.app-shell.finance-modal-open .panel-swap-button,
.app-shell.finance-modal-open .side-panel-collapse-button {
  z-index: 79 !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.applications-hero,
.applications-hero-main,
.application-card,
.application-card-copy,
.application-card-meta,
.application-card-footer {
  min-width: 0;
}

.applications-hero {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.98)),
    #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

.applications-hero > .finance-module-tabs {
  display: none;
}

.applications-hero-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.applications-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfeff, #f4f7ff);
  color: #0f766e;
}

.applications-mark svg,
.application-card-icon svg,
.nav-button#applicationsBtn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.applications-mark svg {
  width: 22px;
  height: 22px;
}

.applications-status-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 4px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.applications-hero h3 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 20px;
  font-weight: 940;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applications-hero p {
  margin: 4px 0 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applications-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
  align-content: start;
  justify-content: start;
  align-items: start;
  gap: 14px;
  overflow: auto;
  padding: 1px 1px 8px;
  scrollbar-gutter: stable;
}

.application-card {
  --app-accent: #2563eb;
  --app-soft: #eff6ff;
  --app-ink: #1d4ed8;
  position: relative;
  min-height: 286px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 13px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
    #ffffff;
  color: #0f172a;
  padding: 16px;
  overflow: hidden;
  outline: none;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.065);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.application-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--app-accent);
}

.application-card:hover,
.application-card:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 42%, rgba(203, 213, 225, 0.88));
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.application-card--finance {
  --app-accent: #047857;
  --app-soft: #ecfdf3;
  --app-ink: #047857;
}

.application-card--sales {
  --app-accent: #ea580c;
  --app-soft: #fff7ed;
  --app-ink: #c2410c;
}

.application-card--finance .application-card-copy h4,
.application-card--sales .application-card-copy h4 {
  color: #0f172a;
}

.application-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 24%, rgba(203, 213, 225, 0.88));
  border-radius: 8px;
  background: var(--app-soft);
  color: var(--app-ink);
}

.application-card-icon svg {
  width: 24px;
  height: 24px;
}

.application-card-copy {
  display: grid;
  align-content: start;
  gap: 7px;
}

.application-card-copy small {
  color: var(--app-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

.application-card-copy h4 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.05;
}

.application-card-copy p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.48;
}

.application-card-meta,
.application-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.application-card-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.application-card-meta span {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #ffffff;
  color: #475569;
}

.application-card-footer {
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
}

.application-run-button {
  width: min(220px, 100%);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, rgba(203, 213, 225, 0.86));
  border-radius: 8px;
  background: var(--app-soft);
  color: var(--app-ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.application-run-button:not(:disabled) {
  cursor: pointer;
}

.application-run-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.application-card--finance {
  overflow: visible;
}

.application-card--finance.finance-menu-open {
  z-index: 40;
}

.application-run-menu-wrap {
  position: relative;
  width: min(220px, 100%);
  margin-inline: auto;
}

.finance-run-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(14, 165, 160, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  padding: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

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

.finance-run-option {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #000000;
  cursor: pointer;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.finance-run-option:hover,
.finance-run-option:focus-visible {
  border-color: rgba(14, 165, 160, 0.28);
  background: rgba(240, 253, 250, 0.86);
  outline: none;
}

.finance-upload-panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, min(980px, 100%));
  align-self: stretch;
  align-content: start;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  gap: 16px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18px 18px, rgba(148, 163, 184, 0.22) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(248, 250, 252, 0.98) 48%, rgba(255, 255, 255, 0.96));
  padding: 42px 52px 40px;
  max-height: none;
  overflow-y: auto;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  scrollbar-color: rgba(4, 120, 87, 0.28) transparent;
  scrollbar-width: thin;
}

.finance-upload-panel::-webkit-scrollbar {
  width: 6px;
}

.finance-upload-panel::-webkit-scrollbar-track {
  background: transparent;
}

.finance-upload-panel::-webkit-scrollbar-thumb {
  background: rgba(4, 120, 87, 0.22);
  border-radius: 999px;
}

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

.finance-upload-panel.finance-preview-open {
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, min(980px, 100%));
  align-content: start;
}

.finance-panel-close-button {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.finance-panel-close-button:hover,
.finance-panel-close-button:focus-visible {
  border-color: rgba(4, 120, 87, 0.34);
  background: #ecfdf3;
  color: #047857;
  transform: translateY(-1px);
}

.finance-budget-context {
  width: min(980px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  align-items: start;
  gap: 16px 18px;
  padding: 0 0 4px;
}

.finance-budget-context[hidden] {
  display: none;
}

.finance-budget-head {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.finance-action-chip {
  width: max-content;
  max-width: 100%;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(14, 165, 160, 0.28);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.88);
  color: #047857;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.finance-budget-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.finance-budget-head p {
  max-width: 560px;
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.4;
}

.finance-month-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.finance-month-field span {
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.finance-month-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

.finance-month-field input:focus {
  border-color: rgba(14, 165, 160, 0.52);
  box-shadow: 0 0 0 3px rgba(14, 165, 160, 0.12);
}

.finance-budget-history {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(203, 213, 225, 0.75);
  padding-top: 14px;
}

.finance-budget-history header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-budget-history-heading {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.finance-budget-history-heading > strong,
.finance-budget-year-pager {
  flex: 0 0 auto;
}

.finance-budget-history strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.finance-budget-history header button,
.finance-budget-history-actions button {
  min-height: 31px;
  border: 1px solid rgba(14, 165, 160, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #047857;
  cursor: pointer;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.finance-budget-year-pager {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(14, 165, 160, 0.2);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.72);
  padding: 2px 4px;
}

.finance-budget-year-pager button {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  border-color: transparent;
  background: transparent;
  color: #047857;
  padding: 0;
  font-size: 12px;
}

.finance-budget-year-pager button:hover:not(:disabled),
.finance-budget-year-pager button:focus-visible:not(:disabled) {
  border-color: rgba(14, 165, 160, 0.24);
  background: #ffffff;
}

.finance-budget-year-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.finance-budget-year-pager span {
  min-width: 46px;
  color: #0f766e;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.finance-budget-year-summary {
  min-width: 0;
  flex: 0 1 302px;
  max-width: 302px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(126px, 148px));
  align-items: center;
  gap: 6px;
}

.finance-budget-year-summary:empty {
  display: none;
}

.finance-budget-year-total {
  min-width: 0;
  min-height: 28px;
  display: grid;
  align-content: center;
  gap: 1px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88));
  padding: 4px 10px;
}

.finance-budget-year-total small,
.finance-budget-year-total strong {
  min-width: 0;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-budget-year-total small {
  color: #64748b;
  font-size: 8.5px;
  font-weight: 850;
}

.finance-budget-year-total strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
}

.applications-workspace.is-finance-open .finance-budget-year-total strong {
  font-size: 11px;
  line-height: 1.05;
}

.finance-budget-year-total[data-kind="ingresos"] {
  border-color: rgba(16, 185, 129, 0.22);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.86), rgba(255, 255, 255, 0.94));
}

.finance-budget-year-total[data-kind="ingresos"] strong {
  color: #047857;
}

.finance-budget-year-total[data-kind="egresos"] {
  border-color: rgba(245, 158, 11, 0.25);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.94));
}

.finance-budget-year-total[data-kind="egresos"] strong {
  color: #b45309;
}

.finance-budget-history-list {
  min-width: 0;
  max-height: 218px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(4, 120, 87, 0.28) transparent;
  scrollbar-width: thin;
}

.finance-budget-history-month {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.finance-budget-history-month > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(14, 165, 160, 0.18);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.7);
  padding: 7px 9px;
}

.finance-budget-history-month > header strong {
  min-width: 0;
  overflow: hidden;
  color: #065f46;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-budget-history-month > header span {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 165, 160, 0.22);
  border-radius: 999px;
  background: #ffffff;
  color: #047857;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.finance-budget-history-month-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.finance-budget-history-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 11px 12px;
}

.finance-budget-history-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.finance-budget-history-main strong,
.finance-budget-history-main span,
.finance-budget-history-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-budget-history-main > span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.finance-budget-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-budget-history-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.finance-budget-history-summary {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
}

.finance-budget-history-movements {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-budget-history-movements span,
.finance-budget-history-movements strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.finance-budget-history-movement {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
}

.finance-budget-history-movement strong {
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
}

.finance-budget-history-movement[data-kind="ingresos"] {
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(236, 253, 245, 0.86);
}

.finance-budget-history-movement[data-kind="egresos"] {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(255, 241, 242, 0.82);
}

.finance-budget-history-movement[data-kind="otros"] {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(238, 242, 255, 0.78);
}

.finance-budget-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  max-width: none;
}

.finance-budget-history-empty {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.finance-budget-history-empty--error {
  border-color: rgba(180, 83, 9, 0.32);
  color: #92400e;
}

.finance-drop-zone {
  min-width: 0;
  position: relative;
  width: 100%;
  min-height: 132px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  justify-items: stretch;
  gap: 10px 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 50%, rgba(14, 165, 160, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.97)),
    #ffffff;
  color: #374151;
  cursor: pointer;
  padding: 20px;
  text-align: left;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.065);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.finance-drop-zone[hidden] {
  display: none;
}

.finance-drop-zone--budget {
  justify-self: center;
  width: min(980px, 100%);
  min-height: 132px;
}

.finance-drop-zone:hover,
.finance-drop-zone:focus-within,
.finance-drop-zone.is-dragging {
  border-color: rgba(14, 165, 160, 0.42);
  background:
    radial-gradient(circle at 82% 50%, rgba(14, 165, 160, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(240, 253, 250, 0.76), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(14, 165, 160, 0.08);
}

.finance-drop-zone.has-files {
  border-color: rgba(14, 165, 160, 0.45);
}

.finance-drop-zone.has-files .finance-drop-action span {
  background: rgba(220, 252, 231, 0.92);
  color: #047857;
}

.finance-drop-zone.has-preview {
  min-height: 132px;
  padding: 20px;
}

.finance-drop-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(14, 165, 160, 0.28);
  border-radius: 9px;
  background: rgba(240, 253, 250, 0.9);
  color: #047857;
}

.finance-drop-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.finance-drop-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  justify-self: stretch;
  display: grid;
  gap: 5px;
  pointer-events: none;
}

.finance-drop-copy > span {
  color: #0f172a;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.15;
}

.finance-drop-copy small {
  color: #2563eb;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
}

.finance-drop-copy p {
  max-width: 560px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.finance-drop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.finance-drop-tags span {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.finance-drop-action {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}

.finance-drop-action span {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.finance-drop-action strong {
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 165, 160, 0.42);
  border-radius: 999px;
  background: #ffffff;
  color: #047857;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
}

.finance-link-placeholder {
  width: max-content;
  justify-self: center;
  margin: 4px 0 0;
  border: 1px solid rgba(14, 165, 160, 0.18);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.78);
  color: #047857;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.finance-file-list {
  grid-column: 2 / -1;
  grid-row: 2;
  width: 100%;
  max-height: 82px;
  display: flex;
  flex-wrap: wrap;
  justify-self: stretch;
  gap: 7px;
  overflow-y: auto;
  padding: 2px 5px 2px 0;
  scrollbar-color: rgba(4, 120, 87, 0.32) transparent;
  scrollbar-width: thin;
}

.finance-file-list[hidden] {
  display: none;
}

.finance-file-list::-webkit-scrollbar {
  width: 5px;
}

.finance-file-list::-webkit-scrollbar-track {
  background: transparent;
}

.finance-file-list::-webkit-scrollbar-thumb {
  background: rgba(4, 120, 87, 0.24);
  border-radius: 999px;
}

.finance-file-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(14, 165, 160, 0.22);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.92);
  color: #334155;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-format-warning {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.88);
  color: #92400e;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.finance-format-warning[hidden] {
  display: none;
}

@media (max-width: 1320px) {
  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-upload-panel {
    gap: 20px;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-drop-zone {
    min-height: 206px;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    align-items: start;
    gap: 14px;
    padding: 22px 18px 20px;
    margin-bottom: 18px;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-drop-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-drop-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-drop-action {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    justify-items: start;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-file-list {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-format-warning {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .workspace-slot[data-section="applications"][data-slot="main"] .applications-workspace.is-finance-open .finance-upload-button {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: stretch;
    width: 100%;
  }
}

.finance-preview-panel {
  min-width: 0;
  grid-column: 1 / -1;
  width: min(980px, 100%);
  min-height: min(420px, calc(100vh - 330px));
  max-height: min(540px, calc(100vh - 300px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-self: center;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    #ffffff;
  cursor: default;
  padding: 18px;
  text-align: left;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

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

.finance-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 14px;
}

.finance-preview-header small {
  width: max-content;
  border: 1px solid rgba(14, 165, 160, 0.22);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.86);
  color: #047857;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.finance-preview-header h4 {
  grid-column: 1;
  overflow: hidden;
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-preview-header p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.finance-preview-table-wrap {
  min-height: 0;
  max-height: none;
  display: grid;
  gap: 12px;
  overflow: auto;
  border-radius: 12px;
  scrollbar-color: rgba(4, 120, 87, 0.32) transparent;
  scrollbar-width: thin;
}

.finance-preview-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.finance-preview-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.finance-preview-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(4, 120, 87, 0.26);
  border-radius: 999px;
}

.finance-preview-sheet {
  min-width: max-content;
  display: grid;
  gap: 8px;
}

.finance-preview-sheet h5 {
  position: sticky;
  left: 0;
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.finance-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  color: #334155;
  font-size: 11px;
  text-align: left;
}

.finance-preview-table th,
.finance-preview-table td {
  max-width: 180px;
  overflow: hidden;
  border-right: 1px solid rgba(241, 245, 249, 0.95);
  border-bottom: 1px solid rgba(241, 245, 249, 0.95);
  padding: 9px 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f0fdfa;
  color: #065f46;
  font-weight: 900;
}

.finance-preview-table tr:last-child td {
  border-bottom: 0;
}

.finance-preview-table th:last-child,
.finance-preview-table td:last-child {
  border-right: 0;
}

.finance-preview-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.38);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.72);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.finance-preview-empty--error {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(255, 251, 235, 0.65);
  color: #92400e;
}

.finance-upload-button {
  grid-column: 3;
  grid-row: 3;
  width: min(190px, 100%);
  justify-self: end;
  align-self: center;
  margin-top: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(4, 120, 87, 0.54);
  border-radius: 999px;
  background: #0f8f6f;
  color: #ffffff;
  cursor: pointer;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(4, 120, 87, 0.18);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.finance-upload-button:hover,
.finance-upload-button:focus-visible {
  border-color: rgba(6, 95, 70, 0.78);
  background: #065f46;
  transform: translateY(-1px);
}

.finance-upload-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.finance-upload-button[hidden] {
  display: none;
}

.finance-close-warning {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1100;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
  color: #334155;
  padding: 18px;
  text-align: left;
  transform: translate(-50%, -50%);
}

.finance-close-warning strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.finance-close-warning p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.finance-close-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.finance-close-warning-button {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.finance-close-warning-button--confirm {
  border-color: rgba(4, 120, 87, 0.54);
  background: #047857;
  color: #ffffff;
}

.finance-close-warning-button--cancel:hover,
.finance-close-warning-button--cancel:focus-visible {
  border-color: rgba(71, 85, 105, 0.46);
  background: #f8fafc;
}

.finance-close-warning-button--confirm:hover,
.finance-close-warning-button--confirm:focus-visible {
  border-color: rgba(6, 95, 70, 0.78);
  background: #065f46;
}

.finance-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.workspace-slot[data-section="applications"][data-slot="side"]:has(.applications-workspace.is-finance-open) {
  background:
    radial-gradient(circle at 18px 18px, rgba(148, 163, 184, 0.22) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(248, 250, 252, 0.98) 48%, rgba(255, 255, 255, 0.96));
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open {
  min-height: 100%;
  grid-template-rows: auto auto;
  align-content: start;
  background: transparent;
  overflow-y: auto;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-hero {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 12px 44px 12px 12px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-hero-main {
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-mark {
  width: 42px;
  height: 42px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-hero h3 {
  font-size: 20px;
  white-space: nowrap;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-hero p {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-board {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  overflow: visible;
  padding: 1px 2px 14px 1px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card {
  grid-column: auto;
  grid-row: auto;
  min-height: 252px;
  height: auto;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 11px;
  overflow: hidden;
  padding: 13px 14px 14px;
  transform: none;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card:hover,
.workspace-slot[data-section="applications"][data-slot="side"] .application-card:focus-visible {
  transform: none;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card--finance {
  overflow: visible;
  z-index: 8;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card--finance.finance-menu-open {
  z-index: 90;
  margin-bottom: 128px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card--finance:has(.finance-run-menu:not([hidden])) {
  z-index: 90;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-icon {
  width: 46px;
  height: 46px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-copy {
  gap: 5px;
  align-content: start;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-copy h4 {
  font-size: 22px;
  line-height: 1.08;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-copy p {
  display: block;
  overflow: visible;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-meta {
  align-items: center;
  width: 100%;
  gap: 6px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-meta span {
  min-height: 24px;
  max-width: 48%;
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-card-footer {
  width: 100%;
  justify-content: center;
  padding-top: 10px;
  margin-top: 2px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-run-menu-wrap {
  position: relative;
  display: grid;
  gap: 8px;
  width: min(230px, 100%);
  margin-inline: auto;
  overflow: visible;
}

.workspace-slot[data-section="applications"][data-slot="side"] .application-run-button {
  width: 100%;
  min-height: 39px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-run-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  width: min(270px, calc(100vw - 48px));
  z-index: 120;
  gap: 6px;
  margin: 0;
  border-radius: 10px;
  padding: 7px;
  transform: translateX(-50%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-run-option {
  min-height: 34px;
  padding: 0 10px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-upload-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  justify-self: center;
  gap: 12px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 46px 12px 14px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-context {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 13px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-head {
  justify-items: center;
  text-align: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-head p {
  max-width: 100%;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-history-item {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-history-actions {
  justify-content: stretch;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-history-actions button {
  width: 100%;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-panel {
  gap: 13px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-head {
  justify-items: center;
  text-align: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-head h4 {
  font-size: 22px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-head p {
  max-width: 100%;
  font-size: 12px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-summary {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-cashflow-table-wrap {
  max-width: 100%;
  min-height: 240px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone {
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  justify-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 17px 12px;
  text-align: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-icon,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-copy,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-action,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-file-list,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-format-warning,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-upload-button {
  grid-column: 1;
  grid-row: auto;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-copy {
  justify-items: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-copy > span {
  font-size: 20px;
  line-height: 1.12;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-copy p {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-tags {
  justify-content: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-tags span {
  min-height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 850;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-action {
  justify-items: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-file-list {
  justify-content: center;
  max-height: 104px;
  padding: 0 4px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-format-warning {
  width: 100%;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-upload-button {
  width: 100%;
  justify-self: stretch;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-panel {
  width: 100%;
  min-width: 0;
  min-height: 280px;
  max-height: none;
  border-radius: 12px;
  padding: 13px;
  overflow: hidden;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-header {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-header h4,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-header p {
  grid-column: 1;
  grid-row: auto;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-header p {
  justify-self: start;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-preview-table-wrap {
  max-width: 100%;
  overflow: auto;
}

@media (max-width: 720px) {
  .applications-workspace {
    padding: 12px;
  }

  .applications-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .applications-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-upload-panel {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    padding: 46px 18px 18px;
  }

  .finance-budget-context {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .finance-budget-history-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-budget-history-actions {
    justify-content: stretch;
  }

  .finance-budget-history-actions button {
    width: 100%;
  }

  .finance-cashflow-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-cashflow-head h4 {
    font-size: 23px;
  }

  .finance-cashflow-table-wrap {
    max-width: 100%;
    min-height: 240px;
  }

  .finance-cashflow-validation header {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-drop-zone {
    width: 100%;
    min-height: 240px;
    padding: 18px;
  }

  .finance-preview-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-preview-header h4,
  .finance-preview-header p {
    grid-column: 1;
    grid-row: auto;
  }

  .finance-preview-table-wrap {
    max-height: 300px;
  }
}

/* Finance budget redesign */
.finance-upload-panel {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  justify-content: stretch;
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 34px 38px 42px;
}

.finance-upload-panel.finance-preview-open {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.finance-budget-context {
  width: 100%;
  display: block;
  padding: 0;
}

.finance-budget-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.finance-budget-head {
  gap: 12px;
}

.finance-budget-head h4 {
  font-size: 29px;
  font-weight: 950;
  line-height: 1.05;
}

.finance-budget-head p {
  max-width: 650px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 520;
  line-height: 1.45;
}

.finance-month-field {
  position: relative;
  width: min(240px, 100%);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(100, 116, 139, 0.48);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
}

.finance-month-field::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: 10px;
  border: 2px solid #475569;
  border-radius: 4px;
  box-shadow: inset 0 4px 0 rgba(71, 85, 105, 0.14);
}

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

.finance-month-field input {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0;
  font-size: 15px;
  font-weight: 620;
  box-shadow: none;
}

.finance-month-field:focus-within {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.finance-cashflow-panel {
  width: 100%;
  display: grid;
  gap: 18px;
}

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

.finance-cashflow-head {
  display: grid;
  gap: 10px;
}

.finance-cashflow-head h4 {
  margin: 0;
  color: #111827;
  font-size: 29px;
  font-weight: 950;
  line-height: 1.05;
}

.finance-cashflow-head p {
  max-width: 680px;
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 520;
  line-height: 1.45;
}

.finance-year-field {
  position: relative;
  width: 126px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(100, 116, 139, 0.48);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
}

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

.finance-year-field input {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.finance-year-field:focus-within {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.finance-cashflow-refresh {
  min-height: 44px;
  border: 1px solid rgba(4, 120, 87, 0.35);
  border-radius: 8px;
  background: #ffffff;
  color: #047857;
  cursor: pointer;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
}

.finance-cashflow-refresh:hover,
.finance-cashflow-refresh:focus-visible {
  background: #f0fdfa;
  border-color: rgba(4, 120, 87, 0.55);
}

.finance-cashflow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-cashflow-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 15px;
}

.finance-cashflow-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.finance-cashflow-card strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-cashflow-table-wrap {
  min-height: 260px;
  overflow: auto;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
}

.finance-cashflow-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #1f2937;
  font-size: 12px;
}

.finance-cashflow-table th,
.finance-cashflow-table td {
  min-width: 92px;
  border-right: 1px solid rgba(226, 232, 240, 0.9);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 10px 12px;
  text-align: right;
  white-space: nowrap;
}

.finance-cashflow-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 950;
}

.finance-cashflow-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 230px;
  max-width: 260px;
  background: #ffffff;
  text-align: left;
}

.finance-cashflow-table thead th:first-child {
  z-index: 4;
  background: #f8fafc;
}

.finance-cashflow-table tbody th {
  display: grid;
  gap: 3px;
}

.finance-cashflow-table tbody th span {
  color: #047857;
  font-size: 10px;
  font-weight: 950;
}

.finance-cashflow-table tbody th strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.finance-cashflow-table tr.is-empty td,
.finance-cashflow-table tr.is-empty th strong {
  color: #94a3b8;
}

.finance-cashflow-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.finance-cashflow-empty--error {
  color: #92400e;
}

.finance-cashflow-validation {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
}

.finance-cashflow-validation:empty {
  display: none;
}

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

.finance-cashflow-validation strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.finance-cashflow-validation header span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.finance-cashflow-validation header span[data-status="ok"] {
  background: rgba(220, 252, 231, 0.9);
  color: #047857;
}

.finance-cashflow-validation header span[data-status="review"] {
  background: rgba(255, 251, 235, 0.94);
  color: #92400e;
}

.finance-cashflow-validation p,
.finance-cashflow-validation ul {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.4;
}

.finance-cashflow-validation ul {
  display: grid;
  gap: 5px;
  padding-left: 18px;
}

.finance-recurring-panel {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 14px;
}

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

.finance-recurring-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, auto);
  align-items: end;
  gap: 16px;
}

.finance-recurring-head h4 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.12;
}

.finance-recurring-head p {
  max-width: 660px;
  margin: 7px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.45;
}

.finance-recurring-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.finance-recurring-controls label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.finance-recurring-controls label span {
  min-height: 13px;
  color: #64748b;
  font-size: 10px;
  font-weight: 860;
  line-height: 1.2;
}

.finance-recurring-controls input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 760;
  outline: none;
}

.finance-recurring-controls button {
  min-height: 40px;
  border: 1px solid rgba(7, 129, 138, 0.42);
  border-radius: 8px;
  background: #07818a;
  color: #ffffff;
  cursor: pointer;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.finance-recurring-controls button:hover,
.finance-recurring-controls button:focus-visible {
  border-color: rgba(7, 129, 138, 0.58);
  background: #056c73;
  outline: none;
}

.finance-recurring-controls button:disabled {
  border-color: rgba(203, 213, 225, 0.78);
  background: #e2e8f0;
  color: #64748b;
  cursor: wait;
}

.finance-recurring-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-recurring-list {
  display: grid;
  gap: 8px;
}

.finance-recurring-item {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(260px, 1fr) minmax(180px, auto) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, rgba(248, 250, 252, 0.84));
  padding: 10px 12px;
}

.finance-recurring-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.finance-recurring-main strong,
.finance-recurring-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-recurring-main strong {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.finance-recurring-main span {
  color: #64748b;
  font-size: 11px;
  font-weight: 680;
}

.finance-recurring-evidence {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 7px;
}

.finance-recurring-evidence-pill,
.finance-recurring-amounts span {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 7px 8px;
}

.finance-recurring-evidence-pill small,
.finance-recurring-amounts small {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.finance-recurring-evidence-pill strong,
.finance-recurring-amounts strong {
  min-width: 0;
  overflow: hidden;
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-recurring-amounts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 7px;
}

.finance-recurring-confidence {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.finance-recurring-confidence[data-confidence="high"] {
  background: rgba(220, 252, 231, 0.94);
  color: #047857;
}

.finance-recurring-confidence[data-confidence="medium"] {
  background: rgba(254, 249, 195, 0.9);
  color: #a16207;
}

.finance-recurring-confidence[data-confidence="low"] {
  background: rgba(241, 245, 249, 0.95);
  color: #64748b;
}

.finance-recurring-plan {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
}

.finance-recurring-plan:empty {
  display: none;
}

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

.finance-recurring-plan strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.finance-recurring-plan header span {
  color: #047857;
  font-size: 13px;
  font-weight: 950;
}

.finance-recurring-plan p,
.finance-recurring-error {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.4;
}

.finance-recurring-error {
  color: #92400e;
}

.finance-recurring-plan-list {
  display: grid;
  gap: 7px;
}

.finance-recurring-plan-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  padding-top: 8px;
}

.finance-recurring-plan-list article span {
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.finance-recurring-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  padding: 22px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.finance-recurring-empty--error {
  color: #92400e;
}

@media (max-width: 720px) {
  .finance-cashflow-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-recurring-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-recurring-head,
  .finance-recurring-controls,
  .finance-recurring-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-cashflow-card strong {
    overflow: visible;
    font-size: 16px;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

.finance-drop-zone--budget {
  width: 100%;
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 14px;
  border: 1px solid rgba(100, 116, 139, 0.5);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  outline: none;
  padding: 9px 10px;
}

.finance-drop-zone--budget:hover,
.finance-drop-zone--budget:focus-within,
.finance-drop-zone--budget.is-dragging,
.finance-drop-zone--budget.has-files {
  border-color: rgba(37, 99, 235, 0.62);
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.1);
}

.finance-drop-zone--budget .finance-drop-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: rgba(220, 252, 231, 0.9);
  color: #15803d;
}

.finance-drop-zone--budget .finance-drop-icon svg {
  width: 21px;
  height: 21px;
}

.finance-drop-zone--budget .finance-drop-copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.finance-drop-zone--budget .finance-drop-copy small,
.finance-drop-zone--budget .finance-drop-copy > span,
.finance-drop-zone--budget .finance-drop-copy p {
  display: none;
}

.finance-drop-zone--budget .finance-drop-tags {
  margin: 0;
  gap: 9px;
}

.finance-drop-zone--budget .finance-drop-tags span {
  min-height: 28px;
  border: 1px solid rgba(21, 128, 61, 0.2);
  border-radius: 7px;
  background: rgba(240, 253, 244, 0.86);
  color: #166534;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.finance-drop-zone--budget .finance-drop-action {
  grid-column: 2;
  grid-row: 2;
  justify-items: start;
  gap: 0;
}

.finance-drop-zone--budget .finance-drop-action span {
  min-height: 24px;
  background: transparent;
  color: #64748b;
  padding: 0;
  font-size: 12px;
  font-weight: 760;
}

.finance-drop-zone--budget .finance-drop-action strong {
  display: none;
}

.finance-drop-zone--budget .finance-file-list {
  grid-column: 2;
  grid-row: 2;
  max-height: 34px;
  align-items: center;
  padding: 0;
}

.finance-drop-zone--budget.has-files .finance-drop-action {
  display: none;
}

.finance-drop-zone--budget .finance-file-chip {
  min-height: 28px;
  border-radius: 7px;
  font-size: 12px;
}

.finance-drop-zone--budget .finance-format-warning {
  grid-column: 2;
  grid-row: 2;
  width: max-content;
  max-width: 100%;
  border-radius: 7px;
  text-align: left;
}

.finance-drop-zone--budget .finance-upload-button {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: auto;
  min-width: 150px;
  min-height: 42px;
  border: 1px solid rgba(37, 99, 235, 0.78);
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 760;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.finance-drop-zone--budget .finance-upload-button:hover,
.finance-drop-zone--budget .finance-upload-button:focus-visible {
  border-color: rgba(29, 78, 216, 0.9);
  background: #1d4ed8;
}

.finance-drop-zone--budget .finance-upload-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.finance-budget-history {
  width: 100%;
  gap: 18px;
  border-top: 0;
  padding-top: 0;
}

.finance-budget-history header {
  align-items: center;
}

.finance-budget-history strong {
  font-size: 22px;
  font-weight: 900;
}

.finance-budget-history header button {
  min-height: 32px;
  border-color: rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  color: #334155;
}

.finance-budget-history-list {
  max-height: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 20px;
  overflow: visible;
  padding: 0;
}

.finance-budget-history-item {
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(30, 41, 87, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.finance-budget-history-item.is-selected {
  border-color: rgba(37, 99, 235, 0.95);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.14), 0 0 0 1px rgba(20, 184, 166, 0.16);
}

.finance-budget-history-item.is-pending {
  border-color: rgba(100, 116, 139, 0.42);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.finance-budget-history-main {
  gap: 2px;
}

.finance-budget-history-main > strong {
  overflow: visible;
  color: #111827;
  font-size: 21px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.finance-budget-history-total-label {
  overflow: visible;
  margin-top: 2px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 520;
  text-overflow: clip;
  white-space: normal;
}

.finance-budget-history-total {
  overflow: visible;
  color: #030712;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: clip;
  white-space: normal;
}

.finance-budget-history-item.is-pending .finance-budget-history-total {
  color: #64748b;
  font-size: 25px;
}

.finance-budget-history-meta {
  min-height: 24px;
  margin-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.82);
}

.finance-budget-history-meta:empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
}

.finance-budget-history-meta span {
  min-height: 22px;
  border-radius: 7px;
  background: #eef2f7;
  color: #475569;
}

.finance-budget-status {
  width: max-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #1f2937;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 560;
}

.finance-budget-status::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.7px solid currentColor;
  border-radius: 999px;
}

.finance-budget-status[data-status="processed"]::after {
  content: "";
  position: relative;
  width: 6px;
  height: 3px;
  margin-left: -18px;
  margin-right: 6px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg);
}

.finance-budget-status[data-status="pending"] {
  background: #f1f5f9;
  color: #64748b;
}

.finance-budget-history-download {
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 129, 138, 0.36);
  border-radius: 999px;
  background: #ffffff;
  color: #07818a;
  cursor: pointer;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.finance-budget-history-download:hover,
.finance-budget-history-download:focus-visible {
  border-color: rgba(7, 129, 138, 0.56);
  background: rgba(240, 253, 250, 0.92);
  color: #056c73;
  outline: none;
}

.finance-budget-history-download:disabled {
  border-color: rgba(203, 213, 225, 0.82);
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.finance-budget-history-actions {
  justify-content: flex-start;
  gap: 8px;
}

.finance-budget-history-actions button {
  min-height: 32px;
  border-color: rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 820;
}

.finance-budget-history-item.is-pending .finance-budget-history-actions button {
  border-color: rgba(37, 99, 235, 0.32);
  color: #1d4ed8;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-upload-panel {
  gap: 18px;
  padding: 44px 10px 16px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-title-row {
  justify-content: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-head {
  text-align: center;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-head h4 {
  font-size: 23px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-head p {
  font-size: 13px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-month-field {
  width: 100%;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  text-align: left;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-drop-icon,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-drop-copy,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-drop-action,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-file-list,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-format-warning,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-upload-button {
  grid-column: 1;
  grid-row: auto;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-drop-icon {
  justify-self: start;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-drop-zone--budget .finance-upload-button {
  width: 100%;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-history-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-budget-history-item {
  min-height: 160px;
  padding: 16px;
}

@media (max-width: 980px) {
  .finance-budget-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .finance-upload-panel {
    width: 100%;
    max-height: none;
    padding: 28px 14px 24px;
  }

  .finance-budget-title-row {
    align-items: stretch;
  }

  .finance-budget-head h4 {
    font-size: 25px;
  }

  .finance-budget-head p {
    font-size: 14px;
  }

  .finance-month-field {
    width: 100%;
  }

  .finance-drop-zone--budget {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .finance-drop-zone--budget .finance-drop-icon,
  .finance-drop-zone--budget .finance-drop-copy,
  .finance-drop-zone--budget .finance-drop-action,
  .finance-drop-zone--budget .finance-file-list,
  .finance-drop-zone--budget .finance-format-warning,
  .finance-drop-zone--budget .finance-upload-button {
    grid-column: 1;
    grid-row: auto;
  }

  .finance-drop-zone--budget .finance-upload-button {
    width: 100%;
  }

  .finance-budget-history-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Finance applications visual refresh */
.applications-workspace.is-finance-open {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.applications-workspace.is-finance-open .applications-hero {
  min-height: 70px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #ffffff;
  padding: 18px 26px;
  box-shadow: none;
}

.applications-workspace.is-finance-open .applications-hero > .finance-module-tabs {
  width: auto;
  max-width: min(560px, 58%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 0;
  padding: 0 44px 0 0;
  scrollbar-width: none;
}

.applications-workspace.is-finance-open .applications-hero > .finance-module-tabs::-webkit-scrollbar {
  display: none;
}

.applications-workspace.is-finance-open .applications-mark,
.applications-workspace.is-finance-open .applications-status-badge,
.applications-workspace.is-finance-open .applications-hero p {
  display: none;
}

.applications-workspace.is-finance-open .applications-hero h3 {
  color: #111827;
  font-size: 27px;
  font-weight: 920;
  line-height: 1.05;
}

.finance-upload-panel {
  height: 100%;
}

.applications-workspace.is-finance-open .finance-upload-panel {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  justify-content: stretch;
  justify-items: stretch;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  padding: 24px 28px 34px;
  overflow: auto;
  box-shadow: none;
}

.applications-workspace.is-finance-open .finance-panel-close-button {
  top: 19px;
  right: 24px;
  border-radius: 8px;
  box-shadow: none;
}

.finance-module-tabs {
  min-width: 0;
  display: flex;
  gap: 4px;
}

.finance-module-tab {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #374151;
  cursor: pointer;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.finance-module-tab:hover,
.finance-module-tab:focus-visible,
.finance-module-tab.is-active {
  border-bottom-color: #07818a;
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.1), rgba(239, 246, 255, 0.64));
  color: #06747c;
  outline: none;
}

.applications-workspace.is-finance-open .finance-budget-context {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  display: block;
  padding: 0 42px 14px 0;
}

.applications-workspace.is-finance-open .finance-budget-head {
  gap: 12px;
}

.applications-workspace.is-finance-open .finance-budget-head h4,
.applications-workspace.is-finance-open .finance-cashflow-head h4,
.applications-workspace.is-finance-open .finance-recurring-head h4 {
  color: #111827;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.12;
}

.applications-workspace.is-finance-open .finance-budget-head p,
.applications-workspace.is-finance-open .finance-cashflow-head p,
.applications-workspace.is-finance-open .finance-recurring-head p {
  max-width: 660px;
  color: #475569;
  font-size: 13px;
  font-weight: 560;
}

.applications-workspace.is-finance-open .finance-month-field,
.applications-workspace.is-finance-open .finance-year-field {
  border-color: rgba(203, 213, 225, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.applications-workspace.is-finance-open .finance-drop-zone--budget {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 118px;
  justify-self: stretch;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.58);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget:hover,
.applications-workspace.is-finance-open .finance-drop-zone--budget:focus-within,
.applications-workspace.is-finance-open .finance-drop-zone--budget.is-dragging,
.applications-workspace.is-finance-open .finance-drop-zone--budget.has-files {
  border-color: rgba(7, 129, 138, 0.5);
  background: linear-gradient(180deg, #ffffff, rgba(240, 253, 250, 0.62));
  box-shadow: none;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-icon {
  border-color: rgba(148, 163, 184, 0.34);
  background: #f8fafc;
  color: #64748b;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-copy {
  display: grid;
  align-items: center;
  gap: 5px;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-copy small {
  display: block;
  color: #07818a;
  font-size: 11px;
  font-weight: 900;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-copy > span {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-copy p {
  display: block;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

.applications-workspace.is-finance-open .finance-drop-zone--budget .finance-drop-tags {
  margin-top: 3px;
}

.applications-workspace.is-finance-open .finance-report-builder {
  grid-column: 1 / -1;
  grid-row: 3;
}

.finance-report-builder {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(260px, 1fr) minmax(148px, auto);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.72));
  padding: 12px 14px;
}

.finance-report-builder[hidden] {
  display: none !important;
}

.finance-report-builder-head {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.finance-report-builder-head span {
  width: max-content;
  max-width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 999px;
  background: #ffffff;
  color: #07818a;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 920;
  line-height: 1;
}

.finance-report-builder-head strong {
  overflow: hidden;
  color: #111827;
  font-size: 17px;
  font-weight: 920;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-report-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(176px, 1fr));
  align-items: end;
  gap: 12px;
  overflow: visible;
}

.finance-report-controls label {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 6px;
}

.finance-report-controls label[hidden] {
  display: none !important;
}

.finance-report-controls span {
  min-height: 13px;
  overflow: visible;
  color: #64748b;
  font-size: 10px;
  font-weight: 860;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-report-controls select,
.finance-report-controls input {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  outline: none;
}

.finance-report-controls .flowmo-month-picker {
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.finance-report-controls .flowmo-month-trigger {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
}

.finance-report-controls .flowmo-month-trigger [data-flowmo-month-label] {
  min-height: auto;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.finance-report-controls .flowmo-month-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: max(100%, 232px);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.finance-report-controls .flowmo-month-popover span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.finance-report-controls select:focus,
.finance-report-controls input:focus,
.finance-report-controls .flowmo-month-trigger:focus-visible,
.finance-report-controls .flowmo-month-picker[data-open="true"] .flowmo-month-trigger {
  border-color: rgba(7, 129, 138, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.finance-report-actions {
  min-width: 148px;
  display: grid;
  justify-items: end;
  gap: 7px;
}

.finance-report-actions span {
  max-width: 190px;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 820;
  line-height: 1.15;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-report-actions button {
  width: max-content;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid rgba(7, 129, 138, 0.48);
  border-radius: 8px;
  background: #07818a;
  color: #ffffff;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.finance-report-actions button:hover,
.finance-report-actions button:focus-visible {
  background: #056c73;
  outline: none;
}

.finance-report-actions button:disabled {
  border-color: rgba(203, 213, 225, 0.78);
  background: #e2e8f0;
  color: #64748b;
  cursor: wait;
}

.applications-workspace.is-finance-open .finance-budget-history {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: start;
  max-height: none;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  padding: 0;
}

.applications-workspace.is-finance-open .finance-budget-history-list {
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding-right: 0;
}

.applications-workspace.is-finance-open .finance-budget-history-item {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, rgba(248, 250, 252, 0.82));
  padding: 10px 11px;
  box-shadow: none;
}

.applications-workspace.is-finance-open .finance-budget-history-item.is-selected {
  border-color: rgba(20, 184, 166, 0.42);
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.14), rgba(239, 246, 255, 0.76));
}

.applications-workspace.is-finance-open .finance-budget-history-item.is-pending {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(240, 253, 250, 0.46));
}

.applications-workspace.is-finance-open .finance-budget-status {
  width: max-content;
}

.applications-workspace.is-finance-open .finance-budget-history-download {
  min-height: 24px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 10px;
}

.applications-workspace.is-finance-open .finance-budget-history-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(280px, 1.3fr) auto;
  align-items: center;
  gap: 10px;
}

.applications-workspace.is-finance-open .finance-budget-history-main > strong {
  min-width: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.applications-workspace.is-finance-open .finance-budget-history-financials {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
}

.applications-workspace.is-finance-open .finance-budget-history-financial {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 7px 9px;
}

.applications-workspace.is-finance-open .finance-budget-history-financial small,
.applications-workspace.is-finance-open .finance-budget-history-financial strong {
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applications-workspace.is-finance-open .finance-budget-history-financial small {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
}

.applications-workspace.is-finance-open .finance-budget-history-financial strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.applications-workspace.is-finance-open .finance-budget-history-financial[data-kind="ingresos"] strong {
  color: #047857;
}

.applications-workspace.is-finance-open .finance-budget-history-financial[data-kind="egresos"] strong {
  color: #b45309;
}

.applications-workspace.is-finance-open .finance-budget-status {
  min-height: 22px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}

.applications-workspace.is-finance-open .finance-budget-history-actions {
  justify-content: flex-end;
  align-self: center;
  flex-wrap: wrap;
}

.applications-workspace.is-finance-open .finance-budget-history-actions button {
  min-height: 30px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 10px;
  white-space: nowrap;
}

.applications-workspace.is-finance-open .finance-budget-history-actions .finance-budget-history-action-primary {
  border-color: rgba(7, 129, 138, 0.5);
  background: #07818a;
  color: #ffffff;
}

.applications-workspace.is-finance-open .finance-budget-history-actions .finance-budget-history-action-secondary {
  border-color: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}

.applications-workspace.is-finance-open .finance-budget-history-actions button.is-finance-updating {
  display: inline-grid;
  place-items: center;
  border-color: rgba(139, 92, 246, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 255, 0.88));
  cursor: wait;
  opacity: 0.96;
}

.finance-budget-inline-spinner {
  width: 18px;
  height: 18px;
}

.finance-budget-inline-spinner::after {
  inset: 3px;
}

.applications-workspace.is-finance-open .finance-preview-panel {
  grid-column: 1 / -1;
  grid-row: 5;
  width: 100%;
  min-height: 0;
  max-height: none;
  display: grid;
  grid-template-rows: auto auto;
  justify-self: stretch;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  box-shadow: none;
}

.applications-workspace.is-finance-open .finance-preview-header {
  align-items: center;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  padding-bottom: 12px;
}

.applications-workspace.is-finance-open .finance-preview-header small {
  background: rgba(238, 242, 255, 0.9);
  color: #4f46e5;
}

.applications-workspace.is-finance-open .finance-preview-table-wrap {
  display: block;
  overflow: visible;
  border-radius: 0;
}

.finance-preview-insights {
  display: grid;
  gap: 14px;
}

.finance-preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-preview-kpi {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #ffffff;
  padding: 13px 14px;
}

.finance-preview-kpi--ai {
  border-color: rgba(79, 70, 229, 0.22);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.88), rgba(240, 253, 250, 0.68));
}

.finance-preview-kpi span,
.finance-preview-kpi small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-preview-kpi strong {
  overflow: hidden;
  color: #111827;
  font-size: 18px;
  font-weight: 920;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-preview-badge {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
}

.finance-preview-badge strong {
  color: #111827;
  font-weight: 900;
}

.finance-preview-badge[data-kind="ingresos"] {
  border-color: rgba(20, 184, 166, 0.28);
  background: rgba(240, 253, 250, 0.82);
}

.finance-preview-badge[data-kind="egresos"] {
  border-color: rgba(244, 63, 94, 0.22);
  background: rgba(255, 241, 242, 0.68);
}

.finance-preview-badge[data-kind="otros"] {
  border-color: rgba(79, 70, 229, 0.2);
  background: rgba(238, 242, 255, 0.68);
}

.finance-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  padding-top: 14px;
}

.finance-preview-action {
  min-height: 36px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 850;
}

.finance-preview-action:hover,
.finance-preview-action:focus-visible {
  border-color: rgba(7, 129, 138, 0.36);
  background: rgba(240, 253, 250, 0.7);
  outline: none;
}

.finance-preview-action--primary {
  border-color: rgba(7, 129, 138, 0.52);
  background: #07818a;
  color: #ffffff;
}

.finance-preview-action.is-planned,
.finance-preview-action[aria-disabled="true"] {
  border-color: rgba(203, 213, 225, 0.72);
  background: #f8fafc;
  color: #64748b;
}

.applications-workspace.is-finance-open .finance-cashflow-panel {
  grid-column: 1 / -1;
  grid-row: 1 / span 4;
  min-width: 0;
  max-width: 100%;
}

.applications-workspace.is-finance-open .finance-recurring-panel {
  grid-column: 1 / -1;
  grid-row: 1 / span 4;
  min-width: 0;
  max-width: 100%;
}

.applications-workspace.is-finance-open .finance-cashflow-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.applications-workspace.is-finance-open .finance-cashflow-table {
  width: max-content;
  min-width: 1280px;
}

.applications-workspace.is-finance-open .finance-cashflow-table th:first-child {
  left: 0;
  box-shadow: 10px 0 18px rgba(15, 23, 42, 0.06);
}

.applications-workspace.is-finance-open .finance-cashflow-table tbody th {
  background: #ffffff;
}

@media (max-width: 1180px) {
  .finance-preview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 900px) {
  .finance-budget-history-heading {
    flex-wrap: wrap;
  }

  .finance-budget-year-summary {
    flex-basis: min(100%, 302px);
    grid-template-columns: repeat(2, minmax(118px, 148px));
  }

  .applications-workspace.is-finance-open .finance-upload-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 18px;
    padding: 22px 18px 28px;
  }

  .finance-module-tabs,
  .applications-workspace.is-finance-open .finance-budget-context,
  .applications-workspace.is-finance-open .finance-drop-zone--budget,
  .applications-workspace.is-finance-open .finance-report-builder,
  .applications-workspace.is-finance-open .finance-budget-history,
  .applications-workspace.is-finance-open .finance-preview-panel,
  .applications-workspace.is-finance-open .finance-cashflow-panel,
  .applications-workspace.is-finance-open .finance-recurring-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .finance-module-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid rgba(203, 213, 225, 0.86);
    padding-bottom: 12px;
  }

  .finance-module-tab {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
  }

  .finance-module-tab:hover,
  .finance-module-tab:focus-visible,
  .finance-module-tab.is-active {
    border-bottom-color: #07818a;
  }

  .applications-workspace.is-finance-open .finance-budget-context {
    padding-right: 42px;
  }

  .applications-workspace.is-finance-open .finance-budget-history {
    max-height: none;
    border-right: 0;
    padding: 0;
  }

  .applications-workspace.is-finance-open .finance-budget-history-list {
    max-height: none;
  }

  .applications-workspace.is-finance-open .finance-budget-history-item {
    align-items: stretch;
  }

  .applications-workspace.is-finance-open .finance-budget-history-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .finance-report-builder {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 10px;
  }

  .finance-report-builder-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .finance-report-builder-head span {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .finance-report-builder-head strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

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

  .finance-report-actions {
    min-width: 0;
    justify-items: stretch;
  }

  .finance-report-actions span {
    max-width: none;
    text-align: left;
  }

  .finance-preview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-upload-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 18px;
  padding: 44px 12px 18px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tabs,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-context,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-drop-zone--budget,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-report-builder,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-preview-panel,
.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-cashflow-panel {
  grid-column: 1;
  grid-row: auto;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid rgba(203, 213, 225, 0.86);
  padding-bottom: 12px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tab {
  flex: 0 0 auto;
  border-left: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tab:hover,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tab:focus-visible,
.workspace-slot[data-section="applications"][data-slot="side"] .finance-module-tab.is-active {
  border-bottom-color: #07818a;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history {
  max-height: none;
  border-right: 0;
  padding: 0;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history-list {
  max-height: 280px;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history-item {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history-main {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-budget-history-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.workspace-slot[data-section="applications"][data-slot="side"] .applications-workspace.is-finance-open .finance-report-builder {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-report-controls {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-report-actions {
  min-width: 0;
  justify-items: stretch;
}

.workspace-slot[data-section="applications"][data-slot="side"] .finance-report-actions span {
  max-width: none;
  text-align: left;
}

@media (max-width: 860px) {
  .finance-budget-history-heading {
    flex-wrap: wrap;
  }

  .finance-budget-year-summary {
    flex-basis: min(100%, 302px);
    grid-template-columns: repeat(2, minmax(118px, 148px));
  }

  .applications-workspace.is-finance-open .finance-upload-panel,
  .workspace-slot[data-section="applications"][data-slot="side"] .finance-upload-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 18px;
    padding: 22px 16px 28px;
  }

  .finance-module-tabs,
  .applications-workspace.is-finance-open .finance-budget-context,
  .applications-workspace.is-finance-open .finance-drop-zone--budget,
  .applications-workspace.is-finance-open .finance-report-builder,
  .applications-workspace.is-finance-open .finance-budget-history,
  .applications-workspace.is-finance-open .finance-preview-panel,
  .applications-workspace.is-finance-open .finance-cashflow-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .finance-module-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid rgba(203, 213, 225, 0.86);
    padding-bottom: 12px;
  }

  .finance-module-tab {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
  }

  .finance-module-tab:hover,
  .finance-module-tab:focus-visible,
  .finance-module-tab.is-active {
    border-bottom-color: #07818a;
  }

  .applications-workspace.is-finance-open .finance-budget-history {
    max-height: none;
    border-right: 0;
    padding: 0;
  }

  .applications-workspace.is-finance-open .finance-budget-history-list {
    max-height: none;
  }

  .applications-workspace.is-finance-open .finance-budget-history-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .applications-workspace.is-finance-open .finance-budget-history-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .applications-workspace.is-finance-open .finance-budget-history-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .finance-report-builder,
  .finance-report-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-report-builder {
    margin-top: 10px;
  }

  .finance-report-builder-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .finance-report-builder-head span {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .finance-report-builder-head strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .finance-report-actions {
    min-width: 0;
    justify-items: stretch;
  }

  .finance-report-actions span {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .applications-workspace.is-finance-open .finance-budget-history-financials {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-preview-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Standalone Automations workspace */
.workspace-slot[data-section="automation"],
.app-shell .workspace-slot[data-section="automation"] {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.automation-mode .discovery-panel,
.app-shell.automation-mode .discovery-panel:has(.download-panel[hidden]) {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.automation-mode {
  grid-template-columns: 94px 258px minmax(0, 1fr) 0;
  grid-template-areas: "providers sidebar discovery discovery";
}

.app-shell.automation-mode.sidebar-collapsed {
  grid-template-columns: 94px 74px minmax(0, 1fr) 0;
  grid-template-areas: "providers sidebar discovery discovery";
}

.app-shell.automation-mode .assistant-panel,
.app-shell.automation-mode .assistant-float-toggle,
.app-shell.automation-mode .panel-swap-button,
.app-shell.automation-mode .side-panel-collapse-button {
  display: none;
}

.app-shell.automation-mode .discovery-panel {
  height: 100vh;
  border-right: 0;
}

.automation-workspace {
  position: relative;
  isolation: isolate;
  order: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(224, 251, 252, 0.86) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(68deg, rgba(236, 253, 245, 0.86) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(152deg, rgba(238, 242, 255, 0.74) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #fbfdff 0%, #f8fcff 52%, #ffffff 100%);
}

.automation-workspace[hidden] {
  display: none;
}

.automation-workspace:not([hidden]) {
  animation: surfaceReveal 240ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.automation-workspace::before,
.automation-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.automation-workspace::before {
  background:
    linear-gradient(122deg, rgba(14, 165, 233, 0.12), rgba(255, 255, 255, 0) 34%),
    linear-gradient(24deg, rgba(16, 185, 129, 0.14), rgba(255, 255, 255, 0) 40%),
    linear-gradient(300deg, rgba(168, 85, 247, 0.1), rgba(255, 255, 255, 0) 46%);
  filter: blur(2px);
  opacity: 0.86;
  transform: translate3d(0, 0, 0);
  animation: automationBackgroundDrift 20s ease-in-out infinite alternate;
}

.automation-workspace::after {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.14) 1px, transparent 1.7px) 0 0 / 22px 22px,
    repeating-linear-gradient(100deg, rgba(20, 184, 166, 0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(8deg, rgba(96, 165, 250, 0.04) 0 1px, transparent 1px 46px);
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.14) 32%, rgba(0, 0, 0, 0.08) 68%, rgba(0, 0, 0, 0.58)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.08) 44%, rgba(0, 0, 0, 0.5));
  mask-composite: intersect;
  opacity: 0.64;
  animation: automationSignalDrift 30s linear infinite;
}

.automation-hero,
.automation-module-toolbar,
.automation-hero-main,
.automation-hero-account,
.automation-module-toolbar > div {
  min-width: 0;
}

.automation-hero {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 32%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}

.automation-workspace .automation-hero {
  position: absolute;
  top: 18px;
  left: 24px;
  right: auto;
  z-index: 12;
  width: min(520px, calc(42% - 24px));
  min-height: 34px;
  padding: 6px 10px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
}

.automation-workspace:has(.flowmo-automation-builder) .automation-hero {
  left: auto;
  right: clamp(320px, 20vw, 360px);
  width: min(440px, calc(100% - 760px));
  max-width: 440px;
  min-width: 320px;
}

.automation-workspace:has(.flowmo-automation-builder) .automation-hero-main {
  padding-right: 0;
}

.automation-workspace:has(.flowmo-automation-builder) .automation-hero-main > div {
  min-width: 0;
}

.automation-workspace .automation-hero-main {
  flex: 1 1 auto;
  gap: 12px;
  min-width: 0;
  padding-right: 22px;
}

.automation-hero-main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.automation-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(45, 212, 191, 0.26);
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfeff, #eef2ff);
  color: #0f766e;
}

.automation-mark svg,
.nav-button#automationBtn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.automation-mark svg {
  width: 22px;
  height: 22px;
}

.automation-status-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 3px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.automation-status-badge[data-state="local"] {
  border-color: rgba(59, 130, 246, 0.22);
  background: #eff6ff;
  color: #2563eb;
}

.automation-status-badge[data-state="missing"] {
  border-color: rgba(148, 163, 184, 0.3);
  background: #f8fafc;
  color: #64748b;
}

.automation-hero h3,
.automation-module-toolbar h3 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 18px;
  font-weight: 940;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-hero p,
.automation-module-toolbar p,
.automation-hero-account span {
  margin: 3px 0 0;
  overflow: hidden;
  color: #667085;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-hero-account {
  display: grid;
  justify-items: end;
  max-width: 240px;
}

.automation-hero-account strong {
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-module-shell {
  position: relative;
  z-index: 1;
  grid-row: 1;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding-top: 0;
  overflow: hidden;
}

.automation-module-toolbar {
  display: none;
}

.automation-workspace .lark-module-summary {
  display: none;
}

.automation-feed-layout.lark-feed-layout[data-mode="automation"] {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(206px, 246px) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.automation-feed-layout.lark-feed-layout[data-mode="automation"][data-library-collapsed="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.automation-feed-layout.lark-feed-layout[data-mode="automation"][data-automation-view="library"] {
  grid-template-columns: minmax(0, 1fr);
}

.automation-feed-layout.lark-feed-layout[data-mode="automation"] .automation-library,
.automation-feed-layout.lark-feed-layout[data-mode="automation"] .automation-canvas-host {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.automation-feed-layout .automation-library {
  border-right: 1px solid rgba(190, 219, 214, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 253, 252, 0.76)),
    linear-gradient(128deg, rgba(220, 252, 231, 0.34), rgba(255, 255, 255, 0) 48%);
  backdrop-filter: blur(18px);
}

.automation-feed-layout .automation-canvas-host {
  min-height: 0;
  display: grid;
  position: relative;
  isolation: isolate;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  background: transparent;
}

.automation-feed-layout[data-library-collapsed="true"] .automation-library {
  display: none;
}

.automation-feed-layout[data-automation-view="library"] .automation-library {
  display: none;
}

.automation-workspace .flowmo-automation-sidebar {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 11px;
  border: 1px solid rgba(181, 214, 209, 0.78);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 253, 252, 0.82)),
    linear-gradient(132deg, rgba(224, 251, 252, 0.44), rgba(255, 255, 255, 0) 48%);
  padding: 14px;
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.automation-workspace .flowmo-automation-side-actions,
.automation-workspace .flowmo-inspector-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.automation-workspace .flowmo-automation-side-head {
  align-items: flex-start;
}

.automation-workspace .flowmo-automation-side-head strong {
  font-size: 14px;
}

.automation-workspace .flowmo-automation-card {
  min-height: 70px;
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: none;
}

.automation-workspace .flowmo-automation-card:hover,
.automation-workspace .flowmo-automation-card.active {
  border-color: rgba(59, 130, 246, 0.38);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.automation-workspace .flowmo-automation-card.active {
  background: #fbfdff;
}

.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-sidebar {
  justify-items: center;
  padding: 12px 10px;
}

.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-side-head {
  width: 100%;
  justify-content: center;
}

.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-side-head > div,
.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-list,
.automation-feed-layout[data-library-collapsed="true"] .flowmo-block-palette {
  display: none;
}

.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-side-actions {
  flex-direction: column;
}

.automation-feed-layout[data-library-collapsed="true"] .flowmo-automation-side-actions button {
  width: 44px;
  min-width: 44px;
  padding: 0;
  justify-content: center;
}

.automation-workspace .flowmo-automation-builder {
  min-height: 0;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.automation-workspace .flowmo-automation-home {
  padding: 86px 24px 24px;
}

.automation-workspace .flowmo-automation-home-shell {
  min-height: 100%;
  align-content: start;
}

.automation-workspace .flowmo-automation-home-card {
  border-color: rgba(198, 223, 220, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 253, 252, 0.88)),
    linear-gradient(120deg, rgba(236, 253, 245, 0.32), rgba(255, 255, 255, 0) 42%);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.055),
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
  backdrop-filter: blur(14px);
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero {
  top: 18px;
  left: 32px;
  right: 32px;
  width: auto;
  min-height: 112px;
  padding: 26px 28px;
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 14px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
    linear-gradient(128deg, rgba(224, 251, 252, 0.66), rgba(236, 253, 245, 0.3) 38%, rgba(238, 242, 255, 0.46));
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(18px);
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero-main {
  gap: 16px;
  padding-right: 20px;
}

.automation-workspace:has(.flowmo-automation-home) .automation-mark {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(236, 254, 255, 0.86)),
    #ffffff;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

.automation-workspace:has(.flowmo-automation-home) .automation-mark svg {
  width: 22px;
  height: 22px;
}

.automation-workspace:has(.flowmo-automation-home) .automation-status-badge {
  min-height: 20px;
  margin-bottom: 5px;
  padding: 0 9px;
  font-size: 10px;
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero h3 {
  font-size: 26px;
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero p {
  margin-top: 5px;
  font-size: 14px;
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero-account {
  position: static;
  width: min(260px, 28vw);
  max-width: 260px;
  padding-left: 18px;
  border-left: 1px solid rgba(203, 213, 225, 0.72);
}

.automation-workspace .flowmo-automation-home {
  padding: 166px 32px 28px;
}

.automation-workspace .flowmo-automation-home-shell {
  width: min(1240px, 100%);
  min-height: auto;
  gap: 18px;
  padding: 28px 24px 20px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.76)),
    linear-gradient(128deg, rgba(236, 253, 245, 0.28), rgba(255, 255, 255, 0) 46%);
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  backdrop-filter: blur(18px);
}

.automation-workspace .flowmo-automation-home-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.automation-workspace .flowmo-automation-home-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 940;
  line-height: 1.2;
}

.automation-workspace .flowmo-automation-home-head p {
  max-width: 620px;
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.flowmo-home-count-pill {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.86);
  color: #047857;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
}

.flowmo-home-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.flowmo-home-search,
.flowmo-home-filter {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  padding: 0 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.035);
}

.flowmo-home-search {
  width: min(280px, 28vw);
}

.flowmo-home-filter {
  width: min(190px, 22vw);
}

.flowmo-home-search svg,
.flowmo-home-filter svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-home-filter svg:last-child {
  margin-left: auto;
}

.flowmo-home-search input,
.flowmo-home-filter select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  outline: none;
}

.flowmo-home-filter select {
  appearance: none;
  cursor: pointer;
}

.flowmo-home-search:focus-within,
.flowmo-home-filter:focus-within {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.11),
    0 12px 26px rgba(15, 23, 42, 0.05);
}

.automation-workspace .flowmo-home-new-btn {
  min-height: 42px;
  border-color: rgba(5, 150, 105, 0.92);
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 16px 28px rgba(5, 150, 105, 0.22);
}

.automation-workspace .flowmo-automation-home-list {
  display: grid;
  gap: 14px;
}

.automation-workspace .flowmo-automation-home-card {
  min-height: 92px;
  grid-template-columns: minmax(250px, 1.35fr) 92px minmax(170px, 0.75fr) minmax(180px, 0.8fr) 112px;
  grid-template-rows: auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-color: rgba(203, 213, 225, 0.76);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 253, 255, 0.88)),
    linear-gradient(120deg, rgba(236, 253, 245, 0.16), rgba(255, 255, 255, 0) 44%);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.045),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.automation-workspace .flowmo-automation-home-card:hover,
.automation-workspace .flowmo-automation-home-card:focus-within {
  border-color: rgba(20, 184, 166, 0.48);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.075),
    0 0 0 1px rgba(20, 184, 166, 0.12) inset;
}

.automation-workspace .flowmo-automation-home-card[data-enabled="false"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 252, 0.84)),
    linear-gradient(120deg, rgba(248, 250, 252, 0.34), rgba(255, 255, 255, 0) 44%);
}

.automation-workspace .flowmo-automation-home-card[data-readiness="ready"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 254, 251, 0.88)),
    linear-gradient(120deg, rgba(236, 253, 245, 0.24), rgba(255, 255, 255, 0) 44%);
}

.automation-workspace .flowmo-home-card-main {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
}

.automation-workspace .flowmo-home-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  background: #ecfdf3;
  color: #059669;
}

.automation-workspace .flowmo-automation-home-card[data-tone="blue"] .flowmo-home-card-icon {
  border-color: rgba(37, 99, 235, 0.16);
  background: #eff6ff;
  color: #2563eb;
}

.automation-workspace .flowmo-automation-home-card[data-tone="violet"] .flowmo-home-card-icon {
  border-color: rgba(124, 58, 237, 0.16);
  background: #f5f3ff;
  color: #7c3aed;
}

.automation-workspace .flowmo-automation-home-card[data-tone="green"] .flowmo-home-card-icon {
  border-color: rgba(22, 163, 74, 0.16);
  background: #f0fdf4;
  color: #16a34a;
}

.automation-workspace .flowmo-automation-home-card[data-tone="teal"] .flowmo-home-card-icon {
  border-color: rgba(13, 148, 136, 0.16);
  background: #f0fdfa;
  color: #0d9488;
}

.automation-workspace .flowmo-home-card-icon svg {
  width: 22px;
  height: 22px;
}

.automation-workspace .flowmo-home-card-content strong {
  font-size: 15px;
  line-height: 1.2;
}

.automation-workspace .flowmo-home-card-content p {
  -webkit-line-clamp: 2;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.automation-workspace .flowmo-home-status-pill {
  width: fit-content;
  min-height: 30px;
  gap: 8px;
  justify-self: start;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: #fff7ed;
  color: #c2410c;
  padding: 0 13px;
  font-size: 11px;
}

.automation-workspace .flowmo-home-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.automation-workspace .flowmo-home-status-pill[data-enabled="true"] {
  border-color: rgba(5, 150, 105, 0.12);
  background: #ecfdf3;
  color: #059669;
}

.flowmo-home-row-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.flowmo-home-row-meta[data-kind="action"] {
  padding-left: 20px;
  border-left: 1px solid rgba(203, 213, 225, 0.72);
}

.flowmo-home-row-meta > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #475569;
}

.flowmo-home-row-meta svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-home-row-meta div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.flowmo-home-row-meta small,
.flowmo-home-row-meta strong,
.flowmo-home-row-meta em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-home-row-meta small {
  color: #667085;
  font-size: 10px;
  font-weight: 760;
}

.flowmo-home-row-meta strong {
  color: #334155;
  font-size: 11.5px;
  font-weight: 880;
}

.flowmo-home-row-meta em {
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
}

.automation-workspace .flowmo-home-card-controls {
  justify-content: flex-end;
  gap: 12px;
}

.automation-workspace .flowmo-home-enable-btn {
  width: 42px;
  min-width: 42px;
  height: 24px;
  min-height: 24px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: #e2e8f0;
  padding: 0;
  box-shadow: none;
}

.automation-workspace .flowmo-home-enable-btn i {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transform: translateX(-8px);
  transition: transform 160ms ease;
}

.automation-workspace .flowmo-home-enable-btn[aria-pressed="true"] {
  border-color: rgba(5, 150, 105, 0.36);
  background: #10b981;
}

.automation-workspace .flowmo-home-enable-btn[aria-pressed="true"] i {
  transform: translateX(8px);
}

.automation-workspace .flowmo-home-enable-btn:hover,
.automation-workspace .flowmo-home-enable-btn:focus-visible {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
  outline: none;
}

.automation-workspace .flowmo-home-edit-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: #475569;
  padding: 0;
  box-shadow: none;
}

.automation-workspace .flowmo-home-edit-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.automation-workspace .flowmo-home-edit-btn:hover,
.automation-workspace .flowmo-home-edit-btn:focus-visible,
.automation-workspace .flowmo-home-edit-btn[aria-expanded="true"] {
  background: rgba(241, 245, 249, 0.9);
  color: #0f172a;
}

.flowmo-home-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #667085;
  font-size: 11.5px;
  font-weight: 650;
}

.flowmo-home-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.flowmo-home-pagination button,
.flowmo-home-pagination strong {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.82);
  color: #334155;
}

.flowmo-home-pagination button:disabled {
  opacity: 0.55;
}

.flowmo-home-pagination svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flowmo-automation-home-empty {
  min-height: 150px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  text-align: center;
}

.flowmo-automation-home-empty strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 920;
}

.flowmo-automation-home-empty span {
  font-size: 12px;
  font-weight: 650;
}

.flowmo-automation-home-empty button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid rgba(5, 150, 105, 0.28);
  border-radius: 10px;
  background: #ecfdf3;
  color: #047857;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.flowmo-automation-home-empty svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.automation-workspace .flowmo-automation-canvas {
  position: relative;
  isolation: isolate;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.automation-workspace .flowmo-automation-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08)),
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.09) 1px, transparent 1.65px) 0 0 / 24px 24px;
  opacity: 0.78;
}

.automation-workspace .flowmo-automation-canvas > * {
  position: relative;
  z-index: 1;
}

.flowmo-automation-board-chrome {
  width: min(520px, calc(100% - 720px));
  margin: 14px auto 0 40px;
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.flowmo-board-identity {
  min-width: 0;
  width: 100%;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

.flowmo-board-back-button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(20, 184, 166, 0.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, rgba(45, 212, 191, 0.18), transparent 32px),
    rgba(255, 255, 255, 0.96);
  color: #0f766e;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.flowmo-board-back-button:hover,
.flowmo-board-back-button:focus-visible {
  border-color: rgba(20, 184, 166, 0.62);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12), 0 14px 26px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateX(-1px);
}

.flowmo-board-back-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-board-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-board-status {
  min-width: 0;
  max-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  color: #475569;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-board-identity > div {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
  padding-inline-start: 2px;
}

.flowmo-board-identity strong,
.flowmo-board-identity small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-workspace .automation-hero h3 {
  font-size: 14px;
}

.automation-workspace .automation-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.automation-workspace .automation-mark svg {
  width: 16px;
  height: 16px;
}

.automation-workspace .automation-status-badge {
  min-height: 16px;
  margin-bottom: 1px;
  padding: 0 6px;
  font-size: 8.5px;
}

.automation-workspace .automation-hero p {
  margin-top: 1px;
  font-size: 10px;
}

.automation-workspace .automation-hero-account strong {
  font-size: 10.5px;
}

.automation-workspace .automation-hero-account span {
  font-size: 10px;
}

.automation-workspace .automation-hero-account {
  position: fixed;
  top: 28px;
  right: 42px;
  z-index: 18;
  width: min(260px, calc(100vw - 72px));
  max-width: 260px;
  padding-left: 0;
  border-left: 0;
  text-align: right;
  pointer-events: none;
}

.flowmo-board-identity strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.flowmo-board-identity small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 650;
}

.flowmo-board-metadata {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  min-width: 0;
  max-width: 100%;
  margin-left: 158px;
  text-align: left;
  pointer-events: none;
}

.flowmo-board-save-text {
  display: inline-flex;
  align-items: center;
  color: #047857;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.flowmo-board-save-text[data-status] {
  padding: 0;
  border: 0;
  background: transparent;
}

.flowmo-board-save-text[data-status="saved"] {
  color: #047857;
}

.flowmo-board-save-text[data-status="pending"] {
  color: #c2410c;
}

.flowmo-board-save-text[data-status="saving"] {
  color: #2563eb;
}

.flowmo-board-save-text[data-status="error"] {
  color: #dc2626;
}

@media (max-width: 1480px) and (min-width: 1121px) {
  .flowmo-automation-board-chrome {
    width: min(420px, calc(100% - 580px));
    margin-left: 28px;
    gap: 4px;
  }

  .flowmo-board-metadata {
    margin-left: 136px;
  }

  .automation-workspace:has(.flowmo-automation-builder) .automation-hero {
    right: clamp(310px, calc(18vw + 52px), 350px);
    width: min(230px, calc(28% - 12px));
  }

  .automation-workspace:has(.flowmo-automation-builder) .automation-hero-main {
    gap: 8px;
    padding-right: 0;
  }
}

.automation-workspace .flowmo-automation-topbar {
  position: absolute;
  top: 106px;
  left: 50%;
  z-index: 7;
  width: max-content;
  max-width: calc(100% - 96px);
  min-height: 40px;
  padding: 6px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(12px);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translateX(-50%);
  border-left: 18px solid rgba(14, 165, 233, 0.34);
  box-shadow:
    -8px 0 0 rgba(14, 165, 233, 0.08),
    0 14px 30px rgba(15, 23, 42, 0.05);
}

@media (max-width: 1200px) and (min-width: 1121px) {
  .flowmo-automation-board-chrome {
    width: min(460px, calc(100% - 350px));
  }

  .automation-workspace:has(.flowmo-automation-builder) .automation-hero {
    top: 74px;
    left: 24px;
    right: auto;
    width: min(360px, calc(100% - 330px));
  }

  .automation-workspace:has(.flowmo-automation-builder) .automation-hero p {
    display: none;
  }

  .automation-workspace .flowmo-automation-topbar {
    top: 132px;
    max-width: calc(100% - 48px);
  }
}

.automation-workspace .flowmo-automation-topbar::before {
  content: "";
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: repeating-linear-gradient(
    180deg,
    rgba(15, 118, 110, 0.55) 0 3px,
    transparent 3px 7px
  );
  margin: 3px 2px 3px -12px;
  pointer-events: none;
}

.automation-workspace .flowmo-automation-topbar[data-user-positioned="true"] {
  transform: none;
}

.automation-workspace .flowmo-automation-topbar.is-dragging {
  cursor: grabbing;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.automation-workspace .flowmo-automation-topbar > div:last-child {
  flex-wrap: wrap;
}

.automation-workspace .flowmo-automation-topbar > div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.automation-workspace .flowmo-topbar-build {
  flex: 0 0 auto;
  padding-right: 6px;
  border-right: 1px solid rgba(203, 213, 225, 0.78);
}

.automation-workspace .flowmo-topbar-run {
  flex: 0 1 auto;
}

.automation-workspace .flowmo-topbar-flow-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.automation-workspace .flowmo-topbar-flow-menu {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 30;
  width: min(260px, calc(100vw - 80px));
  max-height: 300px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 8px;
  background: #fbfdff;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
  padding: 8px;
  cursor: default;
}

.automation-workspace .flowmo-topbar-flow-menu[hidden] {
  display: none;
}

.automation-workspace .flowmo-topbar-flow-menu-list {
  min-width: 0;
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.automation-workspace .flowmo-topbar-flow-menu button {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automation-workspace .flowmo-topbar-flow-menu button:hover,
.automation-workspace .flowmo-topbar-flow-menu button:focus-visible {
  border-color: rgba(14, 116, 144, 0.24);
  background: #eef8fb;
  color: #075985;
  outline: none;
}

.automation-workspace .flowmo-topbar-flow-menu button[data-active="true"] {
  border-color: rgba(20, 184, 166, 0.22);
  background: #e6f6f4;
  color: #075e57;
}

.automation-workspace .flowmo-topbar-flow-menu-add {
  margin-top: 2px;
  border-top: 1px solid rgba(226, 232, 240, 0.92) !important;
  color: #0f766e !important;
}

.automation-workspace .flowmo-automation-topbar select {
  min-height: 32px;
  border-radius: 7px;
}

.automation-workspace .flowmo-automation-topbar > div:first-child small {
  display: none;
}

.automation-workspace .flowmo-automation-topbar button,
.automation-workspace .flowmo-automation-icon-btn,
.automation-workspace .flowmo-block-editor-head button,
.automation-workspace .flowmo-condition-row button,
.automation-workspace .flowmo-action-row button {
  border-radius: 7px;
}

.automation-workspace .flowmo-automation-topbar button {
  white-space: nowrap;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button {
  position: relative;
  min-height: 34px;
  padding: 0 13px;
  border-color: rgba(249, 168, 212, 0.72);
  background: rgba(255, 255, 255, 0.92);
  color: #4f3f56;
  box-shadow:
    0 10px 22px rgba(244, 114, 182, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.76) inset;
  animation: flowmoActivateBorderMood 4.8s ease-in-out infinite;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button svg {
  position: relative;
  z-index: 1;
  color: inherit;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button span {
  position: relative;
  z-index: 1;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.96);
  color: #3f3245;
  box-shadow:
    0 14px 28px rgba(244, 114, 182, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.86) inset;
  transform: translateY(-1px);
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button:disabled {
  border-color: rgba(203, 213, 225, 0.86);
  background: #f8fafc;
  color: #94a3b8;
  box-shadow: none;
  animation: none;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button[data-activation-busy="true"] {
  background: rgba(255, 255, 255, 0.96);
  color: #4f3f56;
  animation-duration: 1.2s;
}

.automation-workspace .flowmo-automation-topbar .flowmo-activate-button[data-activation-busy="true"] svg {
  animation: flowmoActivateSpin 1.1s linear infinite;
}

@keyframes flowmoActivateBorderMood {
  0%, 100% {
    border-color: rgba(249, 168, 212, 0.76);
    box-shadow:
      0 10px 22px rgba(244, 114, 182, 0.11),
      0 0 0 1px rgba(249, 168, 212, 0.12);
  }
  25% {
    border-color: rgba(216, 180, 254, 0.82);
    box-shadow:
      0 10px 22px rgba(168, 85, 247, 0.1),
      0 0 0 1px rgba(216, 180, 254, 0.13);
  }
  50% {
    border-color: rgba(147, 197, 253, 0.84);
    box-shadow:
      0 10px 22px rgba(59, 130, 246, 0.1),
      0 0 0 1px rgba(147, 197, 253, 0.13);
  }
  75% {
    border-color: rgba(153, 246, 228, 0.82);
    box-shadow:
      0 10px 22px rgba(20, 184, 166, 0.1),
      0 0 0 1px rgba(153, 246, 228, 0.13);
  }
}

@keyframes flowmoActivateSpin {
  to {
    transform: rotate(360deg);
  }
}

.automation-workspace .flowmo-automation-run-preview {
  display: none;
}

.automation-workspace .flowmo-automation-run-preview span {
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.96);
}

.automation-workspace .flowmo-automation-utility-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: 12px;
  padding: 0;
  margin-top: 12px;
}

.automation-workspace .flowmo-flow-health,
.automation-workspace .flowmo-automation-test-panel,
.automation-workspace .flowmo-automation-run-panel {
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 28%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
}

.automation-workspace .flowmo-flow-health {
  padding: 12px;
}

.automation-workspace .flowmo-flow-health-grid {
  grid-template-columns: repeat(5, minmax(96px, 1fr));
}

.automation-workspace .flowmo-automation-result-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.automation-workspace .flowmo-automation-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 12px;
  padding: 0;
  background: transparent;
  overflow: hidden;
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.automation-workspace .flowmo-automation-stage[data-editor-collapsed="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.automation-workspace .flowmo-automation-stage[data-editor-collapsed="true"] .flowmo-automation-inspector {
  display: none;
}

.automation-workspace .flowmo-automation-diagram {
  min-height: 0;
  align-content: start;
  gap: 18px;
  padding: 136px clamp(18px, 4vw, 48px) 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
}

.flowmo-diagram-lane {
  width: min(820px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
}

.flowmo-diagram-lane--trigger::after {
  content: "";
  width: 3px;
  height: 24px;
  margin: 12px auto -2px;
  border-radius: 999px;
  background: linear-gradient(#8ddfd3, #93c5fd);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.06);
}

.flowmo-diagram-lane--trigger[data-has-next="false"]::after {
  content: none;
}

.flowmo-diagram-branch {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 14px;
}

.flowmo-diagram-branch[data-single-block="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.flowmo-diagram-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: linear-gradient(#8ddfd3, #93c5fd);
  transform: translateX(-50%);
}

.flowmo-diagram-branch .flowmo-diagram-block {
  width: 100%;
}

.flowmo-diagram-lane--actions {
  padding-top: 2px;
}

.flowmo-automation-connector {
  display: none;
}

.flowmo-diagram-toolbar {
  width: min(820px, 100%);
}

.automation-workspace .flowmo-diagram-block,
.automation-workspace .flowmo-diagram-action-stack {
  width: min(820px, 100%);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.automation-workspace .flowmo-diagram-block:hover,
.automation-workspace .flowmo-diagram-action-stack:hover,
.automation-workspace .flowmo-diagram-block.is-active,
.automation-workspace .flowmo-diagram-action-stack.is-active {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.13);
}

.automation-workspace .flowmo-automation-inspector {
  max-height: none;
  min-height: 0;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 28%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  overflow: auto;
}

.automation-workspace .flowmo-inspector-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -16px -16px 0;
  padding: 14px 16px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.automation-workspace .flowmo-inspector-head > div > small {
  color: #2563eb;
  text-transform: none;
}

.automation-workspace .flowmo-inspector-actions .flowmo-switch {
  white-space: nowrap;
}

.automation-workspace .flowmo-inspector-tabs {
  border-radius: 14px;
}

.automation-workspace .flowmo-automation-result-dock {
  position: absolute;
  top: 224px;
  left: auto;
  right: 24px;
  z-index: 6;
  width: min(330px, calc(100% - 36px));
  max-height: min(420px, calc(100% - 88px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(249, 250, 251, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 28%);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.11);
  overflow: auto;
  backdrop-filter: blur(14px);
  transform: none;
}

.automation-workspace .flowmo-automation-result-dock[data-user-positioned="true"] {
  right: auto;
  transform: none;
}

.automation-workspace .flowmo-automation-result-dock.is-dragging {
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.16);
}

.flowmo-result-dock-grip {
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.78);
  color: #475569;
  padding: 0 12px;
  cursor: grab;
  touch-action: none;
}

.flowmo-result-dock-grip:active {
  cursor: grabbing;
}

.flowmo-result-dock-grip span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.automation-workspace .flowmo-automation-test-panel,
.automation-workspace .flowmo-automation-run-panel {
  min-height: 0;
  max-height: 260px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
}

.flowmo-result-card-toggle {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  cursor: pointer;
  padding: 0 10px;
  text-align: left;
}

.flowmo-result-card-toggle:active {
  cursor: pointer;
}

.flowmo-result-card-toggle span {
  min-width: max-content;
  overflow: visible;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-result-card-toggle em {
  min-width: max-content;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-result-card-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
}

.automation-workspace .flowmo-automation-test-panel.is-minimized,
.automation-workspace .flowmo-automation-run-panel.is-minimized {
  min-width: 260px;
  max-height: none;
  grid-template-rows: auto;
  padding: 8px;
  overflow: visible;
}

.automation-workspace .flowmo-automation-test-panel.is-minimized .flowmo-result-card-body,
.automation-workspace .flowmo-automation-run-panel.is-minimized .flowmo-result-card-body {
  display: none;
}

.automation-workspace .flowmo-automation-test-panel {
  border: 1px solid rgba(226, 232, 240, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 28%);
}

.automation-workspace .flowmo-automation-run-panel {
  border: 1px solid rgba(226, 232, 240, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 28%);
}

.automation-workspace .flowmo-run-item span,
.automation-workspace .flowmo-run-item small,
.automation-workspace .flowmo-run-actions p,
.automation-workspace .flowmo-test-grid p,
.automation-workspace .flowmo-test-event span,
.automation-workspace .flowmo-test-event small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.workspace-slot[data-slot="side"] .automation-workspace {
  padding: 12px;
}

.workspace-slot[data-slot="side"] .automation-hero {
  align-items: flex-start;
  flex-direction: column;
}

.workspace-slot[data-slot="side"] .automation-feed-layout.lark-feed-layout[data-mode="automation"] {
  grid-template-columns: minmax(0, 1fr);
  overflow: auto;
}

.workspace-slot[data-slot="side"] .automation-feed-layout .automation-library,
.workspace-slot[data-slot="side"] .automation-feed-layout .automation-canvas-host {
  overflow: visible;
}

.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-stage,
.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-result-dock,
.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-utility-panel,
.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-result-inline,
.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-run-preview {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-slot[data-slot="side"] .automation-workspace .flowmo-automation-inspector {
  border-width: 1px;
}

.workspace-slot[data-slot="side"] .flowmo-action-config {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1120px) {
  .flowmo-automation-board-chrome {
    width: calc(100% - 28px);
    margin: 12px 14px 0;
  }

  .automation-workspace:has(.flowmo-automation-builder) .automation-hero {
    left: 14px;
    right: auto;
    width: min(420px, calc(100% - 28px));
    min-width: 0;
  }

  .automation-workspace .flowmo-automation-home {
    padding-top: 132px;
  }

  .automation-workspace .flowmo-automation-home-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .flowmo-home-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-home-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .automation-workspace .flowmo-automation-stage,
  .automation-workspace .flowmo-automation-result-dock,
  .automation-workspace .flowmo-automation-utility-panel,
  .automation-workspace .flowmo-automation-result-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .automation-workspace .flowmo-automation-inspector {
    border-width: 1px;
  }

  .flowmo-action-config {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .automation-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .automation-workspace .flowmo-automation-home {
    padding: 150px 14px 16px;
  }

  .flowmo-automation-home-head h3 {
    font-size: 22px;
  }

  .flowmo-home-new-btn,
  .flowmo-home-stats,
  .flowmo-automation-home-list {
    width: 100%;
  }

  .flowmo-home-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-automation-home-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-home-card-controls {
    justify-content: flex-start;
  }

  .flowmo-home-card-main {
    grid-column: 1 / -1;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .automation-feed-layout.lark-feed-layout[data-mode="automation"] {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .automation-feed-layout .automation-library,
  .automation-feed-layout .automation-canvas-host {
    overflow: visible;
  }

  .automation-workspace .flowmo-automation-run-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flowmo-automation-board-chrome {
    align-items: flex-start;
    flex-direction: column;
  }

  .flowmo-board-metadata {
    position: static;
    justify-content: flex-start;
    text-align: left;
    transform: none;
  }

  .flowmo-diagram-branch {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1240px) {
  .automation-workspace .flowmo-automation-home-card {
    grid-template-columns: minmax(230px, 1.25fr) 92px minmax(150px, 0.8fr) minmax(150px, 0.8fr) 96px;
    gap: 14px;
  }

  .flowmo-home-row-meta[data-kind="action"] {
    padding-left: 14px;
  }
}

@media (max-width: 1120px) {
  .automation-workspace:has(.flowmo-automation-home) .automation-hero {
    left: 18px;
    right: 18px;
    min-height: 104px;
    padding: 20px;
  }

  .automation-workspace .flowmo-automation-home {
    padding: 146px 18px 20px;
  }

  .automation-workspace .flowmo-automation-home-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .flowmo-home-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .flowmo-home-search,
  .flowmo-home-filter {
    width: auto;
    flex: 1 1 180px;
  }

  .automation-workspace .flowmo-automation-home-card {
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-areas:
      "main status"
      "when controls"
      "action controls";
    align-items: center;
  }

  .automation-workspace .flowmo-home-card-main {
    grid-area: main;
  }

  .automation-workspace .flowmo-home-status-pill {
    grid-area: status;
  }

  .flowmo-home-row-meta[data-kind="when"] {
    grid-area: when;
  }

  .flowmo-home-row-meta[data-kind="action"] {
    grid-area: action;
    padding-left: 0;
    border-left: 0;
  }

  .automation-workspace .flowmo-home-card-controls {
    grid-area: controls;
    align-self: stretch;
  }
}

@media (max-width: 760px) {
  .automation-workspace:has(.flowmo-automation-home) .automation-hero {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 14px;
    min-height: 0;
  }

  .automation-workspace:has(.flowmo-automation-home) .automation-hero-account {
    width: 100%;
    max-width: none;
    padding-left: 0;
    border-left: 0;
    justify-items: start;
    text-align: left;
  }

  .automation-workspace .flowmo-automation-home {
    padding: 0 14px 16px;
  }

  .automation-workspace .flowmo-automation-home-shell {
    padding: 18px 14px;
  }

  .flowmo-home-toolbar {
    flex-wrap: wrap;
  }

  .flowmo-home-search,
  .flowmo-home-filter,
  .automation-workspace .flowmo-home-new-btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .automation-workspace .flowmo-automation-home-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "status"
      "when"
      "action"
      "controls";
    padding: 14px;
  }

  .automation-workspace .flowmo-home-status-pill {
    justify-self: start;
  }

  .automation-workspace .flowmo-home-card-controls {
    justify-content: space-between;
  }

  .flowmo-home-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
.assistant-float-toggle {
  position: fixed;
  left: auto;
  top: auto;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  display: none;
  grid-template-columns: 1fr;
  place-items: center;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  border: 1px solid rgba(99, 179, 237, 0.58);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.96) 60%, rgba(233, 245, 255, 0.96) 100%) padding-box,
    linear-gradient(135deg, rgba(45, 212, 191, 0.88), rgba(99, 179, 237, 0.8), rgba(139, 92, 246, 0.78)) border-box;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.14),
    0 8px 18px rgba(45, 212, 191, 0.12),
    0 8px 22px rgba(99, 179, 237, 0.12);
  box-sizing: border-box;
  overflow: hidden;
  cursor: grab;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, filter 160ms ease, left 120ms ease, top 120ms ease;
}

.app-shell.assistant-collapsed .assistant-float-toggle,
.app-shell.side-panel-collapsed .assistant-float-toggle {
  display: grid;
}

.assistant-float-toggle:hover,
.assistant-float-toggle:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.16),
    0 10px 22px rgba(45, 212, 191, 0.16),
    0 10px 24px rgba(99, 179, 237, 0.14);
}

.assistant-float-toggle:active,
.assistant-float-toggle.is-armed,
.assistant-float-toggle.is-dragging {
  cursor: grabbing;
}

.assistant-float-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.assistant-float-toggle img,
.assistant-float-toggle svg {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

.assistant-float-toggle svg {
  fill: none;
  stroke: #0f172a;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant-float-toggle.is-dragging {
  transform: scale(1.03);
  transition: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-date > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] {
  height: calc(100dvh - 100px);
  min-height: min(700px, calc(100dvh - 100px));
  max-height: calc(100dvh - 92px);
  grid-template-rows: auto auto minmax(0, 1fr) 0;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button {
  transform: scale(1);
  transform-origin: center;
  transition:
    transform 130ms ease,
    border-color 130ms ease,
    background 130ms ease,
    color 130ms ease,
    box-shadow 130ms ease;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button:hover,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button:focus-visible {
  transform: scale(1.025);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button:active {
  transform: scale(0.985);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button > span:first-child,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-board-actions .flowmo-task-action-button svg {
  animation: none;
  transform: none;
  transition: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-workspace {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(104px, auto) minmax(96px, auto);
  gap: 8px;
  overflow: hidden;
  padding: 12px 14px 4px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] {
  height: 100%;
  min-height: 0;
  align-content: stretch;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list {
  height: 100%;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board {
  min-height: 0;
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-grid {
  height: 100%;
  min-height: 0;
  grid-template-rows: 26px repeat(6, minmax(46px, 1fr));
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-cell {
  min-height: 46px;
  gap: 4px;
  padding: 7px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-quick-events {
  max-height: 48px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-quick-event {
  min-height: 0;
  padding: 7px 9px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-agenda-strip {
  align-self: end;
  min-height: 104px;
  max-height: min(210px, 32dvh);
  overflow: auto;
  border-top-color: #dbe3ef;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-body {
  min-height: 0;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-quick-events {
  max-height: 82px;
  overflow: auto;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitations {
  max-height: min(190px, 30dvh);
  overflow: auto;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-workspace {
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 10px 10px 5px;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board {
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board-head {
  align-items: start;
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-board-head strong {
  font-size: 18px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 24px repeat(6, minmax(48px, 1fr));
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-weekday {
  min-width: 0;
  font-size: 10px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-cell {
  min-width: 0;
  min-height: 48px;
  gap: 3px;
  padding: 6px 4px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-day-number {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-event-pill {
  min-height: 20px;
  padding: 0 4px;
  font-size: 9.5px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-agenda-strip {
  min-height: 118px;
  max-height: min(220px, 36dvh);
  overflow: auto;
  padding-top: 9px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-strip-head {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-add-button {
  width: 100%;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-quick-events {
  max-height: 88px;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: auto;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-module-shell[data-capability="calendar"] .flowmo-calendar-invitations {
  max-height: min(180px, 32dvh);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"],
.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list,
.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-workspace,
.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-board,
.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-grid,
.workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"],
.workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list,
.workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-workspace,
.workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-board,
.workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-grid {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"],
.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list,
.workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"],
.workspace-slot[data-section="lark"][data-slot="side"] .lark-feed-layout[data-mode="calendar"] .lark-chat-list {
  overflow-x: hidden !important;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-grid,
.workspace-slot[data-section="lark"][data-slot="side"] .flowmo-calendar-grid {
  width: 100% !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.flowmo-calendar-modal-open .assistant-float-toggle,
.flowmo-calendar-modal-open .panel-swap-button,
.flowmo-calendar-modal-open .side-panel-collapse-button {
  z-index: 19 !important;
  filter: blur(10px) !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
}

.flowmo-calendar-modal-backdrop {
  z-index: 80;
  padding: 22px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(14px);
}

.flowmo-calendar-modal-backdrop .flowmo-calendar-modal {
  width: min(560px, calc(100vw - 34px));
  max-height: min(780px, calc(100dvh - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 8px;
  overflow: hidden;
}

.flowmo-calendar-modal .modal-header {
  min-height: 70px;
  align-items: center;
  padding: 18px 20px 14px;
}

.flowmo-calendar-modal .modal-header h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}

.flowmo-calendar-modal .modal-header p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.flowmo-calendar-modal .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.flowmo-calendar-modal .flowmo-calendar-form {
  min-height: 0;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 16px 20px 18px;
}

.flowmo-calendar-form-section {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.flowmo-calendar-section-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flowmo-calendar-section-label {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.flowmo-calendar-modal .flowmo-calendar-form label {
  gap: 6px;
}

.flowmo-calendar-modal .flowmo-calendar-form label > span {
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.flowmo-calendar-modal .flowmo-calendar-form input,
.flowmo-calendar-modal .flowmo-calendar-form textarea {
  min-height: 38px;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 12px;
}

.flowmo-calendar-modal .flowmo-calendar-form textarea {
  min-height: 78px;
  max-height: 130px;
  overflow: auto;
  resize: vertical;
}

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

.flowmo-calendar-modal .flowmo-calendar-checkline {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px !important;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #ffffff;
  padding: 0 10px 0 8px;
}

.flowmo-calendar-modal .flowmo-calendar-checkline input {
  width: 15px;
  min-height: 15px;
}

.flowmo-calendar-modal .flowmo-calendar-checkline span {
  margin: 0;
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-calendar-form-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.flowmo-calendar-modal .modal-actions {
  margin: 0;
}

.flowmo-calendar-modal .modal-actions button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 900;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="closed"] {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="closed"] .lark-chat-list {
  grid-column: 1 / -1;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="closed"] .flowmo-task-board {
  min-height: 0;
  height: 100%;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-work-grid:has(.lark-module-shell[data-capability="tasks"]) {
  padding-bottom: 5px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"] {
  height: calc(100dvh - 201px);
  min-height: 0;
  max-height: calc(100dvh - 201px);
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  overflow: visible;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .lark-chat-list {
  grid-column: 1 / -1;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"] .lark-chat-list {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-board {
  min-height: 0;
  height: 100%;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"] .flowmo-task-board {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"] .flowmo-task-body {
  min-height: 0;
  display: grid;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"] .flowmo-task-lanes {
  min-height: 100%;
  height: 100%;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .lark-message-list {
  position: absolute;
  top: -14px;
  right: 10px;
  z-index: 18;
  width: min(398px, calc(100% - 20px));
  min-height: 0;
  display: grid;
  max-height: calc(100% + 12px);
  overflow-y: auto;
  overflow-x: hidden;
  border-color: #dbe3ef;
  background: #ffffff;
  border-radius: 8px;
  padding: 0;
  filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.14));
  animation: flowmoTaskPanelOverlayIn 150ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
  resize: none;
  scrollbar-gutter: stable;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail {
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-reminder-rail {
  position: relative;
  gap: 7px;
  padding: 13px 48px 11px 12px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-head,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-reminder-head {
  align-items: flex-start;
  flex-direction: row;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-title > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-title > .flowmo-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-head span,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-reminder-head small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-detail.is-new-task .flowmo-task-editor-title > .flowmo-avatar {
  overflow: hidden;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-head-actions {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-self: start;
  flex-wrap: nowrap;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-head-actions .primary-button {
  flex: 0 0 auto;
  min-width: 124px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor input,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-choice-button {
  min-height: 36px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-assignee-control {
  padding: 3px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-grid--dates {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .flowmo-task-editor-grid--dates label {
  min-width: 0;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor input[type="datetime-local"] {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding-right: 8px;
  font-size: 11.2px;
}

@keyframes flowmoTaskPanelOverlayIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-head-icon {
  display: grid;
  place-items: center;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-head-icon svg {
  display: block;
  transform: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-head-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 31px;
  height: 31px;
  min-width: 31px;
  min-height: 31px;
  flex: 0 0 31px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0;
  box-shadow: none;
  line-height: 1;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-close-glyph {
  display: block;
  color: currentColor;
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-1px);
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-detail .flowmo-task-editor,
.lark-module-shell[data-capability="tasks"] .flowmo-task-detail .flowmo-reminder-rail {
  position: relative;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 31px;
  height: 31px;
  min-width: 31px;
  min-height: 31px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0;
  box-shadow: none;
  line-height: 1;
}

.lark-module-shell[data-capability="tasks"] .flowmo-task-close-glyph {
  display: block;
  color: currentColor;
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-1px);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close:hover,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close:focus-visible {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-panel-close svg path,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-close svg path,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-close svg path,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notice-close svg path {
  fill: none;
  stroke: currentColor;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control:has(.flowmo-task-quick-assignees:not([hidden])) {
  z-index: 55;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control:focus-within {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control input {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  padding: 5px 6px;
  box-shadow: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #ecfdf5;
  color: #0f766e;
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control button span {
  display: inline-grid;
  place-items: center;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control button svg {
  width: 13px;
  height: 13px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control .flowmo-task-quick-assignees {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 56;
  width: min(292px, 100%);
  display: grid;
  gap: 6px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control .flowmo-task-quick-assignees[hidden] {
  display: none !important;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control .flowmo-task-quick-assignees button {
  min-height: 29px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 7px;
  border-color: rgba(20, 184, 166, 0.24);
  background: #f0fdfa;
  padding: 3px 9px 3px 4px;
  text-align: left;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-assignee-control .flowmo-task-quick-assignees button span:not(.flowmo-avatar) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #344054 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, #344054 50%, transparent 50%) right 9px center / 6px 6px no-repeat,
    #ffffff;
  padding-right: 30px;
  font-weight: 800;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor select.flowmo-task-native-select {
  display: none !important;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor select option {
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-field {
  position: relative;
  z-index: 2;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-field:has(.flowmo-task-choice-menu:not([hidden])) {
  z-index: 42;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button {
  min-height: 38px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdff);
  color: #111827;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.02);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button span {
  margin: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-transform: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button i {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #344054;
  transform: translateY(-2px) rotate(45deg);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button:hover,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button[aria-expanded="true"],
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-menu {
  max-height: min(214px, 42dvh);
  overflow: auto;
  border-color: #dbe3ef;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
  scrollbar-gutter: stable;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-menu button {
  width: 100%;
  display: block;
  color: #111827;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-choice-menu button[aria-selected="true"] {
  background: #ecfdf5;
  color: #047857;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title {
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title strong,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title > div > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-editor-title > div > span {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-detail .flowmo-task-panel-close {
  align-self: start;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor textarea[name="notes"] {
  height: 52px;
  min-height: 52px;
  max-height: 92px;
  overflow: auto;
  resize: vertical;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-compose {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-compose textarea {
  min-height: 54px;
  max-height: 90px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fbfdff;
  color: #344054;
  padding: 10px;
  font-size: 11.5px;
  line-height: 1.35;
  resize: vertical;
  outline: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-compose textarea:focus {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row[hidden] {
  display: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row label span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #344054;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 7px 9px;
  font-size: 11.5px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-create-row button {
  justify-self: end;
  min-height: 34px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: pointer;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-row:focus-visible {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-row button[data-group-delete] svg,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] [data-task-group-delete] svg {
  stroke: #dc2626;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-group-row button[data-group-delete]:hover {
  border-color: #fecaca;
  background: #fff7f7;
  color: #475467;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-reminder-head--compact {
  align-items: center;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notice-list {
  gap: 8px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notice-item {
  border-color: rgba(20, 184, 166, 0.2);
  background: #f8fffd;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-rail {
  background: #ffffff;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-feed-layout[data-mode="tasks"][data-task-side-panel="open"] .lark-message-list:has(.flowmo-task-notices-panel) {
  top: 0;
  width: min(318px, calc(100% - 18px));
  max-height: none;
  overflow: visible;
  background: transparent;
  padding-right: 0;
  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.12));
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel {
  grid-template-rows: auto;
  gap: 0;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-rail {
  gap: 12px;
  padding: 14px;
  border-color: #dbe3ef;
  border-radius: 8px;
  box-shadow: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-head--compact {
  align-items: flex-start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-title {
  align-items: flex-start;
  gap: 9px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-title > span {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: transparent;
  color: #0f766e;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-reminder-title > span svg {
  width: 14px;
  height: 14px;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-editor-head-actions {
  margin-left: auto;
  flex-wrap: nowrap;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-notice-close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  padding: 0;
  box-shadow: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-notice-close:hover,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-notice-close:focus-visible {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-notice-close svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-notices-panel .flowmo-task-empty {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-color: #cbd5e1;
  background: #ffffff;
  padding: 9px 12px;
  color: #667085;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-head-actions .primary-button {
  border: 1px solid #99f6e4;
  background: #ecfdf5;
  color: #047857;
  box-shadow: none;
}

.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-head-actions .primary-button:hover,
.app-shell.lark-mode .workspace-slot[data-section="lark"] .lark-module-shell[data-capability="tasks"] .flowmo-task-editor-head-actions .primary-button:focus-visible {
  border-color: #5eead4;
  background: #d1fae5;
  color: #065f46;
}

.app-update-notice {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 11050;
  width: min(720px, calc(100vw - 28px));
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  padding: 10px 12px 10px 14px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
  animation: appUpdateNoticeIn 280ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.app-update-notice[hidden] {
  display: none;
}

body.flowmo-update-required .app-shell,
body.flowmo-update-required .access-gate {
  pointer-events: none;
  user-select: none;
  filter: blur(4px) saturate(0.82);
}

body.flowmo-update-required .app-update-notice {
  top: 50%;
  z-index: 11050;
  width: min(560px, calc(100vw - 32px));
  min-height: 146px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  transform: translate(-50%, -50%);
  border-color: #99f6e4;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.94)),
    #ffffff;
  padding: 22px;
  box-shadow: 0 32px 92px rgba(15, 23, 42, 0.24);
}

body.flowmo-update-required .app-update-notice strong {
  font-size: 20px;
}

body.flowmo-update-required .app-update-notice span {
  max-width: 48ch;
  white-space: normal;
  line-height: 1.45;
}

body.flowmo-update-required .app-update-notice a {
  min-height: 42px;
  background: #0f766e;
  border-color: #0f766e;
  padding: 0 16px;
}

.app-update-notice div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.app-update-notice strong,
.app-update-notice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-update-notice strong {
  font-size: 13px;
  color: #0f172a;
}

.app-update-notice span {
  font-size: 12px;
  color: #475467;
}

.app-update-notice a,
.app-update-notice button {
  min-height: 34px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
}

.app-update-notice a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
  padding: 0 12px;
  text-decoration: none;
}

.app-update-notice[data-busy="true"] a,
.app-update-rail-button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.78;
  pointer-events: none;
}

.app-update-notice button {
  width: 34px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #64748b;
}

.applications-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

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

.flowmo-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 24px);
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
}

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

body.flowmo-admin-open {
  overflow: hidden;
}

.flowmo-admin-panel {
  width: min(1180px, 100%);
  max-height: min(860px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #dbe3ef;
  background: #f6f8fb;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
}

.flowmo-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #b8e4dc;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(236, 253, 245, 0.78) 48%, #ffffff 100%);
  padding: 18px 20px;
}

.flowmo-admin-header small {
  color: #0f766e;
  font-weight: 800;
}

.flowmo-admin-header h2 {
  margin: 2px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.flowmo-admin-header p {
  max-width: 680px;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.flowmo-admin-header button {
  width: 34px;
  height: 34px;
  border: 1px solid #b8e4dc;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #0f766e;
  font-weight: 900;
}

.flowmo-admin-body {
  min-height: 0;
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 16px 18px 18px;
}

.flowmo-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.flowmo-admin-metrics article,
.flowmo-admin-section,
.flowmo-admin-user,
.flowmo-admin-empty {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.flowmo-admin-metrics article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
}

.flowmo-admin-metrics article > span,
.flowmo-admin-control-title > span,
.flowmo-admin-permission-group legend span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.flowmo-admin-metrics article > span {
  background: #ecfdf5;
  color: #0f766e;
}

.flowmo-admin-metrics article[data-tone="ai"] > span {
  background: #eef2ff;
  color: #4338ca;
}

.flowmo-admin-metrics article[data-tone="tokens"] > span {
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-admin-metrics article[data-tone="version"] > span {
  background: #fff7ed;
  color: #c2410c;
}

.flowmo-admin-metrics svg,
.flowmo-admin-control-title svg,
.flowmo-admin-permission-group svg,
.flowmo-admin-actions svg,
.flowmo-admin-user footer svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-admin-metrics div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.flowmo-admin-metrics small,
.flowmo-admin-release p,
.flowmo-admin-users p,
.flowmo-admin-user small,
.flowmo-admin-actions > span,
.flowmo-admin-users-summary,
.flowmo-admin-control-title small,
.flowmo-admin-permission-group legend strong {
  color: #64748b;
  font-size: 12px;
}

.flowmo-admin-metrics strong {
  color: #0f172a;
  font-size: 22px;
  letter-spacing: 0;
}

.flowmo-admin-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.flowmo-admin-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.flowmo-admin-section-head small {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-admin-section-head p {
  margin: 5px 0 0;
}

.flowmo-admin-release {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.flowmo-admin-release h3,
.flowmo-admin-users h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.flowmo-admin-users {
  display: grid;
  gap: 12px;
}

.flowmo-admin-release textarea {
  resize: vertical;
}

.flowmo-admin-release-notes {
  grid-column: 1 / -1;
}

.flowmo-admin-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.flowmo-admin-search span,
.flowmo-admin-role legend {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.flowmo-admin-release button,
.flowmo-admin-user footer button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  padding: 0 12px;
  font-weight: 900;
}

.flowmo-admin-search input {
  min-width: 0;
  width: 100%;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
  color: #172033;
  font: inherit;
  font-size: 14px;
}

.flowmo-admin-search input:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.16);
}

.flowmo-admin-users-head {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(260px, 1fr) minmax(0, 360px);
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.flowmo-admin-head-spacer {
  min-width: 0;
}

.flowmo-admin-users-title {
  min-width: 0;
  text-align: center;
}

.flowmo-admin-search {
  width: min(360px, 100%);
  display: grid;
  gap: 6px;
  justify-self: end;
}

.flowmo-admin-search span {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.flowmo-admin-search input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
  color: #172033;
  font: inherit;
  font-size: 13px;
}

.flowmo-admin-users-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.flowmo-admin-users-summary strong {
  color: #0f172a;
}

.flowmo-admin-user-list {
  display: grid;
  gap: 10px;
}

.flowmo-admin-user {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(176px, 0.68fr) minmax(130px, 0.52fr) minmax(360px, 1.35fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
}

.flowmo-admin-user[hidden] {
  display: none;
}

.flowmo-admin-user[data-dirty="true"] {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16);
}

.flowmo-admin-user-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.flowmo-admin-user-main > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e6f4f1;
  color: #0f766e;
  font-weight: 900;
}

.flowmo-admin-user-main div,
.flowmo-admin-user-main strong,
.flowmo-admin-user-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-admin-user-main div,
.flowmo-admin-role,
.flowmo-admin-permissions {
  display: grid;
  gap: 7px;
}

.flowmo-admin-role,
.flowmo-admin-permissions {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.flowmo-admin-switch {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  color: #172033;
}

.flowmo-admin-switch input {
  position: absolute;
  opacity: 0;
}

.flowmo-admin-switch > span {
  width: 44px;
  height: 24px;
  display: block;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #e2e8f0;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.flowmo-admin-switch > span::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  margin: 2px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  transition: transform 0.16s ease;
}

.flowmo-admin-switch input:checked + span {
  border-color: #0f766e;
  background: #0f766e;
}

.flowmo-admin-switch input:checked + span::before {
  transform: translateX(20px);
}

.flowmo-admin-switch input:focus-visible + span {
  outline: 3px solid rgba(15, 118, 110, 0.2);
  outline-offset: 2px;
}

.flowmo-admin-switch input:disabled + span {
  border-color: #cbd5e1;
  background: #94a3b8;
  opacity: 0.78;
}

.flowmo-admin-switch strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-admin-switch small {
  grid-column: 2;
  line-height: 1.35;
}

.flowmo-admin-permissions {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.flowmo-admin-control-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flowmo-admin-control-title > span {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.flowmo-admin-control-title div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.flowmo-admin-control-title strong {
  color: #0f172a;
  font-size: 13px;
}

.flowmo-admin-permission-group {
  min-width: 0;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid #edf2f7;
}

.flowmo-admin-permission-group legend {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px 0 0;
}

.flowmo-admin-permission-group legend span {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  background: #ecfdf5;
  color: #0f766e;
}

.flowmo-admin-permission-group[data-tone="finance"] legend span {
  background: #ecfdf5;
  color: #0f766e;
}

.flowmo-admin-permission-group[data-tone="communication"] legend span {
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-admin-permission-group[data-tone="operation"] legend span {
  background: #f5f3ff;
  color: #6d28d9;
}

.flowmo-admin-permission-group[data-tone="admin"] legend span {
  background: #fff7ed;
  color: #c2410c;
}

.flowmo-admin-permission-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flowmo-admin-permission-group label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.flowmo-admin-permission-group label:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.flowmo-admin-permission-group input {
  flex: 0 0 auto;
}

.flowmo-admin-permission-group label span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #0f766e;
}

.flowmo-admin-permission-group label svg {
  width: 14px;
  height: 14px;
}

.flowmo-admin-user footer {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.flowmo-admin-user footer button {
  min-height: 36px;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  padding: 0 12px;
  font-weight: 900;
  white-space: nowrap;
}

.flowmo-admin-user footer button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.flowmo-admin-user footer small {
  min-height: 16px;
  text-align: right;
}

.flowmo-admin-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.flowmo-admin-empty--compact {
  min-height: 38px;
  justify-items: start;
  padding: 10px 12px;
}

.flowmo-admin-empty.error {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.flowmo-admin-empty-filter[hidden] {
  display: none;
}

@keyframes appUpdateNoticeIn {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes flowmoUpdateSweep {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 900px) {
  .app-update-notice {
    top: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-update-notice button {
    display: none;
  }

  .flowmo-admin-metrics,
  .flowmo-admin-release,
  .flowmo-admin-users-head,
  .flowmo-admin-user {
    grid-template-columns: 1fr;
  }

  .flowmo-admin-head-spacer {
    display: none;
  }

  .flowmo-admin-users-title {
    text-align: left;
  }

  .flowmo-admin-search {
    justify-self: stretch;
  }

  .flowmo-admin-release textarea,
  .flowmo-admin-actions {
    grid-column: auto;
  }

  .flowmo-admin-user footer {
    justify-items: start;
  }

  .flowmo-admin-permission-group > div {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.flowmo-admin-modal,
.flowmo-admin-modal * {
  box-sizing: border-box;
}

.flowmo-admin-panel {
  width: min(1160px, calc(100vw - 28px));
  height: min(820px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
}

.flowmo-admin-header {
  min-height: 104px;
  padding: 15px 20px;
}

.flowmo-admin-header h2 {
  font-size: 20px;
  line-height: 1.15;
}

.flowmo-admin-header p {
  max-width: 620px;
  margin-top: 4px;
}

.flowmo-admin-body {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding: 10px 14px 14px;
}

.flowmo-admin-metrics {
  gap: 8px;
}

.flowmo-admin-metrics article {
  min-height: 48px;
  gap: 9px;
  padding: 8px 10px;
}

.flowmo-admin-metrics article > span {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.flowmo-admin-metrics strong {
  font-size: 18px;
}

.flowmo-admin-section {
  min-width: 0;
  gap: 9px;
  padding: 11px 12px;
}

.flowmo-admin-section-head {
  align-items: center;
}

.flowmo-admin-section-head h3,
.flowmo-admin-users h3 {
  font-size: 15px;
  line-height: 1.18;
}

.flowmo-admin-section-head p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.flowmo-admin-release {
  grid-template-columns:
    minmax(118px, 0.72fr)
    minmax(200px, 1.16fr)
    minmax(230px, 1.34fr)
    minmax(170px, 0.9fr)
    minmax(172px, auto);
  gap: 9px 10px;
  align-items: end;
}

.flowmo-admin-release label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.flowmo-admin-release label span,
.flowmo-admin-check,
.flowmo-admin-search span,
.flowmo-admin-role legend {
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.flowmo-admin-release input,
.flowmo-admin-release textarea,
.flowmo-admin-panel select,
.flowmo-admin-search input {
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #ffffff;
  color: #172033;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.flowmo-admin-release textarea {
  resize: none;
  overflow: hidden;
  padding-top: 8px;
}

.flowmo-admin-release input:focus,
.flowmo-admin-release textarea:focus,
.flowmo-admin-panel select:focus,
.flowmo-admin-search input:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.14);
}

.flowmo-admin-release-notes {
  grid-column: auto;
}

.flowmo-admin-actions {
  grid-column: auto;
  align-self: end;
  justify-content: end;
  gap: 8px;
}

.flowmo-admin-check {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px !important;
  margin-right: 0;
  white-space: nowrap;
}

.flowmo-admin-release button,
.flowmo-admin-user footer button {
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.flowmo-admin-users {
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.flowmo-admin-section--release,
.flowmo-admin-release,
[data-admin-release-form] {
  display: none !important;
}

.flowmo-admin-users-head {
  grid-template-columns: minmax(0, 300px) minmax(240px, 1fr) minmax(220px, 320px);
  gap: 10px;
  padding-bottom: 8px;
}

.flowmo-admin-search {
  width: 100%;
}

.flowmo-admin-search input {
  height: 38px;
}

.flowmo-admin-users-summary {
  min-height: 18px;
  font-size: 11px;
  line-height: 1.25;
}

.flowmo-admin-user-list {
  min-height: 0;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.flowmo-admin-user {
  min-width: 0;
  grid-template-columns: minmax(200px, 1.05fr) minmax(128px, 0.54fr) minmax(260px, 1.35fr) minmax(136px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}

.flowmo-admin-user-main {
  align-items: center;
  gap: 9px;
}

.flowmo-admin-user-main > span {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.flowmo-admin-user-main div,
.flowmo-admin-role,
.flowmo-admin-permissions {
  gap: 3px;
}

.flowmo-admin-user-main small,
.flowmo-admin-switch small,
.flowmo-admin-control-title small {
  font-size: 11px;
  line-height: 1.25;
}

.flowmo-admin-role legend,
.flowmo-admin-control-title small {
  font-size: 11px;
}

.flowmo-admin-switch {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
}

.flowmo-admin-switch > span {
  width: 38px;
  height: 22px;
}

.flowmo-admin-switch > span::before {
  width: 16px;
  height: 16px;
}

.flowmo-admin-switch input:checked + span::before {
  transform: translateX(16px);
}

.flowmo-admin-control-title > span,
.flowmo-admin-permission-group legend span {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.flowmo-admin-control-title strong {
  font-size: 12px;
}

.flowmo-admin-permission-group {
  gap: 4px;
  padding-top: 5px;
}

.flowmo-admin-permission-group legend {
  gap: 6px;
}

.flowmo-admin-permission-group legend strong {
  font-size: 11px;
}

.flowmo-admin-permission-group > div {
  gap: 5px;
}

.flowmo-admin-permission-group label {
  min-height: 26px;
  gap: 5px;
  padding: 0 7px;
  font-size: 12px;
}

.flowmo-admin-user footer {
  gap: 3px;
  justify-items: end;
}

.flowmo-admin-user footer small {
  min-height: 14px;
  font-size: 11px;
}

.flowmo-admin-panel select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #0f766e 50%),
    linear-gradient(135deg, #0f766e 50%, transparent 50%),
    linear-gradient(180deg, #ffffff, #ffffff);
  background-position:
    calc(100% - 18px) 15px,
    calc(100% - 13px) 15px,
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 100%;
  background-repeat: no-repeat;
}

.flowmo-admin-panel option {
  color: #172033;
  background: #ffffff;
}

.flowmo-admin-panel [role="menu"],
.flowmo-admin-dropdown,
.flowmo-admin-menu {
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

.flowmo-admin-panel [role="menu"] button,
.flowmo-admin-dropdown button,
.flowmo-admin-menu button {
  min-height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.flowmo-admin-panel [role="menu"] button:hover,
.flowmo-admin-panel [role="menu"] button:focus-visible,
.flowmo-admin-dropdown button:hover,
.flowmo-admin-dropdown button:focus-visible,
.flowmo-admin-menu button:hover,
.flowmo-admin-menu button:focus-visible {
  background: #ecfdf5;
  color: #0f766e;
  outline: none;
}

.flowmo-admin-save-button,
.flowmo-admin-release button.flowmo-admin-save-button,
.flowmo-admin-user footer button.flowmo-admin-save-button {
  min-height: 36px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  box-shadow: none;
  font-weight: 900;
}

.flowmo-admin-save-button:hover,
.flowmo-admin-save-button:focus-visible,
.flowmo-admin-release button.flowmo-admin-save-button:hover,
.flowmo-admin-release button.flowmo-admin-save-button:focus-visible,
.flowmo-admin-user footer button.flowmo-admin-save-button:hover,
.flowmo-admin-user footer button.flowmo-admin-save-button:focus-visible {
  border-color: #5eead4;
  background: #d1fae5;
  color: #065f46;
  outline: none;
  transform: translateY(-1px);
}

.flowmo-admin-save-button:disabled,
.flowmo-admin-release button.flowmo-admin-save-button:disabled,
.flowmo-admin-user footer button.flowmo-admin-save-button:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.flowmo-admin-save-button svg {
  color: currentColor;
}

.flowmo-admin-user-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1px;
}

.flowmo-admin-user-toolbar button {
  min-height: 30px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.flowmo-admin-user-toolbar button:hover,
.flowmo-admin-user-toolbar button:focus-visible {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
  outline: none;
}

.flowmo-admin-user-toolbar button[aria-pressed="true"] {
  border-color: #99f6e4;
  background: #ecfdf5;
  color: #047857;
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12);
}

.flowmo-admin-metrics article,
.flowmo-admin-section,
.flowmo-admin-user {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.flowmo-admin-user {
  background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.flowmo-admin-user:hover {
  border-color: #b5eee4;
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.08);
  transform: none;
}

.flowmo-admin-user {
  display: block;
  overflow: hidden;
  padding: 0;
}

.flowmo-admin-user-summary {
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
  list-style: none;
}

.flowmo-admin-user-summary::-webkit-details-marker {
  display: none;
}

.flowmo-admin-user-summary:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.14);
  outline-offset: -3px;
}

.flowmo-admin-user[open] .flowmo-admin-user-summary {
  border-bottom: 1px solid #edf2f7;
  background: #fbfefd;
}

.flowmo-admin-user-summary .flowmo-admin-user-main > span {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.flowmo-admin-user-summary .flowmo-admin-user-main strong {
  font-size: 13px;
  line-height: 1.12;
}

.flowmo-admin-user-summary .flowmo-admin-user-main small {
  max-width: 420px;
  font-size: 10px;
  line-height: 1.12;
}

.flowmo-admin-user-badges {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.flowmo-admin-user-badges span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.flowmo-admin-user-badges span[data-tone="admin"] {
  border-color: #99f6e4;
  background: #ecfdf5;
  color: #047857;
}

.flowmo-admin-user-badges span[data-tone="user"] {
  border-color: #dbe3ef;
  background: #f8fafc;
  color: #475569;
}

.flowmo-admin-user-badges span[data-tone="custom"] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-admin-user-details {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(132px, 0.44fr) minmax(0, 1fr) minmax(136px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #ffffff;
}

.flowmo-admin-user-details .flowmo-admin-role,
.flowmo-admin-user-details .flowmo-admin-permissions {
  align-self: stretch;
}

.flowmo-admin-user-main,
.flowmo-admin-role,
.flowmo-admin-permissions {
  min-width: 0;
}

.flowmo-admin-user-main strong,
.flowmo-admin-control-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-admin-permissions {
  border-left: 1px solid #edf2f7;
  padding-left: 10px;
}

.flowmo-admin-permission-group label {
  border-color: #dbeafe;
  background: #ffffff;
}

.flowmo-admin-permission-group label:has(input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #0f3f83;
}

.flowmo-admin-users {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.flowmo-admin-user-table-head {
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(92px, 0.26fr) minmax(104px, 0.3fr) minmax(0, 1.42fr) minmax(74px, auto);
  align-items: center;
  gap: 12px;
  border: 1px solid #e4edf5;
  border-radius: 8px 8px 0 0;
  background: #f3fbfb;
  color: #64748b;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.flowmo-admin-user-list {
  gap: 0;
  align-content: start;
  align-items: start;
  overflow: auto;
  border: 1px solid #e4edf5;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #ffffff;
  padding: 0;
}

.flowmo-admin-user {
  min-height: 58px;
  display: grid;
  align-self: start;
  width: 100%;
  grid-template-columns: minmax(240px, 0.82fr) minmax(92px, 0.26fr) minmax(104px, 0.3fr) minmax(0, 1.42fr) minmax(74px, auto);
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 8px 10px;
}

.flowmo-admin-user:last-child {
  border-bottom: 0;
}

.flowmo-admin-user:hover {
  border-color: #edf2f7;
  background: #fbfefd;
  box-shadow: none;
}

.flowmo-admin-user[data-save-state="saving"] {
  background: #f8fffd;
}

.flowmo-admin-user[data-save-state="error"] {
  background: #fff7f8;
}

.flowmo-admin-user-main {
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.flowmo-admin-user-main > span,
.flowmo-admin-user-summary .flowmo-admin-user-main > span {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 8px;
}

.flowmo-admin-user-main strong,
.flowmo-admin-user-summary .flowmo-admin-user-main strong {
  font-size: 13px;
  line-height: 1.15;
}

.flowmo-admin-user-main small,
.flowmo-admin-user-summary .flowmo-admin-user-main small {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.15;
}

.flowmo-admin-usage-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.flowmo-admin-usage-cell small {
  display: none;
}

.flowmo-admin-usage-cell strong {
  min-width: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.flowmo-admin-usage-cell[data-tone="ai"] strong {
  color: #4338ca;
}

.flowmo-admin-usage-cell[data-tone="tokens"] strong {
  color: #1d4ed8;
}

.flowmo-admin-user > .flowmo-admin-permissions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-left: 0;
  padding-left: 0;
}

.flowmo-admin-permission-chip {
  position: relative;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease;
}

.flowmo-admin-permission-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.flowmo-admin-permission-chip span {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.flowmo-admin-permission-chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-admin-permission-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowmo-admin-permission-chip:hover {
  border-color: #b5eee4;
  background: #f8fffd;
  color: #0f766e;
}

.flowmo-admin-permission-chip:has(input:focus-visible) {
  outline: 3px solid rgba(15, 118, 110, 0.14);
  outline-offset: 2px;
}

.flowmo-admin-permission-chip:has(input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #0f3f83;
}

.flowmo-admin-permission-chip--admin:has(input:checked),
.flowmo-admin-permission-chip[data-tone="admin"]:has(input:checked) {
  border-color: #99f6e4;
  background: #ecfdf5;
  color: #047857;
}

.flowmo-admin-permission-chip[data-tone="finance"]:has(input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.flowmo-admin-permission-chip[data-tone="communication"]:has(input:checked) {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.flowmo-admin-permission-chip[data-tone="operation"]:has(input:checked) {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.flowmo-admin-permission-chip:has(input:not(:checked)) {
  color: #64748b;
}

.flowmo-admin-permission-chip:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.66;
}

.flowmo-admin-auto-status {
  min-height: 16px;
  min-width: 70px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.flowmo-admin-user[data-save-state="saving"] .flowmo-admin-auto-status {
  color: #0f766e;
}

.flowmo-admin-user[data-save-state="saved"] .flowmo-admin-auto-status {
  color: #047857;
}

.flowmo-admin-user[data-save-state="error"] .flowmo-admin-auto-status {
  color: #be123c;
}

@media (max-width: 1120px) {
  .flowmo-admin-release {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flowmo-admin-actions {
    grid-column: 1 / -1;
  }

  .flowmo-admin-user {
    grid-template-columns: minmax(180px, 1.05fr) minmax(82px, 0.34fr) minmax(96px, 0.4fr) minmax(220px, 1.35fr) minmax(92px, auto);
  }
}

@media (max-width: 900px) {
  .flowmo-admin-panel {
    height: auto;
    min-height: min(720px, calc(100vh - 24px));
  }

  .flowmo-admin-body {
    overflow: auto;
  }
}

@media (max-width: 1120px) {
  .flowmo-admin-user-summary {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, auto) auto;
  }

  .flowmo-admin-user-details {
    grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
  }

  .flowmo-admin-user-details footer {
    grid-column: 1 / -1;
    justify-items: end;
  }
}

@media (max-width: 900px) {
  .flowmo-admin-user-summary,
  .flowmo-admin-user-details,
  .flowmo-admin-user,
  .flowmo-admin-user-table-head {
    grid-template-columns: 1fr;
  }

  .flowmo-admin-user-table-head {
    display: none;
  }

  .flowmo-admin-user-badges {
    justify-content: flex-start;
  }

  .flowmo-admin-user-details footer {
    justify-items: start;
  }

  .flowmo-admin-auto-status {
    text-align: left;
  }

  .flowmo-admin-usage-cell {
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    align-items: center;
  }

  .flowmo-admin-usage-cell small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }
}

body.flowmo-intro-open {
  overflow: hidden;
}

.flowmo-intro,
.flowmo-intro *,
.flowmo-intro *::before,
.flowmo-intro *::after {
  box-sizing: border-box;
}

.flowmo-intro[hidden] {
  display: none !important;
}

.flowmo-intro {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(circle at 50% 48%, rgba(29, 78, 216, 0.22), transparent 34%),
    radial-gradient(circle at 16% 12%, rgba(34, 211, 238, 0.12), transparent 28%),
    linear-gradient(145deg, #02040a 0%, #07101c 44%, #030710 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  isolation: isolate;
}

.flowmo-intro::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, #000 0%, #000 54%, transparent 78%);
  pointer-events: none;
}

.flowmo-intro[data-state="closing"] {
  opacity: 0;
  transition: opacity 420ms ease;
}

.flowmo-intro-backdrop,
.flowmo-intro-stage {
  position: absolute;
  inset: 0;
}

.flowmo-intro-backdrop {
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.flowmo-intro-orbit {
  position: absolute;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 50%;
  filter: blur(0.2px);
  opacity: 0.78;
  transform: rotateX(66deg) rotateZ(-18deg);
}

.flowmo-intro-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 28px rgba(96, 165, 250, 0.74);
}

.orbit-a {
  width: 820px;
  height: 820px;
  left: calc(50% - 410px);
  top: calc(50% - 410px);
  animation: flowmoIntroOrbit 18s linear infinite;
}

.orbit-a::after {
  top: 12%;
  left: 76%;
}

.orbit-b {
  width: 1120px;
  height: 1120px;
  left: calc(50% - 560px);
  top: calc(50% - 560px);
  opacity: 0.46;
  animation: flowmoIntroOrbit 24s linear infinite reverse;
}

.orbit-b::after {
  bottom: 18%;
  left: 24%;
  background: #22d3ee;
}

.orbit-c {
  width: 560px;
  height: 560px;
  left: calc(50% - 280px);
  top: calc(50% - 280px);
  opacity: 0.36;
  animation: flowmoIntroOrbit 14s linear infinite;
}

.orbit-c::after {
  top: 45%;
  right: 0;
  background: #e2e8f0;
}

.flowmo-intro-beam {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.06) 28%, rgba(147, 197, 253, 0.94) 50%, rgba(34, 211, 238, 0.2) 64%, transparent 100%);
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8));
}

.flowmo-intro[data-state="running"] .flowmo-intro-beam {
  animation: flowmoIntroBeam 36s ease-in-out both;
}

.flowmo-intro-stage {
  width: min(1180px, calc(100vw - 56px));
  height: min(720px, calc(100vh - 88px));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 1500px;
  transform-style: preserve-3d;
}

.flowmo-intro-stage::before,
.flowmo-intro-stage::after {
  content: "";
  position: absolute;
  inset: 13% 8%;
  border-radius: 999px;
  pointer-events: none;
}

.flowmo-intro-stage::before {
  opacity: 0.28;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.52), transparent 58%);
  filter: blur(44px);
}

.flowmo-intro-stage::after {
  inset: auto 12% 4%;
  height: 120px;
  opacity: 0.24;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.92), transparent 68%);
  filter: blur(18px);
}

.flowmo-intro-chaos,
.flowmo-intro-copy,
.flowmo-intro-core,
.flowmo-intro-product,
.flowmo-intro-finale {
  position: absolute;
  inset: 0;
}

.intro-float-card {
  position: absolute;
  width: 226px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.42)),
    rgba(8, 13, 23, 0.72);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transform-style: preserve-3d;
  opacity: 0;
}

.flowmo-intro[data-state="running"] .intro-float-card {
  animation:
    flowmoIntroCardTimeline 36s cubic-bezier(0.22, 1, 0.36, 1) both,
    flowmoIntroCardDrift 7s ease-in-out infinite alternate;
  animation-delay: 0s, var(--float-delay);
}

.intro-float-card span,
.intro-float-card small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.intro-float-card strong {
  display: block;
  margin: 8px 0 6px;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.18;
}

.intro-float-card::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  margin-bottom: 13px;
  background: linear-gradient(90deg, #60a5fa, #22d3ee);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.46);
}

.card-mail { --x: -430px; --y: -190px; --start-x: -620px; --start-y: -260px; --mid-x: -108px; --mid-y: -48px; --r: -7deg; --float-delay: -1s; left: 50%; top: 50%; }
.card-calendar { --x: 265px; --y: -210px; --start-x: 500px; --start-y: -310px; --mid-x: 66px; --mid-y: -53px; --r: 8deg; --float-delay: -2.2s; left: 50%; top: 50%; }
.card-files { --x: -500px; --y: 80px; --start-x: -650px; --start-y: 190px; --mid-x: -125px; --mid-y: 20px; --r: 6deg; --float-delay: -3.4s; left: 50%; top: 50%; }
.card-tasks { --x: 340px; --y: 72px; --start-x: 560px; --start-y: 180px; --mid-x: 85px; --mid-y: 18px; --r: -6deg; --float-delay: -4.2s; left: 50%; top: 50%; }
.card-automation { --x: -160px; --y: 230px; --start-x: -280px; --start-y: 410px; --mid-x: -40px; --mid-y: 58px; --r: -4deg; --float-delay: -5.4s; left: 50%; top: 50%; }
.card-ai { --x: 100px; --y: -22px; --start-x: 160px; --start-y: -110px; --mid-x: 25px; --mid-y: -6px; --r: 4deg; --float-delay: -6s; left: 50%; top: 50%; }

.flowmo-intro-copy {
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.flowmo-intro-copy p,
.flowmo-intro-copy h1,
.flowmo-intro-copy h2 {
  margin: 0;
}

.intro-kicker {
  position: absolute;
  top: 35%;
  width: min(520px, 92%);
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 800;
  opacity: 0;
}

.flowmo-intro-copy h1,
.flowmo-intro-copy h2 {
  position: absolute;
  top: 42%;
  width: min(760px, 94%);
  color: #ffffff;
  font-size: 46px;
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: 0;
  text-wrap: balance;
  opacity: 0;
  text-shadow: 0 22px 70px rgba(96, 165, 250, 0.18);
}

.flowmo-intro-copy #flowmoIntroSubtitle {
  position: absolute;
  top: 56%;
  width: min(620px, 92%);
  color: #a8b4c6;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 650;
  opacity: 0;
}

.flowmo-intro[data-state="running"] .intro-kicker {
  animation: flowmoIntroKicker 36s ease both;
}

.flowmo-intro[data-state="running"] .flowmo-intro-copy h1,
.flowmo-intro[data-state="running"] .flowmo-intro-copy h2 {
  animation: flowmoIntroTitle 36s ease both;
}

.flowmo-intro[data-state="running"] .flowmo-intro-copy #flowmoIntroSubtitle {
  animation: flowmoIntroSubtitle 36s ease both;
}

.flowmo-intro-core {
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(80px) scale(0.84);
}

.flowmo-intro[data-state="running"] .flowmo-intro-core {
  animation: flowmoIntroCore 36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.intro-core-ring,
.intro-core-glow {
  position: absolute;
  border-radius: 50%;
}

.intro-core-ring {
  width: 290px;
  height: 290px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 62%);
  box-shadow: inset 0 0 60px rgba(37, 99, 235, 0.12), 0 0 90px rgba(29, 78, 216, 0.2);
}

.intro-core-glow {
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.36), rgba(34, 211, 238, 0.1) 38%, transparent 68%);
  filter: blur(18px);
}

.intro-core-logo {
  position: relative;
  width: 188px;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px rgba(37, 99, 235, 0.44));
}

.intro-core-logo.is-missing {
  display: none;
}

.flowmo-intro-core::after {
  content: "Flowmo";
  position: absolute;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  opacity: 0;
}

.flowmo-intro[data-asset-fallback="true"] .flowmo-intro-core::after {
  opacity: 1;
}

.intro-node {
  position: absolute;
  display: inline-grid;
  place-items: center;
  min-width: 82px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(147, 197, 253, 0.26);
  border-radius: 999px;
  background: rgba(8, 13, 23, 0.74);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 900;
}

.intro-node::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 1px;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.58), transparent);
  transform-origin: left center;
  z-index: -1;
}

.node-email { transform: translate(-260px, -122px); }
.node-calendar { transform: translate(218px, -132px); }
.node-files { transform: translate(-292px, 72px); }
.node-tasks { transform: translate(254px, 72px); }
.node-automation { transform: translate(-118px, 186px); }
.node-ai { transform: translate(122px, 186px); }
.node-email::before { transform: rotate(25deg); }
.node-calendar::before { transform: rotate(156deg); }
.node-files::before { transform: rotate(-20deg); }
.node-tasks::before { transform: rotate(198deg); }
.node-automation::before { transform: rotate(-58deg); }
.node-ai::before { transform: rotate(232deg); }

.flowmo-intro-product {
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(56px) rotateX(12deg) rotateY(-7deg) scale(0.88);
  transform-style: preserve-3d;
}

.flowmo-intro[data-state="running"] .flowmo-intro-product {
  animation: flowmoIntroProduct 36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.intro-product-shell {
  width: min(850px, 92%);
  min-height: 430px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 20%, rgba(37, 99, 235, 0.16), transparent 36%),
    linear-gradient(180deg, #0b1220 0%, #060b14 100%);
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.54), 0 0 120px rgba(37, 99, 235, 0.22);
  transform-style: preserve-3d;
}

.intro-product-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.55);
}

.intro-product-sidebar span {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.55));
}

.intro-product-sidebar span:first-child {
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.95), rgba(34, 211, 238, 0.38));
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.32);
}

.intro-product-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 26px;
  gap: 24px;
}

.intro-product-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #e2e8f0;
  font-weight: 900;
  font-size: 15px;
}

.intro-product-topbar strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 999px;
  padding: 0 12px;
  color: #bff7ff;
  background: rgba(34, 211, 238, 0.08);
  font-size: 12px;
}

.intro-product-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 20px;
}

.intro-inbox-preview,
.intro-ai-preview {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.intro-inbox-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.intro-inbox-preview article {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(2, 6, 23, 0.44);
}

.intro-inbox-preview span,
.intro-ai-preview li {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.intro-inbox-preview strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
}

.intro-ai-preview {
  padding: 18px;
}

.intro-prompt-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(2, 6, 23, 0.72));
  box-shadow: 0 18px 50px rgba(37, 99, 235, 0.18);
  font-size: 15px;
  font-weight: 900;
}

.intro-ai-preview ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.intro-ai-preview li {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 36px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.34);
  color: #dbeafe;
  opacity: 0;
  transform: translateY(12px);
}

.intro-ai-preview li::before {
  content: "";
  position: absolute;
  left: 13px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.68);
}

.flowmo-intro[data-state="running"] .intro-ai-preview li {
  animation: flowmoIntroResult 36s ease both;
}

.flowmo-intro[data-state="running"] .intro-ai-preview li:nth-child(2) { animation-delay: 350ms; }
.flowmo-intro[data-state="running"] .intro-ai-preview li:nth-child(3) { animation-delay: 700ms; }
.flowmo-intro[data-state="running"] .intro-ai-preview li:nth-child(4) { animation-delay: 1050ms; }

.intro-ecosystem {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(980px, 94%);
  height: 520px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.intro-ecosystem::before {
  content: "";
  position: absolute;
  inset: 20% 4%;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 50%;
}

.intro-ecosystem span {
  position: absolute;
  min-width: 92px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(2, 6, 23, 0.76);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
}

.flowmo-intro[data-state="running"] .intro-ecosystem span {
  animation: flowmoIntroEcoNode 36s ease both;
}

.intro-ecosystem span:nth-child(1) { left: 6%; top: 32%; }
.intro-ecosystem span:nth-child(2) { left: 18%; top: 8%; }
.intro-ecosystem span:nth-child(3) { right: 18%; top: 8%; }
.intro-ecosystem span:nth-child(4) { right: 6%; top: 32%; }
.intro-ecosystem span:nth-child(5) { right: 16%; bottom: 7%; }
.intro-ecosystem span:nth-child(6) { left: 15%; bottom: 7%; }
.intro-ecosystem span:nth-child(7) { left: 50%; bottom: -2%; transform: translateX(-50%); }

.flowmo-intro-finale {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: scale(0.92);
}

.flowmo-intro[data-state="running"] .flowmo-intro-finale {
  animation: flowmoIntroFinale 36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.flowmo-intro-finale img {
  width: 230px;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 24px 70px rgba(37, 99, 235, 0.5));
}

.flowmo-intro-finale img.is-missing {
  display: none;
}

.flowmo-intro-finale p {
  margin: 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 900;
}

.flowmo-intro-finale strong {
  color: #93c5fd;
  font-size: 15px;
  line-height: 1.4;
}

.flowmo-intro-actions {
  position: fixed;
  right: 28px;
  bottom: 26px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
}

.flowmo-intro-actions button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0 15px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.flowmo-intro-actions button:hover {
  transform: translateY(-1px);
}

.flowmo-intro-actions button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}

.flowmo-intro-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flowmo-intro-skip {
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(18px);
}

.flowmo-intro-enter {
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.34);
}

.settings-intro-replay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-intro-replay div {
  display: grid;
  gap: 4px;
}

.settings-intro-replay strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.settings-intro-replay span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

@keyframes flowmoIntroOrbit {
  to {
    transform: rotateX(66deg) rotateZ(342deg);
  }
}

@keyframes flowmoIntroBeam {
  0%, 21%, 38%, 100% {
    opacity: 0;
    transform: translateX(-18%) scaleX(0.76);
  }
  26%, 33% {
    opacity: 1;
    transform: translateX(18%) scaleX(1);
  }
}

@keyframes flowmoIntroCardTimeline {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(var(--start-x), var(--start-y), -40px) rotate(var(--r)) scale(0.88);
  }
  8%, 22% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1);
  }
  31%, 43% {
    opacity: 0.68;
    filter: blur(0.4px);
    transform: translate3d(var(--mid-x), var(--mid-y), -28px) rotate(0deg) scale(0.92);
  }
  52%, 100% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 0, -160px) rotate(0deg) scale(0.5);
  }
}

@keyframes flowmoIntroCardDrift {
  from {
    margin-top: -8px;
  }
  to {
    margin-top: 8px;
  }
}

@keyframes flowmoIntroKicker {
  0%, 5% {
    opacity: 0;
    transform: translateY(16px);
  }
  10%, 20% {
    opacity: 1;
    transform: translateY(0);
  }
  27%, 100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes flowmoIntroTitle {
  0%, 22% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(18px) scale(0.98);
  }
  30%, 43% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  51%, 100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-18px) scale(0.98);
  }
}

@keyframes flowmoIntroSubtitle {
  0%, 26% {
    opacity: 0;
    transform: translateY(14px);
  }
  33%, 44% {
    opacity: 1;
    transform: translateY(0);
  }
  52%, 100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes flowmoIntroCore {
  0%, 31% {
    opacity: 0;
    filter: blur(14px);
    transform: translateZ(80px) scale(0.72);
  }
  41%, 57% {
    opacity: 1;
    filter: blur(0);
    transform: translateZ(80px) scale(1);
  }
  66%, 100% {
    opacity: 0;
    filter: blur(10px);
    transform: translateZ(20px) scale(0.64);
  }
}

@keyframes flowmoIntroProduct {
  0%, 48% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(68px) rotateX(12deg) rotateY(-7deg) scale(0.84);
  }
  58%, 78% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
  }
  86%, 100% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-44px) rotateX(0deg) rotateY(0deg) scale(0.92);
  }
}

@keyframes flowmoIntroResult {
  0%, 59% {
    opacity: 0;
    transform: translateY(12px);
  }
  65%, 82% {
    opacity: 1;
    transform: translateY(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes flowmoIntroEcoNode {
  0%, 64% {
    opacity: 0;
    filter: blur(8px);
  }
  70%, 84% {
    opacity: 1;
    filter: blur(0);
  }
  91%, 100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes flowmoIntroFinale {
  0%, 80% {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.88);
  }
  88%, 100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.flowmo-intro[data-motion="reduced"] .flowmo-intro-orbit,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-beam,
.flowmo-intro[data-motion="reduced"] .intro-float-card,
.flowmo-intro[data-motion="reduced"] .intro-kicker,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-copy h1,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-copy h2,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-copy #flowmoIntroSubtitle,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-core,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-product,
.flowmo-intro[data-motion="reduced"] .flowmo-intro-finale,
.flowmo-intro[data-motion="reduced"] .intro-ai-preview li,
.flowmo-intro[data-motion="reduced"] .intro-ecosystem span {
  animation: none !important;
  transition: none !important;
}

.flowmo-intro[data-motion="reduced"] .flowmo-intro-copy {
  display: none;
}

.flowmo-intro[data-motion="reduced"] .flowmo-intro-chaos {
  opacity: 0.18;
}

.flowmo-intro[data-motion="reduced"] .intro-float-card {
  opacity: 0.42;
  transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(0deg) scale(0.86);
}

.flowmo-intro[data-motion="reduced"] .flowmo-intro-product {
  opacity: 0.78;
  transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(0.86);
}

.flowmo-intro[data-motion="reduced"] .flowmo-intro-finale {
  opacity: 1;
  transform: translateY(-170px) scale(0.92);
}

.flowmo-intro[data-motion="reduced"] .intro-ai-preview li,
.flowmo-intro[data-motion="reduced"] .intro-ecosystem span {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .flowmo-intro-stage {
    width: calc(100vw - 32px);
    height: calc(100vh - 96px);
  }

  .flowmo-intro-copy h1,
  .flowmo-intro-copy h2 {
    font-size: 36px;
  }

  .intro-kicker {
    font-size: 16px;
  }

  .intro-product-shell {
    width: min(720px, 94%);
    min-height: 380px;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .intro-product-main {
    padding: 20px;
  }

  .intro-product-grid {
    grid-template-columns: 1fr;
  }

  .intro-inbox-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .intro-inbox-preview article {
    min-height: 64px;
  }

  .intro-ecosystem {
    display: none;
  }
}

@media (max-width: 680px) {
  .flowmo-intro {
    align-items: stretch;
  }

  .flowmo-intro-stage {
    width: calc(100vw - 20px);
    height: calc(100vh - 104px);
  }

  .flowmo-intro-copy h1,
  .flowmo-intro-copy h2 {
    top: 34%;
    font-size: 29px;
  }

  .flowmo-intro-copy #flowmoIntroSubtitle {
    top: 50%;
    font-size: 14px;
  }

  .intro-kicker {
    top: 10%;
    font-size: 14px;
  }

  .intro-float-card {
    width: 190px;
    min-height: 96px;
    padding: 13px;
  }

  .card-mail { --x: -178px; --y: -212px; --start-x: -260px; --start-y: -300px; --mid-x: -45px; --mid-y: -53px; }
  .card-calendar { --x: -10px; --y: -232px; --start-x: 84px; --start-y: -320px; --mid-x: -3px; --mid-y: -58px; }
  .card-files { --x: -178px; --y: -68px; --start-x: -260px; --start-y: -40px; --mid-x: -45px; --mid-y: -17px; }
  .card-tasks { --x: -10px; --y: -56px; --start-x: 78px; --start-y: -24px; --mid-x: -3px; --mid-y: -14px; }
  .card-automation { --x: -166px; --y: 102px; --start-x: -220px; --start-y: 180px; --mid-x: -42px; --mid-y: 26px; }
  .card-ai { --x: -10px; --y: 112px; --start-x: 78px; --start-y: 190px; --mid-x: -3px; --mid-y: 28px; }

  .intro-core-ring {
    width: 236px;
    height: 236px;
  }

  .intro-core-logo {
    width: 150px;
  }

  .intro-node {
    min-width: 68px;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .node-email { transform: translate(-138px, -106px); }
  .node-calendar { transform: translate(74px, -110px); }
  .node-files { transform: translate(-156px, 52px); }
  .node-tasks { transform: translate(96px, 54px); }
  .node-automation { transform: translate(-100px, 138px); }
  .node-ai { transform: translate(54px, 140px); }

  .intro-node::before {
    width: 64px;
  }

  .intro-product-shell {
    width: min(420px, 96%);
    min-height: 410px;
    grid-template-columns: 1fr;
  }

  .intro-product-sidebar {
    display: none;
  }

  .intro-product-main {
    padding: 17px;
    gap: 16px;
  }

  .intro-product-grid,
  .intro-inbox-preview {
    grid-template-columns: 1fr;
  }

  .intro-inbox-preview article:nth-child(n+3) {
    display: none;
  }

  .intro-ai-preview li {
    min-height: 36px;
  }

  .flowmo-intro-finale img {
    width: 186px;
  }

  .flowmo-intro-finale p {
    font-size: 24px;
  }

  .flowmo-intro-actions {
    right: 14px;
    bottom: 14px;
    left: 14px;
    justify-content: stretch;
  }

  .flowmo-intro-actions button {
    flex: 1 1 0;
    padding: 0 10px;
    font-size: 12px;
  }

  .settings-intro-replay {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final overrides for the automation builder redesign. Kept at EOF so the new canvas wins over legacy builder rules. */
.automation-workspace:has(.flowmo-automation-builder) .automation-hero {
  display: none;
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder {
  min-height: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(59, 130, 246, 0.16), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(16, 185, 129, 0.18), transparent 34%),
    radial-gradient(circle at 88% 86%, rgba(168, 85, 247, 0.13), transparent 34%),
    linear-gradient(135deg, #f8fdff 0%, #f7fffb 48%, #fbf8ff 100%);
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.16) 1px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(115deg, transparent 0 18%, rgba(59, 130, 246, 0.06) 34%, transparent 52% 100%);
  opacity: 0.72;
  animation: flowmoCanvasDotsDrift 18s ease-in-out infinite alternate;
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder::after {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 125deg at 18% 45%, transparent, rgba(20, 184, 166, 0.12), transparent 20%),
    conic-gradient(from 290deg at 92% 26%, transparent, rgba(96, 165, 250, 0.12), transparent 18%),
    conic-gradient(from 10deg at 72% 92%, transparent, rgba(168, 85, 247, 0.1), transparent 18%);
  filter: blur(8px);
  opacity: 0.85;
  animation: flowmoBuilderAura 12s ease-in-out infinite alternate;
}

.automation-workspace .flowmo-automation-stage.flowmo-automation-stage--builder {
  min-height: 0;
  display: block;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder {
  position: relative;
  min-height: 100%;
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 30px clamp(18px, 4vw, 56px) 34px;
  border: 1px solid rgba(203, 213, 225, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
    radial-gradient(circle at 12% 8%, rgba(20, 184, 166, 0.08), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(96, 165, 250, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: auto;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 0% 0%, var(--flowmo-block-glow, rgba(20, 184, 166, 0.08)), transparent 42%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  padding: 16px 92px 16px 16px;
  animation: flowmoNodeReveal 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block--action-card {
  animation-delay: calc(80ms * var(--flowmo-action-index, 0));
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block:hover,
.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block:focus-visible,
.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active {
  border-color: rgba(59, 130, 246, 0.48);
  box-shadow:
    0 22px 52px rgba(59, 130, 246, 0.14),
    0 0 0 4px rgba(59, 130, 246, 0.08);
  outline: none;
  transform: translateY(-2px);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active::after {
  inset: auto auto -1px 18px;
  width: calc(100% - 36px);
  height: 3px;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--flowmo-icon-bg, linear-gradient(135deg, #ede9fe, #dbeafe));
  color: var(--flowmo-icon-color, #7c3aed);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block small {
  color: #0f766e;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block strong {
  font-size: 15px;
  font-weight: 950;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block p {
  max-width: 100%;
  font-size: 12px;
  white-space: nowrap;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-status {
  position: absolute;
  top: 16px;
  right: 46px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-delete {
  top: 14px;
  right: 14px;
  border-radius: 10px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder[data-action-count="1"] .flowmo-flow-actions::before,
.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder[data-action-count="0"] .flowmo-flow-actions::before {
  left: 50%;
  right: auto;
  width: 2px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-canvas-toolrail {
  position: absolute;
  top: 236px;
  left: 22px;
  margin: 0;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-canvas-minimap {
  position: absolute;
  top: 58px;
  right: 54px;
  margin: 0;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block--action-card {
  min-height: 108px;
  padding-right: 48px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block--action-card strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.settings-modal.flowmo-automation-config-modal {
  width: min(720px, calc(100vw - 34px));
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.98)),
    radial-gradient(circle at 8% 0%, rgba(20, 184, 166, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 30%);
  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.18);
  animation: flowmoModalRise 220ms ease-out both;
}

.flowmo-automation-config-modal .modal-header {
  min-height: 92px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.1), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(139, 92, 246, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.62);
}

.flowmo-automation-config-modal .flowmo-config-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.flowmo-automation-config-modal .flowmo-config-title-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #ccfbf1, #dbeafe);
  color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 14px 24px rgba(15, 118, 110, 0.08);
}

.flowmo-automation-config-modal .flowmo-config-title-icon--action,
.flowmo-automation-config-modal .flowmo-config-title-icon--add {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #2563eb;
}

.flowmo-automation-config-modal .flowmo-config-title-icon--trigger {
  background: linear-gradient(135deg, #f3e8ff, #dbeafe);
  color: #7c3aed;
}

.flowmo-automation-config-modal .flowmo-config-title-icon svg {
  width: 24px;
  height: 24px;
}

.flowmo-automation-config-modal .modal-header h2 {
  font-size: 20px;
  font-weight: 950;
}

.flowmo-automation-config-modal .modal-header .icon-button {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
}

.flowmo-automation-config-form {
  gap: 16px;
  padding: 18px 20px 0;
  background: rgba(255, 255, 255, 0.72);
}

.flowmo-automation-config-form input,
.flowmo-automation-config-form select,
.flowmo-automation-config-form textarea,
.flowmo-select-trigger {
  min-height: 44px;
  border-radius: 12px;
}

.flowmo-automation-config-modal .modal-actions {
  margin: 4px -20px 0;
  padding: 14px 20px 18px;
  background: rgba(248, 250, 252, 0.78);
}

.flowmo-automation-config-modal .primary-button {
  border-color: rgba(5, 150, 105, 0.34);
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.18);
}

@media (max-width: 1120px) {
  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder {
    padding: 22px 14px 28px;
  }
}

@media (max-width: 720px) {
  .automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder {
    padding: 10px;
  }

  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px 48px 14px 14px;
  }

  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-status {
    position: static;
    width: max-content;
    grid-column: 2;
    margin-top: 8px;
  }
}

/* Minimal automation refresh: calmer surfaces, explicit create card, and uncluttered builder canvas. */
.automation-workspace {
  background:
    radial-gradient(circle at 14% 10%, rgba(20, 184, 166, 0.11), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(59, 130, 246, 0.09), transparent 28%),
    linear-gradient(135deg, #fbfeff 0%, #f8fcfb 54%, #fbfbff 100%);
}

.automation-workspace::before {
  opacity: 0.32;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(20, 184, 166, 0.035) 36%, transparent 58% 100%),
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.08) 1px, transparent 1.6px) 0 0 / 30px 30px;
  animation: automationBackgroundDrift 34s ease-in-out infinite alternate;
}

.automation-workspace::after {
  opacity: 0.18;
  background:
    radial-gradient(circle at 10% 70%, rgba(20, 184, 166, 0.18), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(99, 102, 241, 0.14), transparent 28%);
  animation: flowmoBuilderAura 18s ease-in-out infinite alternate;
}

.automation-workspace:has(.flowmo-automation-home) .automation-hero {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
}

.automation-workspace .flowmo-automation-home {
  padding: 150px 28px 28px;
  overflow: auto;
}

.automation-workspace .flowmo-automation-home-shell {
  width: min(1180px, 100%);
  gap: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.055),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.automation-workspace .flowmo-automation-home-list {
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  align-items: stretch;
  gap: 16px;
}

.automation-workspace .flowmo-automation-home-card {
  min-height: 214px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "status"
    "when"
    "action"
    "controls";
  align-content: start;
  gap: 12px;
  padding: 18px;
  border-color: rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.automation-workspace .flowmo-automation-home-card:hover,
.automation-workspace .flowmo-automation-home-card:focus-within {
  border-color: rgba(20, 184, 166, 0.32);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.07),
    0 0 0 3px rgba(20, 184, 166, 0.07);
}

.automation-workspace .flowmo-home-card-main {
  grid-area: main;
  align-items: center;
}

.automation-workspace .flowmo-home-status-pill {
  grid-area: status;
  min-height: 26px;
  padding: 0 10px;
  font-size: 10.5px;
}

.automation-workspace .flowmo-home-row-meta[data-kind="when"] {
  grid-area: when;
}

.automation-workspace .flowmo-home-row-meta[data-kind="action"] {
  grid-area: action;
  padding-left: 0;
  border-left: 0;
}

.automation-workspace .flowmo-home-row-meta {
  min-height: 42px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
}

.automation-workspace .flowmo-home-card-controls {
  grid-area: controls;
  justify-content: space-between;
  align-self: end;
  margin-top: auto;
}

.automation-workspace .flowmo-automation-home-card--add {
  border-style: dashed;
  border-color: rgba(20, 184, 166, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 254, 252, 0.84)),
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.1), transparent 42%);
}

.automation-workspace .flowmo-automation-home-card--add .flowmo-home-card-icon {
  background: #ecfdf5;
  color: #047857;
}

.automation-workspace .flowmo-automation-home-card--add .flowmo-home-card-content small {
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 900;
}

.flowmo-home-create-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(5, 150, 105, 0.26);
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 0 13px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.flowmo-home-create-chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flowmo-home-create-chip:hover,
.flowmo-home-create-chip:focus-visible {
  border-color: rgba(5, 150, 105, 0.44);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-home-footer {
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 2px;
}

.flowmo-home-footer span:last-child {
  color: #0f766e;
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder {
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 8%, rgba(20, 184, 166, 0.09), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(59, 130, 246, 0.075), transparent 30%),
    linear-gradient(135deg, #fbfeff 0%, #f8fcfb 54%, #fbfbff 100%);
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder::before {
  opacity: 0.34;
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 118, 110, 0.075) 1px, transparent 1.65px) 0 0 / 32px 32px;
  animation-duration: 30s;
}

.automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder::after {
  opacity: 0.2;
  filter: blur(16px);
}

.flowmo-builder-header {
  min-height: 78px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.flowmo-builder-breadcrumb {
  background: #f1f5f9;
  color: #475569;
}

.flowmo-builder-title-row strong {
  font-size: 17px;
}

.flowmo-builder-title p {
  max-width: 580px;
  color: #64748b;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder {
  width: min(100%, 1120px);
  justify-self: center;
  padding: 28px clamp(16px, 4vw, 52px) 34px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.32)),
    rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.flowmo-canvas-toolrail,
.flowmo-canvas-minimap {
  display: none !important;
}

.flowmo-flow-start {
  width: min(460px, 100%);
}

.flowmo-flow-start button,
.flowmo-flow-add-action {
  min-height: 32px;
  border-color: rgba(20, 184, 166, 0.34);
  background: rgba(240, 253, 250, 0.62);
  box-shadow: none;
}

.flowmo-flow-node {
  width: min(460px, 100%);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block {
  min-height: 82px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  border-radius: 15px;
  padding: 14px 72px 14px 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block:hover,
.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block:focus-visible,
.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active {
  border-color: rgba(20, 184, 166, 0.28);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.065),
    0 0 0 3px rgba(20, 184, 166, 0.055);
  outline: none;
  transform: translateY(-1px);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block.is-active::after {
  display: none;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--flowmo-icon-color, #0f766e) 10%, #ffffff);
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-icon svg {
  width: 22px;
  height: 22px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block strong {
  font-size: 14px;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block p {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
}

.automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-status {
  top: 14px;
  right: 40px;
  min-height: 23px;
  padding: 0 8px;
  font-size: 10px;
}

.flowmo-flow-plus-row {
  min-height: 62px;
}

.flowmo-flow-plus-row > span {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.42), rgba(59, 130, 246, 0.36));
  box-shadow: none;
}

.flowmo-flow-plus-row button {
  width: 30px;
  height: 30px;
  border-color: rgba(20, 184, 166, 0.34);
  color: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.1);
}

.flowmo-flow-plus-row em {
  background: rgba(255, 255, 255, 0.72);
  color: #667085;
}

.flowmo-flow-actions {
  width: min(840px, 100%);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  padding-top: 22px;
}

.flowmo-flow-actions::before {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.4), rgba(59, 130, 246, 0.34), rgba(139, 92, 246, 0.26));
}

.flowmo-flow-actions .flowmo-diagram-block--action-card::before {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.36), rgba(20, 184, 166, 0.32));
}

.flowmo-flow-empty-state {
  width: min(400px, 100%);
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 0 auto;
  text-align: center;
}

.flowmo-flow-empty-state button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  padding: 0 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.flowmo-flow-empty-state button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.flowmo-flow-empty-state button:hover,
.flowmo-flow-empty-state button:focus-visible {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1), 0 12px 26px rgba(15, 118, 110, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.flowmo-flow-empty-state p {
  max-width: 320px;
  margin: 0;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
}

.flowmo-flow-add-action {
  margin-top: 22px;
}

@media (max-width: 1180px) {
  .automation-workspace .flowmo-automation-home {
    padding: 138px 18px 22px;
  }

  .flowmo-home-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .flowmo-home-search,
  .flowmo-home-filter,
  .automation-workspace .flowmo-home-new-btn {
    width: 100%;
  }

  .flowmo-builder-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .flowmo-builder-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .automation-workspace .flowmo-automation-home {
    padding: 0 14px 16px;
  }

  .automation-workspace .flowmo-automation-home-shell {
    padding: 16px 14px;
  }

  .automation-workspace .flowmo-automation-home-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .flowmo-home-toolbar {
    flex-wrap: wrap;
  }

  .flowmo-home-search,
  .flowmo-home-filter,
  .automation-workspace .flowmo-home-new-btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .flowmo-builder-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 38px;
    width: 100%;
  }

  .flowmo-builder-control {
    min-width: 0;
    padding: 0 10px;
  }

  .flowmo-builder-control span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .automation-workspace .flowmo-automation-canvas.flowmo-automation-canvas--builder {
    padding: 10px;
  }

  .flowmo-builder-header {
    padding: 12px;
  }

  .flowmo-builder-identity {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .flowmo-builder-title-row strong,
  .flowmo-builder-title p {
    white-space: normal;
  }

  .flowmo-builder-controls {
    grid-template-columns: auto 1fr 38px;
  }

  .flowmo-builder-control--primary {
    grid-column: 1 / -1;
  }

  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder {
    padding: 18px 10px 24px;
  }

  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-block {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px 42px 12px 12px;
  }

  .automation-workspace .flowmo-automation-diagram.flowmo-automation-diagram--builder .flowmo-diagram-status {
    position: static;
    width: fit-content;
    grid-column: 2;
    margin-top: 8px;
  }

  .flowmo-flow-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.automation-workspace .flowmo-automation-home-card[data-automation-open-card],
.automation-workspace .flowmo-automation-home-card[data-automation-new-card] {
  cursor: pointer;
}

.automation-workspace .flowmo-automation-home-card[data-automation-open-card]:focus-visible,
.automation-workspace .flowmo-automation-home-card[data-automation-new-card]:focus-visible {
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.075),
    0 0 0 3px rgba(147, 197, 253, 0.22);
  outline: none;
}

.automation-workspace .flowmo-home-new-btn.flowmo-ai-outline-button,
.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button,
.flowmo-ai-outline-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(191, 219, 254, 0.74);
  background: #ffffff;
  color: #28445c;
  box-shadow:
    0 9px 18px rgba(15, 23, 42, 0.045),
    0 0 0 1px rgba(255, 255, 255, 0.92) inset,
    0 -2px 10px rgba(125, 211, 252, 0.13);
  animation: flowmoAiSoftHalo 6s ease-in-out infinite;
}

.automation-workspace .flowmo-home-new-btn.flowmo-ai-outline-button > *,
.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button > *,
.flowmo-ai-outline-button > * {
  position: relative;
  z-index: 1;
}

.automation-workspace .flowmo-home-new-btn.flowmo-ai-outline-button:hover,
.automation-workspace .flowmo-home-new-btn.flowmo-ai-outline-button:focus-visible,
.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button:hover:not(:disabled),
.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button:focus-visible,
.flowmo-ai-outline-button:hover:not(:disabled),
.flowmo-ai-outline-button:focus-visible {
  border-color: rgba(165, 180, 252, 0.76);
  background: #ffffff;
  color: #26384f;
  box-shadow:
    0 10px 20px rgba(15, 23, 42, 0.055),
    0 0 0 1px rgba(255, 255, 255, 0.94) inset,
    0 0 14px rgba(165, 180, 252, 0.16);
  outline: none;
  transform: translateY(-1px);
}

.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button:disabled,
.automation-workspace .flowmo-activate-button.flowmo-ai-outline-button[aria-disabled="true"],
.flowmo-ai-outline-button:disabled {
  border-color: rgba(191, 219, 254, 0.68);
  background: #ffffff;
  color: #8aa0b8;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045);
  animation: none;
}

@keyframes flowmoAiSoftHalo {
  0%, 100% {
    border-color: rgba(191, 219, 254, 0.74);
    box-shadow:
      0 9px 18px rgba(15, 23, 42, 0.045),
      0 0 0 1px rgba(255, 255, 255, 0.92) inset,
      0 -2px 10px rgba(125, 211, 252, 0.13);
  }
  25% {
    border-color: rgba(196, 181, 253, 0.62);
    box-shadow:
      0 9px 18px rgba(15, 23, 42, 0.045),
      0 0 0 1px rgba(255, 255, 255, 0.92) inset,
      2px 0 11px rgba(196, 181, 253, 0.14);
  }
  50% {
    border-color: rgba(244, 194, 220, 0.6);
    box-shadow:
      0 9px 18px rgba(15, 23, 42, 0.045),
      0 0 0 1px rgba(255, 255, 255, 0.92) inset,
      0 2px 10px rgba(244, 194, 220, 0.13);
  }
  75% {
    border-color: rgba(153, 246, 228, 0.62);
    box-shadow:
      0 9px 18px rgba(15, 23, 42, 0.045),
      0 0 0 1px rgba(255, 255, 255, 0.92) inset,
      -2px 0 11px rgba(153, 246, 228, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .automation-workspace .flowmo-home-new-btn.flowmo-ai-outline-button,
  .automation-workspace .flowmo-activate-button.flowmo-ai-outline-button,
  .flowmo-ai-outline-button {
    animation: none !important;
  }
}