/* [project]/src/styles/themes/hymo-design.css [app-client] (css, ) */
:root {
  --hymo-bg: #f5f4f1;
  --hymo-bg-tint: #e8e5df;
  --hymo-surface: #fff;
  --hymo-surface-2: #f2f0ec;
  --hymo-surface-3: #e4e0d9;
  --hymo-border: #ddd9d1;
  --hymo-border-strong: #bfb9ae;
  --hymo-fg: #0a0908;
  --hymo-fg-2: #3a3733;
  --hymo-fg-3: #6e6962;
  --hymo-fg-4: #9c968c;
  --hymo-navy: #14182d;
  --hymo-navy-soft: #eaecf2;
  --hymo-red: #c52645;
  --hymo-red-2: #a51d38;
  --hymo-red-3: #e33b5c;
  --hymo-red-soft: #f9ebee;
  --hymo-red-soft-2: #f5d6dc;
  --hymo-red-line: #e6bcc5;
  --hymo-red-faint: #fdf7f8;
  --hymo-red-glow: #df204638;
  --hymo-red-halo: #df204652;
  --hymo-red-accent: #e64f37;
  --hymo-blue: #23509f;
  --hymo-blue-2: #173e82;
  --hymo-blue-3: #2066df;
  --hymo-blue-soft: #ebf0f9;
  --hymo-blue-line: #bccce6;
  --hymo-blue-faint: #f7f9fd;
  --hymo-blue-glow: #1d5cc938;
  --hymo-blue-halo: #1d5cc952;
  --hymo-violet: #7535b6;
  --hymo-violet-2: #5e2697;
  --hymo-violet-3: #944eda;
  --hymo-violet-soft: #f2ecf9;
  --hymo-violet-line: #d6c6e7;
  --hymo-violet-faint: #faf7fc;
  --hymo-violet-glow: #802dd238;
  --hymo-violet-halo: #802dd252;
  --hymo-glass: #fcfbf8b8;
  --hymo-glass-2: #fcfbf8e0;
  --hymo-glass-strong: linear-gradient(180deg, #ffffffc7 0%, #ffffff94 100%);
  --hymo-glass-soft: linear-gradient(180deg, #ffffffb3 0%, #ffffff80 100%);
  --hymo-glass-deep: linear-gradient(180deg, #ffffffdb 0%, #ffffff9e 100%);
  --hymo-glass-blur: 28px;
  --hymo-glass-blur-soft: 16px;
  --hymo-glass-blur-strong: 32px;
  --hymo-glass-border: #c1bbaf73;
  --hymo-glass-border-light: #ffffffb3;
  --hymo-shadow-card: 0 1px 2px #0f0c090d, 0 12px 32px -10px #0f0c091a;
  --hymo-shadow-pop: 0 2px 4px #0f0c090f, 0 24px 48px -16px #0f0c092e, 0 0 0 1px #0f0c090a;
  --hymo-shadow-cta: 0 1px 2px #0f0c090f;
  --hymo-shadow-doc: 0 32px 80px -32px #0f0c0942;
  --hymo-shadow-glass: inset 0 1px 0 #fffc, inset 0 -1px 0 #fff3, 0 1px 2px #0f0c090a, 0 0 0 1px #0f0c0906;
  --hymo-shadow-glass-hover: 0 1px 2px #0f0c090f, 0 0 0 1px #0f0c090a;
  --hymo-v4-ink: #141312;
  --hymo-v4-card: #fff;
  --hymo-v4-line: #0f0c0912;
  --hymo-v4-line-2: #0f0c091f;
  --hymo-v4-r: 22px;
  --hymo-v4-r-sm: 14px;
  --hymo-v4-shadow: 0 1px 2px #0f0c090a, 0 12px 32px -20px #0f0c0929;
  --hymo-v4-shadow-hover: 0 2px 4px #0f0c090d, 0 24px 48px -22px #0f0c0938;
  --hymo-ease: cubic-bezier(.32, .72, 0, 1);
  --hymo-t: .2s;
  --hymo-t-slow: .32s;
  --hymo-t-fast: .12s;
  --hymo-grad-accent: var(--hymo-red);
  --hymo-grad-accent-kpi: var(--hymo-red);
  --hymo-grad-bar: var(--hymo-red);
  --hymo-page-bg: var(--hymo-bg);
}

@media (prefers-reduced-motion: reduce) {
  .hymo-design *, .hymo-design :before, .hymo-design :after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

.hymo-accent-text {
  background: var(--hymo-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.hymo-glass {
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hymo-glass-border-light);
  box-shadow: var(--hymo-shadow-glass);
}

.hymo-glass-soft {
  background: var(--hymo-glass-soft);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid #ffffffa6;
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
}

@keyframes hymo-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .6;
    transform: scale(.85);
  }
}


/* [project]/src/styles/pages/landing-v2.css [app-client] (css, ) */
@keyframes lnd-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.lnd-marquee-track {
  animation: 40s linear infinite lnd-marquee;
  will-change: transform;
}

.lnd-marquee-track:hover {
  animation-play-state: paused;
}

.lnd-folie-card {
  transition: transform .25s cubic-bezier(.32, .72, 0, 1), box-shadow .25s cubic-bezier(.32, .72, 0, 1), border-color .25s;
}

.lnd-folie-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px #0000000f;
}

.lnd-bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}

@media (width <= 980px) {
  .lnd-bento {
    grid-template-columns: 1fr;
  }

  .lnd-bento > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

.lnd-mod-card {
  transition: transform .25s cubic-bezier(.32, .72, 0, 1), box-shadow .25s, border-color .2s, opacity .2s;
}

.lnd-mod-card[data-checked="false"] {
  opacity: .5;
}

.lnd-mod-card[data-checked="true"] {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px #4f46e526;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.lnd-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.lnd-stagger--visible > :first-child {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.lnd-stagger--visible > :nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}

.lnd-stagger--visible > :nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .16s;
}

.lnd-stagger--visible > :nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .24s;
}

@keyframes lnd-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .4;
    transform: scale(.85);
  }
}

.lnd-pulse {
  animation: 1.6s ease-in-out infinite lnd-pulse;
}

.lnd-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1);
}

.lnd-faq-answer--open {
  grid-template-rows: 1fr;
}

.lnd-faq-answer > div {
  overflow: hidden;
}

.lnd2-dots {
  background-image: radial-gradient(circle, #0f172a14 1px, #0000 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000 0% 45%, #0000 92%);
  mask-image: linear-gradient(#000 0% 45%, #0000 92%);
}

.lnd2-gradient-text {
  background: linear-gradient(100deg, #4f46e5 0%, #2563eb 55%, #0ea5e9 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

@keyframes lnd2-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.lnd2-float {
  animation: 6s ease-in-out infinite lnd2-float;
}

.lnd2-float--delay {
  animation-delay: 2.4s;
}

.lnd2-marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 12% 88%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 12% 88%, #0000);
}

@keyframes lnd2-bar {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.lnd2-bar {
  transform-origin: bottom;
  animation: .9s cubic-bezier(.16, 1, .3, 1) both lnd2-bar;
}

@keyframes lnd2-typing {
  0%, 80%, 100% {
    opacity: .25;
  }

  40% {
    opacity: 1;
  }
}

.lnd2-typing span {
  animation: 1.2s infinite lnd2-typing;
}

.lnd2-typing span:nth-child(2) {
  animation-delay: .2s;
}

.lnd2-typing span:nth-child(3) {
  animation-delay: .4s;
}

.lnd2-dots-light {
  background-image: radial-gradient(circle, #ffffff24 1px, #0000 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(#0000 0%, #000 30% 70%, #0000 100%);
  mask-image: linear-gradient(#0000 0%, #000 30% 70%, #0000 100%);
}

@keyframes lnd3-drift-a {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  33% {
    transform: translate(80px, 40px)scale(1.15);
  }

  66% {
    transform: translate(-60px, 80px)scale(.92);
  }
}

@keyframes lnd3-drift-b {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  40% {
    transform: translate(-90px, -50px)scale(1.2);
  }

  70% {
    transform: translate(50px, -90px)scale(.9);
  }
}

@keyframes lnd3-drift-c {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  50% {
    transform: translate(60px, -60px)scale(1.25);
  }
}

.lnd3-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.lnd3-blob--a {
  animation: 22s ease-in-out infinite lnd3-drift-a;
}

.lnd3-blob--b {
  animation: 26s ease-in-out infinite lnd3-drift-b;
}

.lnd3-blob--c {
  animation: 19s ease-in-out infinite lnd3-drift-c;
}

.lnd3-grid {
  background-image: linear-gradient(#ffffff0d 1px, #0000 1px), linear-gradient(90deg, #ffffff0d 1px, #0000 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 75% at 50% 40%, #000 30%, #0000 75%);
  mask-image: radial-gradient(90% 75% at 50% 40%, #000 30%, #0000 75%);
}

@keyframes lnd3-shimmer {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}

.lnd3-shimmer-text {
  background: linear-gradient(90deg, #818cf8 0%, #38bdf8 30%, #c7d2fe 55%, #818cf8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
  animation: 7s linear infinite lnd3-shimmer;
}

@keyframes lnd3-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

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

.lnd3-rise {
  animation: .8s cubic-bezier(.16, 1, .3, 1) both lnd3-rise;
}

.lnd3-rise-1 {
  animation-delay: 80ms;
}

.lnd3-rise-2 {
  animation-delay: .2s;
}

.lnd3-rise-3 {
  animation-delay: .34s;
}

.lnd3-rise-4 {
  animation-delay: .48s;
}

.lnd3-rise-5 {
  animation-delay: .62s;
}

.lnd3-parallax {
  transform: translate3d(calc(var(--mx, 0) * var(--depth, 20) * 1px), calc(var(--my, 0) * var(--depth, 20) * 1px), 0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.lnd3-outline-text {
  -webkit-text-stroke: 1px #ffffff47;
  color: #0000;
}

.lnd3-ticker-track {
  animation: 30s linear infinite lnd-marquee;
  will-change: transform;
}

.lnd4-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lnd4-sweep {
  position: relative;
  overflow: hidden;
}

.lnd4-sweep:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, #0000, #ffffff59, #0000);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.lnd4-sweep:hover:after {
  left: 130%;
}

@keyframes lnd4-flow {
  0% {
    left: 0%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 8px);
    opacity: 0;
  }
}

.lnd4-flow-dot {
  position: absolute;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #4f46e5;
  box-shadow: 0 0 12px #4f46e5cc;
  animation: 2.6s ease-in-out infinite lnd4-flow;
}

.lnd4-tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .lnd-marquee-track, .lnd-folie-card, .lnd-mod-card, .lnd-pulse, .lnd2-float, .lnd2-bar, .lnd3-blob--a, .lnd3-blob--b, .lnd3-blob--c, .lnd3-shimmer-text, .lnd3-rise, .lnd3-ticker-track, .lnd4-flow-dot, .lnd4-sweep:after, .lnd4-tilt, .lnd2-typing span, .scroll-reveal, .lnd-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.manifeste-signature {
  font-family: var(--font-hand), "Segoe Script", cursive;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  --trace: 0%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--trace)  - 4%), transparent var(--trace));
  mask-image: linear-gradient(90deg, #000 calc(var(--trace)  - 4%), transparent var(--trace));
  animation: 2.4s cubic-bezier(.55, 0, .35, 1) .4s both manifeste-ecrit;
}

@property --trace {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes manifeste-ecrit {
  to {
    --trace: 108%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifeste-signature {
    animation: none;
    --trace: 108%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* [project]/src/styles/features/landing-sections.css [app-client] (css, ) */
:root {
  --lnd-paper: #f5f4f1;
  --lnd-ink: #14182d;
}

.lnd-glass {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(128% 104% at 10% -4%, #fffffff5, #0000 58%), linear-gradient(157deg, #ffffffeb, #ffffffad);
  border: 1px solid #14182d14;
  box-shadow: inset 0 1px #ffffffe6, 0 14px 34px -20px #1016284d;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.lnd-glass:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(#fffc, #0000);
  pointer-events: none;
}

.lnd-glass > * {
  position: relative;
}

.lnd-laptop__lid {
  padding: 10px 10px 11px;
  border-radius: 16px 16px 5px 5px;
  background: linear-gradient(155deg, #333a4d, #10141f);
  box-shadow: 0 34px 68px -28px #0f14238c;
}

.lnd-laptop__screen {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--lnd-paper);
  aspect-ratio: 16 / 10;
}

.lnd-laptop__base {
  height: 12px;
  width: 116%;
  margin-left: -8%;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(#2a3143, #151a28);
}

.lnd-laptop__base:after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  background: #0000006b;
}

.lnd-phone__frame {
  padding: 7px;
  border-radius: 32px;
  background: linear-gradient(150deg, #333a4d, #10141f);
  box-shadow: 0 30px 62px -26px #0f14238c;
}

.lnd-phone__screen {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 416 / 878;
}

.lnd-phone__island {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 13px;
  border-radius: 999px;
  background: #10141f;
  z-index: 2;
}

.lnd-wire {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .52s cubic-bezier(.16, 1, .3, 1), transform .52s cubic-bezier(.16, 1, .3, 1);
}

.lnd-wire--on {
  opacity: 1;
  transform: none;
}

.lnd-wire__rail {
  position: relative;
  height: 2px;
  background-image: linear-gradient(90deg, currentColor 0 7px, #0000 7px 13px);
  background-size: 13px 2px;
  background-repeat: repeat-x;
  opacity: .6;
}

.lnd-wire__tip {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid #0000;
  border-bottom: 5px solid #0000;
  transform: translateY(-50%);
}

.lnd-wire__tip--left {
  left: -1px;
  border-right: 9px solid;
}

.lnd-wire__tip--right {
  right: -1px;
  border-left: 9px solid;
}

.lnd-chat__reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .44s cubic-bezier(.16, 1, .3, 1), transform .44s cubic-bezier(.16, 1, .3, 1);
}

.lnd-chat__reveal--on {
  opacity: 1;
  transform: none;
}

.lnd-chat__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #4f46e5;
  animation: 1s step-end infinite lnd-caret;
}

@keyframes lnd-caret {
  0%, 50% {
    opacity: 1;
  }

  51%, 100% {
    opacity: 0;
  }
}

.lnd-chat__dot {
  animation: 1.3s infinite lnd-dot;
}

.lnd-chat__dot:nth-child(2) {
  animation-delay: .17s;
}

.lnd-chat__dot:nth-child(3) {
  animation-delay: .34s;
}

@keyframes lnd-dot {
  0%, 60%, 100% {
    opacity: .28;
  }

  30% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-wire, .lnd-chat__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lnd-chat__caret, .lnd-chat__dot {
    animation: none;
  }
}

.lnd-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lnd-tile {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 28px;
  border-radius: 20px;
  border: 1px solid #14182d14;
  background: radial-gradient(124% 96% at 12% -6%, #fffffff5, #0000 60%), linear-gradient(162deg, #ffffffeb, #ffffffad);
  box-shadow: inset 0 1px #ffffffe6, 0 14px 34px -24px #10162859;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s, border-color .32s;
}

.lnd-tile:hover {
  transform: translateY(-4px);
  border-color: #14182d24;
  box-shadow: inset 0 1px #fff, 0 28px 52px -28px #10162873;
}

.lnd-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 13px;
  color: #14182d;
  background: linear-gradient(#fffffff5, #ffffff80);
  border: 1px solid #14182d14;
  box-shadow: inset 0 1px #fffffff2;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.lnd-tile:hover .lnd-tile__icon {
  transform: translateY(-2px);
}

.lnd-tile__title {
  margin-top: 18px;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: #14182d;
}

.lnd-tile__body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #6e6962;
}

@media (width <= 1023px) {
  .lnd-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 639px) {
  .lnd-tiles {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lnd-tile {
    padding: 22px 20px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-tile, .lnd-tile__icon {
    transition: none;
  }

  .lnd-tile:hover {
    transform: none;
  }
}

.lnd-tool__cta {
  background: linear-gradient(#fffffff2, #ffffff9e);
  border: 1px solid #14182d1a;
  box-shadow: inset 0 1.5px #fffffff2, 0 12px 28px -16px #10162873;
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1);
}

.lnd-tool__cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1.5px #fff, 0 18px 36px -16px #1016288c;
}

.lnd-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px 210px;
  align-items: center;
  gap: 0;
}

.lnd-scene__owner, .lnd-scene__phone {
  margin: 0;
  min-width: 0;
}

.lnd-mac {
  position: relative;
}

.lnd-mac__lid {
  padding: 10px 10px 12px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(168deg, #e9eaee 0%, #cfd2da 46%, #b9bdc8 100%);
  box-shadow: inset 0 1px #fffffff2, inset 0 -1px #fff6, 0 40px 70px -40px #101628a6;
}

.lnd-mac__screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #10162838;
}

.lnd-mac__gloss, .lnd-tel__gloss {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, #ffffff47 0%, #fff0 38%);
}

.lnd-mac__hinge {
  display: block;
  width: 16%;
  height: 5px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#b7bbc6, #9aa0ad);
}

.lnd-mac__base {
  display: block;
  width: 116%;
  height: 11px;
  margin-left: -8%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#d7dae1 0%, #b3b8c4 60%, #9ba1ae 100%);
  box-shadow: 0 18px 30px -20px #10162899;
}

.lnd-tel {
  position: relative;
  margin: 0 auto;
  width: 196px;
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(152deg, #4a4f5c 0%, #23262f 42%, #14161d 100%);
  box-shadow: inset 0 1px #ffffff59, inset 0 0 0 1px #ffffff14, 0 40px 70px -38px #101628b3;
}

.lnd-tel__screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 414 / 896;
  overflow: hidden;
  border-radius: 29px;
  background: #fff;
}

.lnd-tel__island {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 4;
  width: 58px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #14161d;
}

.lnd-tel__button {
  position: absolute;
  right: -2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(#6a7080, #3a3f4b);
}

.lnd-tel__button--power {
  top: 108px;
  height: 46px;
}

.lnd-tel__button--volume {
  left: -2px;
  right: auto;
  top: 86px;
  height: 30px;
}

.lnd-scene__owner, .lnd-scene__phone {
  transition: opacity .87s cubic-bezier(.32, .72, .24, 1), filter .87s cubic-bezier(.32, .72, .24, 1);
}

.lnd-scene__owner.is-passif, .lnd-scene__phone.is-passif {
  opacity: .68;
  filter: saturate(.6);
}

.lnd-stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: #14182d;
  animation: .4s cubic-bezier(.22, 1, .36, 1) 30ms both lnd-stage-in;
}

.lnd-stage--doux {
  animation-duration: 1s;
  animation-delay: .14s;
}

.lnd-stage--doux > * {
  animation-duration: 1s;
}

.lnd-stage--out-doux {
  animation-duration: .42s;
}

.lnd-swap {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.lnd-stage--out {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: .31s cubic-bezier(.4, 0, .2, 1) both lnd-stage-out;
}

.lnd-swap > .lnd-stage.lnd-stage--out * {
  animation-delay: -10s;
}

@keyframes lnd-stage-out {
  from {
    opacity: 1;
    filter: none;
  }

  to {
    opacity: 0;
    transform: scale(.992);
    filter: blur(8px);
  }
}

.js-fade {
  animation: .45s cubic-bezier(.22, 1, .36, 1) both js-fade;
}

@keyframes js-fade {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    filter: none;
  }
}

.lnd-stage > * {
  animation: js-enter .54s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

@keyframes lnd-stage-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes js-enter {
  from {
    opacity: 0;
    transform: scale(.988);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.jo-msg__list, .jo-msg__head, .jo-msg__bulle, .jo-msg__piece, .jo-msg__systeme, .jo-msg__compose, .jo-cand, .jo-mois {
  animation: js-enter .54s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.lnd-stage--passive > *, .lnd-stage--passive .js-row__ok, .lnd-stage--passive .jo-cand, .lnd-stage--passive .jo-mois, .lnd-stage--passive .jo-msg__list, .lnd-stage--passive .jo-msg__head, .lnd-stage--passive .jo-msg__bulle, .lnd-stage--passive .jo-msg__piece, .lnd-stage--passive .jo-msg__systeme, .lnd-stage--passive .jo-msg__compose {
  animation-delay: 0s;
}

.lnd-scene__gap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
}

.lnd-flow {
  position: relative;
  width: 100%;
}

.lnd-flow__svg {
  width: 100%;
  height: 120px;
  overflow: visible;
}

.lnd-flow__svg--petit {
  display: none;
}

.lnd-flow__arc {
  fill: none;
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-dasharray: .1 8;
  opacity: 0;
  transition: opacity .23s;
}

.lnd-flow__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 16px;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400px;
}

.lnd-flow__head {
  opacity: 0;
}

.lnd-flow.is-on.is-tenant .lnd-flow__arc--tenant, .lnd-flow.is-on.is-owner .lnd-flow__arc--owner {
  opacity: 1;
}

.lnd-flow.is-on.is-tenant .lnd-flow__head--tenant, .lnd-flow.is-on.is-owner .lnd-flow__head--owner {
  animation: .26s .8s both lnd-pointe;
}

@keyframes lnd-pointe {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lnd-flow.is-on.is-tenant .lnd-flow__reveal--tenant, .lnd-flow.is-on.is-owner .lnd-flow__reveal--owner {
  animation: .78s cubic-bezier(.33, 0, .22, 1) both lnd-reveal;
}

@keyframes lnd-reveal {
  to {
    stroke-dashoffset: 0;
  }
}

.lnd-flow__arc--tenant {
  stroke: #3a887d;
}

.lnd-flow__head--tenant {
  fill: #3a887d;
}

.lnd-flow__arc--owner {
  stroke: #1a3f7f;
}

.lnd-flow__head--owner {
  fill: #1a3f7f;
}

.lnd-flow__label {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  width: 234px;
  margin-left: -117px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: -.015em;
  color: #31726a;
  text-wrap: balance;
  opacity: 0;
}

.lnd-flow.is-on .lnd-flow__label {
  animation: .62s cubic-bezier(.22, 1, .36, 1) .18s both lnd-mot;
}

@keyframes lnd-mot {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.lnd-flow.is-owner .lnd-flow__label {
  color: #1b3c74;
}

@media (width <= 899px) {
  .lnd-scene {
    grid-template-columns: 200px 110px;
    justify-content: space-between;
    align-items: center;
    margin-inline: 0;
    padding-bottom: 0;
  }

  .lnd-scene__owner {
    grid-column: 1;
    grid-row: 1;
    width: 200px;
    max-width: none;
  }

  .lnd-scene__phone {
    grid-column: 2;
    grid-row: 1;
  }

  .lnd-scene__gap {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .lnd-mac__lid {
    padding: 6px;
    border-radius: 18px;
    background: linear-gradient(152deg, #4a4f5c 0%, #23262f 42%, #14161d 100%);
    box-shadow: inset 0 1px #ffffff47, inset 0 0 0 1px #ffffff12, 0 26px 44px -30px #101628bf;
  }

  .lnd-mac__screen {
    aspect-ratio: 330 / 471;
    border-radius: 12px;
  }

  .lnd-mac__hinge, .lnd-mac__base {
    display: none;
  }

  .lnd-flow {
    position: relative;
    display: block;
    height: auto;
  }

  .lnd-flow__svg--large {
    display: none;
  }

  .lnd-flow__svg--petit {
    display: block;
    width: 100%;
    height: auto;
    margin: 6px 0 0;
  }

  .lnd-flow__svg--petit .lnd-flow__arc {
    stroke-width: 1.8px;
    stroke-dasharray: .1 6.5;
  }

  .lnd-flow__label {
    display: block;
    position: static;
    left: auto;
    width: 250px;
    min-height: 2.6em;
    margin: 0 0 0 20%;
    font-size: 14px;
  }

  .lnd-tel {
    width: 110px;
    padding: 5px;
    border-radius: 20px;
  }

  .lnd-tel__screen {
    border-radius: 16px;
  }

  .lnd-tel__island {
    top: 7px;
    width: 30px;
    height: 9px;
  }

  .lnd-tel__button--power {
    top: 56px;
    height: 25px;
  }

  .lnd-tel__button--volume {
    top: 45px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-shot, .lnd-flow {
    transition: none;
  }
}

.jo {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fbfaf8;
  font-size: 13px;
  color: var(--jo-ink);
  --jo-ink: #14182d;
  --jo-navy: #143671;
  --jo-navy-2: #1f488e;
  --jo-navy-soft: #e8eef7;
  --jo-navy-line: #cdd7ea;
  --jo-mute: #8d8a84;
}

.jo:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 44% at 78% 6%, #1f53ad1a, #0000 70%), radial-gradient(44% 40% at 12% 92%, #338acc14, #0000 72%);
}

@supports (transform: scale(calc(100cqw / 540px))) {
  .jo {
    position: absolute;
    top: 0;
    left: 0;
    width: 540px;
    height: 337.5px;
    transform-origin: 0 0;
    transform: scale(calc(100cqw / 540px));
  }
}

.jo__logo {
  display: flex;
  flex-shrink: 0;
  margin-right: 4px;
  color: var(--jo-navy);
}

.js-logo {
  display: block;
  width: auto;
  height: 13px;
}

.js-logo--lettre {
  height: 15px;
}

.jo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #14182d0f;
  background: #ffffff9e;
  backdrop-filter: blur(12px) saturate(160%);
}

.jo__crumb {
  flex: 1;
  min-width: 0;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--jo-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo__crumb i {
  font-style: normal;
  opacity: .45;
  margin: 0 3px;
}

.jo__crumb b {
  color: var(--jo-ink);
}

.jo__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.jo__icon {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--jo-mute);
}

.jo__icon svg {
  width: 11px;
  height: 11px;
}

.jo__avatar {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  background: var(--jo-ink);
}

.jo__body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 9px 11px 15px;
}

.jo__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  flex-shrink: 0;
  padding: 18px 11px 8px;
  height: 62px;
  border-radius: 11px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(#0a0e1e00 30%, #080c1aad 100%), linear-gradient(126deg, #1b2440 0%, #1d407c 46%, #4c94bd 100%);
  box-shadow: 0 16px 30px -24px #101628f2;
}

.jo__hero-aide {
  position: absolute;
  top: 8px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  color: var(--jo-ink);
  background: #ffffffe0;
  box-shadow: inset 0 0 0 1px #ffffff80;
  right: 9px;
}

.jo__hero-aide svg {
  width: 9px;
  height: 9px;
}

.jo__hero-statut {
  position: absolute;
  top: 8px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
  color: var(--jo-navy);
  background: #ffffffdb;
  box-shadow: inset 0 1px #ffffffe6, inset 0 0 0 1px #ffffff80, 0 8px 16px -12px #101628b3;
  backdrop-filter: blur(8px) saturate(170%);
}

.jo__hero-statut i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--jo-navy-2);
}

.jo__hero-title {
  font-family: var(--font-sans, inherit);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.jo__hero-sub {
  font-size: 8.5px;
  opacity: .86;
}

.jo__tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 7px;
  padding: 3px;
  border-radius: 999px;
  background: #ffffffc7;
  box-shadow: inset 0 1px #ffffffe6, inset 0 0 0 1px #14182d0d, 0 8px 18px -16px #10162899;
  backdrop-filter: blur(10px) saturate(165%);
}

.jo__tab {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 600;
  color: #6e6962;
}

.jo__tab.is-on {
  color: #fff;
  background: linear-gradient(180deg, var(--jo-navy-2), var(--jo-navy));
  box-shadow: 0 6px 14px -8px #143671e6;
}

.jo-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(#ffffffe6, #ffffffbd);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0e, 0 14px 26px -22px #101628b3;
  backdrop-filter: blur(14px) saturate(180%);
}

.jo-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.jo-card__icon {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  color: var(--jo-navy);
  background: var(--jo-navy-soft);
}

.jo-card__icon svg {
  width: 12px;
  height: 12px;
}

.jo-card__titles {
  flex: 1;
  min-width: 0;
}

.jo-card__titles strong {
  display: block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -.015em;
}

.jo-card__titles em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: var(--jo-mute);
}

.jo-card__pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
  color: #fff;
  background: var(--jo-navy-2);
}

.jo-annonce {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jo-annonce__vignette {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 8px;
  color: var(--jo-navy-2);
  background: var(--jo-navy-soft);
}

.jo-annonce__vignette svg {
  width: 14px;
  height: 14px;
}

.jo-annonce__texte strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
}

.jo-annonce__texte em {
  display: block;
  font-size: 9px;
  font-style: normal;
  color: var(--jo-mute);
}

.jo-cand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 7px;
  border-radius: 9px;
}

.jo-cand--pale {
  opacity: .66;
}

.jo-cand--neuve {
  background: #fffffff0;
  animation: js-enter .63s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both, jo-cadre .62s cubic-bezier(.22, 1, .36, 1) .76s both;
}

@keyframes jo-cadre {
  from {
    box-shadow: inset 0 0 0 1px #14182d14, 0 6px 14px -14px #10162880;
  }

  to {
    box-shadow: inset 0 0 0 2px var(--jo-navy), 0 14px 26px -16px #101628bf;
  }
}

.jo-cand__droite {
  position: relative;
  display: grid;
  place-items: center end;
  flex-shrink: 0;
  width: 62px;
}

.jo-cand__droite > * {
  grid-area: 1 / 1;
}

.jo-cand__pris {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  color: #246058;
  background: #3d8f8424;
  box-shadow: inset 0 0 0 1px #3d8f843d;
  animation: js-bascule-in .49s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s) both;
}

.jo-cand__pris svg {
  width: 9px;
  height: 9px;
}

.jo-cand--neuve .jo-cand__score {
  animation: js-score .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both, js-bascule-out .31s cubic-bezier(.4, 0, .2, 1) 2s forwards;
}

.jo-cand__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--jo-navy-2), var(--jo-navy));
}

.jo-cand__who {
  flex: 1;
  min-width: 0;
}

.jo-cand__who strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
}

.jo-cand__who em {
  display: block;
  font-size: 7.5px;
  font-style: normal;
  color: var(--jo-mute);
}

@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.jo-cand__score {
  --n: 93;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  color: var(--jo-navy);
  background: var(--jo-navy-soft);
  box-shadow: inset 0 0 0 1px var(--jo-navy-line);
  counter-reset: score var(--n);
  animation: js-score .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.jo-cand__score:after {
  content: counter(score) "/100";
}

.jo-cand__score--fixe {
  animation: none;
}

.jo-cand__score--fixe:after {
  content: none;
}

@keyframes js-score {
  from {
    --n: 0;
  }

  to {
    --n: 93;
  }
}

.jo-loyer {
  text-align: right;
}

.jo-loyer em {
  display: block;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jo-mute);
}

.jo-loyer strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--jo-navy);
}

.jo-mois {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 9px;
  background: #ffffffd1;
  box-shadow: inset 0 0 0 1px #14182d0e;
}

.jo-mois__nom {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
}

.jo-mois__somme {
  font-size: 10px;
  font-weight: 700;
  color: var(--jo-navy);
}

.jo-mois__paye, .jo-mois__attente {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
}

.jo-mois__paye {
  color: #246058;
  background: #3d8f8424;
  box-shadow: inset 0 0 0 1px #3d8f843d;
}

.jo-mois__paye svg {
  width: 9px;
  height: 9px;
}

.jo-mois__attente {
  color: #956118;
  background: #efa92e29;
  box-shadow: inset 0 0 0 1px #e79f2347;
}

.jo-mois--bascule {
  position: relative;
}

.jo-mois--bascule .jo-mois__attente {
  animation: js-bascule-out .37s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) forwards;
}

.jo-mois__paye--tard {
  position: absolute;
  right: 9px;
  opacity: 0;
  animation: js-bascule-in .49s cubic-bezier(.34, 1.4, .64, 1) calc(var(--d, 0s)  + .23s) forwards;
}

@keyframes js-bascule-out {
  to {
    opacity: 0;
    transform: scale(.88);
  }
}

@keyframes js-bascule-in {
  from {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.jo-inc {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.jo-inc__centre {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(#ffffffe6, #ffffffbd);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0e, 0 14px 26px -22px #101628b3;
  backdrop-filter: blur(14px) saturate(180%);
}

.jo-inc__head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.jo-inc__icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  color: #fff;
  background: #0a0908;
}

.jo-inc__icon svg {
  width: 11px;
  height: 11px;
}

.jo-inc__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #ffffffeb;
  box-shadow: inset 0 0 0 1px #0f0c0914, 0 10px 20px -16px #0f0c0999;
}

.jo-inc__badge {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: #0a0908;
}

.jo-inc__txt {
  flex: 1;
  min-width: 0;
}

.jo-inc__txt strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
}

.jo-inc__txt em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: var(--jo-mute);
}

.jo-inc__cta {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: #0a0908;
  box-shadow: 0 10px 18px -12px #0f0c09e6;
}

.jo-inc__vide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--jo-mute);
}

.jo-inc__vide svg {
  width: 12px;
  height: 12px;
}

.jo-inc__ouvert {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 8px;
  border-radius: 12px;
  transform-origin: 50% 22%;
  background: linear-gradient(#fffffffc, #fffffff2);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0f, 0 24px 44px -28px #101628cc;
  backdrop-filter: blur(16px) saturate(180%);
  animation: jo-ouvre .59s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

@keyframes jo-ouvre {
  from {
    opacity: 0;
    transform: translateY(40px)scale(.76);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.jt-fil__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #14182d14;
}

.jt-fil__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #0a0908;
}

.jt-fil__who strong {
  display: block;
  font-size: 11px;
  font-weight: 750;
}

.jt-fil__who em {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  color: #8d8a84;
}

.jt-fil__piece {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  color: #842a3c;
  background: #c5264514;
  box-shadow: inset 0 0 0 1px #c526452e;
}

.jt-fil__piece svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.jt-fil__piece strong {
  display: block;
  font-size: 10.5px;
}

.jt-fil__piece em {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  opacity: .75;
}

.jt-fil__attente {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 600;
  color: #a5a29c;
  background: #14182d09;
  box-shadow: inset 0 0 0 1px #14182d0f;
}

.jt-fil__attente i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #c3bfb8;
  animation: 1.8s ease-in-out infinite js-wait;
}

.jo-msg {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 9px;
}

.jo-msg__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 152px;
  flex-shrink: 0;
  padding: 9px;
  border-radius: 12px;
  background: linear-gradient(#ffffffe6, #ffffffb8);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0e, 0 14px 26px -22px #101628b3;
  backdrop-filter: blur(14px) saturate(180%);
}

.jo-msg__list-head strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.jo-msg__list-head em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: var(--jo-mute);
}

.jo-msg__search {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 8.5px;
  color: var(--jo-mute);
  background: #ffffffdb;
  box-shadow: inset 0 0 0 1px #14182d12;
}

.jo-msg__filtres {
  display: flex;
  gap: 3px;
  padding: 2px;
  border-radius: 999px;
  background: #14182d0b;
}

.jo-msg__filtres i {
  flex: 1;
  padding: 3px 0;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: var(--jo-mute);
}

.jo-msg__filtres i.is-on {
  color: var(--jo-ink);
  background: #fff;
  box-shadow: 0 4px 10px -8px #101628cc;
}

.jo-msg__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 9px;
  background: #ffffffeb;
  box-shadow: inset 0 0 0 1px #0f0c0912, 0 6px 14px -12px #0f0c0980;
}

.jo-msg .jo-cand__avatar {
  width: 20px;
  height: 20px;
  font-size: 8px;
  color: #0a0908;
  background: #0f0c0912;
}

.jo-msg__head .jo-cand__avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.jo-msg__item-txt {
  flex: 1;
  min-width: 0;
}

.jo-msg__item-txt strong {
  display: block;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo-msg__item-txt em {
  display: block;
  font-size: 7.5px;
  font-style: normal;
  color: var(--jo-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo-msg__item-time {
  font-size: 7px;
  color: var(--jo-mute);
}

.jo-msg__chat {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px 8px;
  border-radius: 12px;
  background: linear-gradient(#ffffffe0, #ffffffb3);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0e, 0 14px 26px -22px #101628b3;
  backdrop-filter: blur(14px) saturate(180%);
}

.jo-msg__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #14182d12;
}

.jo-msg__head-txt strong {
  display: block;
  font-size: 10.5px;
  font-weight: 750;
}

.jo-msg__head-txt em {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-style: normal;
  color: var(--jo-mute);
}

.jo-msg__head-txt svg {
  width: 8px;
  height: 8px;
}

.jo-msg__thread {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.jo-msg__bulle {
  max-width: 78%;
  padding: 7px 10px;
  border-radius: 12px 12px 12px 4px;
  font-size: 10px;
  line-height: 1.4;
  background: #ffffffeb;
  box-shadow: inset 0 0 0 1px #14182d12;
}

.jo-msg__bulle--moi {
  align-self: flex-end;
  border-radius: 12px 12px 4px;
  color: #fff;
  background: #0a0908;
  box-shadow: 0 10px 20px -16px #0a0908e6;
}

.jo-msg__piece {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 10px;
  color: #842a3c;
  background: #c5264514;
  box-shadow: inset 0 0 0 1px #c526452e;
}

.jo-msg__piece svg {
  width: 12px;
  height: 12px;
}

.jo-msg__piece em {
  font-style: normal;
  font-size: 8px;
  line-height: 1.3;
}

.jo-msg__piece strong {
  display: block;
  font-size: 9.5px;
}

.jo-msg__systeme {
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 600;
  color: #246058;
  background: #3d8f8421;
}

.jo-msg__compose {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 5px 5px 5px 9px;
  border-radius: 999px;
  background: #ffffffeb;
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d14, 0 10px 22px -18px #10162899;
}

.jo-msg__compose > svg {
  width: 11px;
  height: 11px;
  color: var(--jo-mute);
  flex-shrink: 0;
}

.jo-msg__champ {
  flex: 1;
  min-width: 0;
  font-size: 10px;
}

.jo-msg__send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  color: #fff;
  background: #0a0908;
}

.jo-msg__send svg {
  width: 11px;
  height: 11px;
}

.jt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  font-size: 13px;
  color: #14182d;
}

@supports (transform: scale(calc(100cqw / 176px))) {
  .jt {
    position: absolute;
    top: 0;
    left: 0;
    width: 176px;
    height: 381px;
    transform-origin: 0 0;
    transform: scale(calc(100cqw / 176px));
  }
}

.jt:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 34% at 84% 4%, #45a1941f, #0000 72%);
}

.jt__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 34px 14px 0;
}

.jt__logo {
  display: flex;
  margin-right: auto;
  color: #2d766d;
}

.jt__bell {
  color: #a5a29c;
}

.jt__bell svg {
  width: 13px;
  height: 13px;
}

.jt__avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#40968b, #2d766d);
}

.jt__body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 8px 14px 14px;
}

.jt__eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2d766d;
}

.jt__eyebrow i {
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: #3d8f84;
}

.jt__title {
  margin: 3px 0 10px;
  font-family: var(--font-sans, inherit);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.js-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 11px;
  background: linear-gradient(#ffffffeb, #ffffffbd);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d0f, 0 10px 20px -18px #10162899;
  backdrop-filter: blur(12px) saturate(175%);
}

.js-row--strong {
  font-weight: 650;
}

.js-row__text {
  flex: 1;
  min-width: 0;
}

.js-row__ok {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(#439d91, #307e73);
  animation: js-coche .45s cubic-bezier(.34, 1.5, .64, 1) var(--d, 0s) both;
}

.js-row__ok svg {
  width: 10px;
  height: 10px;
}

@keyframes js-coche {
  from {
    opacity: 0;
    transform: scale(.3);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.js-row__wait {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #efa92e;
  box-shadow: 0 0 0 3px #efa92e33;
  animation: 1.8s ease-in-out infinite js-wait;
}

@keyframes js-wait {
  50% {
    opacity: .35;
  }
}

.jt-chips {
  display: flex;
  gap: 5px;
}

.jt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 650;
  color: #27685f;
  background: #3d8f841f;
  box-shadow: inset 0 0 0 1px #3d8f8438;
}

.jt-chip svg {
  width: 9px;
  height: 9px;
}

.jt-montant {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-sans, inherit);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #246058;
}

.jt-montant span {
  font-size: 30px;
}

.jt-montant em {
  font-size: 13px;
  font-style: normal;
  opacity: .6;
}

.jt-montant--ok {
  color: #2a6f66;
}

.js-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}

.js-btn svg {
  width: 13px;
  height: 13px;
}

.js-btn--owner {
  background: linear-gradient(180deg, var(--jo-navy-2), var(--jo-navy));
  box-shadow: 0 14px 24px -16px #143671f2;
}

.js-btn--tenant {
  align-self: stretch;
  background: linear-gradient(#40968b, #2d766d);
  box-shadow: 0 14px 24px -16px #246058f2;
}

.js-btn--press, .jo-msg__send.js-btn--press {
  animation: js-enter .54s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both, js-press .54s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0s)  + .47s) both;
}

@keyframes js-press {
  0% {
    transform: none;
  }

  34% {
    transform: scale(.955);
    filter: brightness(.92);
  }

  100% {
    transform: none;
  }
}

.js-photo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 11px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 600;
  color: #8d8a84;
  background: #14182d09;
  box-shadow: inset 0 0 0 1px #14182d12;
}

.js-photo svg {
  width: 14px;
  height: 14px;
}

.js-flag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #246058;
  background: #3d8f8424;
  box-shadow: inset 0 0 0 1px #3d8f8442;
}

.js-flag svg {
  width: 12px;
  height: 12px;
}

.js-field {
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 11.5px;
  min-height: 34px;
  background: #ffffffe6;
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d14;
}

.js-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: js-type .83s steps(20, end) var(--d, 0s) both;
}

@keyframes js-type {
  to {
    width: var(--ch, 20ch);
  }
}

.js-type--efface {
  animation: js-type .83s steps(20, end) var(--d, 0s) both, js-clear .17s ease calc(var(--d, 0s)  + 1.44s) forwards;
}

@keyframes js-clear {
  to {
    width: 0;
    opacity: 0;
  }
}

.js-thread {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
}

.js-bubble {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.4;
  animation: js-enter .54s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.js-bubble--them {
  align-self: flex-start;
  background: #ffffffe6;
  box-shadow: inset 0 0 0 1px #14182d14;
  backdrop-filter: blur(8px) saturate(160%);
}

.js-bubble--me {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(#40968b, #2d766d);
}

.js-bubble--new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #246058;
  background: #3d8f8424;
  box-shadow: inset 0 0 0 1px #3d8f8442;
}

.js-bubble--new svg {
  width: 12px;
  height: 12px;
}

.js-bubble--dots {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 11px 13px;
  animation: js-enter .37s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both, js-dots-out .26s ease calc(var(--d, 0s)  + .83s) forwards;
}

.js-bubble--dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #14182d52;
  animation: 1.1s ease-in-out infinite js-dots;
}

.js-bubble--dots i:nth-child(2) {
  animation-delay: .16s;
}

.js-bubble--dots i:nth-child(3) {
  animation-delay: .32s;
}

@keyframes js-dots {
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }

  0%, 60%, 100% {
    transform: none;
    opacity: .55;
  }
}

@keyframes js-dots-out {
  to {
    opacity: 0;
    transform: scale(.9);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -7px;
  }
}

.jt-notif {
  position: absolute;
  top: 30px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  color: #225951;
  background: #ffffffeb;
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #3d8f8438, 0 14px 26px -18px #10162899;
  backdrop-filter: blur(12px) saturate(175%);
  animation: .59s cubic-bezier(.22, 1.2, .36, 1) .12s both jt-notif-in, .45s cubic-bezier(.4, 0, .2, 1) 1.39s forwards jt-notif-out;
}

.jo-notif {
  top: 34px;
  left: auto;
  right: 12px;
  width: 190px;
  color: var(--jo-navy);
  box-shadow: inset 0 1px 0 #fffffff2, inset 0 0 0 1px var(--jo-navy-line), 0 18px 30px -18px #101628b3;
}

.jt-notif svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.jt-notif strong {
  display: block;
  font-size: 10px;
}

.jt-notif em {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  opacity: .72;
}

@keyframes jt-notif-in {
  from {
    opacity: 0;
    transform: translateY(-46px)scale(.94);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes jt-notif-out {
  to {
    opacity: 0;
    transform: translateY(-40px)scale(.96);
    filter: blur(4px);
  }
}

.js-coulisse {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  animation: js-final-in .66s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.js-coulisse__oeil {
  width: 26px;
  height: 2px;
  border-radius: 2px;
}

.js-coulisse__mot {
  max-width: 16ch;
  font-family: var(--font-sans, inherit);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.js-coulisse--owner .js-coulisse__oeil {
  background: var(--jo-navy, #143671);
}

.js-coulisse--owner .js-coulisse__mot {
  color: var(--jo-navy, #143671);
}

.js-coulisse--tenant .js-coulisse__oeil {
  background: #2d766d;
}

.js-coulisse--tenant .js-coulisse__mot {
  font-size: 15px;
  color: #2a6f66;
}

.js-chapitre {
  gap: 14px;
}

.js-chapitre .js-final__logo {
  opacity: .85;
}

.js-chapitre .js-final__logo, .js-chapitre .js-chapitre__titre {
  animation-duration: .42s;
}

.js-chapitre__titre {
  max-width: 18ch;
  font-family: var(--font-sans, inherit);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #14182d;
  text-wrap: balance;
  animation: js-final-in .56s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.js-final--tenant .js-chapitre .js-final__logo, .js-chapitre .js-chapitre__titre {
  animation-duration: .42s;
}

.js-chapitre__titre {
  font-size: 17px;
}

.js-final {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.js-final__logo {
  display: block;
  animation: js-final-in .56s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.js-final__logo .js-logo {
  height: 44px;
}

.js-final--tenant .js-final__logo .js-logo {
  height: 28px;
}

.js-chapitre .js-final__logo .js-logo {
  height: 42px;
}

.js-chapitre.js-final--tenant .js-final__logo .js-logo {
  height: 28px;
}

.js-final__mot {
  max-width: 22ch;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #6e6962;
  animation: js-final-in .56s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both;
}

.js-final--owner .js-final__logo {
  color: var(--jo-navy, #143671);
}

.js-final--tenant .js-final__logo {
  color: #2a6f66;
}

.js-final--tenant .js-final__mot {
  font-size: 10px;
}

@keyframes js-final-in {
  from {
    opacity: 0;
    transform: scale(.94);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jo-inc__ouvert, .jo-cand--neuve, .jt-fil__attente i, .js-chapitre__titre, .jo-msg__list, .jo-msg__head, .jo-msg__bulle, .jo-msg__piece, .jo-msg__systeme, .jo-msg__compose, .jo-cand, .jo-mois, .jt-notif, .js-final__logo, .js-final__mot, .jo-mois--bascule .jo-mois__attente, .jo-mois__paye--tard, .lnd-stage, .lnd-stage--out, .lnd-stage--passive > *, .js-row__ok, .jo-cand__score, .js-type, .js-bubble, .js-bubble--dots, .js-bubble--dots i, .js-btn--press, .js-fade {
    animation: none;
  }
}

@media (width <= 899px) {
  @supports (transform: scale(calc(100cqw / 330px))) {
    .jo {
      width: 330px;
      height: 471px;
      transform: scale(calc(100cqw / 330px));
    }
  }

  .js-final__logo .js-logo {
    height: 60px;
  }

  .js-final--tenant .js-final__logo .js-logo {
    height: 40px;
  }

  .js-chapitre .js-final__logo .js-logo {
    height: 58px;
  }

  .js-chapitre.js-final--tenant .js-final__logo .js-logo {
    height: 38px;
  }
}

.lnd-faq {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lnd-faq:before {
  content: "";
  position: absolute;
  inset: -40px -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(42% 46% at 10% 8%, #21488c1f, #0000 70%), radial-gradient(38% 44% at 92% 88%, #3b83ba1f, #0000 72%), radial-gradient(30% 34% at 70% 20%, #708ec214, #0000 74%);
}

.lnd-faq__carte {
  border-radius: 20px;
  background: linear-gradient(#ffffffd1, #ffffff94);
  box-shadow: inset 0 1px #ffffffe6, inset 0 0 0 1px #14182d0f, 0 14px 30px -26px #1016288c;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition: background .42s cubic-bezier(.22, 1, .36, 1), box-shadow .42s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1);
}

.lnd-faq__carte:hover {
  background: linear-gradient(#ffffffeb, #ffffffad);
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #14182d17, 0 20px 38px -28px #101628a6;
}

.lnd-faq__carte.is-on {
  background: linear-gradient(#fffffff5, #ffffffc7);
  box-shadow: inset 0 1px #fff, inset 0 0 0 1px #14182d1f, 0 26px 48px -30px #101628cc;
}

.lnd-faq__tete {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  text-align: left;
}

.lnd-faq__question {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: #14182d;
}

.lnd-faq__plus {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #6e6962;
  background: #ffffffb3;
  box-shadow: inset 0 1px #ffffffe6, inset 0 0 0 1px #14182d14;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), color .3s, background .3s, box-shadow .3s;
}

.lnd-faq__plus svg {
  width: 17px;
  height: 17px;
}

.lnd-faq__carte.is-on .lnd-faq__plus {
  transform: rotate(45deg);
  color: #fff;
  background: #14182d;
  box-shadow: 0 10px 20px -12px #14182de6;
}

.lnd-faq__reponse {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: #5c574f;
}

@media (width <= 767px) {
  .lnd-faq__tete {
    padding: 17px 18px;
    gap: 12px;
  }

  .lnd-faq__question {
    font-size: 15px;
  }

  .lnd-faq__reponse {
    padding: 0 18px 18px;
    font-size: 14.5px;
  }

  .lnd-faq__plus {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-faq__carte, .lnd-faq__plus {
    transition: none;
  }
}

.lnd-cta {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 420px;
  padding: 80px 0 88px;
  background: #0d1020;
}

.lnd-cta__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  filter: blur(8px) saturate(108%);
  transform: scale(1.12);
}

.lnd-cta__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#080c1a6b 0%, #080c1a99 100%), radial-gradient(76% 100% at 50% 48%, #080c1a14, #080c1a80);
}

.lnd-cta__titre {
  margin: 0 auto;
  max-width: 900px;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
  text-shadow: 0 2px 30px #00000059;
}

.lnd-cta__mot {
  margin: 24px auto 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.65;
  color: #ffffffc7;
}

.lnd-cta__mot-fin {
  display: block;
  margin-top: 14px;
  font-weight: 600;
  color: #fff;
}

.lnd-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding: 17px 34px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #ffffff12;
  box-shadow: inset 0 1px #fff6, inset 0 0 0 1px #ffffff47, 0 22px 44px -22px #000000b3;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: background .26s, box-shadow .26s, transform .26s cubic-bezier(.22, 1, .36, 1);
}

.lnd-cta__btn:hover {
  background: #ffffff24;
  transform: translateY(-2px);
  box-shadow: inset 0 1px #ffffff8c, inset 0 0 0 1px #fff6, 0 28px 52px -24px #000c;
}

@media (width <= 767px) {
  .lnd-cta {
    min-height: 350px;
    padding: 62px 0 70px;
  }

  .lnd-cta__photo {
    -o-object-position: center 58%;
    object-position: center 58%;
  }

  .lnd-cta__voile {
    background: linear-gradient(#080c1a5c 0%, #080c1a8f 100%), radial-gradient(90% 100% at 50% 46%, #080c1a0a, #080c1a70);
  }

  .lnd-cta__mot {
    font-size: 16.5px;
  }

  .lnd-cta__btn {
    width: 100%;
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-cta__btn {
    transition: none;
  }
}


/* [project]/src/styles/navigation/owner-sidebar.css [app-client] (css, ) */
[data-portal="owner"] .sidebar {
  background: var(--hymo-bg);
  border-right: none;
  box-shadow: none;
}

[data-portal="owner"] .sidebar:after {
  content: "";
  position: absolute;
  top: 56px;
  bottom: 0;
  right: 0;
  width: 1px;
  pointer-events: none;
  background: #0f0c091a;
  box-shadow: 6px 0 24px -10px #0f0c091a, 2px 0 8px -4px #0f0c090f;
  clip-path: inset(0 -40px -40px 0);
}

[data-portal="owner"] .sidebar-logo {
  border-bottom: 1px solid #0f0c091a;
  background: var(--hymo-bg);
  box-shadow: 0 6px 20px -10px #0f0c091a, 0 2px 6px -3px #0f0c090f;
  clip-path: inset(0 0 -40px);
}

[data-portal="owner"] .sidebar-logo-text {
  color: var(--hymo-fg);
}

[data-portal="owner"] .sidebar-logo-dot {
  background: var(--hymo-red);
}

[data-portal="owner"] .sidebar-section-label {
  color: var(--hymo-fg-4);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
}

[data-portal="owner"] .sidebar-item {
  color: var(--hymo-fg-2);
  border-radius: 10px;
  font-weight: 500;
  position: relative;
  transition: background .2s var(--hymo-ease), color .2s var(--hymo-ease), box-shadow .2s var(--hymo-ease);
}

[data-portal="owner"] .sidebar-item:hover {
  background: #ffffff61;
  color: var(--hymo-fg);
  box-shadow: inset 0 1px #ffffff8c;
}

[data-portal="owner"] .sidebar-item:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

[data-portal="owner"] .sidebar-item--active {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
  font-weight: 600;
  border: 1px solid #0000;
  box-shadow: none;
}

[data-portal="owner"] .sidebar-item--active:before {
  display: none;
}

[data-portal="owner"] .sidebar-item--active:hover {
  background: var(--hymo-surface-3);
  color: var(--hymo-fg);
}

[data-portal="owner"] .sidebar-icon {
  opacity: .75;
  color: var(--hymo-fg-2);
}

[data-portal="owner"] .sidebar-item:hover .sidebar-icon {
  opacity: 1;
  color: var(--hymo-fg);
}

[data-portal="owner"] .sidebar-item--active .sidebar-icon {
  opacity: 1;
  color: var(--hymo-fg);
}

[data-portal="owner"] .sidebar-item {
  --mod: var(--hymo-fg-2);
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/dashboard"] {
  --mod: #366350;
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/biens"] {
  --mod: var(--hymo-blue);
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/projets"] {
  --mod: var(--hymo-red);
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/societes"] {
  --mod: #853b91;
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/simulateurs"] {
  --mod: #18817d;
}

[data-portal="owner"] a.sidebar-item[href^="/proprietaire/academie"] {
  --mod: #27684d;
}

[data-portal="owner"] .sidebar-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  background: none;
  transition: background .2s var(--hymo-ease), color .2s var(--hymo-ease);
}

[data-portal="owner"] .sidebar-icon {
  width: 17px;
  height: 17px;
  opacity: 1;
  color: var(--hymo-fg-3);
  transition: color .2s var(--hymo-ease);
}

[data-portal="owner"] .sidebar-item:hover {
  background: #0f0c090a;
  color: var(--hymo-fg);
  box-shadow: none;
}

[data-portal="owner"] .sidebar-item:hover .sidebar-icon-wrap {
  background: color-mix(in srgb, var(--mod) 12%, white);
}

[data-portal="owner"] .sidebar-item:hover .sidebar-icon {
  color: var(--mod);
}

[data-portal="owner"] .sidebar-item--active, [data-portal="owner"] .sidebar-item--active:hover {
  background: var(--hymo-v4-card);
  color: var(--hymo-fg);
  font-weight: 600;
  border: 1px solid var(--hymo-v4-line);
  box-shadow: var(--hymo-v4-shadow);
}

[data-portal="owner"] .sidebar-item--active:before {
  display: none;
}

[data-portal="owner"] .sidebar-item--active .sidebar-icon-wrap, [data-portal="owner"] .sidebar-item--active:hover .sidebar-icon-wrap {
  background: var(--mod);
}

[data-portal="owner"] .sidebar-item--active .sidebar-icon, [data-portal="owner"] .sidebar-item--active:hover .sidebar-icon {
  color: #fff;
}

[data-portal="owner"] .sidebar-item--active .sidebar-badge {
  background: var(--mod);
  color: #fff;
}

[data-portal="owner"] .sidebar--collapsed .sidebar-item {
  padding: 6px;
  justify-content: center;
}

[data-portal="owner"] .sidebar-badge {
  background: var(--hymo-red);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

[data-portal="owner"] .sidebar-item--active .sidebar-badge {
  background: var(--hymo-fg);
  color: #fff;
}

[data-portal="owner"] .sidebar-ping {
  background: var(--hymo-red);
  box-shadow: 0 0 0 2px var(--hymo-surface);
}

[data-portal="owner"] .sidebar-edge-toggle {
  background: linear-gradient(#fcfbf8b3 0%, #f5f4f180 100%);
  border: 1px solid #c1bbaf73;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: var(--hymo-fg-3);
  box-shadow: inset 0 1px #ffffffa6, 0 2px 6px #0f0c090f;
}

[data-portal="owner"] .sidebar-edge-toggle:hover {
  color: var(--hymo-red);
  border-color: var(--hymo-red-line);
  box-shadow: none;
}

[data-portal="owner"] .sidebar-separator {
  background: var(--hymo-glass-border);
  opacity: .6;
}

[data-portal="owner"] .sidebar-footer-zone {
  border-top: 1px solid #c1bbaf40;
  background: none;
}

[data-portal="owner"] .sidebar-user {
  background: linear-gradient(#fcfbf899 0%, #f5f4f16b 100%);
  border: 1px solid #c1bbaf59;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px #ffffff8c;
}

[data-portal="owner"] .sidebar-user-avatar {
  background: var(--hymo-fg);
  color: #fff;
}

[data-portal="owner"] .sidebar-user-name {
  color: var(--hymo-fg);
}

[data-portal="owner"] .sidebar-user-role {
  color: var(--hymo-fg-3);
}

[data-portal="owner"] ~ .sidebar-overlay, [data-portal="owner"] .sidebar-overlay {
  background: #0f0c0952;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-portal="owner"] .header-bar {
  background: var(--hymo-bg);
  border-bottom: 1px solid #0f0c091a;
  box-shadow: 0 6px 20px -10px #0f0c091a, 0 2px 6px -3px #0f0c090f;
}

[data-portal="owner"] .header-bar__breadcrumb-current {
  color: var(--hymo-fg);
}

[data-portal="owner"] .header-bar__breadcrumb-link {
  color: var(--hymo-fg-3);
}

[data-portal="owner"] .header-bar__breadcrumb-link:hover {
  color: var(--hymo-red);
}

[data-portal="owner"] .header-bar__avatar {
  background: var(--hymo-fg);
  box-shadow: 0 1px 2px #0f0c0914;
}

[data-portal="owner"] .header-bar__hamburger {
  color: var(--hymo-fg-3);
}

[data-portal="owner"] .header-bar__hamburger:hover {
  background: var(--hymo-glass-soft);
  color: var(--hymo-red);
}


/* [project]/src/styles/features/projects-loader.css [app-client] (css, ) */
.projects-loader {
  --ldr-accent: var(--hymo-red, #c52645);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  width: 100%;
  padding: 48px 24px;
  position: relative;
  isolation: isolate;
  opacity: 1;
  transition: opacity .3s ease-out, transform .3s ease-out;
}

.projects-loader.is-fading-out {
  opacity: 0;
  transform: scale(.99);
  pointer-events: none;
}

.projects-loader-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (width <= 600px) {
  .projects-loader-stage {
    gap: 22px;
  }
}

.projects-loader-logo {
  width: 240px;
  height: 88px;
  background-color: var(--ldr-accent);
  -webkit-mask: url("/logo-typo.svg") center / contain no-repeat;
  mask: url("/logo-typo.svg") center / contain no-repeat;
  opacity: 0;
  transform: translateY(6px);
  animation: .5s cubic-bezier(.32, .72, 0, 1) 80ms forwards projects-loader-in;
}

@media (width <= 600px) {
  .projects-loader-logo {
    width: 180px;
    height: 66px;
  }
}

.projects-loader-caption {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  align-items: baseline;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--hymo-fg, #0a0908);
  text-align: center;
  max-width: 680px;
}

@media (width <= 600px) {
  .projects-loader-caption {
    font-size: 20px;
    gap: 6px;
  }
}

.projects-loader-caption .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: .52s cubic-bezier(.22, 1, .36, 1) forwards projects-loader-in;
}

.projects-loader-caption .word.accent {
  color: var(--ldr-accent);
}

.projects-loader-track {
  width: 148px;
  height: 4px;
  border-radius: 999px;
  background: var(--hymo-surface-3, #e4e0d9);
  overflow: hidden;
  position: relative;
  opacity: 0;
  animation: .4s cubic-bezier(.22, 1, .36, 1) .8s forwards projects-loader-in;
}

.projects-loader-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: var(--ldr-accent);
  animation: 1s cubic-bezier(.45, 0, .35, 1) .88s infinite projects-loader-sweep;
}

@keyframes projects-loader-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@keyframes projects-loader-sweep {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

.projects-loader--violet {
  --ldr-accent: #593091;
}

.projects-loader--blue {
  --ldr-accent: #23509f;
}

.projects-loader--teal {
  --ldr-accent: #1d9a96;
}

.projects-loader--green {
  --ldr-accent: #27684d;
}

.projects-loader--amber {
  --ldr-accent: #b6690c;
}

@media (prefers-reduced-motion: reduce) {
  .projects-loader-logo, .projects-loader-caption .word, .projects-loader-track {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .projects-loader-track i {
    animation: none;
    width: 100%;
    left: 0;
  }
}

.projects-loader .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* [project]/src/styles/features/hymo-popup.css [app-client] (css, ) */
[data-radix-popper-content-wrapper] + *, [role="alertdialog"] ~ [data-state], [data-state] > .hymo-popup-overlay {
}

.hymo-popup {
  isolation: isolate;
  max-width: 460px !important;
  padding: 28px 32px 22px !important;
  border-radius: 22px !important;
  border: 1.5px solid #ffffffb3 !important;
  background: var(--hymo-red-soft) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  box-shadow: none !important;
  color: #0a0908 !important;
}

.hymo-popup:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: none;
  pointer-events: none;
}

[data-state="open"][class*="bg-black/80"], [data-state="open"][class*="bg-black"] {
}

.hymo-popup-overlay {
  background: radial-gradient(circle at 50% 40%, #ae1e461a, #0000 55%), #0f0c096b !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

[data-state="open"].fixed.inset-0[class*="bg-black"]:has( ~ .hymo-popup) {
  background: #0f0c0959 !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
}

.hymo-popup--phase [class*="absolute"][class*="right-4"][class*="top-4"] {
  display: none !important;
}

.hymo-popup--phase > div:last-of-type {
  justify-content: center !important;
}

.hymo-popup--phase .hymo-popup-action {
  min-width: 220px !important;
  padding: 12px 28px !important;
}

.phase-popup-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hymo-red);
}

.phase-popup-eyebrow__dash {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--hymo-red);
  border-radius: 2px;
}

.hymo-popup [data-slot="alert-dialog-header"], .hymo-popup > div:first-child {
  align-items: center !important;
  text-align: center !important;
}

.hymo-popup [data-slot="alert-dialog-title"], .hymo-popup [data-slot="alert-dialog-description"] {
  text-align: center !important;
}

.hymo-popup .hymo-popup-icon, .hymo-popup [class*="rounded-full"][class*="bg-"] {
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: none;
  color: var(--hymo-red);
  background: var(--hymo-red-soft) !important;
}

.hymo-popup .hymo-popup-icon svg, .hymo-popup [class*="rounded-full"] svg {
  color: var(--hymo-red) !important;
}

.hymo-popup [data-slot="alert-dialog-title"], .hymo-popup h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  color: #0a0908 !important;
}

.hymo-popup [data-slot="alert-dialog-description"] {
  margin-top: 4px;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6e6962 !important;
}

.hymo-popup-cancel, .hymo-popup [data-slot="alert-dialog-cancel"] {
  height: 38px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  color: #3a3733 !important;
  background: linear-gradient(#ffffff8c 0%, #fff0 60%), #ffffff8c !important;
  border: 1px solid #0f0c091a !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow: inset 0 1px #ffffffd9, 0 1px 2px #0f0c090a !important;
  transition: all .2s cubic-bezier(.2, .8, .2, 1) !important;
}

.hymo-popup-cancel:hover, .hymo-popup [data-slot="alert-dialog-cancel"]:hover {
  border-color: #f2c0ca99 !important;
  color: var(--hymo-red) !important;
}

.hymo-popup > div:last-of-type {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  margin-left: 0 !important;
}

.hymo-popup > div:last-of-type > * {
  margin: 0 !important;
  flex: none !important;
}

.hymo-popup .hymo-popup-cancel {
  height: auto !important;
  min-height: 42px !important;
  min-width: 130px !important;
  padding: 0 22px !important;
}

.hymo-popup .hymo-popup-action {
  min-height: 42px !important;
  min-width: 130px !important;
}

@media (width <= 639px) {
  .hymo-popup {
    padding: 24px 20px 18px !important;
  }

  .hymo-popup > div:last-of-type {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .hymo-popup > div:last-of-type > * {
    width: 100% !important;
  }

  .hymo-popup .hymo-popup-cancel, .hymo-popup .hymo-popup-action {
    min-width: 0 !important;
    width: 100% !important;
  }
}

.hymo-popup-action-shell {
  display: inline-block;
  position: relative;
}

.hymo-popup-action-shell:before {
  content: "";
  position: absolute;
  inset: -14px -26px;
  background: none;
  filter: blur(16px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.hymo-popup-action {
  position: relative;
  z-index: 1;
  isolation: isolate;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: all .32s cubic-bezier(.2, .8, .2, 1);
  display: inline-flex !important;
  height: auto !important;
  padding: 10px 22px !important;
  color: var(--hymo-red) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  background: var(--hymo-glass-2) !important;
  border: 1px solid var(--hymo-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.hymo-popup-action:hover:not(:disabled) {
  background: var(--hymo-red-soft) !important;
  box-shadow: none !important;
}

.hymo-popup-action:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.hymo-popup--neutral .hymo-popup-icon {
  background: var(--hymo-blue-soft) !important;
}

.hymo-popup--neutral .hymo-popup-icon svg {
  color: var(--hymo-blue) !important;
}

.hymo-popup--neutral .hymo-popup-action-shell:before {
  background: none;
}

.hymo-popup--neutral .hymo-popup-action {
  color: var(--hymo-blue) !important;
  box-shadow: none !important;
}

.hymo-popup--neutral .hymo-popup-action:hover:not(:disabled) {
  background: var(--hymo-blue-soft) !important;
  box-shadow: none !important;
}


/* [project]/src/styles/features/passkey-banner.css [app-client] (css, ) */
.passkey-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid hsl(var(--portal-accent) / .22);
  border-radius: 12px;
  background: hsl(var(--portal-accent-bg));
}

.passkey-banner__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: hsl(var(--portal-accent));
}

.passkey-banner__text {
  flex: auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: hsl(var(--foreground));
}

.passkey-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--portal-accent));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--portal-accent) / .28);
  transition: background var(--duration-fast, .15s) var(--ease-out, ease);
}

.passkey-banner__cta:hover {
  background: hsl(var(--portal-accent) / .08);
}

.passkey-banner__cta svg {
  width: 13px;
  height: 13px;
}

.passkey-banner__dismiss {
  flex: none;
  display: inline-flex;
  padding: 6px;
  border-radius: 8px;
  color: hsl(var(--foreground-subtle));
}

.passkey-banner__dismiss:hover {
  background: hsl(var(--portal-accent) / .08);
}

.passkey-banner__dismiss svg {
  width: 14px;
  height: 14px;
}

@media (width <= 639px) {
  .passkey-banner {
    flex-wrap: wrap;
  }

  .passkey-banner__text {
    flex: 100%;
    order: 1;
  }

  .passkey-banner__icon {
    order: 0;
  }

  .passkey-banner__cta {
    order: 2;
    margin-left: auto;
  }
}


/* [project]/src/styles/pages/projects-list.css [app-client] (css, ) */
.projects-v3 {
  --pl-ink: var(--hymo-v4-ink);
  --pl-card: var(--hymo-v4-card);
  --pl-line: var(--hymo-v4-line);
  --pl-line-2: var(--hymo-v4-line-2);
  --pl-r: var(--hymo-v4-r);
  --pl-r-sm: var(--hymo-v4-r-sm);
  --pl-shadow: var(--hymo-v4-shadow);
  --pl-shadow-hover: var(--hymo-v4-shadow-hover);
  --pl-track: #0f0c090f;
  position: relative;
  min-height: 100%;
  padding: 36px 32px 80px;
  display: flex;
  justify-content: center;
  background: var(--hymo-bg);
}

@media (width <= 1023px) {
  .projects-v3 {
    padding: 28px 24px 60px;
  }
}

@media (width <= 767px) {
  .projects-v3 {
    padding: 20px 16px 24px;
  }
}

.projects-v3.projects-v3--enter {
  animation: .48s cubic-bezier(.22, 1, .36, 1) both projects-v3-enter;
}

@keyframes projects-v3-enter {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-v3.projects-v3--enter {
    animation: none;
  }
}

.projects-v3 .focus-col {
  width: 100%;
  max-width: 1160px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

@media (width <= 767px) {
  .projects-v3 .focus-col {
    max-width: 100%;
  }
}

.projects-v3 .page-art {
  display: none;
}

.projects-v3 .hero-row {
  display: block;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.projects-v3 .hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.projects-v3 .hero-left > .greet {
  margin-bottom: 4px;
}

.projects-v3 .greet {
  position: relative;
  z-index: 2;
}

.projects-v3 .greet-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--pl-ink);
  margin-bottom: 6px;
}

.projects-v3 .greet-title .accent {
  color: var(--hymo-red);
}

@media (width <= 1023px) {
  .projects-v3 .greet-title {
    font-size: 34px;
  }
}

@media (width <= 767px) {
  .projects-v3 .greet-title {
    font-size: 30px;
  }
}

.projects-v3 .greet-brief {
  font-size: 17px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  line-height: 1.45;
  max-width: 720px;
  letter-spacing: -.008em;
  margin-top: 0;
}

@media (width <= 767px) {
  .projects-v3 .greet-brief {
    font-size: 15px;
  }
}

.projects-v3 .greet-brief .accent {
  color: var(--hymo-red);
  font-weight: 600;
}

.projects-v3 .kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (width <= 600px) {
  .projects-v3 .kpis {
    grid-template-columns: 1fr;
  }
}

.projects-v3 .kpi {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--pl-r-sm);
  background: var(--pl-card);
  border: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow);
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
  overflow: hidden;
  isolation: isolate;
}

.projects-v3 .kpi:after {
  display: none;
}

.projects-v3 .kpi:hover {
  border-color: var(--pl-line-2);
  box-shadow: var(--pl-shadow-hover);
}

.projects-v3 .kpi-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.projects-v3 .kpi-head svg {
  width: 13px;
  height: 13px;
  color: var(--hymo-fg-4);
}

.projects-v3 .kpi-val {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink);
}

.projects-v3 .priority {
  position: relative;
  isolation: isolate;
  z-index: 2;
}

.projects-v3 .priority-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.projects-v3 .priority-row > .priority-card {
  grid-column: 1 / 3;
}

.projects-v3 .priority-row > .new-project-btn-shell {
  grid-column: 3 / 4;
  min-width: 0;
  justify-self: end;
  align-self: center;
}

@media (width <= 767px) {
  .projects-v3 .priority-row {
    grid-template-columns: 1fr;
  }

  .projects-v3 .priority-row > .priority-card, .projects-v3 .priority-row > .new-project-btn-shell {
    grid-column: auto;
    justify-self: stretch;
  }
}

.projects-v3 .priority-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
  margin-bottom: 10px;
}

.projects-v3 .priority-row--multi > .priority-card {
  grid-column: auto;
}

.projects-v3 .priority-eyebrow-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--hymo-fg-4);
}

.projects-v3 .priority-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--pl-r);
  background: var(--pl-card);
  border: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
  overflow: hidden;
}

.projects-v3 .priority-card-shimmer {
  display: none;
}

.projects-v3 .priority-card > :not(.priority-card-shimmer) {
  position: relative;
  z-index: 1;
}

.projects-v3 .priority-card:before, .projects-v3 .priority-card:after {
  display: none;
}

.projects-v3 .priority-card:hover {
  border-color: var(--pl-line-2);
  box-shadow: var(--pl-shadow-hover);
}

@media (width <= 767px) {
  .projects-v3 .priority-card {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
  }

  .projects-v3 .priority-card .priority-cta {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 4px;
  }
}

.projects-v3 .priority-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  color: var(--pl-ink);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.projects-v3 .priority-mark .lbl {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
  margin-bottom: 2px;
}

.projects-v3 .priority-mark .num {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.projects-v3 .priority-info {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  overflow: hidden;
  padding-right: 16px;
}

.projects-v3 .priority-context {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  line-height: 1;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.projects-v3 .priority-context .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hymo-fg-4);
  flex-shrink: 0;
}

.projects-v3 .priority-context .proj {
  color: var(--hymo-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 40%;
}

.projects-v3 .priority-context .phase {
  white-space: nowrap;
  flex-shrink: 0;
}

.projects-v3 .priority-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--pl-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.projects-v3 .priority-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  background: var(--pl-ink);
  border: 1px solid var(--pl-ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--hymo-t) var(--hymo-ease);
  flex-shrink: 0;
}

.projects-v3 .priority-card:hover .priority-cta {
  background: #000;
  border-color: #000;
}

.projects-v3 .priority-cta svg {
  width: 14px;
  height: 14px;
}

.projects-v3 .new-project-btn-shell {
  display: inline-block;
  position: relative;
}

.projects-v3 .new-project-btn-shell:before {
  display: none;
}

.projects-v3 .new-project-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--pl-ink);
  border: 1px solid var(--pl-ink);
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px #0f0c098c;
  transition: background var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .new-project-btn:hover {
  background: #000;
  border-color: #000;
  box-shadow: 0 14px 30px -12px #0f0c0999;
}

.projects-v3 .new-project-btn svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

@media (width <= 767px) {
  .projects-v3 .new-project-btn {
    width: 100%;
    justify-content: center;
  }
}

.projects-v3 .sec {
  margin-bottom: 48px;
}

@media (width <= 767px) {
  .projects-v3 .sec {
    margin-bottom: 36px;
  }
}

.projects-v3 .sec:last-child {
  margin-bottom: 0;
}

.projects-v3 .sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 14px;
  flex-wrap: wrap;
}

.projects-v3 .sec-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pl-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.15;
  margin: 0;
}

.projects-v3 .sec-head h2 .accent {
  color: inherit;
}

.projects-v3 .sec-head h2 .count {
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .sec-head .link {
  font-size: 13px;
  color: var(--hymo-fg-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .sec-head .link:hover {
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
  border-color: var(--hymo-border-strong);
}

.projects-v3 .sec-head .link svg {
  width: 12px;
  height: 12px;
}

.projects-v3 .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.projects-v3 .tb-tabs {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  gap: 2px;
}

.projects-v3 .tb-tabs::-webkit-scrollbar {
  display: none;
}

.projects-v3 .tb-tab {
  flex-shrink: 0;
  white-space: nowrap;
  height: 30px;
  padding: 0 12px;
  border: none;
  background: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--hymo-fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .tb-tab:hover {
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
}

.projects-v3 .tb-tab.active {
  background: var(--pl-ink);
  color: #fff;
  font-weight: 600;
}

.projects-v3 .tb-tab .count {
  font-size: 11px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  background: var(--hymo-surface-2);
  border-radius: 999px;
  font-weight: 600;
}

.projects-v3 .tb-tab.active .count {
  background: #ffffff2e;
  color: #fff;
}

.projects-v3 .tb-spacer {
  flex: 1;
}

.projects-v3 .tb-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  font-size: 13px;
  width: 220px;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .tb-search:focus-within {
  border-color: var(--pl-ink);
  box-shadow: 0 0 0 3px #0f0c0914;
}

.projects-v3 .tb-search svg {
  width: 14px;
  height: 14px;
  color: var(--hymo-fg-4);
  flex-shrink: 0;
}

.projects-v3 .tb-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--pl-ink);
  letter-spacing: -.005em;
  outline: none;
}

.projects-v3 .tb-search input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.projects-v3 .tb-search input::placeholder {
  color: var(--hymo-fg-4);
}

@media (width <= 767px) {
  .projects-v3 .tb-search {
    width: 290px;
    max-width: 100%;
    order: 1;
    flex-basis: 100%;
  }
}

.projects-v3 .tb-btn {
  height: 38px;
  padding: 0 14px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--hymo-fg-2);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .tb-btn:hover {
  border-color: var(--hymo-border-strong);
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
}

.projects-v3 .tb-btn svg {
  width: 13px;
  height: 13px;
  color: var(--hymo-fg-3);
}

.projects-v3 .tb-btn:hover svg {
  color: var(--pl-ink);
}

.projects-v3-sort-menu {
  color: var(--hymo-fg-2);
  background: linear-gradient(180deg, #ffffffb3 0%, #ffffff80 100%), var(--hymo-bg-tint) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1px solid #ffffffa6 !important;
  border-radius: 12px !important;
  padding: 5px !important;
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c090a, 0 14px 32px -12px #0f0c092e !important;
}

.projects-v3-sort-menu .sort-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hymo-fg-2);
  letter-spacing: -.005em;
  cursor: pointer;
  outline: none;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.projects-v3-sort-menu .sort-item:focus, .projects-v3-sort-menu .sort-item[data-highlighted] {
  background: #ffffff8c;
  color: var(--hymo-fg);
}

.projects-v3-sort-menu .sort-item-icon {
  width: 14px;
  height: 14px;
  color: var(--hymo-fg-3);
  flex-shrink: 0;
}

.projects-v3-sort-menu .sort-item:focus .sort-item-icon, .projects-v3-sort-menu .sort-item[data-highlighted] .sort-item-icon {
  color: var(--hymo-fg-2);
}

.projects-v3-sort-menu .sort-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3-sort-menu .sort-item-check {
  width: 14px;
  height: 14px;
  color: var(--hymo-red);
  flex-shrink: 0;
}

.projects-v3-sort-menu .sort-item[data-selected="true"] {
  color: var(--hymo-red);
  font-weight: 600;
}

.projects-v3-sort-menu .sort-item[data-selected="true"] .sort-item-icon {
  color: var(--hymo-red);
}

.projects-v3-sort-menu .sort-item[data-selected="true"]:focus, .projects-v3-sort-menu .sort-item[data-selected="true"][data-highlighted] {
  background: #ae1e4614;
  color: var(--hymo-red);
}

.projects-v3 .pj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

@media (width <= 1199px) {
  .projects-v3 .pj-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 767px) {
  .projects-v3 .pj-grid {
    grid-template-columns: 1fr;
  }
}

.projects-v3 .pj {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--pl-r);
  background: var(--pl-card);
  border: 1px solid var(--pl-line);
  box-shadow: var(--pl-shadow);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  font-family: inherit;
}

.projects-v3 .pj:after {
  display: none;
}

.projects-v3 .pj:hover {
  border-color: var(--pl-line-2);
  box-shadow: var(--pl-shadow-hover);
}

.projects-v3 .pj.paused {
  opacity: .72;
}

.projects-v3 .pj.paused:hover {
  opacity: 1;
}

.projects-v3 .pj-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.projects-v3 .pj-info {
  flex: 1;
  min-width: 0;
}

.projects-v3 .pj-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--pl-ink);
  line-height: 1.25;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3 .pj-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.projects-v3 .pj-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  color: var(--hymo-fg-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.005em;
}

.projects-v3 .pj-chip.type {
  background: var(--hymo-red-soft);
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
  font-weight: 600;
}

.projects-v3 .pj-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--pl-r-sm);
  background: var(--hymo-surface-2);
  border: 1px solid #0000;
}

.projects-v3 .pj-step-num {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.projects-v3 .pj-step-num .lbl {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
  margin-bottom: 2px;
  line-height: 1;
}

.projects-v3 .pj-step-num .num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.projects-v3 .pj.paused .pj-step-num {
  color: var(--hymo-fg-3);
}

.projects-v3 .pj-step-body {
  min-width: 0;
  flex: 1;
}

.projects-v3 .pj-step-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  margin-bottom: 2px;
}

.projects-v3 .pj-step-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pl-ink);
  letter-spacing: -.005em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3 .pj-prog {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.projects-v3 .pj-bar {
  height: 5px;
  background: var(--pl-track);
  border-radius: 999px;
  overflow: hidden;
}

.projects-v3 .pj-bar i {
  display: block;
  height: 100%;
  background: var(--hymo-red);
  border-radius: 999px;
  transition: width .6s var(--hymo-ease);
}

.projects-v3 .pj.paused .pj-bar i {
  background: var(--hymo-fg-4);
}

.projects-v3 .pj-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--pl-ink);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .pj-prog--frozen {
  grid-template-columns: 1fr;
}

.projects-v3 .pj-frozen {
  font-size: 11.5px;
  color: var(--hymo-fg-3);
  font-style: italic;
}

.projects-v3 .pj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}

.projects-v3 .pj-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  color: var(--hymo-fg-2);
  margin-bottom: 4px;
}

.projects-v3 .pj-empty-icon svg {
  width: 24px;
  height: 24px;
}

.projects-v3 .pj-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pl-ink);
}

.projects-v3 .pj-empty-sub {
  font-size: 13px;
  color: var(--hymo-fg-3);
  max-width: 420px;
}

.projects-v3 .pj-empty-cta {
  margin-top: 10px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--pl-ink);
  background: var(--pl-ink);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .pj-empty-cta:hover {
  background: #000;
  border-color: #000;
}

.projects-v3 .pj.paused .pj-pct {
  color: var(--hymo-fg-3);
}

.projects-v3 .pj-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--pl-line);
  font-size: 12px;
  color: var(--hymo-fg-3);
  letter-spacing: -.005em;
}

.projects-v3 .pj-foot .ago {
  color: var(--hymo-fg-4);
}

.projects-v3 .pj-foot .spacer {
  flex: 1;
}

.projects-v3 .pj-foot .archive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .pj-foot .archive-btn:hover {
  color: #fff;
  background: var(--pl-ink);
  border-color: var(--pl-ink);
}

.projects-v3 .pj-foot .archive-btn svg {
  width: 14px;
  height: 14px;
}

.projects-v3 .pj.add {
  border: 1.5px dashed var(--hymo-border-strong);
  background: none;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--hymo-fg-3);
  min-height: 200px;
  gap: 8px;
}

.projects-v3 .pj.add:after {
  display: none;
}

.projects-v3 .pj.add:hover {
  border-color: var(--pl-ink);
  border-style: solid;
  background: var(--pl-card);
  color: var(--pl-ink);
  box-shadow: var(--pl-shadow);
}

.projects-v3 .pj-add-ic {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hymo-fg-2);
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .pj.add:hover .pj-add-ic {
  color: #fff;
  background: var(--pl-ink);
  border-color: var(--pl-ink);
}

.projects-v3 .pj-add-ic svg {
  width: 22px;
  height: 22px;
}

.projects-v3 .pj-add-title {
  font-size: 14.5px;
  font-weight: 700;
  color: inherit;
  letter-spacing: -.01em;
}

.projects-v3 .pj-add-desc {
  font-size: 12.5px;
  color: var(--hymo-fg-4);
}

.projects-v3 .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 32px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.projects-v3 .pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--hymo-fg-2);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .pg-btn:hover:not(:disabled) {
  border-color: var(--hymo-border-strong);
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
}

.projects-v3 .pg-btn.active {
  background: var(--pl-ink);
  border-color: var(--pl-ink);
  color: #fff;
  font-weight: 700;
}

.projects-v3 .pg-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.projects-v3 .pg-btn svg {
  width: 13px;
  height: 13px;
}

.projects-v3 .pg-ellipsis {
  width: 24px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hymo-fg-4);
  font-size: 13px;
}

.projects-v3 .pg-info {
  font-size: 12px;
  color: var(--hymo-fg-4);
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

@media (width <= 600px) {
  .projects-v3 .pg-info {
    width: 100%;
    text-align: center;
    margin: 6px 0 0;
  }
}

.projects-v3 .empty-pitch {
  font-size: 17px;
  font-weight: 500;
  color: var(--hymo-fg-2);
  line-height: 1.55;
  letter-spacing: -.008em;
  max-width: 640px;
  margin: 0;
}

.projects-v3 .empty-pitch .accent-strong {
  color: var(--hymo-red);
  font-weight: 700;
}

@media (width <= 767px) {
  .projects-v3 .empty-pitch {
    font-size: 15.5px;
  }
}

.projects-v3 .empty-hero-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

@media (width <= 767px) {
  .projects-v3 .empty-hero-cta {
    justify-content: center;
    margin-top: 12px;
  }
}

.projects-v3 .howto {
  width: 100%;
  margin: 0 0 8px;
  padding: 28px 28px 24px;
  background: var(--pl-card);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-r);
  box-shadow: var(--pl-shadow);
}

.projects-v3 .howto-head {
  text-align: left;
  margin-bottom: 24px;
}

.projects-v3 .howto-eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--hymo-fg-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.projects-v3 .howto-eyebrow:before, .projects-v3 .howto-eyebrow:after {
  display: none;
}

.projects-v3 .howto-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--pl-ink);
  margin: 0;
}

.projects-v3 .howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

.projects-v3 .howto-grid:before {
  display: none;
}

@media (width <= 1023px) {
  .projects-v3 .howto-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.projects-v3 .step-card {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 18px 0 0;
  border-top: 1px solid var(--pl-line);
}

.projects-v3 .step-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  color: var(--hymo-fg-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.projects-v3 .step-card .title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pl-ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

.projects-v3 .step-card .desc {
  font-size: 13.5px;
  color: var(--hymo-fg-3);
  line-height: 1.55;
  letter-spacing: -.005em;
  max-width: 320px;
  margin: 0;
}

.projects-v3 .dual-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px auto 56px;
}

@media (width <= 767px) {
  .projects-v3 .dual-cta {
    gap: 12px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
}

.projects-v3 .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  color: var(--hymo-fg-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .ghost-btn:hover {
  border-color: var(--hymo-border-strong);
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
}

.projects-v3 .ghost-btn svg {
  width: 14px;
  height: 14px;
}

.projects-v3 .suggest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (width <= 1023px) {
  .projects-v3 .suggest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 767px) {
  .projects-v3 .suggest-grid {
    grid-template-columns: 1fr;
  }
}

.projects-v3 .sg {
  position: relative;
  background: var(--pl-card);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-r);
  box-shadow: var(--pl-shadow);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
}

.projects-v3 .sg:after {
  display: none;
}

.projects-v3 .sg:hover {
  border-color: var(--pl-line-2);
  box-shadow: var(--pl-shadow-hover);
}

.projects-v3 .sg-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pl-line);
  color: var(--hymo-fg-2);
}

.projects-v3 .sg-mark svg {
  width: 18px;
  height: 18px;
}

.projects-v3 .sg-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--pl-line);
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  white-space: nowrap;
}

.projects-v3 .sg-kind svg {
  width: 12px;
  height: 12px;
}

.projects-v3 .sg--tool .sg-kind, .projects-v3 .sg--guide .sg-kind {
  color: var(--hymo-fg-2);
}

.projects-v3 .sg-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pl-ink);
  line-height: 1.3;
}

.projects-v3 .sg-desc {
  font-size: 13px;
  color: var(--hymo-fg-3);
  line-height: 1.5;
  flex: 1;
}

.projects-v3 .sg-link {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.projects-v3 .sg-link svg {
  width: 12px;
  height: 12px;
}

.projects-v3 .archived-block {
  margin-top: 8px;
  margin-bottom: 48px;
}

.projects-v3 .archived-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.projects-v3 .archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
}

.projects-v3 .archived-toggle:hover {
  color: var(--pl-ink);
  border-color: var(--hymo-border-strong);
  background: var(--hymo-surface-2);
}

.projects-v3 .archived-toggle .count {
  font-size: 11px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: var(--hymo-surface-2);
  border-radius: 999px;
}

.projects-v3 .archived-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .archived-toggle.open svg {
  transform: rotate(90deg);
}

.projects-v3 .archived-delete-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #b62020;
  background: var(--pl-card);
  border: 1px solid #efc8c8;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
}

.projects-v3 .archived-delete-all:hover {
  background: #b62020;
  color: #fff;
  border-color: #b62020;
}

.projects-v3 .archived-delete-all svg {
  width: 13px;
  height: 13px;
}

.projects-v3 .pj.archived {
  opacity: .75;
  filter: saturate(.6);
}

.projects-v3 .pj.archived:hover {
  opacity: 1;
  filter: saturate(.9);
}

.projects-v3 .pj.archived .pj-step-num {
  color: var(--hymo-fg-3);
}

.projects-v3 .pj.archived .pj-step-num .lbl {
  color: var(--hymo-fg-3);
}

.projects-v3 .pj-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--pl-line);
}

.projects-v3 .pj-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  background: var(--pl-card);
  border: 1px solid var(--pl-line-2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .pj-actions button:hover {
  border-color: var(--hymo-border-strong);
  color: var(--pl-ink);
  background: var(--hymo-surface-2);
}

.projects-v3 .pj-actions button.danger {
  color: #b62020;
  border-color: #efc8c8;
}

.projects-v3 .pj-actions button.danger:hover {
  background: #b62020;
  color: #fff;
  border-color: #b62020;
}

.projects-v3 .pj-actions button svg {
  width: 13px;
  height: 13px;
}

.projects-v3 .loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
}

.projects-v3 .loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--pl-track);
  border-top-color: var(--pl-ink);
  border-radius: 50%;
  animation: .8s linear infinite hymo-spin;
}

@keyframes hymo-spin {
  to {
    transform: rotate(360deg);
  }
}

.projects-v3 .no-result {
  padding: 64px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--hymo-fg-3);
}


/* [project]/src/styles/pages/properties-list.css [app-client] (css, ) */
.projects-v3.properties-v3 {
  --hymo-red: var(--hymo-blue);
  --hymo-red-2: var(--hymo-blue-2);
  --hymo-red-3: var(--hymo-blue-3);
  --hymo-red-soft: var(--hymo-blue-soft);
  --hymo-red-soft-2: #d6e1f5;
  --hymo-red-line: var(--hymo-blue-line);
  --hymo-red-faint: var(--hymo-blue-faint);
  --hymo-red-glow: var(--hymo-blue-glow);
  --hymo-red-halo: var(--hymo-blue-halo);
  --hymo-red-accent: #269dd9;
  --hymo-grad-accent: var(--hymo-blue);
  --hymo-grad-accent-kpi: var(--hymo-blue);
  --hymo-grad-bar: var(--hymo-blue);
}

.projects-v3.properties-v3 .priority-card {
  box-shadow: none;
  animation: none;
}

.projects-v3.properties-v3 .new-project-btn {
  background: var(--hymo-blue);
  color: #fff;
  border: 1.5px solid var(--hymo-blue-2);
  box-shadow: none;
}

.projects-v3.properties-v3 .new-project-btn:hover {
  background: var(--hymo-blue-2);
}

.projects-v3.properties-v3 .new-project-btn svg {
  color: #fff;
}

.projects-v3.properties-v3 .pcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(#ffffff9e 0%, #ffffff4d 100%);
  border: 1px solid #ffffffa6;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1.5px #ffffffc7, 0 1px 2px #0f0c090a, 0 10px 24px -12px #0f0c0929;
  color: var(--hymo-fg);
  text-decoration: none;
  transition: all .22s cubic-bezier(.32, .72, 0, 1);
  position: relative;
  overflow: hidden;
}

.projects-v3.properties-v3 .pcard:hover {
  border-color: #246dbf52;
  box-shadow: none;
}

.projects-v3.properties-v3 .pcard__cover {
  position: relative;
  margin: -18px -18px 4px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eeeff2;
  border-bottom: 1px solid #0f0c090f;
}

.projects-v3.properties-v3 .pcard__cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}

.projects-v3.properties-v3 .pcard:hover .pcard__cover-img {
  transform: scale(1.04);
}

.projects-v3.properties-v3 .pcard__status--overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffffffe0;
  border-color: #fffffff2;
  color: var(--hymo-fg);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 1px 2px #0f0c0914, 0 6px 16px -6px #0f0c092e;
  z-index: 1;
}

.projects-v3.properties-v3 .pcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.projects-v3.properties-v3 .pcard__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.projects-v3.properties-v3 .pcard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.projects-v3.properties-v3 .pcard__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff8c;
  border: 1px solid #ffffffb3;
  color: var(--hymo-fg-2);
}

.projects-v3.properties-v3 .pcard__chip--accent {
  background: #246dbf14;
  color: var(--hymo-blue);
  border-color: #246dbf2e;
}

.projects-v3.properties-v3 .pcard__chip--readonly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: hsl(var(--warning-light));
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / .25);
}

.projects-v3.properties-v3 .pcard__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff9;
  border: 1px solid #ffffffc7;
  color: var(--hymo-fg-3);
  white-space: nowrap;
}

.projects-v3.properties-v3 .pcard__status:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hymo-fg-4);
}

.projects-v3.properties-v3 .pcard__status--rented:before {
  background: #2eb85c;
}

.projects-v3.properties-v3 .pcard__status--searching:before {
  background: #f4af25;
}

.projects-v3.properties-v3 .pcard__status--vacant:before {
  background: #9196a1;
}

.projects-v3.properties-v3 .pcard__status--prospect:before {
  background: #a347d1;
}

.projects-v3.properties-v3 .pcard__status--sold:before {
  background: #999;
}

.projects-v3.properties-v3 .pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 8px;
  border-top: 1px solid #0f0c090f;
}

.projects-v3.properties-v3 .pcard__meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.projects-v3.properties-v3 .pcard__meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.projects-v3.properties-v3 .pcard__meta-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.projects-v3.properties-v3 .pcard-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  border: 1.5px dashed var(--hymo-blue-line);
  background: #ffffff52;
  color: var(--hymo-blue);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s;
  min-height: 180px;
}

.projects-v3.properties-v3 .pcard-add:hover {
  border-color: var(--hymo-blue);
  background: #ffffff7a;
}

.projects-v3.properties-v3 .pcard-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px;
  border-radius: 18px;
  background: linear-gradient(#ffffff8c 0%, #ffffff2e 100%);
  border: 1px solid #ffffffa6;
  gap: 12px;
}

.projects-v3.properties-v3 .pcard-empty__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--hymo-fg);
}

.projects-v3.properties-v3 .pcard-empty__desc {
  font-size: 13.5px;
  color: var(--hymo-fg-3);
  max-width: 520px;
  line-height: 1.5;
}

.projects-v3.properties-v3 .prop-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.projects-v3.properties-v3 .prop-roles__pill {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ffffffa6;
  background: #ffffff73;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: all .2s;
}

.projects-v3.properties-v3 .prop-roles__pill:hover {
  border-color: var(--hymo-blue-line);
}

.projects-v3.properties-v3 .prop-roles__pill--active {
  background: var(--hymo-blue);
  color: #fff;
  border-color: var(--hymo-blue);
  box-shadow: none;
}

:has( + .pwz-paywall) {
  background: #0f0c0938 !important;
  backdrop-filter: blur(4px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(140%) !important;
}

.pwz-paywall {
  border: 1.5px solid #fff9 !important;
  border-radius: 20px !important;
  padding: 28px !important;
  background: linear-gradient(#ffffff8c 0%, #ffffff2e 60%), linear-gradient(135deg, #ffffff52 0%, #fff0 50%, #ffffff2e 100%), #eff4fc9e !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow: none !important;
  color: #0a0908 !important;
}

.pwz-paywall .pwz-paywall__icon-wrap {
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(#fffffff2 0%, #e6edfab3 100%);
  color: var(--hymo-blue);
  border: 1px solid #abc3ed99;
  box-shadow: none;
}

.pwz-paywall .pwz-paywall__title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #0a0908;
}

.pwz-paywall .pwz-paywall__desc {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
  margin-top: 6px;
}

.pwz-paywall .pwz-paywall__hint {
  text-align: center;
  font-size: 13px;
  color: var(--hymo-fg-3);
  margin: 12px 0;
}

.pwz-paywall .pwz-paywall__foot {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--hymo-fg-4);
  line-height: 1.5;
}

.pwz-paywall dl {
  margin: 14px 0;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 14px 16px !important;
  border: 1px solid #ffffffb3 !important;
  border-radius: 14px !important;
  background: linear-gradient(#ffffff9e 0%, #ffffff38 100%) !important;
  box-shadow: inset 0 1.5px #ffffffc7, 0 1px 2px #0f0c090a !important;
}

.pwz-paywall .pwz-paywall__footer {
  margin-top: 18px;
  justify-content: center !important;
}

.pwz-paywall .pwz-paywall__btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 18px !important;
  height: 42px !important;
  transition: all .22s cubic-bezier(.32, .72, 0, 1) !important;
}

.pwz-paywall .pwz-paywall__btn--ghost {
  background: #fff !important;
  color: var(--hymo-fg-2) !important;
  border: 1.5px solid #c1c9d7 !important;
  box-shadow: 0 1px 2px #0f0c090a !important;
}

.pwz-paywall .pwz-paywall__btn--ghost:hover:not(:disabled) {
  background: #f5f7fa !important;
  border-color: #98abcd !important;
}

.pwz-paywall .pwz-paywall__btn--primary {
  background: var(--hymo-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--hymo-blue) !important;
  box-shadow: none !important;
}

.pwz-paywall .pwz-paywall__btn--primary:hover:not(:disabled) {
  background: var(--hymo-blue-2) !important;
  border-color: var(--hymo-blue-2) !important;
  box-shadow: none !important;
}

.pwz-paywall .pwz-paywall__btn:focus-visible {
  outline: 2px solid var(--hymo-blue) !important;
  outline-offset: 2px !important;
}

.pwz-paywall .pwz-paywall__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

.projects-v3.properties-v3 .prop-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.projects-v3.properties-v3 .prop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.projects-v3.properties-v3 .prop-breadcrumb__crumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: all .15s;
}

button.prop-breadcrumb__crumb:hover {
  background: var(--hymo-blue-soft);
  color: var(--hymo-blue-2);
}

.projects-v3.properties-v3 .prop-breadcrumb__crumb--active {
  color: var(--hymo-fg);
  font-weight: 700;
  cursor: default;
}

.projects-v3.properties-v3 .prop-breadcrumb__sep {
  width: 14px;
  height: 14px;
  color: var(--hymo-fg-4);
  flex-shrink: 0;
}

.projects-v3.properties-v3 .prop-breadcrumb__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.projects-v3.properties-v3 .prop-breadcrumb__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px dashed var(--hymo-blue);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-blue-2);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 1px 2px #0f0c090a;
}

.projects-v3.properties-v3 .prop-breadcrumb__action:hover {
  background: var(--hymo-blue-soft);
}

.projects-v3.properties-v3 .prop-breadcrumb__action--ghost {
  border-style: solid;
  border-color: #d6d9e1;
  color: var(--hymo-fg);
}

.projects-v3.properties-v3 .prop-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.projects-v3.properties-v3 .prop-tile {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #d6d9e1;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c090a;
  min-width: 0;
}

.projects-v3.properties-v3 .prop-tile:hover {
  border-color: var(--hymo-blue);
  box-shadow: none;
}

.projects-v3.properties-v3 .prop-tile--active {
  border-color: var(--hymo-blue);
  background: var(--hymo-blue-soft);
  box-shadow: none;
}

.projects-v3.properties-v3 .prop-tile__icon {
  width: 18px;
  height: 18px;
  color: var(--hymo-blue);
  flex-shrink: 0;
}

.projects-v3.properties-v3 .prop-tile--unassigned .prop-tile__icon {
  color: var(--hymo-fg-3);
}

.projects-v3.properties-v3 .prop-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.projects-v3.properties-v3 .prop-tile__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.projects-v3.properties-v3 .prop-tile__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  margin-top: 2px;
}

@media (width <= 640px) {
  .projects-v3.properties-v3 .prop-breadcrumb__actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .projects-v3.properties-v3 .prop-tiles {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.projects-v3.properties-v3 .prow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projects-v3.properties-v3 .prow {
  display: grid;
  grid-template-columns: 72px 1fr auto auto 16px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid #ffffffa6;
  background: #ffffff8c;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
}

.projects-v3.properties-v3 .prow:hover {
  border-color: var(--hymo-blue-line);
  background: #ffffffbf;
}

.projects-v3.properties-v3 .prow__cover {
  width: 72px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hymo-fg-faint);
}

.projects-v3.properties-v3 .prow__cover-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.projects-v3.properties-v3 .prow__main {
  min-width: 0;
}

.projects-v3.properties-v3 .prow__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.projects-v3.properties-v3 .prow__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.projects-v3.properties-v3 .prow__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0f0c090d;
  color: var(--hymo-fg-2);
}

.projects-v3.properties-v3 .prow__chip--accent {
  background: var(--hymo-blue-soft);
  color: var(--hymo-blue-2);
}

.projects-v3.properties-v3 .prow__chip--folder {
  background: #0f0c090a;
  color: var(--hymo-fg-3);
}

.projects-v3.properties-v3 .prow__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--hymo-fg-3);
  white-space: nowrap;
}

.projects-v3.properties-v3 .prow__meta-item {
  font-weight: 500;
}

.projects-v3.properties-v3 .prow__status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.projects-v3.properties-v3 .prow__chevron {
  width: 16px;
  height: 16px;
  color: var(--hymo-fg-4);
}

@media (width <= 767px) {
  .projects-v3.properties-v3 .prow {
    grid-template-columns: 56px 1fr 16px;
  }

  .projects-v3.properties-v3 .prow__cover {
    width: 56px;
    height: 48px;
  }

  .projects-v3.properties-v3 .prow__meta, .projects-v3.properties-v3 .prow__status {
    display: none;
  }
}

.folders-mgr__section {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.folders-mgr__section + .folders-mgr__section {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.folders-mgr__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--hymo-fg-3);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.folders-mgr__create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 8px;
}

.folders-mgr__input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--hymo-fg);
  height: 38px;
}

.folders-mgr__input:focus {
  outline: 2px solid var(--hymo-blue);
  outline-offset: 1px;
  border-color: #0000;
}

.folders-mgr__btn-primary {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: var(--hymo-blue);
  color: #fff;
  padding: 0 18px;
  height: 38px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.folders-mgr__btn-primary:hover:not(:disabled) {
  background: var(--hymo-blue-2);
}

.folders-mgr__btn-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.folders-mgr__empty {
  font-size: 13px;
  color: var(--hymo-fg-3);
  padding: 16px 12px;
  text-align: center;
  background: #f6f7f9;
  border: 1px dashed #d6d9e1;
  border-radius: 10px;
  margin: 0;
}

.folders-mgr__list, .folders-mgr__assign-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #d6d9e1;
  border-radius: 12px;
  background: #f9fafb;
  box-shadow: inset 0 1px #fff9;
}

.folders-mgr__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e7eaee;
  background: #fff;
}

.folders-mgr__row:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.folders-mgr__row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.folders-mgr__row:hover {
  background: #f5f7fa;
}

.folders-mgr__row-icon {
  width: 16px;
  height: 16px;
  color: var(--hymo-blue);
  flex-shrink: 0;
}

.folders-mgr__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folders-mgr__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.folders-mgr__icon-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 6px;
  border-radius: 6px;
  color: var(--hymo-fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.folders-mgr__icon-btn:hover {
  background: #0f0c090f;
  color: var(--hymo-fg);
}

.folders-mgr__icon-btn--danger:hover {
  color: #c32222;
  background: #c3222214;
}

.folders-mgr__assign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7eaee;
  background: #fff;
}

.folders-mgr__assign-row:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.folders-mgr__assign-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.folders-mgr__assign-row:hover {
  background: #f5f7fa;
}

.folders-mgr__assign-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folders-mgr__assign-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folders-mgr__assign-meta {
  font-size: 11px;
  color: var(--hymo-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folders-mgr__select {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  background: #fff;
}

.folders-mgr__select--parent {
  height: 38px;
}

@media (width <= 640px) {
  .folders-mgr__create {
    grid-template-columns: 1fr;
  }

  .folders-mgr__assign-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .folders-mgr__list, .folders-mgr__assign-list {
    max-height: 340px;
  }
}


/* [project]/src/styles/pages/imported-listings.css [app-client] (css, ) */
.projects-v3 .listings-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hymo-glass-border-light);
  box-shadow: var(--hymo-shadow-glass);
  overflow: hidden;
  isolation: isolate;
  transition: all .28s var(--hymo-ease);
}

.projects-v3 .listings-card:hover {
  box-shadow: var(--hymo-shadow-glass-hover);
}

.projects-v3 .listings-card--selected {
  border-color: var(--hymo-red-line);
  box-shadow: none;
}

.projects-v3 .listings-card--highlight {
  animation: listings-highlight-pulse 3s var(--hymo-ease);
}

@keyframes listings-highlight-pulse {
  0% {
    box-shadow: none;
  }

  70% {
    box-shadow: none;
  }

  100% {
    box-shadow: var(--hymo-shadow-glass);
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-v3 .listings-card--highlight {
    animation: none;
  }
}

.projects-v3 .listings-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--hymo-surface-2);
}

.projects-v3 .listings-card__photo img {
  -o-object-fit: cover;
  object-fit: cover;
}

.projects-v3 .listings-card__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hymo-fg-4);
}

.projects-v3 .listings-card__photo-placeholder svg {
  width: 28px;
  height: 28px;
}

.projects-v3 .listings-card__select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 8px;
  background: var(--hymo-glass-deep);
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  border: 1px solid var(--hymo-glass-border-light);
}

.projects-v3 .listings-card__badges {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.projects-v3 .listings-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--hymo-glass-deep);
  border: 1px solid var(--hymo-glass-border-light);
  color: var(--hymo-fg-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
}

.projects-v3 .listings-card__badge--converted {
  background: #ae1e461a;
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
  text-decoration: none;
}

.projects-v3 .listings-card__badge--converted:hover {
  background: #ae1e4629;
}

.projects-v3 .listings-card__price-drop {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--hymo-red);
  color: var(--hymo-surface);
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.projects-v3 .listings-card__price-drop svg {
  width: 12px;
  height: 12px;
}

.projects-v3 .listings-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}

.projects-v3 .listings-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--hymo-fg);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3 .listings-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.projects-v3 .listings-card__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hymo-fg-4);
}

.projects-v3 .listings-card__price {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .listings-card__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(#ffffff8c 0%, #ffffff59 100%);
  border: 1px solid #fff9;
}

.projects-v3 .listings-card__kpi {
  text-align: center;
  min-width: 0;
}

.projects-v3 .listings-card__kpi-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  margin-bottom: 2px;
}

.projects-v3 .listings-card__kpi-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3 .listings-card__kpi-empty {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--hymo-glass-soft);
  border: 1px solid #fff9;
  color: var(--hymo-fg-3);
  font-size: 12px;
  font-style: italic;
}

.projects-v3 .listings-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--hymo-red);
  color: var(--hymo-surface);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--hymo-shadow-cta);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .listings-card__cta:disabled {
  background: var(--hymo-surface-3);
  color: var(--hymo-fg-4);
  box-shadow: none;
  cursor: not-allowed;
}

.projects-v3 .listings-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.projects-v3 .listings-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #0000;
  background: none;
  color: var(--hymo-fg-3);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .listings-card__action svg {
  width: 14px;
  height: 14px;
}

.projects-v3 .listings-card__action:hover {
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
  background: #ae1e460f;
}

.projects-v3 .listings-card__action--danger:hover {
  color: var(--hymo-red-2);
  border-color: var(--hymo-red-line);
  background: #ae1e461a;
}

.projects-v3 .listings-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  box-shadow: var(--hymo-shadow-card);
}

.projects-v3 .listings-invite__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hymo-fg);
}

.projects-v3 .listings-invite__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  max-width: 560px;
}

.projects-v3 .listings-invite__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.projects-v3 .listings-invite__ext {
  position: relative;
}

.projects-v3 .listings-invite__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border-strong);
  color: var(--hymo-fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .listings-invite__btn svg {
  width: 15px;
  height: 15px;
}

.projects-v3 .listings-invite__btn:hover:not(:disabled) {
  border-color: var(--hymo-red);
  color: var(--hymo-red);
}

.projects-v3 .listings-invite__btn--primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.projects-v3 .listings-invite__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--hymo-red);
  color: #fff;
}

.projects-v3 .listings-invite__active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--hymo-red-soft);
  border: 1px solid var(--hymo-red-line);
  color: var(--hymo-red-2);
}

.projects-v3 .listings-invite__active svg {
  width: 15px;
  height: 15px;
}

.projects-v3 .listings-empty-manual {
  margin-top: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.projects-v3 .listings-empty-manual:hover {
  color: var(--hymo-red-2);
}

.listings-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: var(--hymo-glass-deep);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid #ffffffbf;
  box-shadow: var(--hymo-shadow-pop);
}

.listings-compare-bar__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.listings-compare-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.listings-compare-bar__compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--hymo-red);
  color: var(--hymo-surface);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--hymo-shadow-cta);
}

.listings-compare-bar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--hymo-border);
  background: none;
  color: var(--hymo-fg-3);
}

.listings-compare-bar__clear:hover {
  color: var(--hymo-red);
  border-color: var(--hymo-red-line);
}

.projects-v3 .listings-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.projects-v3 .listings-empty-cta__badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--hymo-surface-3);
  color: var(--hymo-fg-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.projects-v3 .listings-card__stretch {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.projects-v3 .listings-card__stretch:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
  border-radius: 18px;
}

.projects-v3 .listings-card__analyze-hint {
  position: absolute;
  left: 50%;
  top: 72px;
  margin-left: -44px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--hymo-red);
  color: var(--hymo-surface);
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--hymo-t) var(--hymo-ease), transform var(--hymo-t) var(--hymo-ease);
  pointer-events: none;
}

.projects-v3 .listings-card:hover .listings-card__analyze-hint, .projects-v3 .listings-card__stretch:focus-visible .listings-card__analyze-hint {
  opacity: 1;
  transform: translateY(0);
}

.projects-v3 .listings-card:hover .listings-card__title {
  color: var(--hymo-red);
}

.projects-v3 .listings-card__cta, .projects-v3 .listings-card__actions, .projects-v3 .listings-card__kpis, .projects-v3 .listings-card__kpi-empty {
  position: relative;
  z-index: 1;
}

.projects-v3 .listings-card__kpis, .projects-v3 .listings-card__kpi-empty {
  pointer-events: none;
}

.projects-v3 .space-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.projects-v3 .space-switch__btn {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "label count"
                       "sub sub";
  justify-content: start;
  align-items: baseline;
  -moz-column-gap: 10px;
  column-gap: 10px;
  row-gap: 2px;
  text-align: left;
  padding: 16px 20px;
  border-radius: var(--hymo-v4-r);
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: var(--hymo-v4-shadow);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .space-switch__btn:hover {
  border-color: var(--hymo-v4-line-2);
  box-shadow: var(--hymo-v4-shadow-hover);
}

.projects-v3 .space-switch__btn--active {
  border-color: var(--hymo-v4-ink);
  box-shadow: var(--hymo-v4-shadow-hover);
}

.projects-v3 .space-switch__btn:focus-visible {
  outline: 2px solid var(--hymo-v4-ink);
  outline-offset: 2px;
}

.projects-v3 .space-switch__label {
  grid-area: label;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
}

.projects-v3 .space-switch__count {
  grid-area: count;
  font-size: 13px;
  font-weight: 700;
  color: var(--hymo-fg-4);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .space-switch__btn--active .space-switch__count {
  color: var(--hymo-red);
}

.projects-v3 .space-switch__sub {
  grid-area: sub;
  font-size: 12px;
  color: var(--hymo-fg-4);
}

.projects-v3 .recherches-sub {
  margin: -4px 0 14px;
  font-size: 13px;
  color: var(--hymo-fg-3);
}

.projects-v3 .recherches-search {
  max-width: 320px;
}

@media (width <= 767px) {
  .projects-v3 .space-switch {
    grid-template-columns: 1fr;
  }
}


/* [project]/src/styles/features/listing-compare.css [app-client] (css, ) */
.listing-compare-drawer__overlay {
  position: fixed;
  inset: 0;
  background: #0a090852;
  backdrop-filter: blur(4px);
  animation: listing-compare-fade-in var(--hymo-t) var(--hymo-ease);
}

.listing-compare-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 640px);
  display: flex;
  flex-direction: column;
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(var(--hymo-glass-blur)) saturate(180%);
  border-left: 1px solid var(--hymo-glass-border);
  box-shadow: var(--hymo-shadow-doc);
  animation: listing-compare-slide-in var(--hymo-t) var(--hymo-ease);
}

@keyframes listing-compare-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes listing-compare-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }

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

.listing-compare-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hymo-border);
}

.listing-compare-drawer__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hymo-fg);
}

.listing-compare-drawer__close {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--hymo-fg-3);
  background: none;
  border: 1px solid var(--hymo-border);
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.listing-compare-drawer__close:hover {
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
}

.listing-compare-drawer__close:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.listing-compare-drawer__table-wrap {
  flex: 1;
  overflow: auto;
  padding: 16px 24px 24px;
}

.listing-compare-drawer__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}

.listing-compare-drawer__table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hymo-fg);
  border-bottom: 1px solid var(--hymo-border);
  vertical-align: bottom;
}

.listing-compare-drawer__table tbody th, .listing-compare-drawer__table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hymo-border);
}

.listing-compare-drawer__row-label {
  font-weight: 600;
  color: var(--hymo-fg-3);
  white-space: nowrap;
}

.listing-compare-drawer__cell {
  text-align: center;
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.listing-compare-drawer__cell--best {
  color: var(--hymo-red-2);
  background: var(--hymo-red-soft);
  border-radius: var(--radius-sm, 6px);
}

.listing-compare-drawer__note {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hymo-fg-4);
}

@media (width <= 767px) {
  .listing-compare-drawer__panel {
    width: 100vw;
  }
}


/* [project]/src/styles/pages/listing-analysis.css [app-client] (css, ) */
.projects-v3 .an-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.projects-v3 .an-hero {
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  border-radius: 14px;
  overflow: hidden;
}

.projects-v3 .an-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 18px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.projects-v3 .an-hero__back svg {
  width: 14px;
  height: 14px;
}

.projects-v3 .an-hero__back:hover {
  color: var(--hymo-fg);
}

.projects-v3 .an-hero__gallery {
  margin-top: 12px;
}

.projects-v3 .an-hero__photo {
  width: 100%;
  height: 340px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.projects-v3 .an-hero__thumbs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--hymo-surface);
}

.projects-v3 .an-hero__thumb {
  width: 20%;
  height: 78px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.projects-v3 .an-hero__body {
  padding: 18px 22px 20px;
}

.projects-v3 .an-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.projects-v3 .an-hero__site, .projects-v3 .an-hero__converted, .projects-v3 .an-hero__drop, .projects-v3 .an-hero__dpe {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 4px;
}

.projects-v3 .an-hero__site {
  background: var(--hymo-surface-2);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-3);
}

.projects-v3 .an-hero__converted {
  border: 1px solid var(--hymo-red-line);
  color: var(--hymo-red-2);
}

.projects-v3 .an-hero__drop {
  background: var(--hymo-red);
  color: #fff;
}

.projects-v3 .an-hero__dpe {
  background: var(--hymo-surface-2);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-2);
}

.projects-v3 .an-hero__price {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--hymo-fg);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-hero__sqm {
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg-4);
  letter-spacing: 0;
}

.projects-v3 .an-hero__title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.projects-v3 .an-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
}

.projects-v3 .an-hero__chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  padding: 0 12px;
  border-left: 1px solid var(--hymo-border);
}

.projects-v3 .an-hero__chip:first-child {
  padding-left: 0;
  border-left: none;
}

.projects-v3 .an-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.projects-v3 .an-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--hymo-red);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.projects-v3 .an-hero__cta svg {
  width: 15px;
  height: 15px;
}

.projects-v3 .an-hero__cta:hover:not(:disabled) {
  background: var(--hymo-red-2);
}

.projects-v3 .an-hero__cta:disabled {
  background: var(--hymo-surface-2);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-4);
  cursor: not-allowed;
}

.projects-v3 .an-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.projects-v3 .an-hero__link svg {
  width: 13px;
  height: 13px;
}

.projects-v3 .an-hero__link:hover {
  color: var(--hymo-fg);
}

.projects-v3 .an-card, .projects-v3 .an-score {
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  border-radius: 14px;
  padding: 22px;
}

.projects-v3 .an-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.projects-v3 .an-card__title, .projects-v3 .an-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--hymo-fg);
}

.projects-v3 .an-card__title:before, .projects-v3 .an-block__eyebrow:before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--hymo-red);
  border-radius: 2px;
}

.projects-v3 .an-card__source {
  font-size: 11.5px;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-page__unavailable {
  font-size: 13px;
  color: var(--hymo-fg-4);
  text-align: center;
}

.projects-v3 .an-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 4px;
}

.projects-v3 .an-stats + .an-stats {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--hymo-border);
}

.projects-v3 .an-stat {
  padding: 2px 18px;
  border-left: 1px solid var(--hymo-border);
  min-width: 0;
}

.projects-v3 .an-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.projects-v3 .an-stat__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hymo-fg-4);
  margin-bottom: 4px;
}

.projects-v3 .an-stat__value {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.projects-v3 .an-tile__sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--hymo-fg-4);
  line-height: 1.35;
}

.projects-v3 .an-score {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}

.projects-v3 .an-score__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.projects-v3 .an-score__figure {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--hymo-fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-score__of {
  font-size: 17px;
  font-weight: 700;
  color: var(--hymo-fg-4);
  letter-spacing: 0;
}

.projects-v3 .an-score__verdict {
  font-size: 13px;
  font-weight: 700;
}

.projects-v3 .an-score__verdict--good {
  color: #2d7654;
}

.projects-v3 .an-score__verdict--mid {
  color: #aa6d18;
}

.projects-v3 .an-score__verdict--low {
  color: var(--hymo-red-2);
}

.projects-v3 .an-score__parts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projects-v3 .an-score__part-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.projects-v3 .an-score__part-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--hymo-fg-2);
}

.projects-v3 .an-score__part-detail {
  font-size: 12px;
  color: var(--hymo-fg-4);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-score__track {
  display: block;
  height: 3px;
  background: var(--hymo-border);
}

.projects-v3 .an-score__fill {
  display: block;
  height: 100%;
  background: var(--hymo-fg);
}

.projects-v3 .an-score__foot {
  font-size: 11px;
  color: var(--hymo-fg-4);
  margin-top: 2px;
}

.projects-v3 .an-market__verdict {
  font-size: 14.5px;
  color: var(--hymo-fg-2);
  margin-bottom: 14px;
  max-width: 60ch;
}

.projects-v3 .an-market__gap--over {
  color: var(--hymo-red-2);
}

.projects-v3 .an-market__gap--under {
  color: #2d7654;
}

.projects-v3 .an-market__kpis {
  margin-top: 14px;
}

.projects-v3 .an-trend {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
}

.projects-v3 .an-trend__col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.projects-v3 .an-trend__bar {
  width: 12px;
  background: var(--hymo-fg-2);
}

.projects-v3 .an-trend__year {
  font-size: 10px;
  font-weight: 600;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-sales__wrap {
  overflow-x: auto;
}

.projects-v3 .an-sales {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-sales th {
  text-align: left;
  padding: 6px 12px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hymo-fg-4);
  border-bottom: 1px solid var(--hymo-fg);
}

.projects-v3 .an-sales td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hymo-border);
  color: var(--hymo-fg-3);
}

.projects-v3 .an-sales tr:last-child td {
  border-bottom: none;
}

.projects-v3 .an-sales__addr {
  font-weight: 600;
  color: var(--hymo-fg);
}

.projects-v3 .an-sales__price {
  font-weight: 700;
  color: var(--hymo-fg);
  white-space: nowrap;
}

.projects-v3 .an-dpe__scale {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}

.projects-v3 .an-dpe__step {
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13.5px;
  color: #fff;
  opacity: .35;
}

.projects-v3 .an-dpe__step--current {
  opacity: 1;
  transform: scale(1.3);
  z-index: 1;
}

.projects-v3 .an-dpe__step--a {
  background: #009c6d;
}

.projects-v3 .an-dpe__step--b {
  background: #52b153;
}

.projects-v3 .an-dpe__step--c {
  background: #a5cc3f;
}

.projects-v3 .an-dpe__step--d {
  background: #f4e70f;
  color: #5a5300;
}

.projects-v3 .an-dpe__step--e {
  background: #f0b40f;
}

.projects-v3 .an-dpe__step--f {
  background: #eb8235;
}

.projects-v3 .an-dpe__step--g {
  background: #d7221f;
}

.projects-v3 .an-dpe__ges {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border: 1px solid var(--hymo-border);
  border-radius: 4px;
  color: var(--hymo-fg-2);
}

.projects-v3 .an-dpe__verdict {
  font-size: 13.5px;
  color: var(--hymo-fg-2);
  margin-bottom: 10px;
  max-width: 60ch;
}

.projects-v3 .an-dpe__note {
  font-size: 13px;
  color: var(--hymo-fg-4);
  margin-bottom: 10px;
}

.projects-v3 .an-dpe__invoice {
  font-size: 13px;
  color: var(--hymo-fg-2);
  margin-bottom: 14px;
}

.projects-v3 .an-dpe__dist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 560px;
}

.projects-v3 .an-dpe__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.projects-v3 .an-dpe__mini {
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
}

.projects-v3 .an-dpe__track {
  flex: 1;
  height: 6px;
  background: var(--hymo-surface-2);
}

.projects-v3 .an-dpe__fill {
  display: block;
  height: 100%;
  background: var(--hymo-fg-4);
  opacity: .5;
}

.projects-v3 .an-dpe__fill--current {
  background: var(--hymo-fg);
  opacity: 1;
}

.projects-v3 .an-dpe__pct {
  width: 38px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-fin__inputs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.projects-v3 .an-fin__rent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-fin__rent input {
  width: 160px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hymo-fg);
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border-strong);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-fin__rent input:focus-visible {
  outline: none;
  border-color: var(--hymo-red);
}

.projects-v3 .an-fin__empty {
  font-size: 13.5px;
  color: var(--hymo-fg-3);
}

.projects-v3 .an-fin__neg {
  color: var(--hymo-red-2) !important;
}

.projects-v3 .an-fin__regimes {
  margin-top: 18px;
  border-top: 1px dashed var(--hymo-border);
  padding-top: 6px;
}

.projects-v3 .an-fin__regime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--hymo-fg-3);
  border-bottom: 1px solid var(--hymo-border);
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-fin__regime:last-child {
  border-bottom: none;
}

.projects-v3 .an-fin__regime--best {
  color: var(--hymo-fg);
}

.projects-v3 .an-fin__regime--best .an-fin__regime-name:after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--hymo-red);
  border-radius: 2px;
  margin-left: 8px;
}

.projects-v3 .an-fin__regime--off {
  opacity: .45;
}

.projects-v3 .an-fin__regime-name {
  font-weight: 700;
}

.projects-v3 .an-fin__regime-name em {
  font-style: normal;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-proj__title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hymo-fg-4);
  margin: 18px 0 6px;
}

.projects-v3 .an-fin__foot {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-fin__foot a {
  color: var(--hymo-red);
  font-weight: 600;
}

@media (width <= 767px) {
  .projects-v3 .an-hero__photo {
    height: 210px;
  }

  .projects-v3 .an-hero__thumb {
    height: 52px;
  }

  .projects-v3 .an-card, .projects-v3 .an-score {
    padding: 16px;
  }

  .projects-v3 .an-score {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .projects-v3 .an-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }

  .projects-v3 .an-stat {
    padding: 0 12px;
  }

  .projects-v3 .an-stat:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
}

.projects-v3 .an-market__caveat {
  margin: 6px 0 4px;
  font-size: 10.5px;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-works {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 12px 0 6px;
  padding: 12px 16px;
  border: 1px dashed var(--hymo-border-strong);
  border-radius: 10px;
  background: var(--hymo-surface-2);
}

.projects-v3 .an-works__title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hymo-fg);
}

.projects-v3 .an-works__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--hymo-fg-3);
  max-width: 54ch;
}

.projects-v3 .an-works__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-works__field input {
  width: 150px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hymo-fg);
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border-strong);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.projects-v3 .an-works__field input:focus-visible {
  outline: none;
  border-color: var(--hymo-red);
}

.projects-v3 .an-map__canvas {
  width: 100%;
  height: 340px;
  border-radius: 10px;
  border: 1px solid var(--hymo-border);
  z-index: 0;
}

.projects-v3 .an-map__loading {
  display: grid;
  place-content: center;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-4);
  font-size: 13px;
}

.projects-v3 .an-map__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hymo-fg-4);
}

.projects-v3 .an-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.projects-v3 .an-map__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  padding: 5px 11px;
  border: 1px solid var(--hymo-border);
  border-radius: 999px;
}

.projects-v3 .an-map__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.an-map__pin {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px #0a090859;
}

.an-map__pin--listing {
  background: var(--hymo-red);
  border-width: 3px;
}

.an-map__pin--transport {
  background: #2563ab;
}

.an-map__pin--ecole {
  background: #b7791f;
}

.an-map__pin--superieur {
  background: #6d4fa3;
}

.an-map__pin--commerce {
  background: #2f855a;
}

.an-map__pin--sante {
  background: #c53030;
}


/* [project]/src/styles/pages/owner-dashboard.css [app-client] (css, ) */
.projects-v3.dashboard-v3 {
  --hymo-red: #366350;
  --hymo-red-2: #254b3b;
  --hymo-red-3: #438968;
  --hymo-red-soft: #ebf4f0;
  --hymo-red-soft-2: #dceae3;
  --hymo-red-line: #c2d6cc;
  --hymo-red-faint: #f5faf7;
  --hymo-red-glow: #36635029;
  --hymo-red-halo: #36635038;
  --hymo-red-accent: #366350;
  --hymo-grad-accent: var(--hymo-red);
  --hymo-grad-accent-kpi: var(--hymo-fg);
  --hymo-grad-bar: var(--hymo-red);
  --dash-ink: var(--hymo-v4-ink);
  --dash-card: var(--hymo-v4-card);
  --dash-line: var(--hymo-v4-line);
  --dash-line-2: var(--hymo-v4-line-2);
  --dash-r: var(--hymo-v4-r);
  --dash-r-sm: var(--hymo-v4-r-sm);
  --dash-shadow: var(--hymo-v4-shadow);
  --dash-shadow-hover: var(--hymo-v4-shadow-hover);
  --dash-moss: #234839;
  --dash-danger: #b63d2b;
  --dash-danger-soft: #fcf0ee;
  --dash-danger-line: #edcec9;
  padding-top: 36px;
  background: var(--hymo-bg);
}

.projects-v3.dashboard-v3 .focus-col {
  max-width: 1160px;
}

.projects-v3.dashboard-v3 .kpi, .projects-v3.dashboard-v3 .priority-card, .projects-v3.dashboard-v3 .task-row, .projects-v3.dashboard-v3 .qa-panel, .projects-v3.dashboard-v3 .drents, .projects-v3.dashboard-v3 .dmini, .projects-v3.dashboard-v3 .sg, .projects-v3.dashboard-v3 .rib-card, .projects-v3.dashboard-v3 .fiscal-banner {
  background: var(--dash-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow);
  animation: none;
}

.projects-v3.dashboard-v3 .kpi:after, .projects-v3.dashboard-v3 .priority-card:before, .projects-v3.dashboard-v3 .priority-card:after, .projects-v3.dashboard-v3 .priority-card-shimmer, .projects-v3.dashboard-v3 .sg:after, .projects-v3.dashboard-v3 .new-project-btn-shell:before, .projects-v3.dashboard-v3 .new-project-btn:before {
  display: none;
}

.dashboard-v3 .dash-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.projects-v3.dashboard-v3 .greet-title {
  font-size: 40px;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

.projects-v3.dashboard-v3 .greet-brief {
  font-size: 17px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  line-height: 1.45;
  margin-top: 0;
}

.projects-v3.dashboard-v3 .greet-title .accent, .projects-v3.dashboard-v3 .greet-brief .accent, .projects-v3.dashboard-v3 .empty-pitch .accent-strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--hymo-red);
}

.projects-v3.dashboard-v3 .sec-head h2 {
  font-size: 22px;
  letter-spacing: -.02em;
}

.projects-v3.dashboard-v3 .sec-head h2 .accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--hymo-fg);
}

@media (width <= 1023px) {
  .projects-v3.dashboard-v3 .greet-title {
    font-size: 34px;
  }
}

@media (width <= 767px) {
  .dashboard-v3 .dash-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .projects-v3.dashboard-v3 .greet-title {
    font-size: 30px;
  }

  .projects-v3.dashboard-v3 .greet-brief {
    font-size: 15px;
  }
}

.projects-v3.dashboard-v3 .new-project-btn {
  height: 46px;
  padding: 0 22px;
  gap: 10px;
  color: #fff;
  background: var(--dash-ink);
  border: 1px solid var(--dash-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px #0f0c098c;
}

.projects-v3.dashboard-v3 .new-project-btn:hover {
  background: #000;
  border-color: #000;
  box-shadow: 0 14px 30px -12px #0f0c0999;
}

.projects-v3.dashboard-v3 .new-project-btn svg {
  color: #fff;
}

.dashboard-v3 .bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  margin-bottom: 16px;
}

.dashboard-v3 .bento-visual {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  min-height: 400px;
}

.dashboard-v3 .bento-featured {
  grid-column: 6 / 9;
}

.dashboard-v3 .bento-kpis {
  grid-column: 9 / 13;
}

.dashboard-v3 .bento-priority {
  grid-column: 6 / 13;
  min-width: 0;
}

.dashboard-v3 .bento--empty .bento-visual {
  grid-row: 1 / 2;
  min-height: 360px;
}

.dashboard-v3 .bento-onboard {
  grid-column: 6 / 13;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 8px 0;
  min-width: 0;
}

@media (width <= 1023px) {
  .dashboard-v3 .bento-visual, .dashboard-v3 .bento--empty .bento-visual {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 260px;
  }

  .dashboard-v3 .bento-featured {
    grid-column: 1 / 6;
  }

  .dashboard-v3 .bento-kpis {
    grid-column: 6 / 13;
  }

  .dashboard-v3 .bento-priority, .dashboard-v3 .bento-onboard {
    grid-column: 1 / -1;
  }
}

@media (width <= 767px) {
  .dashboard-v3 .bento {
    gap: 12px;
  }

  .dashboard-v3 .bento-featured, .dashboard-v3 .bento-kpis {
    grid-column: 1 / -1;
  }

  .dashboard-v3 .bento-visual {
    min-height: 220px;
  }
}

.dashboard-v3 .bento-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border-radius: var(--dash-r);
  background: var(--hymo-surface-3);
  box-shadow: var(--dash-shadow);
  color: #fff;
  text-decoration: none;
  transition: box-shadow var(--hymo-t-slow) var(--hymo-ease), transform var(--hymo-t-slow) var(--hymo-ease);
}

.dashboard-v3 .bento-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.2s var(--hymo-ease);
}

.dashboard-v3 .bento-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#0a090829 0%, #0a090800 28% 46%, #0a0908c2 100%);
}

.dashboard-v3 a.bento-visual:hover {
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 a.bento-visual:hover > img {
  transform: scale(1.035);
}

.dashboard-v3 .bv-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-v3 .bv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ffffffe0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--dash-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.dashboard-v3 .bv-chip svg {
  width: 13px;
  height: 13px;
}

.dashboard-v3 .bv-chip--on {
  background: var(--hymo-red);
  color: #fff;
}

.dashboard-v3 .bv-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-v3 .bv-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dashboard-v3 .bv-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffb8;
}

.dashboard-v3 .bv-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-v3 .bv-meta {
  font-size: 13px;
  color: #ffffffd6;
}

.dashboard-v3 .bv-go {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--dash-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .bv-go svg {
  width: 18px;
  height: 18px;
}

.dashboard-v3 a.bento-visual:hover .bv-go {
  transform: translate(2px, -2px);
}

@media (width <= 767px) {
  .dashboard-v3 .bv-name {
    font-size: 20px;
  }
}

.dashboard-v3 .feat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  overflow: hidden;
  isolation: isolate;
  padding: 20px 22px;
  border-radius: var(--dash-r);
  background: var(--dash-moss);
  color: #fff;
  box-shadow: 0 1px 2px #0f0c090f, 0 18px 40px -22px #23483999;
}

.dashboard-v3 .feat:before {
  content: "";
  position: absolute;
  right: -72px;
  top: -72px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 26px solid #ffffff0f;
  pointer-events: none;
  z-index: -1;
}

.dashboard-v3 .feat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-v3 .feat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff24;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .feat-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffffffbd;
}

.dashboard-v3 .feat-spark {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: auto;
  padding-top: 14px;
  color: #ffffffe6;
  overflow: visible;
}

.dashboard-v3 .feat-val {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .feat-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: #ffffffbd;
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .feat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.dashboard-v3 .feat-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #ffffff2e;
  overflow: hidden;
}

.dashboard-v3 .feat-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transition: width 1s var(--hymo-ease);
}

.dashboard-v3 .feat-rate {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.projects-v3.dashboard-v3 .kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.projects-v3.dashboard-v3 .kpi {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: 18px;
  overflow: visible;
}

.projects-v3.dashboard-v3 .kpi:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.projects-v3.dashboard-v3 .kpi-head {
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--hymo-fg-3);
}

.projects-v3.dashboard-v3 .kpi-head svg {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  opacity: 1;
  flex-shrink: 0;
}

.projects-v3.dashboard-v3 .kpi-val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: none;
  color: var(--hymo-fg);
}

.dashboard-v3 .kpi-sub {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--hymo-fg-4);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .kpi-sub--good {
  color: var(--hymo-red);
  font-weight: 600;
}

.dashboard-v3 .kpi-sub--bad {
  color: var(--dash-danger);
  font-weight: 600;
}

.projects-v3.dashboard-v3 .priority-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
  margin-bottom: 10px;
}

.projects-v3.dashboard-v3 .priority-card {
  padding: 14px 16px;
  border-radius: 18px;
  gap: 14px;
}

.projects-v3.dashboard-v3 .priority-card:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.projects-v3.dashboard-v3 .priority-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--dash-ink);
  border: none;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.projects-v3.dashboard-v3 .priority-card:hover .priority-mark {
  transform: none;
  box-shadow: none;
}

.projects-v3.dashboard-v3 .priority-mark .lbl {
  color: #ffffffb3;
  opacity: 1;
  font-size: 7.5px;
}

.projects-v3.dashboard-v3 .priority-mark--icon svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.projects-v3.dashboard-v3 .priority-title {
  font-size: 15px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.projects-v3.dashboard-v3 .priority-context {
  text-transform: none;
  letter-spacing: -.005em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 3px;
  color: var(--hymo-fg-4);
}

.projects-v3.dashboard-v3 .priority-context span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.projects-v3.dashboard-v3 .priority-cta {
  height: 36px;
  padding: 0 14px;
  gap: 6px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), gap var(--hymo-t) var(--hymo-ease);
}

.projects-v3.dashboard-v3 .priority-card:hover .priority-cta {
  background: var(--dash-ink);
  color: #fff;
  gap: 8px;
}

.projects-v3.dashboard-v3 .priority-cta svg {
  width: 14px;
  height: 14px;
  animation: none;
}

@media (width <= 767px) {
  .projects-v3.dashboard-v3 .priority-card .priority-cta {
    width: 100%;
    justify-content: center;
  }
}

.dashboard-v3 .task-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.dashboard-v3 .task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--dash-r-sm);
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .task-row:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 .task-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
}

.dashboard-v3 .task-ico svg {
  width: 15px;
  height: 15px;
}

.dashboard-v3 .task-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dashboard-v3 .task-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.dashboard-v3 .task-context {
  font-size: 11.5px;
  color: var(--hymo-fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .task-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  transition: color var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .task-cta svg {
  width: 12px;
  height: 12px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .task-row:hover .task-cta {
  color: var(--hymo-fg);
}

.dashboard-v3 .task-row:hover .task-cta svg {
  transform: translateX(2px);
}

.dashboard-v3 .qa-block {
  margin-bottom: 56px;
}

.dashboard-v3 .qa-panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  border-radius: var(--dash-r);
}

@media (width <= 1023px) {
  .dashboard-v3 .qa-panel {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 767px) {
  .dashboard-v3 .qa-panel {
    gap: 2px;
    padding: 6px;
  }
}

.dashboard-v3 .qa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 8px 12px;
  border-radius: var(--dash-r-sm);
  text-decoration: none;
  text-align: center;
  color: var(--hymo-fg-2);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .qa-item:hover {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
}

.dashboard-v3 .qa-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .qa-ico svg {
  width: 17px;
  height: 17px;
}

.dashboard-v3 .qa-item:hover .qa-ico {
  background: var(--dash-ink);
  color: #fff;
}

.dashboard-v3 .qa-lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}

.projects-v3.dashboard-v3 .sec {
  margin-bottom: 56px;
}

.projects-v3.dashboard-v3 .sec-head {
  margin-bottom: 14px;
}

.projects-v3.dashboard-v3 .sec-head h2 .count {
  background: var(--dash-card);
  border-color: var(--dash-line-2);
}

.projects-v3.dashboard-v3 .sec-head .link {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--dash-line-2);
  background: var(--dash-card);
}

.projects-v3.dashboard-v3 .sec-head .link:hover {
  background: var(--dash-ink);
  border-color: var(--dash-ink);
  color: #fff;
}

.dashboard-v3 .fiscal-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 14px 18px;
  border-radius: 16px;
  position: relative;
  z-index: 2;
}

.dashboard-v3 .fiscal-banner .fb-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
}

.dashboard-v3 .fiscal-banner .fb-mark svg {
  width: 17px;
  height: 17px;
}

.dashboard-v3 .fiscal-banner .fb-body {
  flex: 1;
  min-width: 220px;
}

.dashboard-v3 .fiscal-banner .fb-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
}

.dashboard-v3 .fiscal-banner .fb-text {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  line-height: 1.5;
  margin-top: 2px;
}

.dashboard-v3 .fiscal-banner .fb-text a {
  color: inherit;
  text-decoration: underline;
}

.dashboard-v3 .fiscal-banner .fb-text a:hover {
  color: var(--hymo-red);
}

.dashboard-v3 .fiscal-banner .fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--dash-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .fiscal-banner .fb-cta:hover {
  background: #000;
}

.dashboard-v3 .fiscal-banner .fb-cta svg {
  width: 13px;
  height: 13px;
}

.dashboard-v3 .drents {
  position: relative;
  padding: 20px 22px;
  border-radius: var(--dash-r);
}

.dashboard-v3 .drents-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dashboard-v3 .drents-month {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  text-transform: capitalize;
}

.dashboard-v3 .drents-expected {
  font-size: 12.5px;
  color: var(--hymo-fg-4);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .drow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dash-line);
}

.dashboard-v3 .drow:last-of-type {
  border-bottom: none;
}

.dashboard-v3 .drow-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-3);
}

.dashboard-v3 .drow-ico svg {
  width: 16px;
  height: 16px;
}

.dashboard-v3 .drow-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .drow-meta {
  font-size: 11.5px;
  color: var(--hymo-fg-4);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .drow-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-v3 .drow-amount {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-v3 .drow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid #0000;
}

.dashboard-v3 .drow-pill .ind {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-v3 .drow-pill--late {
  background: var(--dash-danger-soft);
  color: var(--dash-danger);
  border-color: var(--dash-danger-line);
}

.dashboard-v3 .drow-pill--late .ind {
  background: var(--dash-danger);
  animation: 1.6s ease-in-out infinite drow-pulse;
}

.dashboard-v3 .drow-pill--pending, .dashboard-v3 .drow-pill--partial {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
}

.dashboard-v3 .drow-pill--pending .ind, .dashboard-v3 .drow-pill--partial .ind {
  background: var(--hymo-fg-4);
}

.dashboard-v3 .drow-pill--paid {
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
}

.dashboard-v3 .drow-pill--paid .ind {
  background: var(--hymo-red);
}

.dashboard-v3 .drow-pill--neutral {
  background: none;
  color: var(--hymo-fg-4);
  border-color: var(--dash-line-2);
}

.dashboard-v3 .drow-pill--neutral .ind {
  background: var(--hymo-border-strong);
}

@keyframes drow-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.8);
  }
}

.dashboard-v3 .drents-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dash-line);
}

.dashboard-v3 .drents-foot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dashboard-v3 .drents-total {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .drents-rate {
  font-size: 13px;
  font-weight: 700;
  color: var(--hymo-red);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .drents-bar {
  height: 6px;
  background: var(--hymo-surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-v3 .drents-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--hymo-red);
  transition: width 1s var(--hymo-ease);
}

.dashboard-v3 .drents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 0 20px;
  text-align: center;
}

.dashboard-v3 .drents-empty .drow-ico {
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
}

.dashboard-v3 .drents-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.dashboard-v3 .drents-empty-text {
  font-size: 12.5px;
  color: var(--hymo-fg-4);
  max-width: 360px;
  line-height: 1.5;
}

.dashboard-v3 .drow-act {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--dash-line-2);
  background: var(--dash-card);
  color: var(--hymo-fg);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .drow-act:hover {
  background: var(--dash-ink);
  border-color: var(--dash-ink);
  color: #fff;
}

.dashboard-v3 .rib-card {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 16px;
}

.dashboard-v3 .rib-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  margin-bottom: 4px;
}

.dashboard-v3 .rib-head svg {
  width: 14px;
  height: 14px;
  color: var(--hymo-red);
}

.dashboard-v3 .rib-text {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  line-height: 1.5;
  margin-bottom: 10px;
}

.dashboard-v3 .rib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-v3 .rib-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--hymo-surface-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  text-decoration: none;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .rib-list a:hover {
  background: var(--dash-ink);
  color: #fff;
}

.dashboard-v3 .rib-list a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.dashboard-v3 .rib-list a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .trend-card {
  margin-top: 14px;
}

.dashboard-v3 .trend-svg-wrap {
  position: relative;
}

.dashboard-v3 .trend-svg {
  width: 100%;
  height: auto;
  display: block;
}

.dashboard-v3 .trend-tick {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--hymo-fg-4);
  font-family: var(--hymo-font, inherit);
}

.dashboard-v3 .trend-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.dashboard-v3 .trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-v3 .trend-legend-item:before {
  content: "";
  width: 14px;
  height: 0;
  border-top: 2px solid var(--hymo-red);
  border-radius: 2px;
}

.dashboard-v3 .trend-legend-item--expected:before {
  border-top-style: dashed;
  border-top-color: var(--hymo-fg-4);
}

.dashboard-v3 .trend-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--dash-card);
  border: 1px solid var(--dash-line);
  box-shadow: var(--hymo-shadow-pop);
  font-size: 11.5px;
  color: var(--hymo-fg-3);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .trend-tip b {
  color: var(--hymo-fg);
  font-weight: 700;
}

.dashboard-v3 .trend-tip-month {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.dashboard-v3 .trend-tip-rate {
  font-weight: 600;
  color: var(--hymo-red);
}

.dashboard-v3 .uev-rows {
  display: flex;
  flex-direction: column;
}

.dashboard-v3 .uev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dash-line);
  text-decoration: none;
  color: inherit;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .uev-row:last-of-type {
  border-bottom: none;
}

.dashboard-v3 .uev-row:hover {
  transform: translateX(2px);
}

.dashboard-v3 .uev-row:hover .uev-title {
  color: var(--hymo-red);
}

.dashboard-v3 .uev-date {
  width: 42px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--hymo-surface-2);
}

.dashboard-v3 .uev-day {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .uev-month {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  margin-top: 2px;
}

.dashboard-v3 .uev-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dashboard-v3 .uev-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .uev-meta {
  font-size: 11.5px;
  color: var(--hymo-fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .uev-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  text-decoration: none;
  transition: color var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .uev-link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .uev-link:hover {
  color: var(--hymo-fg);
}

.dashboard-v3 .uev-link:hover svg {
  transform: translateX(2px);
}

.dashboard-v3 .pbk-rows {
  display: flex;
  flex-direction: column;
}

.dashboard-v3 .pbk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--dash-line);
  text-decoration: none;
  color: inherit;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .pbk-row:last-of-type {
  border-bottom: none;
}

.dashboard-v3 .pbk-row:hover {
  transform: translateX(2px);
}

.dashboard-v3 .pbk-row:hover .pbk-name {
  color: var(--hymo-red);
}

.dashboard-v3 .pbk-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dashboard-v3 .pbk-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .pbk-tenant {
  font-size: 11.5px;
  color: var(--hymo-fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .pbk-amounts {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-v3 .pbk-expected {
  font-weight: 500;
  color: var(--hymo-fg-4);
}

.dashboard-v3 .pbk-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-v3 .pbk-bar {
  flex: 1;
}

.dashboard-v3 .pbk-rate {
  width: 42px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.dashboard-v3 .pbk-rate--bad {
  color: var(--dash-danger);
}

@media (width <= 767px) {
  .dashboard-v3 .pbk-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-v3 .pbk-progress {
    display: none;
  }
}

.dashboard-v3 .dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
}

@media (width <= 1023px) {
  .dashboard-v3 .dash-cols {
    grid-template-columns: 1fr;
  }
}

.dashboard-v3 .dmini-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
}

.dashboard-v3 .dmini {
  position: relative;
  flex: 0 0 248px;
  width: 248px;
  border-radius: var(--dash-r);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t-slow) var(--hymo-ease);
}

.dashboard-v3 .dmini:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 .dmini-cover {
  position: relative;
  height: 150px;
  background: var(--hymo-surface-3);
  overflow: hidden;
}

.dashboard-v3 .dmini-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .9s var(--hymo-ease);
}

.dashboard-v3 .dmini:hover .dmini-cover img {
  transform: scale(1.04);
}

.dashboard-v3 .dmini-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffffe6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--dash-ink);
  white-space: nowrap;
}

.dashboard-v3 .dmini-chip--on {
  background: var(--hymo-red);
  color: #fff;
}

.dashboard-v3 .dmini-body {
  padding: 12px 14px 14px;
}

.dashboard-v3 .dmini-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-v3 .dmini-type {
  font-size: 12px;
  color: var(--hymo-fg-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-v3.dashboard-v3 .suggest-grid {
  gap: 14px;
}

.projects-v3.dashboard-v3 .sg {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  -moz-column-gap: 16px;
  column-gap: 16px;
  row-gap: 5px;
  padding: 16px;
  border-radius: var(--dash-r);
}

.projects-v3.dashboard-v3 .sg:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 .sg-thumb {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 76px;
  height: 76px;
}

.dashboard-v3 .sg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 18px;
  background: var(--hymo-surface-3);
  transition: transform .9s var(--hymo-ease);
}

.projects-v3.dashboard-v3 .sg:hover .sg-thumb img {
  transform: scale(1.04);
}

.projects-v3.dashboard-v3 .sg-mark {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dash-card);
  border: 1px solid var(--dash-line);
  color: var(--hymo-fg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 6px #0f0c091f;
  font-style: normal;
}

.projects-v3.dashboard-v3 .sg-mark svg {
  width: 14px;
  height: 14px;
}

.projects-v3.dashboard-v3 .sg:hover .sg-mark {
  background: var(--dash-ink);
  border-color: var(--dash-ink);
  color: #fff;
}

.projects-v3.dashboard-v3 .sg-kind, .projects-v3.dashboard-v3 .sg-title, .projects-v3.dashboard-v3 .sg-desc, .projects-v3.dashboard-v3 .sg-link {
  grid-column: 2;
}

.projects-v3.dashboard-v3 .sg-kind {
  justify-self: start;
}

.projects-v3.dashboard-v3 .sg--tool .sg-kind, .projects-v3.dashboard-v3 .sg--guide .sg-kind {
  color: var(--hymo-fg-3);
  background: var(--hymo-surface-2);
  border-color: #0000;
}

.projects-v3.dashboard-v3 .sg-title {
  font-size: 15px;
}

.projects-v3.dashboard-v3 .sg:hover .sg-title {
  color: var(--hymo-fg);
}

.projects-v3.dashboard-v3 .sg-link {
  color: var(--hymo-fg-2);
}

.projects-v3.dashboard-v3 .sg:hover .sg-link {
  color: var(--hymo-red);
}

.projects-v3.dashboard-v3 .empty-pitch {
  font-size: 18px;
  max-width: 560px;
}

.projects-v3.dashboard-v3 .empty-hero-cta {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 0;
}

.dashboard-v3 .dash-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dashboard-v3 .dash-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px 0 16px;
  border-radius: 999px;
  background: var(--dash-card);
  border: 1px solid var(--dash-line-2);
  color: var(--hymo-fg-4);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--dash-shadow);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .dash-search:hover {
  border-color: var(--hymo-fg-4);
  color: var(--hymo-fg-2);
}

.dashboard-v3 .dash-search:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.dashboard-v3 .dash-search svg {
  width: 16px;
  height: 16px;
  color: var(--hymo-fg-3);
  flex-shrink: 0;
}

.dashboard-v3 .dash-search-kbd {
  font-family: inherit;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-3);
}

@media (width <= 1199px) {
  .dashboard-v3 .dash-search-lbl {
    display: none;
  }

  .dashboard-v3 .dash-search {
    padding: 0 12px;
  }
}

@media (width <= 1023px) {
  .dashboard-v3 .dash-search-kbd {
    display: none;
  }
}

@media (width <= 767px) {
  .dashboard-v3 .dash-top-actions {
    width: 100%;
  }

  .dashboard-v3 .dash-top-actions .new-project-btn-shell {
    flex: 1;
  }
}

@keyframes dash-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@keyframes dash-kenburns {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1);
  }
}

.projects-v3--enter.dashboard-v3 .dash-top, .projects-v3--enter.dashboard-v3 .bento > *, .projects-v3--enter.dashboard-v3 .qa-block {
  animation: dash-rise .64s var(--hymo-ease) backwards;
}

.projects-v3--enter.dashboard-v3 .bento > :first-child {
  animation-delay: 80ms;
}

.projects-v3--enter.dashboard-v3 .bento > :nth-child(2) {
  animation-delay: .16s;
}

.projects-v3--enter.dashboard-v3 .bento > :nth-child(3) {
  animation-delay: .24s;
}

.projects-v3--enter.dashboard-v3 .bento > :nth-child(4) {
  animation-delay: .32s;
}

.projects-v3--enter.dashboard-v3 .qa-block {
  animation-delay: .4s;
}

.projects-v3--enter.dashboard-v3 .bento-visual > img {
  animation: dash-kenburns 2.2s var(--hymo-ease) backwards;
}

.dashboard-v3 .kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 12px;
}

.dashboard-v3 .kpi-bars i {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 2px 2px;
  background: var(--hymo-surface-3);
}

.dashboard-v3 .kpi-bars i.is-now {
  background: var(--hymo-red);
}

.dashboard-v3 .kpi-track {
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  overflow: hidden;
}

.dashboard-v3 .kpi-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--hymo-red);
}

.dashboard-v3 .drow-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dash-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (width <= 767px) {
  .dashboard-v3 .drow-avatar {
    display: none;
  }
}

.projects-v3.dashboard-v3 .priority-mark--icon {
  background: var(--hymo-red);
}

.projects-v3.dashboard-v3 .dmini--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 232px;
  border-style: dashed;
  border-color: var(--dash-line-2);
  background: none;
  box-shadow: none;
  color: var(--hymo-fg-3);
  font-size: 13px;
  font-weight: 600;
}

.projects-v3.dashboard-v3 .dmini--add:hover {
  background: var(--dash-card);
  color: var(--hymo-fg);
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 .dmini-add-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dash-card);
  border: 1px solid var(--dash-line-2);
  color: var(--hymo-fg-2);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .dmini-add-ic svg {
  width: 18px;
  height: 18px;
}

.projects-v3.dashboard-v3 .dmini--add:hover .dmini-add-ic {
  background: var(--dash-ink);
  border-color: var(--dash-ink);
  color: #fff;
}

.dashboard-v3 .edito {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: var(--dash-r);
  overflow: hidden;
  background: var(--dash-card);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow);
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t-slow) var(--hymo-ease);
}

.dashboard-v3 .edito:hover {
  border-color: var(--dash-line-2);
  box-shadow: var(--dash-shadow-hover);
}

.dashboard-v3 .edito-media {
  position: relative;
  min-height: 250px;
  background: var(--hymo-surface-3);
  overflow: hidden;
}

.dashboard-v3 .edito-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 1.2s var(--hymo-ease);
}

.dashboard-v3 .edito:hover .edito-media img {
  transform: scale(1.04);
}

.dashboard-v3 .edito-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 32px;
  min-width: 0;
}

.dashboard-v3 .edito-kind {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.dashboard-v3 .edito-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
}

.dashboard-v3 .edito-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-v3 .edito-cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--dash-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--hymo-t) var(--hymo-ease), gap var(--hymo-t) var(--hymo-ease);
}

.dashboard-v3 .edito:hover .edito-cta {
  background: #000;
  gap: 10px;
}

.dashboard-v3 .edito-cta svg {
  width: 14px;
  height: 14px;
}

@media (width <= 767px) {
  .dashboard-v3 .edito {
    grid-template-columns: 1fr;
  }

  .dashboard-v3 .edito-media {
    min-height: 180px;
  }

  .dashboard-v3 .edito-body {
    padding: 20px;
  }

  .dashboard-v3 .edito-title {
    font-size: 20px;
  }
}

.dashboard-v3 .dash-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 120px 0;
  font-size: 13px;
  color: var(--hymo-fg-4);
}

.dashboard-v3 .dash-loading .spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hymo-red-line);
  border-top-color: var(--hymo-red);
  animation: .8s linear infinite hymo-spin;
}

@media (width <= 767px) {
  .dashboard-v3 .drow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-v3 .drow-ico {
    display: none;
  }

  .dashboard-v3 .drow-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .dashboard-v3 .fiscal-banner .fb-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-v3--enter.dashboard-v3 .dash-top, .projects-v3--enter.dashboard-v3 .bento > *, .projects-v3--enter.dashboard-v3 .qa-block, .projects-v3--enter.dashboard-v3 .bento-visual > img {
    animation: none;
  }

  .dashboard-v3 .drow-pill--late .ind {
    animation: none;
  }

  .dashboard-v3 .drents-bar i, .dashboard-v3 .feat-bar i {
    transition: none;
  }

  .dashboard-v3 .bento-visual > img, .dashboard-v3 .dmini-cover img, .dashboard-v3 .sg-thumb img {
    transition: none;
  }
}


/* [project]/src/styles/pages/property-detail.css [app-client] (css, ) */
[data-property-detail] {
  --blue: 214 72% 46%;
  --blue-2: 214 76% 38%;
  --blue-3: 214 80% 56%;
  --blue-soft: 214 55% 95%;
  --blue-soft-2: 214 60% 90%;
  --blue-line: 214 45% 82%;
  --blue-faint: 214 55% 98%;
  --blue-glow: #1a72e638;
  --blue-halo: #1a72e652;
  --fg-4: 240 5% 65%;
  --surface-3: 240 10% 93%;
  --border-strong: 240 6% 80%;
  --bg-tint: 210 30% 98%;
  --glass-2: #ffffffbd;
  --t: .22s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-cta: 0 1px 2px #1d6acd38, 0 12px 32px -8px #1d6acd52;
}

@keyframes ls-breathe {
  0%, 100% {
    box-shadow: 0 0 0 5px #2073df1a;
  }

  50% {
    box-shadow: 0 0 0 8px #2073df29;
  }
}

@keyframes nsh-breathe {
  0%, 100% {
    box-shadow: 0 0 0 4px #2073df1a;
  }

  50% {
    box-shadow: 0 0 0 7px #2073df29;
  }
}

@keyframes now-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.82);
  }
}

[data-property-detail] .pd-glass-card {
  background: linear-gradient(#ffffffc7 0%, #ffffff94 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid #ffffffb3;
  border-radius: 18px;
  box-shadow: inset 0 1px #ffffffd9, 0 1px 2px #0f0c090a;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-property-detail] .pd-glass-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 100% 0, #cedef329, #0000 70%);
  pointer-events: none;
  z-index: -1;
}

[data-property-detail] .pd-stepper-li {
  position: relative;
  z-index: 1;
}

[data-property-detail] .pd-stepper-dot--breathing {
  animation: 2.4s ease-in-out infinite ls-breathe;
}

[data-property-detail] .pd-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(55% 45% at 100% 0, #c2d8f452, #0000 60%), radial-gradient(45% 40% at 0 30%, #d4e3f738, #0000 65%), radial-gradient(40% 35% at 20% 100%, #ebf1f93d, #0000 65%);
}

@media (width <= 767px) {
  [data-property-detail] .pd-glass-card {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
  }
}

[data-property-detail] .pd-tabnav {
  position: relative;
  max-width: 100%;
}

[data-property-detail] .pd-tabnav__scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

[data-property-detail] .pd-tabnav__scroll::-webkit-scrollbar {
  display: none;
}

[data-property-detail] .pd-tabnav__tab {
  scroll-snap-align: start;
  flex-shrink: 0;
}

[data-property-detail] .pd-tabnav:before, [data-property-detail] .pd-tabnav:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 1;
}

[data-property-detail] .pd-tabnav:before {
  left: 0;
  background: linear-gradient(90deg, #f5f5f5f2, #0000);
}

[data-property-detail] .pd-tabnav:after {
  right: 0;
  background: linear-gradient(270deg, #f5f5f5f2, #0000);
}

[data-property-detail] .pd-tabnav--fade-left:before {
  opacity: 1;
}

[data-property-detail] .pd-tabnav--fade-right:after {
  opacity: 1;
}


/* [project]/src/styles/pages/properties-flat.css [app-client] (css, ) */
.projects-v3.properties-v3, [data-property-detail] {
  --bf-card: #fff;
  --bf-line: #0f0c0912;
  --bf-line-2: #0f0c091f;
  --bf-ink: #141312;
  --bf-r: 22px;
  --bf-shadow: 0 1px 2px #0f0c090a, 0 12px 32px -20px #0f0c0929;
  --bf-shadow-hover: 0 2px 4px #0f0c090d, 0 24px 48px -22px #0f0c0938;
}

.projects-v3.properties-v3 {
  --hymo-grad-accent: var(--hymo-blue);
  --hymo-grad-accent-kpi: var(--hymo-fg);
  --hymo-grad-bar: var(--hymo-blue);
  --hymo-glass: var(--bf-card);
  --hymo-glass-2: var(--bf-card);
  --hymo-glass-strong: var(--bf-card);
  --hymo-glass-soft: var(--bf-card);
  --hymo-glass-deep: var(--bf-card);
  --hymo-glass-border: var(--bf-line);
  --hymo-glass-border-light: var(--bf-line);
  --hymo-shadow-glass: var(--bf-shadow);
  --hymo-shadow-glass-hover: var(--bf-shadow-hover);
  --hymo-blue-glow: transparent;
  --hymo-blue-halo: transparent;
  --hymo-red-glow: transparent;
  --hymo-red-halo: transparent;
  background: var(--hymo-bg);
  padding-top: 36px;
}

.projects-v3.properties-v3 :not(.biens-cta__btn, .guided-tour__scrim), [data-property-detail] :not(.biens-cta__btn, .guided-tour__scrim) {
}

.projects-v3.properties-v3 .page-art {
  display: none;
}

.projects-v3.properties-v3 {
  padding-left: 32px;
  padding-right: 32px;
}

.projects-v3.properties-v3 .focus-col {
  max-width: 100%;
}

@media (width <= 767px) {
  .projects-v3.properties-v3 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.properties-v3 .biens-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

@media (width <= 767px) {
  .properties-v3 .biens-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}

.projects-v3.properties-v3 .hero-row {
  margin-bottom: 0;
}

.projects-v3.properties-v3 .hero-left {
  max-width: 100%;
}

.projects-v3.properties-v3 .greet-title {
  font-size: 40px;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

@media (width <= 767px) {
  .projects-v3.properties-v3 {
    padding-top: 20px;
  }

  .projects-v3.properties-v3 .greet-title {
    font-size: 30px;
  }
}

.projects-v3.properties-v3 .greet-brief {
  font-size: 17px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  margin-top: 0;
  line-height: 1.45;
}

.projects-v3.properties-v3 .greet-title .accent, .projects-v3.properties-v3 .greet-brief .accent, .projects-v3.properties-v3 .empty-pitch .accent-strong, .projects-v3.properties-v3 .sec-head h2 .accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--hymo-blue);
}

.projects-v3.properties-v3 .sec-head h2 .accent {
  color: var(--hymo-fg);
}

.projects-v3.properties-v3 .sec-head h2 {
  font-size: 22px;
  letter-spacing: -.02em;
}

.projects-v3.properties-v3 .sec {
  margin-bottom: 44px;
}

.biens-cta {
  display: inline-block;
  position: relative;
}

.biens-cta:before {
  content: "";
  position: absolute;
  inset: -24px -42px;
  background: none;
  filter: blur(22px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.biens-cta__btn {
  position: relative;
  z-index: 1;
  isolation: isolate;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  color: var(--hymo-blue);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
  transition: all .32s var(--hymo-ease);
}

.biens-cta__btn:hover:not(:disabled) {
  background: var(--hymo-blue-soft);
  border-color: var(--hymo-border-strong);
  box-shadow: none;
}

.biens-cta__btn:focus-visible {
  outline: none;
  border-color: var(--hymo-blue);
  box-shadow: 0 0 0 3px var(--hymo-blue-soft);
}

.biens-cta__btn svg {
  width: 15px;
  height: 15px;
  color: var(--hymo-blue);
  transition: transform .32s var(--hymo-ease);
}

.biens-cta__btn:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}

.biens-cta__btn:disabled:before {
  display: none;
}

@media (width <= 767px) {
  .biens-cta, .biens-cta__btn {
    width: 100%;
  }

  .biens-cta__btn {
    justify-content: center;
    padding: 13px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biens-cta__btn, .biens-cta__btn svg {
    transition: none;
  }

  .biens-cta__btn:before {
    display: none;
  }
}

.projects-v3.properties-v3 .prop-roles__pill {
  background: var(--bf-card);
  border: 1px solid var(--bf-line-2);
  box-shadow: none;
}

.projects-v3.properties-v3 .prop-roles__pill--active {
  background: var(--bf-ink);
  border-color: var(--bf-ink);
  color: #fff;
}

.properties-v3 .biens-search {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--bf-card);
  border: 1px solid var(--bf-line-2);
  font-size: 13.5px;
  color: var(--hymo-fg);
  box-shadow: none;
}

.properties-v3 .biens-search::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.properties-v3 .biens-search::placeholder {
  color: var(--hymo-fg-4);
}

.properties-v3 .biens-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.properties-v3 .biens-toolbar > .biens-search {
  flex: auto;
}

.properties-v3 .biens-toolbar > :not(.biens-search) {
  margin-left: auto;
}

.properties-v3 .biens-toolbar > :not(.biens-search) ~ :not(.biens-search) {
  margin-left: 0;
}

.properties-v3 .biens-toolbar__folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bf-card);
  border: 1px dashed var(--bf-line-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  transition: color var(--hymo-t, .18s) var(--hymo-ease, ease), border-color var(--hymo-t, .18s) var(--hymo-ease, ease);
}

.properties-v3 .biens-toolbar__folder-btn:hover {
  color: var(--hymo-blue);
  border-color: var(--hymo-blue);
}

.properties-v3 .biens-toolbar__folder-btn:focus-visible {
  outline: none;
  border-color: var(--hymo-blue);
  box-shadow: 0 0 0 3px var(--hymo-blue-soft);
}

@media (width <= 767px) {
  .properties-v3 .biens-toolbar {
    flex-wrap: wrap;
  }

  .properties-v3 .biens-toolbar > .biens-search {
    flex: 1 0 100%;
  }
}

.projects-v3.properties-v3 .pj-grid, .projects-v3.properties-v3 .prow-list {
  max-width: 1600px;
}

.projects-v3.properties-v3 .pj-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (width <= 1199px) {
  .projects-v3.properties-v3 .pj-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (width <= 767px) {
  .projects-v3.properties-v3 .pj-grid {
    grid-template-columns: 1fr;
  }
}

.folder-create {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folder-create__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.folder-create__label + * {
  margin-bottom: 6px;
}

.properties-v3 .biens-search:focus {
  outline: none;
  border-color: var(--hymo-blue);
  box-shadow: 0 0 0 3px var(--hymo-blue-soft);
}

.properties-v3 .biens-search--compact {
  width: clamp(160px, 24vw, 280px);
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  border-style: dashed;
  border-color: var(--hymo-blue);
  color: var(--hymo-blue-2);
}

.properties-v3 .biens-search--compact::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.properties-v3 .biens-search--compact::placeholder {
  color: var(--hymo-fg-4);
}

.properties-v3 .biens-search--compact:focus {
  border-style: solid;
}

.projects-v3.properties-v3 .prop-breadcrumb__actions {
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.projects-v3.properties-v3 .prop-breadcrumb__actions .view-toggle {
  flex-shrink: 0;
}

@media (width <= 767px) {
  .projects-v3.properties-v3 .prop-breadcrumb__actions {
    margin-left: 0;
    width: 100%;
  }

  .properties-v3 .biens-search--compact {
    width: 100%;
    flex: 100%;
  }
}

.projects-v3.properties-v3 .pcard {
  padding: 0;
  gap: 0;
  border-radius: var(--bf-r);
  background: var(--bf-card);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
  overflow: hidden;
}

.projects-v3.properties-v3 .pcard:hover {
  border-color: var(--bf-line-2);
  box-shadow: var(--bf-shadow-hover);
}

.projects-v3.properties-v3 .pcard__cover {
  margin: 0;
  border-bottom: none;
  background: var(--hymo-surface-3);
}

.projects-v3.properties-v3 .pcard__status--overlay {
  top: 10px;
  right: 10px;
  background: #ffffffe6;
  border: none;
  box-shadow: none;
  color: var(--bf-ink);
}

.projects-v3.properties-v3 .pcard__head {
  padding: 14px 16px 12px;
}

.projects-v3.properties-v3 .pcard__chips {
  padding: 0;
}

.projects-v3.properties-v3 .pcard__chip--accent {
  background: var(--hymo-blue-soft);
  color: var(--hymo-blue-2);
  border-color: #0000;
}

.projects-v3.properties-v3 .pcard__meta {
  padding: 12px 16px 16px;
}

.projects-v3.properties-v3 .pcard > :not(.pcard__cover):not(.pcard__head):not(.pcard__meta) {
  margin-left: 16px;
  margin-right: 16px;
}

.projects-v3.properties-v3 .pcard > :last-child:not(.pcard__meta):not(.pcard__cover) {
  margin-bottom: 16px;
}

.projects-v3.properties-v3 .pcard-add {
  border: 1px dashed var(--bf-line-2);
  background: none;
  box-shadow: none;
  border-radius: var(--bf-r);
  color: var(--hymo-fg-3);
}

.projects-v3.properties-v3 .pcard-add:hover {
  background: var(--bf-card);
  color: var(--hymo-fg);
  box-shadow: var(--bf-shadow-hover);
  border-color: var(--bf-line-2);
}

.projects-v3.properties-v3 .prow {
  background: var(--bf-card);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
}

.projects-v3.properties-v3 .prow:hover {
  border-color: var(--bf-line-2);
  box-shadow: var(--bf-shadow-hover);
}

.properties-v3 .empty-bento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 40px;
}

@media (width <= 1023px) {
  .properties-v3 .empty-bento {
    grid-template-columns: 1fr;
  }
}

.properties-v3 .empty-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: 16px;
  border-radius: var(--bf-r);
  background: var(--hymo-surface-3);
  box-shadow: var(--bf-shadow);
  color: #fff;
}

@media (width <= 1023px) {
  .properties-v3 .empty-visual {
    min-height: 210px;
  }
}

.properties-v3 .empty-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -2;
}

.properties-v3 .empty-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#0a090814 0%, #0a090800 35%, #0a0908b8 100%);
}

.properties-v3 .ev-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.properties-v3 .ev-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffbf;
}

.properties-v3 .ev-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.properties-v3 .empty-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}

.projects-v3.properties-v3 .empty-side .empty-pitch {
  margin: 0;
  font-size: 16px;
  max-width: none;
}

.properties-v3 .empty-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.properties-v3 .empty-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--hymo-fg-2);
  line-height: 1.45;
}

.properties-v3 .empty-points svg {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--hymo-blue-soft);
  color: var(--hymo-blue);
  flex-shrink: 0;
  margin-top: 1px;
}

.properties-v3 .biens-guide {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  -moz-column-gap: 16px;
  column-gap: 16px;
  padding: 14px 16px;
  border-radius: var(--bf-r);
  background: var(--bf-card);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.properties-v3 .biens-guide:hover {
  border-color: var(--bf-line-2);
  box-shadow: var(--bf-shadow-hover);
}

.properties-v3 .biens-guide-thumb {
  width: 76px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hymo-surface-3);
}

.properties-v3 .biens-guide-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.properties-v3 .biens-guide-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
}

.properties-v3 .biens-guide-desc {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  line-height: 1.45;
  margin-top: 2px;
}

.properties-v3 .biens-guide-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.properties-v3 .biens-guide:hover .biens-guide-cta {
  background: var(--bf-ink);
  color: #fff;
}

.properties-v3 .biens-guide-cta svg {
  width: 14px;
  height: 14px;
}

@media (width <= 767px) {
  .properties-v3 .biens-guide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .properties-v3 .biens-guide-thumb {
    display: none;
  }
}

[data-property-detail] .pd-ambient {
  display: none;
}

[data-property-detail] .pd-glass-card {
  background: var(--bf-card);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
}

[data-property-detail] {
  --glass-2: #fff;
  --shadow-cta: 0 10px 24px -12px #0f0c0973;
  --blue-glow: #0000;
  --blue-halo: #0000;
}

@keyframes ls-breathe {
  0%, 100% {
    box-shadow: none;
  }
}

@keyframes nsh-breathe {
  0%, 100% {
    box-shadow: none;
  }
}

[data-property-detail] .pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 260px;
  padding: 16px 18px 20px;
  border-radius: 22px;
  background: var(--hymo-surface-3);
  box-shadow: var(--bf-shadow);
  color: #fff;
}

[data-property-detail] .pd-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -2;
}

[data-property-detail] .pd-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#0a09084d 0%, #0a090805 34%, #0a09080f 55%, #0a0908cc 100%);
}

[data-property-detail] .pd-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-property-detail] .pd-hero-title {
  margin: 0 0 6px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #fff;
  word-break: break-word;
}

[data-property-detail] .pd-hero-meta {
  font-size: 13.5px;
  color: #ffffffdb;
}

@media (width <= 767px) {
  [data-property-detail] .pd-hero {
    min-height: 200px;
    gap: 24px;
  }

  [data-property-detail] .pd-hero-title {
    font-size: 26px;
  }
}

[data-property-detail] .glass-card {
  background: var(--bf-card);
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 18px;
}

[data-property-detail] .rc-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 104px;
  margin: 6px 2px 20px;
}

[data-property-detail] .rc-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

[data-property-detail] .rc-bar {
  width: 100%;
  max-width: 26px;
  border-radius: 7px;
  background: var(--hymo-surface-2, #f2f0ec);
}

[data-property-detail] .rc-bar--paid {
  background: hsl(var(--blue));
}

[data-property-detail] .rc-bar--pending, [data-property-detail] .rc-bar--upcoming, [data-property-detail] .rc-bar--partial {
  background: hsl(var(--blue-soft-2));
}

[data-property-detail] .rc-bar--late {
  background: #f4a825;
}

[data-property-detail] .rc-bar--future, [data-property-detail] .rc-bar--cancelled {
  background: none;
  border: 1.5px dashed #0f0c0929;
}

[data-property-detail] .rc-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-4, #9c968c);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

[data-property-detail] .bg-primary {
  background: var(--bf-ink);
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px #0f0c0980;
}

[data-property-detail] .bg-primary:hover {
  background: #000;
}

[data-property-detail] button[class*="border-input"], [data-property-detail] a[class*="border-input"] {
  border-radius: 999px;
}

[data-property-detail] .pd-glass-card {
  border-radius: 18px;
}


/* [project]/src/styles/pages/candidate-detail.css [app-client] (css, ) */
[data-property-detail] {
  --score-green: 152 62% 38%;
  --score-green-2: 152 70% 32%;
  --score-amber: 32 92% 48%;
  --score-amber-2: 28 90% 42%;
  --score-red: 0 72% 50%;
  --score-red-2: 0 76% 44%;
  --score-neutral: 220 8% 55%;
  --score-neutral-2: 220 10% 45%;
}

[data-property-detail] .cd-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
}

@media (width <= 767px) {
  [data-property-detail] .cd-header {
    grid-template-columns: auto 1fr;
    gap: 14px;
  }
}

[data-property-detail] .cd-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--blue)) 0%, hsl(var(--blue-2)) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: inset 0 1px #ffffff40, 0 8px 22px -6px #1a72e65c;
}

[data-property-detail] .cd-name h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: hsl(var(--foreground));
}

@media (width >= 640px) {
  [data-property-detail] .cd-name h1 {
    font-size: 32px;
  }
}

@media (width >= 1024px) {
  [data-property-detail] .cd-name h1 {
    font-size: 34px;
  }
}

[data-property-detail] .cd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  color: hsl(var(--foreground-muted));
}

[data-property-detail] .cd-meta strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

[data-property-detail] .cd-meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: hsl(var(--fg-4));
}

[data-property-detail] .cd-score-pill {
  text-align: center;
  padding: 14px 22px;
  background: linear-gradient(135deg, hsl(var(--score-tone)) 0%, hsl(var(--score-tone-2)) 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #ffffff40, 0 8px 22px -6px hsl(var(--score-tone) / .36);
  --score-tone: var(--blue);
  --score-tone-2: var(--blue-2);
}

[data-property-detail] .cd-score-pill[data-tone="green"] {
  --score-tone: var(--score-green);
  --score-tone-2: var(--score-green-2);
}

[data-property-detail] .cd-score-pill[data-tone="amber"] {
  --score-tone: var(--score-amber);
  --score-tone-2: var(--score-amber-2);
}

[data-property-detail] .cd-score-pill[data-tone="red"] {
  --score-tone: var(--score-red);
  --score-tone-2: var(--score-red-2);
}

[data-property-detail] .cd-score-pill[data-tone="neutral"] {
  --score-tone: var(--score-neutral);
  --score-tone-2: var(--score-neutral-2);
}

[data-property-detail] .cd-score-pill .val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}

[data-property-detail] .cd-score-pill .unit {
  font-size: 13px;
  opacity: .85;
  margin-left: 2px;
}

[data-property-detail] .cd-score-pill .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 4px;
}

@media (width <= 767px) {
  [data-property-detail] .cd-score-pill {
    grid-column: 1 / -1;
    padding: 10px 18px;
  }

  [data-property-detail] .cd-score-pill .val {
    font-size: 22px;
  }
}

[data-property-detail] .cd-workflow {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: #fff9;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: inset 0 1px #ffffffd9;
  overflow-x: auto;
  scrollbar-width: none;
}

[data-property-detail] .cd-workflow::-webkit-scrollbar {
  display: none;
}

[data-property-detail] .cd-wf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (width >= 768px) {
  [data-property-detail] .cd-wf-step {
    flex: 1;
    min-width: -moz-max-content;
    min-width: max-content;
  }
}

[data-property-detail] .cd-wf-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: hsl(var(--background));
  border: 1.5px solid hsl(var(--border-strong));
  color: hsl(var(--fg-4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

[data-property-detail] .cd-wf-step.done .cd-wf-dot {
  background: hsl(var(--blue));
  border-color: hsl(var(--blue));
  color: #fff;
}

[data-property-detail] .cd-wf-step.current .cd-wf-dot {
  background: hsl(var(--blue-soft));
  border-color: hsl(var(--blue));
  color: hsl(var(--blue));
  box-shadow: 0 0 0 4px #2073df1f;
}

[data-property-detail] .cd-wf-step.rejected .cd-wf-dot {
  background: hsl(var(--background));
  border-color: hsl(var(--border));
  color: hsl(var(--fg-4));
}

[data-property-detail] .cd-wf-dot .i {
  width: 12px;
  height: 12px;
}

[data-property-detail] .cd-wf-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--foreground-muted));
  letter-spacing: -.005em;
  white-space: nowrap;
}

[data-property-detail] .cd-wf-step.done .cd-wf-lbl {
  color: hsl(var(--blue-2));
}

[data-property-detail] .cd-wf-step.current .cd-wf-lbl {
  color: hsl(var(--foreground));
  font-weight: 700;
}

[data-property-detail] .cd-wf-line {
  flex: 1;
  height: 1.5px;
  background: hsl(var(--surface-3));
  max-width: 80px;
  min-width: 18px;
  margin: 0 6px;
}

[data-property-detail] .cd-wf-line.done {
  background: hsl(var(--blue));
}

[data-property-detail] .cd-action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

[data-property-detail] .cd-btn {
  padding: 9px 16px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

[data-property-detail] .cd-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

[data-property-detail] .cd-btn .i {
  width: 13px;
  height: 13px;
}

[data-property-detail] .cd-btn-primary {
  padding: 9px 18px;
  background: hsl(var(--blue));
  color: #fff;
}

[data-property-detail] .cd-btn-primary:hover:not(:disabled) {
  background: hsl(var(--blue-2));
}

[data-property-detail] .cd-btn-dark {
  padding: 9px 18px;
  background: hsl(var(--foreground));
  color: #fff;
}

[data-property-detail] .cd-btn-dark:hover:not(:disabled) {
  background: hsl(var(--foreground) / .88);
}

[data-property-detail] .cd-btn-outline {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-weight: 500;
}

[data-property-detail] .cd-btn-outline:hover:not(:disabled) {
  border-color: hsl(var(--blue-line));
  color: hsl(var(--blue));
}

[data-property-detail] .cd-btn-outline.danger {
  color: hsl(var(--blue-2));
}

[data-property-detail] .cd-btn-outline.danger:hover:not(:disabled) {
  background: #e9f1fb80;
  border-color: hsl(var(--blue-line));
  color: hsl(var(--blue-2));
}

[data-property-detail] .cd-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}

@media (width <= 1023px) {
  [data-property-detail] .cd-layout {
    grid-template-columns: 1fr;
  }
}

[data-property-detail] .cd-scoring {
  padding: 22px 24px;
  background: linear-gradient(#ffffffc7 0%, #ffffff94 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid #ffffffb3;
  border-radius: 16px;
  box-shadow: inset 0 1px #ffffffd9;
}

@media (width >= 1024px) {
  [data-property-detail] .cd-scoring {
    position: sticky;
    top: 80px;
  }
}

[data-property-detail] .cd-scoring h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--fg-4));
  margin-bottom: 16px;
}

[data-property-detail] .cd-gauge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid hsl(var(--border));
}

[data-property-detail] .cd-gauge-meta {
  font-size: 13px;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

[data-property-detail] .cd-gauge-meta strong {
  display: block;
  font-size: 14px;
  color: hsl(var(--foreground));
  font-weight: 700;
  margin-bottom: 2px;
}

[data-property-detail] .cd-gauge-meta span {
  color: hsl(var(--foreground-muted));
  font-size: 12px;
}

[data-property-detail] .cd-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

[data-property-detail] .cd-br-lbl {
  font-size: 11.5px;
  color: hsl(var(--foreground-muted));
  letter-spacing: -.005em;
}

[data-property-detail] .cd-br-bar {
  width: 100%;
  height: 5px;
  background: hsl(var(--surface-3));
  border-radius: 999px;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: 4px;
  margin-bottom: 6px;
  --score-tone: var(--blue);
  --score-tone-2: var(--blue-2);
}

[data-property-detail] .cd-br-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--score-tone-2)), hsl(var(--score-tone)));
  border-radius: 999px;
  transition: width .7s var(--ease);
}

[data-property-detail] [data-tone="green"] .cd-br-bar {
  --score-tone: var(--score-green);
  --score-tone-2: var(--score-green-2);
}

[data-property-detail] [data-tone="amber"] .cd-br-bar {
  --score-tone: var(--score-amber);
  --score-tone-2: var(--score-amber-2);
}

[data-property-detail] [data-tone="red"] .cd-br-bar {
  --score-tone: var(--score-red);
  --score-tone-2: var(--score-red-2);
}

[data-property-detail] [data-tone="neutral"].cd-br-bar, [data-property-detail] [data-tone="neutral"] .cd-br-bar {
  --score-tone: var(--score-neutral);
  --score-tone-2: var(--score-neutral-2);
}

[data-property-detail] .cd-br-val[data-tone="green"] {
  color: hsl(var(--score-green-2));
}

[data-property-detail] .cd-br-val[data-tone="amber"] {
  color: hsl(var(--score-amber-2));
}

[data-property-detail] .cd-br-val[data-tone="red"] {
  color: hsl(var(--score-red-2));
}

[data-property-detail] .cd-br-val[data-tone="neutral"] {
  color: hsl(var(--score-neutral-2));
}

[data-property-detail] .cd-br-val {
  font-size: 11.5px;
  font-weight: 700;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cd-gauge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: hsl(var(--surface-3));
  --score-tone: var(--blue);
  --score-tone-2: var(--blue-2);
}

[data-property-detail] .cd-gauge:before {
  content: "";
  position: absolute;
  inset: 8px;
  background: #fff;
  border-radius: 50%;
}

[data-property-detail] .cd-gauge-val {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  color: hsl(var(--score-tone));
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cd-gauge--lg {
  width: 120px;
  height: 120px;
}

[data-property-detail] .cd-gauge--lg:before {
  inset: 10px;
}

[data-property-detail] .cd-gauge--lg .cd-gauge-val {
  font-size: 32px;
}

[data-property-detail] .cd-gauge[data-tone="green"] {
  --score-tone: var(--score-green);
  --score-tone-2: var(--score-green-2);
}

[data-property-detail] .cd-gauge[data-tone="amber"] {
  --score-tone: var(--score-amber);
  --score-tone-2: var(--score-amber-2);
}

[data-property-detail] .cd-gauge[data-tone="red"] {
  --score-tone: var(--score-red);
  --score-tone-2: var(--score-red-2);
}

[data-property-detail] .cd-gauge[data-tone="neutral"] {
  --score-tone: var(--score-neutral);
  --score-tone-2: var(--score-neutral-2);
}

[data-property-detail] .cd-tabs {
  display: inline-flex;
  padding: 3px;
  background: #0f0c090d;
  border-radius: 12px;
  gap: 2px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

[data-property-detail] .cd-tabs::-webkit-scrollbar {
  display: none;
}

[data-property-detail] .cd-tab {
  padding: 7px 16px;
  background: none;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: hsl(var(--foreground-muted));
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

[data-property-detail] .cd-tab:hover:not(.active) {
  color: hsl(var(--foreground));
}

[data-property-detail] .cd-tab.active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-weight: 600;
  box-shadow: 0 1px 2px #0f0c0914;
}

[data-property-detail] .cd-tab .cd-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #0f0c090f;
  color: hsl(var(--fg-4));
  border-radius: 999px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

[data-property-detail] .cd-tab.active .cd-tab-badge {
  background: hsl(var(--blue-soft));
  color: hsl(var(--blue));
}

[data-property-detail] .cd-info-card {
  padding: 18px 22px;
  background: #ffffffb3;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px #ffffffd9;
}

[data-property-detail] .cd-info-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

[data-property-detail] .cd-info-card-head h3 {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -.005em;
}

[data-property-detail] .cd-info-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

[data-property-detail] .cd-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (width <= 639px) {
  [data-property-detail] .cd-info-grid {
    grid-template-columns: 1fr;
  }
}

[data-property-detail] .cd-info-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

[data-property-detail] .cd-info-cell .i {
  width: 14px;
  height: 14px;
  color: hsl(var(--blue));
  margin-top: 4px;
  flex-shrink: 0;
}

[data-property-detail] .cd-info-cell-text {
  flex: 1;
  min-width: 0;
}

[data-property-detail] .cd-info-cell-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: hsl(var(--fg-4));
  margin-bottom: 2px;
}

[data-property-detail] .cd-info-cell-val {
  font-size: 13.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

[data-property-detail] .cd-dcl {
  background: #ffffffb3;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffd9;
}

[data-property-detail] .cd-dcl-head {
  padding: 14px 20px;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

[data-property-detail] .cd-dcl-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -.005em;
}

[data-property-detail] .cd-dcl-head .progress {
  font-size: 11.5px;
  color: hsl(var(--foreground-muted));
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cd-dcl-head .progress strong {
  color: hsl(var(--blue));
  font-weight: 700;
}

[data-property-detail] .cd-dcl-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 13px;
}

[data-property-detail] .cd-dcl-row:last-child {
  border-bottom: none;
}

[data-property-detail] .cd-dcl-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--border-strong));
  background: hsl(var(--background));
  color: hsl(var(--fg-4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-property-detail] .cd-dcl-check .i {
  width: 11px;
  height: 11px;
}

[data-property-detail] .cd-dcl-check.done {
  background: hsl(var(--blue));
  border-color: hsl(var(--blue));
  color: #fff;
}

[data-property-detail] .cd-dcl-check.pending {
  background: hsl(var(--blue-faint));
  border-color: hsl(var(--blue-line));
  color: hsl(var(--blue-2));
}

[data-property-detail] .cd-dcl-check.missing {
  background: hsl(var(--background));
  border-color: hsl(var(--border-strong));
  color: hsl(var(--fg-4));
}

[data-property-detail] .cd-dcl-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-property-detail] .cd-dcl-name {
  color: hsl(var(--foreground));
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.005em;
}

[data-property-detail] .cd-dcl-meta {
  font-size: 11.5px;
  color: hsl(var(--foreground-muted));
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cd-dcl-meta.warning {
  color: hsl(var(--blue-2));
  font-weight: 600;
}

[data-property-detail] .cd-dcl-meta.danger {
  color: hsl(var(--blue-2));
  font-weight: 600;
}

[data-property-detail] .cd-dcl-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-property-detail] .cd-dcl-action-btn {
  padding: 4px 10px;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  color: hsl(var(--foreground-muted));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

[data-property-detail] .cd-dcl-action-btn:hover {
  background: hsl(var(--blue-soft));
  color: hsl(var(--blue));
}

[data-property-detail] .cd-dcl-action-btn .i {
  width: 12px;
  height: 12px;
}

[data-property-detail] .cd-dcl-upload {
  padding: 4px 10px;
  background: hsl(var(--background));
  border: 1px dashed hsl(var(--blue-line));
  color: hsl(var(--blue));
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-style var(--t) var(--ease);
}

[data-property-detail] .cd-dcl-upload:hover {
  background: hsl(var(--blue-soft));
  border-style: solid;
}

[data-property-detail] .cd-dcl-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

[data-property-detail] .cd-dcl-badge.warning {
  background: hsl(var(--blue-soft));
  color: hsl(var(--blue-2));
  border: 1px solid hsl(var(--blue-line));
}

[data-property-detail] .cd-dcl-badge.danger {
  background: hsl(var(--blue-faint));
  color: hsl(var(--blue-2));
  border: 1px solid hsl(var(--blue-line));
}

[data-property-detail] .cd-empty {
  padding: 28px 24px;
  border-radius: 14px;
  border: 1px dashed hsl(var(--blue-line));
  background: hsl(var(--blue-faint) / .5);
  text-align: center;
  color: hsl(var(--foreground-muted));
  font-size: 13px;
  margin-bottom: 22px;
}

[data-property-detail] .cd-empty p {
  margin-bottom: 12px;
}

[data-property-detail] .cd-empty p:last-child {
  margin-bottom: 0;
}

[data-property-detail] .cmp-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fff9;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #ffffffb3;
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: inset 0 1px #ffffffd9;
}

[data-property-detail] .cmp-selector-lbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: hsl(var(--fg-4));
  padding-right: 6px;
}

[data-property-detail] .cmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

[data-property-detail] .cmp-pill:hover {
  border-color: hsl(var(--blue-line));
  color: hsl(var(--blue));
}

[data-property-detail] .cmp-pill.active {
  background: hsl(var(--blue));
  color: #fff;
  border-color: hsl(var(--blue));
}

[data-property-detail] .cmp-pill-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: hsl(var(--surface-3));
  color: hsl(var(--foreground-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

[data-property-detail] .cmp-pill.active .cmp-pill-avatar {
  background: #fff;
  color: hsl(var(--blue));
}

[data-property-detail] .cmp-pill .cmp-pill-x {
  width: 14px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-property-detail] .cmp-pill .cmp-pill-x:hover {
  opacity: 1;
}

[data-property-detail] .cmp-pill .cmp-pill-x .i {
  width: 12px;
  height: 12px;
}

[data-property-detail] .cmp-pill-add {
  padding: 6px 12px;
  background: none;
  border: 1px dashed hsl(var(--blue-line));
  color: hsl(var(--blue));
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-style var(--t) var(--ease);
}

[data-property-detail] .cmp-pill-add:hover {
  background: hsl(var(--blue-soft));
  border-style: solid;
}

[data-property-detail] .cmp-pill-add:disabled {
  opacity: .5;
  cursor: not-allowed;
}

[data-property-detail] .cmp-spacer {
  flex: 1;
  min-width: 12px;
}

[data-property-detail] .cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

[data-property-detail] .cmp-toggle:hover {
  border-color: hsl(var(--blue-line));
  color: hsl(var(--blue));
}

[data-property-detail] .cmp-toggle.active {
  background: hsl(var(--blue-soft));
  color: hsl(var(--blue));
  border-color: hsl(var(--blue-line));
}

[data-property-detail] .cmp-toggle .i {
  width: 13px;
  height: 13px;
}

[data-property-detail] .cmp-reco {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(#e9f1fbbf 0%, #d5e3f68c 100%);
  border: 1px solid hsl(var(--blue-line));
  border-radius: 14px;
  margin-bottom: 22px;
}

@media (width <= 639px) {
  [data-property-detail] .cmp-reco {
    grid-template-columns: 48px 1fr;
  }

  [data-property-detail] .cmp-reco-cta {
    grid-column: 1 / -1;
  }
}

[data-property-detail] .cmp-reco-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--blue)) 0%, hsl(var(--blue-2)) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px #1a72e65c;
}

[data-property-detail] .cmp-reco-icon .i {
  width: 22px;
  height: 22px;
}

[data-property-detail] .cmp-reco-text {
  min-width: 0;
}

[data-property-detail] .cmp-reco-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--blue-2));
  margin-bottom: 2px;
}

[data-property-detail] .cmp-reco-text span {
  font-size: 12.5px;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

[data-property-detail] .cmp-table {
  background: #ffffffb3;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid #ffffffb3;
  border-radius: 16px;
  box-shadow: inset 0 1px #ffffffd9, 0 1px 2px #0f0c090a;
  overflow: hidden;
  margin-bottom: 22px;
}

[data-property-detail] .cmp-table-scroller {
  overflow-x: auto;
}

[data-property-detail] .cmp-row {
  display: grid;
  grid-template-columns: 180px repeat(var(--cmp-cols, 3), minmax(160px, 1fr));
}

[data-property-detail] .cmp-cell {
  padding: 14px 16px;
  border-bottom: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
  font-size: 13px;
  color: hsl(var(--foreground));
}

[data-property-detail] .cmp-cell:last-child {
  border-right: none;
}

[data-property-detail] .cmp-cell.best {
  background: #2073df0f;
}

[data-property-detail] .cmp-cell.label {
  background: hsl(var(--surface-3) / .6);
  font-weight: 600;
  color: hsl(var(--foreground-muted));
  font-size: 12px;
}

[data-property-detail] .cmp-row.section-header > .cmp-cell {
  background: #0f0c090a;
  padding: 8px 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--fg-4));
}

[data-property-detail] .cmp-row.head > .cmp-cell {
  background: #e9f1fb66;
  padding: 20px 16px;
  border-bottom: 1px solid hsl(var(--blue-line));
}

[data-property-detail] .cmp-cell strong {
  color: hsl(var(--foreground));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cmp-head-cell {
  text-align: center;
}

[data-property-detail] .cmp-head-rank {
  display: inline-block;
  padding: 2px 8px;
  background: hsl(var(--blue-2));
  color: #fff;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

[data-property-detail] .cmp-head-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--blue)) 0%, hsl(var(--blue-2)) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin: 0 auto 8px;
}

[data-property-detail] .cmp-head-avatar.best {
  box-shadow: 0 0 0 3px #2073df2e, 0 0 0 5px hsl(var(--blue-line));
}

[data-property-detail] .cmp-head-name {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -.008em;
}

[data-property-detail] .cmp-head-sub {
  font-size: 11px;
  color: hsl(var(--foreground-muted));
  margin-top: 2px;
}

[data-property-detail] .cmp-head-score {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: hsl(var(--blue-soft));
  color: hsl(var(--blue));
  border: 1px solid hsl(var(--blue-line));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-property-detail] .cmp-head-score.high {
  background: hsl(var(--blue));
  color: #fff;
  border-color: #0000;
}

[data-property-detail] .cmp-check {
  color: hsl(var(--blue));
  display: inline-flex;
  align-items: center;
}

[data-property-detail] .cmp-cross {
  color: hsl(var(--fg-4));
  display: inline-flex;
  align-items: center;
}

[data-property-detail] .cmp-check .i, [data-property-detail] .cmp-cross .i {
  width: 14px;
  height: 14px;
}

[data-property-detail] .cmp-score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-property-detail] .cmp-score-bar-track {
  flex: 1;
  height: 5px;
  background: hsl(var(--surface-3));
  border-radius: 999px;
  overflow: hidden;
}

[data-property-detail] .cmp-score-bar-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--blue-3)), hsl(var(--blue)));
  border-radius: 999px;
}

[data-property-detail] .cmp-score-bar-val {
  font-size: 11.5px;
  font-weight: 700;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

[data-property-detail] .cmp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff80;
  border-top: 1px solid hsl(var(--border));
  flex-wrap: wrap;
}

[data-property-detail] .cmp-actions .cmp-legal {
  font-size: 11.5px;
  color: hsl(var(--fg-4));
  line-height: 1.4;
  max-width: 480px;
}

[data-property-detail] .cmp-actions .cmp-legal strong {
  color: hsl(var(--foreground-muted));
  font-weight: 600;
}

[data-property-detail] .cmp-actions-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* [project]/src/styles/pages/project-home.css [app-client] (css, ) */
.project-home-v3 {
  --pj-ink: var(--hymo-v4-ink);
  --pj-card: var(--hymo-v4-card);
  --pj-line: var(--hymo-v4-line);
  --pj-line-2: var(--hymo-v4-line-2);
  --pj-r: var(--hymo-v4-r);
  --pj-r-sm: var(--hymo-v4-r-sm);
  --pj-shadow: var(--hymo-v4-shadow);
  --pj-shadow-hover: var(--hymo-v4-shadow-hover);
  --pj-track: #0f0c090f;
  position: relative;
  min-height: 100%;
  padding: 36px 32px 80px;
  display: flex;
  justify-content: center;
  background: var(--hymo-bg);
}

@media (width <= 1023px) {
  .project-home-v3 {
    padding: 28px 24px 60px;
  }
}

@media (width <= 767px) {
  .project-home-v3 {
    padding: 20px 16px 24px;
  }
}

.project-home-v3 .proj-page {
  width: 100%;
  max-width: 1160px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.project-home-v3 .page-art {
  display: none;
}

.project-home-v3 .top-utility {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.project-home-v3 .back-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 10px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  color: var(--hymo-fg-2);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .back-arrow svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.project-home-v3 .back-arrow .back-arrow-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: inherit;
}

.project-home-v3 .back-arrow:hover {
  background: var(--hymo-surface-2);
  border-color: var(--hymo-border-strong);
  color: var(--pj-ink);
}

@media (width <= 767px) {
  .project-home-v3 .back-arrow {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .project-home-v3 .back-arrow .back-arrow-label {
    display: none;
  }
}

.project-home-v3 .proj-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 0;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .proj-menu-trigger svg {
  width: 18px;
  height: 18px;
}

.project-home-v3 .proj-menu-trigger:hover, .project-home-v3 .proj-menu-trigger[data-state="open"] {
  background: var(--hymo-surface-2);
  border-color: var(--hymo-border-strong);
  color: var(--pj-ink);
}

.project-home-v3 .hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .hero-status .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hymo-red);
  flex-shrink: 0;
}

.project-home-v3 .hero-status .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--pj-ink);
}

.project-home-v3 .hero-status .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hymo-fg-4);
}

.project-home-v3 .hero-status strong {
  color: var(--hymo-fg);
  font-weight: 600;
}

.project-home-v3 .hero-status > span {
  white-space: nowrap;
}

@media (width <= 767px) {
  .project-home-v3 .hero-status {
    height: auto;
    min-height: 38px;
    padding: 8px 14px;
    flex-wrap: wrap;
    row-gap: 4px;
    line-height: 1.3;
  }
}

.proj-glass-dialog {
  background: var(--hymo-v4-card) !important;
  border: 1px solid var(--hymo-v4-line-2) !important;
  border-radius: 18px !important;
  box-shadow: var(--hymo-v4-shadow-hover) !important;
  color: var(--hymo-fg) !important;
  padding: 28px !important;
  max-width: 460px !important;
}

.proj-glass-dialog .proj-glass-icon {
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  border: 1px solid var(--hymo-v4-line);
}

.proj-glass-dialog .proj-glass-icon.danger {
  background: #fdf2f2;
  color: #c32222;
  border-color: #f5d6d6;
}

.proj-glass-dialog [data-slot="dialog-title"], .proj-glass-dialog [data-slot="alert-dialog-title"] {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--hymo-fg);
}

.proj-glass-dialog [data-slot="dialog-description"], .proj-glass-dialog [data-slot="alert-dialog-description"] {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
  margin-top: 4px;
}

.proj-glass-dialog .proj-glass-field {
  margin-top: 16px;
}

.proj-glass-dialog .proj-glass-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  margin-bottom: 6px;
}

.proj-glass-dialog .proj-glass-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--hymo-fg);
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.proj-glass-dialog .proj-glass-field input:focus {
  border-color: var(--hymo-v4-ink);
  box-shadow: 0 0 0 3px #0f0c0914;
}

.proj-glass-dialog .proj-glass-footer {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.proj-glass-btn {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.proj-glass-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.proj-glass-btn-cancel {
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line-2);
  color: var(--hymo-fg-2);
}

.proj-glass-btn-cancel:hover:not(:disabled) {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
}

.proj-glass-btn-action {
  background: var(--hymo-v4-ink);
  border: 1px solid var(--hymo-v4-ink);
  color: #fff;
}

.proj-glass-btn-action:hover:not(:disabled) {
  background: #000;
  border-color: #000;
}

.proj-glass-btn-danger {
  background: #c32222;
  border: 1px solid #c32222;
  color: #fff;
}

.proj-glass-btn-danger:hover:not(:disabled) {
  background: #a51d1d;
  border-color: #a51d1d;
}

.project-home-v3 .proj-title-wrap {
  margin-bottom: 22px;
}

.project-home-v3 .proj-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
  margin-bottom: 6px;
}

.project-home-v3 .proj-eyebrow:before {
  display: none;
}

.project-home-v3 .proj-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--pj-ink);
  margin: 0;
  word-break: break-word;
}

@media (width <= 1023px) {
  .project-home-v3 .proj-title {
    font-size: 34px;
  }
}

@media (width <= 767px) {
  .project-home-v3 .proj-title {
    font-size: 30px;
  }
}

.project-home-v3 .hero-card {
  background: var(--pj-card);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-r);
  box-shadow: var(--pj-shadow);
  overflow: hidden;
  margin-bottom: 12px;
}

.project-home-v3 .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (width <= 1023px) {
  .project-home-v3 .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-home-v3 .stat-cell {
  padding: 20px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.project-home-v3 .stat-cell + .stat-cell:before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--pj-line);
}

@media (width <= 1023px) {
  .project-home-v3 .stat-cell:nth-child(3):before {
    display: none;
  }

  .project-home-v3 .stat-cell:nth-child(3), .project-home-v3 .stat-cell:nth-child(4) {
    border-top: 1px solid var(--pj-line);
  }
}

.project-home-v3 .stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.project-home-v3 .stat-label svg {
  width: 13px;
  height: 13px;
  color: var(--hymo-fg-4);
}

.project-home-v3 .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--pj-ink);
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.project-home-v3 .stat-meta {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  letter-spacing: -.005em;
}

.project-home-v3 .stat-cell.accent .stat-value {
  color: var(--hymo-red);
}

.project-home-v3 .proj-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-r);
  box-shadow: var(--pj-shadow);
  margin-bottom: 28px;
}

@media (width <= 767px) {
  .project-home-v3 .proj-progress {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 20px;
  }
}

.project-home-v3 .proj-progress-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-home-v3 .proj-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.project-home-v3 .proj-progress-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .proj-progress-value .pct {
  font-size: 26px;
  font-weight: 700;
  color: var(--pj-ink);
  letter-spacing: -.022em;
}

.project-home-v3 .proj-progress-track {
  display: grid;
  gap: 4px;
}

.project-home-v3 .pp-seg {
  height: 6px;
  background: var(--pj-track);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.project-home-v3 .pp-seg i {
  display: block;
  height: 100%;
  background: var(--hymo-red);
  border-radius: 999px;
  transition: width .6s var(--hymo-ease);
}

.project-home-v3 .pp-seg.done i {
  background: var(--pj-ink);
}

.project-home-v3 .proj-progress-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  color: var(--pj-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid var(--pj-line);
  white-space: nowrap;
}

.project-home-v3 .proj-progress-tag svg {
  width: 12px;
  height: 12px;
  color: var(--hymo-red);
}

.project-home-v3 .view-switcher-wrap {
  position: sticky;
  top: 70px;
  z-index: 20;
  display: flex;
  justify-content: flex-start;
  margin: 0 0 28px;
  pointer-events: none;
}

.project-home-v3 .view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  box-shadow: var(--pj-shadow);
  pointer-events: auto;
}

.project-home-v3 .view-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  color: var(--hymo-fg-3);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.008em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
  white-space: nowrap;
}

.project-home-v3 .view-tab svg {
  width: 15px;
  height: 15px;
  color: var(--hymo-fg-4);
  transition: color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .view-tab:hover {
  color: var(--pj-ink);
  background: var(--hymo-surface-2);
}

.project-home-v3 .view-tab:hover svg {
  color: var(--hymo-fg-2);
}

.project-home-v3 .view-tab.active {
  color: #fff;
  font-weight: 600;
  background: var(--pj-ink);
  border-color: var(--pj-ink);
}

.project-home-v3 .view-tab.active svg {
  color: #fff;
}

.project-home-v3 .view-switcher-clip {
  position: relative;
  max-width: 100%;
  pointer-events: auto;
}

.project-home-v3 .view-switcher-clip:before, .project-home-v3 .view-switcher-clip:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 1;
}

.project-home-v3 .view-switcher-clip:before {
  left: 0;
  background: linear-gradient(90deg, #fffffff2, #0000);
}

.project-home-v3 .view-switcher-clip:after {
  right: 0;
  background: linear-gradient(270deg, #fffffff2, #0000);
}

.project-home-v3 .view-switcher-clip--fade-left:before {
  opacity: 1;
}

.project-home-v3 .view-switcher-clip--fade-right:after {
  opacity: 1;
}

@media (width <= 767px) {
  .project-home-v3 .view-switcher {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .project-home-v3 .view-switcher::-webkit-scrollbar {
    display: none;
  }

  .project-home-v3 .view-tab {
    flex-shrink: 0;
    font-size: 13px;
    padding: 0 13px;
    scroll-snap-align: start;
  }
}

.project-home-v3 .sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 24px 0 14px;
  gap: 14px;
  flex-wrap: wrap;
}

.project-home-v3 .sect-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pj-ink);
  margin: 0;
}

.project-home-v3 .sect-head h2 .accent {
  color: inherit;
}

.project-home-v3 .sect-head .meta {
  font-size: 13px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .phases {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}

.project-home-v3 .phase {
  position: relative;
  background: var(--pj-card);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-r);
  box-shadow: var(--pj-shadow);
  overflow: hidden;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .phase:before {
  display: none;
}

.project-home-v3 .phase > * {
  position: relative;
  z-index: 1;
}

.project-home-v3 .phase.done {
  opacity: .8;
}

.project-home-v3 .phase.current {
  border-color: var(--pj-line-2);
}

.project-home-v3 .phase.open {
  border-color: var(--pj-line-2);
  box-shadow: var(--pj-shadow-hover);
}

.project-home-v3 .phase-head {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .phase-head:hover {
  background: var(--hymo-surface-2);
}

.project-home-v3 .phase-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  color: var(--hymo-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  position: relative;
}

.project-home-v3 .phase.done .phase-num {
  background: var(--pj-ink);
  border-color: var(--pj-ink);
  color: #fff;
}

.project-home-v3 .phase.done .phase-num:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg)translate(1px, -2px);
}

.project-home-v3 .phase.done .phase-num-text {
  display: none;
}

.project-home-v3 .phase.current .phase-num {
  background: var(--hymo-red);
  border-color: var(--hymo-red);
  color: #fff;
}

.project-home-v3 .phase-info {
  min-width: 0;
}

.project-home-v3 .phase-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--pj-ink);
  line-height: 1.2;
  margin-bottom: 3px;
}

.project-home-v3 .phase-sub {
  font-size: 13px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .phase-sub strong {
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.project-home-v3 .phase.current .phase-sub strong {
  color: var(--hymo-red);
}

.project-home-v3 .phase-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.project-home-v3 .mini-track {
  width: 80px;
  height: 5px;
  background: var(--pj-track);
  border-radius: 999px;
  overflow: hidden;
}

.project-home-v3 .mini-track i {
  display: block;
  height: 100%;
  background: var(--hymo-red);
  border-radius: 999px;
  transition: width .6s var(--hymo-ease);
}

.project-home-v3 .phase.done .mini-track i {
  background: var(--pj-ink);
}

@media (width <= 600px) {
  .project-home-v3 .mini-track {
    display: none;
  }
}

.project-home-v3 .phase-chev {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--pj-line-2);
  color: var(--hymo-fg-3);
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .phase-chev svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .phase.open .phase-chev {
  background: var(--pj-ink);
  border-color: var(--pj-ink);
  color: #fff;
}

.project-home-v3 .phase.open .phase-chev svg {
  transform: rotate(180deg);
}

.project-home-v3 .phase-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s var(--hymo-ease);
}

.project-home-v3 .phase.open .phase-body {
  max-height: 2400px;
}

.project-home-v3 .phase-body-inner {
  display: flex;
  flex-direction: column;
  padding: 0 20px 16px;
}

.project-home-v3 .action-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  padding: 0;
  border-top: 1px solid var(--pj-line);
}

.project-home-v3 .action-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 8px;
  min-height: 56px;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--pj-line);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .action-item:hover {
  background: var(--hymo-surface-2);
}

.project-home-v3 .action-item:not(.done):not(.current) .action-label {
  color: var(--hymo-fg-2);
}

.project-home-v3 .action-item:not(.done):not(.current) .action-meta {
  color: var(--hymo-fg-4);
}

.project-home-v3 .action-item.done .action-label {
  color: var(--hymo-fg-3);
  text-decoration: line-through;
  text-decoration-color: #6e696259;
}

.project-home-v3 .action-item.current {
  background: var(--hymo-red-faint);
}

.project-home-v3 .action-item.current:hover {
  background: var(--hymo-red-soft);
}

.project-home-v3 .action-item.current .action-label {
  color: var(--pj-ink);
  font-weight: 600;
}

.project-home-v3 .action-item.current .action-meta-num {
  color: var(--hymo-red);
}

.project-home-v3 .action-box {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--pj-card);
  border: 1.5px dashed var(--hymo-border-strong);
  position: relative;
  flex-shrink: 0;
}

.project-home-v3 .action-box.done {
  background: var(--pj-ink);
  border: 1.5px solid var(--pj-ink);
}

.project-home-v3 .action-box.done:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%)rotate(-45deg);
}

.project-home-v3 .action-box.current {
  background: var(--hymo-red);
  border: 1.5px solid var(--hymo-red);
}

.project-home-v3 .action-box.current:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid #0000;
  border-bottom: 4px solid #0000;
  border-left: 6px solid #fff;
  transform: translate(-40%, -50%);
}

.project-home-v3 .action-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.project-home-v3 .action-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--pj-ink);
  letter-spacing: -.005em;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.project-home-v3 .action-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .action-meta-num {
  font-weight: 600;
  letter-spacing: .01em;
}

.project-home-v3 .action-meta-when:before {
  content: "·";
  margin-right: 6px;
  color: var(--hymo-fg-4);
}

.project-home-v3 .action-key-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 1px 8px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .005em;
  border: 1px solid var(--pj-line);
  white-space: nowrap;
}

.project-home-v3 .action-key-badge svg {
  width: 11px;
  height: 11px;
  color: var(--hymo-red);
}

.project-home-v3 .action-item.done .action-key-badge {
  opacity: .7;
}

.project-home-v3 .action-now-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 2px 8px;
  background: var(--hymo-red);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.project-home-v3 .action-now-tag .pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.project-home-v3 .action-show-more {
  margin: 12px auto 0;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hymo-fg-2);
  cursor: pointer;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .action-show-more svg {
  width: 13px;
  height: 13px;
}

.project-home-v3 .action-show-more:hover {
  color: var(--pj-ink);
  border-color: var(--hymo-border-strong);
  background: var(--hymo-surface-2);
}

.project-home-v3 .fiche-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  margin-top: 8px;
  align-items: start;
}

@media (width <= 1023px) {
  .project-home-v3 .fiche-layout {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .fiche-aside {
  position: sticky;
  top: 24px;
  align-self: start;
}

@media (width <= 1023px) {
  .project-home-v3 .fiche-aside {
    display: none;
  }
}

.project-home-v3 .fiche-aside-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line);
  border-radius: 18px;
  box-shadow: var(--pj-shadow);
}

.project-home-v3 .fiche-aside-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--hymo-fg-3);
  cursor: pointer;
  text-align: left;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .fiche-aside-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--hymo-fg-4);
  transition: color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .fiche-aside-tab-label {
  flex: 1;
}

.project-home-v3 .fiche-aside-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-3);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .fiche-aside-tab:hover {
  background: var(--hymo-surface-2);
  color: var(--pj-ink);
}

.project-home-v3 .fiche-aside-tab:hover svg {
  color: var(--hymo-fg-2);
}

.project-home-v3 .fiche-aside-tab.active {
  color: #fff;
  font-weight: 600;
  background: var(--pj-ink);
  border-color: var(--pj-ink);
}

.project-home-v3 .fiche-aside-tab.active svg {
  color: #fff;
}

.project-home-v3 .fiche-aside-tab.active .fiche-aside-tab-count {
  background: #ffffff2e;
  color: #fff;
}

.project-home-v3 .fiche-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-home-v3 .fiche-card {
  position: relative;
  padding: 24px 28px;
  background: var(--pj-card);
  border: 1px solid var(--pj-line);
  border-radius: var(--pj-r);
  box-shadow: var(--pj-shadow);
  overflow: hidden;
}

.project-home-v3 .fiche-card:before {
  display: none;
}

.project-home-v3 .fiche-card > * {
  position: relative;
  z-index: 1;
}

.project-home-v3 .fiche-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.project-home-v3 .fiche-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--pj-line);
  color: var(--hymo-fg-2);
  flex-shrink: 0;
}

.project-home-v3 .fiche-card-icon svg {
  width: 18px;
  height: 18px;
}

.project-home-v3 .fiche-card--emerald .fiche-card-icon {
  color: #307e57;
}

.project-home-v3 .fiche-card--amber .fiche-card-icon {
  color: #b37a1a;
}

.project-home-v3 .fiche-card--violet .fiche-card-icon {
  color: var(--hymo-violet);
}

.project-home-v3 .fiche-card-heading {
  min-width: 0;
  flex: 1;
}

.project-home-v3 .fiche-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pj-ink);
  margin: 0;
}

.project-home-v3 .fiche-card-desc {
  font-size: 13px;
  color: var(--hymo-fg-3);
  margin: 4px 0 0;
  line-height: 1.45;
}

.project-home-v3 .fiche-card-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}

@media (width <= 700px) {
  .project-home-v3 .fiche-card-body {
    grid-template-columns: 1fr;
  }

  .project-home-v3 .fiche-card {
    padding: 20px;
  }
}

.project-home-v3 .editable-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-home-v3 .editable-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  letter-spacing: -.005em;
}

.project-home-v3 .editable-field-label svg {
  width: 12px;
  height: 12px;
  color: var(--hymo-fg-4);
}

.project-home-v3 .editable-field-unit {
  color: var(--hymo-fg-4);
  font-weight: 500;
}

.project-home-v3 .editable-field-status-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.project-home-v3 .editable-field-status {
  width: 14px;
  height: 14px;
}

.project-home-v3 .editable-field-status.saving {
  color: var(--hymo-fg-3);
  animation: .9s linear infinite hymo-spin;
}

.project-home-v3 .editable-field-status.saved {
  color: #2c9661;
}

.project-home-v3 .editable-field-status.error {
  color: #d92626;
}

.project-home-v3 .editable-field-error {
  font-size: 11px;
  color: #d92626;
}

.project-home-v3 .fiche-input, .project-home-v3 .editable-field input.fiche-input, .project-home-v3 .editable-field textarea.fiche-input, .project-home-v3 .editable-field [data-slot="select-trigger"].fiche-input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pj-ink);
  background: var(--pj-card);
  border: 1px solid var(--hymo-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.project-home-v3 .fiche-textarea {
  padding: 10px 14px;
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
}

.project-home-v3 .fiche-input::-moz-placeholder {
  color: var(--hymo-fg-4);
  font-weight: 400;
}

.project-home-v3 .fiche-input::placeholder {
  color: var(--hymo-fg-4);
  font-weight: 400;
}

.project-home-v3 .fiche-input:hover {
  border-color: var(--hymo-border-strong);
}

.project-home-v3 .fiche-input:focus, .project-home-v3 .fiche-input:focus-visible, .project-home-v3 .fiche-input[data-state="open"] {
  border-color: var(--pj-ink);
  box-shadow: 0 0 0 3px #0f0c0914;
}

.project-home-v3 .fiche-input.has-error {
  border-color: #dd3c3c;
  box-shadow: 0 0 0 3px #dd3c3c26;
}

.project-home-v3 .editable-field--locked .editable-field-locked-display {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--hymo-surface-2);
  border: 1px dashed var(--hymo-border-strong);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .editable-field-locked-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-home-v3 .editable-field-locked-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--hymo-fg-4);
}

.fiche-select-content {
  background: var(--hymo-v4-card) !important;
  border: 1px solid var(--hymo-v4-line-2) !important;
  border-radius: 14px !important;
  box-shadow: var(--hymo-v4-shadow-hover) !important;
  padding: 5px !important;
  color: var(--hymo-fg) !important;
}

.fiche-select-content .fiche-select-item {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .16s, color .16s;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  color: var(--hymo-fg-2) !important;
}

.fiche-select-content .fiche-select-item:hover, .fiche-select-content .fiche-select-item[data-highlighted], .fiche-select-content .fiche-select-item[data-state="checked"] {
  background: var(--hymo-surface-2) !important;
  color: var(--hymo-v4-ink) !important;
}

.project-home-v3 .gantt-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
}

.project-home-v3 .gantt-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hymo-fg-2);
  cursor: pointer;
  background: var(--pj-card);
  border: 1px solid var(--pj-line-2);
  border-radius: 999px;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .gantt-export-btn svg {
  width: 14px;
  height: 14px;
}

.project-home-v3 .gantt-export-btn:hover {
  color: var(--pj-ink);
  border-color: var(--hymo-border-strong);
  background: var(--hymo-surface-2);
}

.project-home-v3 .loading-block {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
  width: 100%;
}

.project-home-v3 .loading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--pj-track);
  border-top-color: var(--pj-ink);
  animation: .9s linear infinite hymo-spin;
}

@keyframes hymo-spin {
  to {
    transform: rotate(360deg);
  }
}

.project-home-v3 .empty-message {
  text-align: center;
  font-size: 14px;
  color: var(--hymo-fg-3);
  padding: 40px 0;
}

@keyframes hymo-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(1.15);
  }
}

.project-home-v3 .ml-auto {
  margin-left: auto;
}


/* [project]/src/styles/pages/project-outils.css [app-client] (css, ) */
.project-home-v3 .outils-intro {
  margin: 28px 0 20px;
  max-width: 62ch;
}

.project-home-v3 .outils-intro__titre {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  margin: 0 0 6px;
}

.project-home-v3 .outils-intro__texte {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
  margin: 0;
}

.project-home-v3 .outils-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.project-home-v3 .outil-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 22px;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(#ffffffb3 0%, #fff0 45%), #ffffff8c;
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--hymo-shadow-card);
  transition: transform var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 a.outil-card:hover {
  box-shadow: var(--hymo-shadow-glass-hover);
}

.project-home-v3 a.outil-card:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 3px;
}

.project-home-v3 .outil-card--a-venir {
  opacity: .62;
  cursor: default;
}

.project-home-v3 .outil-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--hymo-red-soft);
  border: 1px solid #e0526e4d;
  color: var(--hymo-red);
}

.project-home-v3 .outil-card__icone svg {
  width: 20px;
  height: 20px;
}

.project-home-v3 .outil-card--emerald .outil-card__icone {
  background: #e0f5eb99;
  border-color: #53c68c4d;
  color: #278657;
}

.project-home-v3 .outil-card--amber .outil-card__icone {
  background: #fbefda99;
  border-color: #e8a5304d;
  color: #b3770f;
}

.project-home-v3 .outil-card--violet .outil-card__icone {
  background: #ebe0f599;
  border-color: #8c53c64d;
  color: #7535b6;
}

.project-home-v3 .outil-card__corps {
  flex: 1;
  min-width: 0;
}

.project-home-v3 .outil-card__titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hymo-fg);
  margin: 0 0 6px;
}

.project-home-v3 .outil-card__badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--hymo-surface-3);
  color: var(--hymo-fg-3);
}

.project-home-v3 .outil-card__accroche {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
  margin: 0 0 8px;
}

.project-home-v3 .outil-card__benefice {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  margin: 0;
}

.project-home-v3 .outil-card__fleche {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--hymo-fg-4);
  align-self: center;
}

.project-home-v3 .fiche-card--pleine .fiche-card-body {
  grid-template-columns: 1fr;
}

.project-home-v3 .fiche-annonces__vide {
  padding: 26px;
  border: 1px dashed var(--hymo-border);
  border-radius: 16px;
  background: #ffffff59;
  text-align: center;
  font-size: 13.5px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .fiche-annonces__vide-aide {
  margin: 8px auto 0;
  max-width: 46ch;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  line-height: 1.5;
}

.project-home-v3 .fiche-annonces__liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-home-v3 .fiche-annonces__ajouter {
  margin-top: 16px;
}

.project-home-v3 .listings-resume {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--hymo-red-faint);
  border: 1px solid var(--hymo-red-line);
}

@media (width <= 700px) {
  .project-home-v3 .listings-resume {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-home-v3 .listings-resume dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.project-home-v3 .listings-resume dd {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .listing-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: #ffffff9e;
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--hymo-shadow-card);
  transition: box-shadow var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .listing-card--retenu {
  border-color: var(--hymo-red-line);
  box-shadow: 0 0 0 2px var(--hymo-red-soft), var(--hymo-shadow-card);
}

.project-home-v3 .listing-card--sortie {
  opacity: .6;
}

.project-home-v3 .listing-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.project-home-v3 .listing-card__identite {
  flex: 1;
  min-width: 0;
}

.project-home-v3 .listing-card__titre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hymo-fg);
  margin: 0;
}

.project-home-v3 .listing-card__meta {
  font-size: 12px;
  color: var(--hymo-fg-3);
  margin: 3px 0 0;
}

.project-home-v3 .listing-card__statut {
  width: 150px;
  flex-shrink: 0;
  height: 32px;
  font-size: 12.5px;
}

.project-home-v3 .listing-card__chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hymo-border);
  border-bottom: 1px solid var(--hymo-border);
}

@media (width <= 560px) {
  .project-home-v3 .listing-card__chiffres {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.project-home-v3 .listing-card__chiffres dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.project-home-v3 .listing-card__chiffres dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .listing-card__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.project-home-v3 .listing-card__etoiles {
  display: flex;
  gap: 2px;
}

.project-home-v3 .listing-star {
  padding: 3px;
  border-radius: 6px;
  color: var(--hymo-fg-4);
  transition: color var(--hymo-t-fast) var(--hymo-ease);
}

.project-home-v3 .listing-star svg {
  width: 16px;
  height: 16px;
}

.project-home-v3 .listing-star:hover {
  color: var(--hymo-red-3);
}

.project-home-v3 .listing-star--on {
  color: var(--hymo-red);
}

.project-home-v3 .listing-star--on svg {
  fill: currentColor;
}

.project-home-v3 .listing-star:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 1px;
}

.project-home-v3 .listing-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.project-home-v3 .listing-card__lien {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .listing-card__lien:hover {
  color: var(--hymo-red);
}

.project-home-v3 .listing-card__lien svg {
  width: 16px;
  height: 16px;
}

.project-home-v3 .listing-pastille {
  margin-left: 5px;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
  font-size: 10.5px;
  font-weight: 700;
}

.listing-dialog {
  max-width: 720px;
}

.listing-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.listing-group {
  border-top: 1px solid var(--hymo-border);
  padding-top: 14px;
}

.listing-group:first-child {
  border-top: none;
  padding-top: 0;
}

.listing-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 0 0 10px;
}

.listing-group__head--fixe {
  cursor: default;
}

.listing-group__titre {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hymo-fg);
}

.listing-group__aide {
  flex: 1;
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.listing-group__chev {
  width: 15px;
  height: 15px;
  color: var(--hymo-fg-4);
  flex-shrink: 0;
}

.listing-group__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}

@media (width <= 640px) {
  .listing-group__grid {
    grid-template-columns: 1fr;
  }
}

.listing-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.listing-field--large {
  grid-column: 1 / -1;
}

.listing-field__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-2);
}

.listing-field__unite {
  font-size: 11px;
  font-weight: 500;
  color: var(--hymo-fg-4);
}

.listing-field__aide {
  font-size: 11px;
  color: var(--hymo-fg-3);
  line-height: 1.4;
  margin: 0;
}

.listing-field__control {
  height: 36px;
  font-size: 13px;
}

.project-home-v3 .cl-demarrage {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  max-width: 620px;
}

.project-home-v3 .cl-vide {
  padding: 26px;
  border: 1px dashed var(--hymo-border);
  border-radius: 16px;
  background: #ffffff59;
  font-size: 13.5px;
  color: var(--hymo-fg-2);
  max-width: 62ch;
}

.project-home-v3 .cl-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-home-v3 .cl-liste__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 14px;
  background: #fff9;
  border: 1px solid #ffffffbf;
  box-shadow: var(--hymo-shadow-card);
}

.project-home-v3 .cl-liste__lien {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--hymo-fg);
}

.project-home-v3 .cl-liste__lien:hover {
  background: #ffffff8c;
}

.project-home-v3 .cl-liste__lien svg {
  width: 17px;
  height: 17px;
  color: var(--hymo-red);
  flex-shrink: 0;
}

.project-home-v3 .cl-liste__titre {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-home-v3 .cl-liste__date {
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .cl-liste__compte {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hymo-fg-2);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .cl-liste__alertes, .project-home-v3 .cl-jauge__alertes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #a7291b;
}

.project-home-v3 .cl-liste__alertes svg, .project-home-v3 .cl-jauge__alertes svg {
  width: 14px;
  height: 14px;
}

.project-home-v3 .cl-runner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-home-v3 .cl-entete {
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(#ffffffb3 0%, #fff0 45%), #ffffff8c;
  border: 1.5px solid #ffffffb3;
  box-shadow: var(--hymo-shadow-card);
}

.project-home-v3 .cl-entete__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.project-home-v3 .cl-entete__titre {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  margin: 0;
}

.project-home-v3 .cl-etat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  min-height: 18px;
}

.project-home-v3 .cl-etat svg {
  width: 14px;
  height: 14px;
}

.project-home-v3 .cl-etat--saved {
  color: #1d7247;
}

.project-home-v3 .cl-etat--error {
  color: #a7291b;
}

.project-home-v3 .cl-jauge {
  margin-top: 14px;
}

.project-home-v3 .cl-jauge__barre {
  height: 7px;
  border-radius: 999px;
  background: var(--hymo-surface-3);
  overflow: hidden;
}

.project-home-v3 .cl-jauge__remplie {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--hymo-grad-bar);
  transition: width var(--hymo-t-slow) var(--hymo-ease);
}

.project-home-v3 .cl-jauge__legende {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .cl-jauge__legende strong {
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .cl-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (width <= 760px) {
  .project-home-v3 .cl-phases {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .cl-phase {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  text-align: left;
  border-radius: 15px;
  background: #ffffff80;
  border: 1.5px solid #ffffffb3;
  transition: border-color var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .cl-phase:hover {
  background: #ffffffb8;
}

.project-home-v3 .cl-phase--active {
  border-color: var(--hymo-red-line);
  background: var(--hymo-red-faint);
  box-shadow: 0 0 0 3px var(--hymo-red-soft);
}

.project-home-v3 .cl-phase:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.project-home-v3 .cl-phase__libelle {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hymo-fg);
}

.project-home-v3 .cl-phase__aide {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--hymo-fg-3);
}

.project-home-v3 .cl-phase__compte {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hymo-fg-2);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .cl-phase--active .cl-phase__compte {
  color: var(--hymo-red);
}

.project-home-v3 .cl-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-home-v3 .cl-section {
  border-radius: 18px;
  background: #ffffff8c;
  border: 1.5px solid #ffffffb8;
  box-shadow: var(--hymo-shadow-card);
  overflow: hidden;
}

.project-home-v3 .cl-section--optionnelle {
  background: #ffffff61;
}

.project-home-v3 .cl-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
}

.project-home-v3 .cl-section__head:hover {
  background: #fff6;
}

.project-home-v3 .cl-section__titres {
  flex: 1;
  min-width: 0;
}

.project-home-v3 .cl-section__titre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hymo-fg);
  margin: 0;
}

.project-home-v3 .cl-section__aide {
  font-size: 12px;
  color: var(--hymo-fg-3);
  margin: 3px 0 0;
}

.project-home-v3 .cl-section__compte {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.project-home-v3 .cl-section__chev {
  width: 17px;
  height: 17px;
  color: var(--hymo-fg-4);
  flex-shrink: 0;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .cl-section__chev--ouvert {
  transform: rotate(180deg);
}

.project-home-v3 .cl-section__points {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hymo-border);
}

.project-home-v3 .cl-point {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hymo-border);
}

.project-home-v3 .cl-point:last-child {
  border-bottom: none;
}

.project-home-v3 .cl-point--alerte {
  background: #fcefedbf;
  box-shadow: inset 3px 0 #dd3e2c;
}

@media (width <= 700px) {
  .project-home-v3 .cl-point {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .cl-point__texte {
  min-width: 0;
}

.project-home-v3 .cl-point__libelle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin: 0;
}

.project-home-v3 .cl-point__aide {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
  margin: 4px 0 0;
  max-width: 62ch;
}

.project-home-v3 .cl-point__rappel {
  font-size: 12px;
  color: var(--hymo-fg-2);
  margin: 5px 0 0;
}

.project-home-v3 .cl-point__rappel strong {
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .cl-point__lien {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hymo-red);
  text-decoration: none;
}

.project-home-v3 .cl-point__lien:hover {
  text-decoration: underline;
}

.project-home-v3 .cl-point__lien svg {
  width: 12px;
  height: 12px;
}

.project-home-v3 .cl-point__actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.project-home-v3 .cl-notes {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--hymo-border);
}

.project-home-v3 .cl-note {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
}

.project-home-v3 .cl-note:hover {
  color: var(--hymo-fg);
}

.project-home-v3 .cl-note:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 1px;
}

.project-home-v3 .cl-note--mauvais.cl-note--active {
  background: #ca3221;
  color: #fff;
}

.project-home-v3 .cl-note--moyen.cl-note--active {
  background: #d08a11;
  color: #fff;
}

.project-home-v3 .cl-note--bien.cl-note--active {
  background: #228152;
  color: #fff;
}

.project-home-v3 .cl-point__commenter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--hymo-border);
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-4);
}

.project-home-v3 .cl-point__commenter:hover {
  color: var(--hymo-fg-2);
}

.project-home-v3 .cl-point__commenter--rempli {
  color: var(--hymo-red);
  border-color: var(--hymo-red-line);
  background: var(--hymo-red-soft);
}

.project-home-v3 .cl-point__commenter svg {
  width: 15px;
  height: 15px;
}

.project-home-v3 .cl-point__champ {
  grid-column: 1 / -1;
  font-size: 13px;
}

.project-home-v3 .cl-conclusion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border-radius: 20px;
  background: #ffffff8c;
  border: 1.5px solid #ffffffb8;
  box-shadow: var(--hymo-shadow-card);
}

.project-home-v3 .proj-docs__vide {
  font-size: 13.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .proj-docs__bandeau {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--hymo-red-faint);
  border: 1px solid var(--hymo-red-line);
}

.project-home-v3 .proj-docs__compte {
  margin: 0;
  font-size: 13px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .proj-docs__compte strong {
  font-size: 15px;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .proj-docs__alerte {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #a7291b;
}

.project-home-v3 .proj-docs__alerte svg {
  width: 14px;
  height: 14px;
}

.project-home-v3 .proj-docs__ged {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-red);
  text-decoration: none;
}

.project-home-v3 .proj-docs__ged:hover {
  text-decoration: underline;
}

.project-home-v3 .proj-docs__ged svg {
  width: 13px;
  height: 13px;
}

.project-home-v3 .proj-docs__moment {
  margin-bottom: 22px;
}

.project-home-v3 .proj-docs__moment:last-of-type {
  margin-bottom: 0;
}

.project-home-v3 .proj-docs__moment-titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  margin: 0 0 10px;
}

.project-home-v3 .proj-docs__liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-home-v3 .proj-doc {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff8c;
  border: 1px solid #ffffffbf;
}

.project-home-v3 .proj-doc--depose {
  background: #ffffff61;
}

.project-home-v3 .proj-doc--manquant {
  box-shadow: inset 3px 0 #dd3e2c;
}

.project-home-v3 .proj-doc__pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--hymo-surface-2);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-4);
}

.project-home-v3 .proj-doc__pastille--ok {
  background: #e0f5ebcc;
  border-color: #53c68c59;
  color: #20794d;
}

.project-home-v3 .proj-doc__pastille svg {
  width: 15px;
  height: 15px;
}

.project-home-v3 .proj-doc__corps {
  flex: 1;
  min-width: 0;
}

@media (width <= 639px) {
  .project-home-v3 .proj-doc {
    flex-wrap: wrap;
  }

  .project-home-v3 .proj-doc__corps {
    flex-basis: calc(100% - 46px);
  }

  .project-home-v3 .proj-doc > button {
    margin-left: 46px;
  }
}

.project-home-v3 .proj-doc__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.project-home-v3 .proj-doc__essentiel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red-2);
}

.project-home-v3 .proj-doc__pourquoi {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
  max-width: 68ch;
}

.project-home-v3 .proj-doc__depot {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #20794d;
}

.project-home-v3 .buyer-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff9;
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--hymo-shadow-card);
}

.project-home-v3 .buyer-card--sortie {
  opacity: .6;
}

@media (width <= 640px) {
  .project-home-v3 .buyer-card {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .buyer-card__identite {
  min-width: 0;
}

.project-home-v3 .buyer-card__nom {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hymo-fg);
}

.project-home-v3 .buyer-card__contacts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .buyer-card__contacts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-home-v3 .buyer-card__contacts svg {
  width: 12px;
  height: 12px;
}

.project-home-v3 .buyer-card__offre {
  text-align: right;
}

@media (width <= 640px) {
  .project-home-v3 .buyer-card__offre {
    text-align: left;
  }
}

.project-home-v3 .buyer-card__montant {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .buyer-card__financement {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.project-home-v3 .buyer-card__financement svg {
  width: 13px;
  height: 13px;
}

.project-home-v3 .buyer-card__financement--solide {
  color: #20794d;
}

.project-home-v3 .buyer-card__financement--fragile {
  color: #a06a0d;
}

.project-home-v3 .buyer-card__date {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--hymo-fg-4);
}

.project-home-v3 .buyer-card__conditions {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hymo-surface-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hymo-fg-2);
}

.project-home-v3 .buyer-card__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-home-v3 .buyer-card__statut {
  width: 170px;
  height: 32px;
  font-size: 12.5px;
}

.project-home-v3 .pv-bloc {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff8c;
  border: 1px solid var(--hymo-border);
}

.project-home-v3 .pv-bloc--exonere {
  background: #ecf9f2b3;
  border-color: #6c96;
}

.project-home-v3 .pv-bloc__titre {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1c6942;
}

.project-home-v3 .pv-bloc__texte {
  margin: 4px 0 12px;
  font-size: 12.5px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .pv-bloc__lignes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}

@media (width <= 640px) {
  .project-home-v3 .pv-bloc__lignes {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .pv-bloc__lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hymo-border);
}

.project-home-v3 .pv-bloc__lignes dt {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .pv-bloc__lignes dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .pv-bloc__totaux {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--hymo-border-strong);
}

.project-home-v3 .pv-bloc__totaux p {
  margin: 0;
  font-size: 13px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .pv-bloc__totaux strong {
  display: block;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .pv-bloc__net strong {
  color: #1e7147;
}

.project-home-v3 .pv-bloc__reserve {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
}

.project-home-v3 .pv-bloc__reserve svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.project-home-v3 .pv-bloc__attente {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--hymo-border);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .travaux-total {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--hymo-red-faint);
  border: 1px solid var(--hymo-red-line);
  font-size: 13px;
  color: var(--hymo-fg-2);
}

.project-home-v3 .travaux-total strong {
  font-size: 17px;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .travaux-total span {
  color: var(--hymo-fg-3);
  font-size: 12px;
}

.project-home-v3 .travaux-poste {
  margin-bottom: 20px;
}

.project-home-v3 .travaux-poste__titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.project-home-v3 .travaux-poste__compte {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hymo-fg-4);
}

.project-home-v3 .travaux-poste__liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-home-v3 .quote-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff8c;
  border: 1px solid #ffffffbf;
}

.project-home-v3 .quote-row--engage {
  border-color: #53c68c66;
  background: #f0faf599;
}

.project-home-v3 .quote-row--refuse {
  opacity: .55;
}

.project-home-v3 .quote-row__corps {
  flex: 1;
  min-width: 0;
}

.project-home-v3 .quote-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.project-home-v3 .quote-row__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d9f2e6e6;
  color: #1c6942;
}

.project-home-v3 .quote-row__artisan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .quote-row__artisan svg {
  width: 12px;
  height: 12px;
}

.project-home-v3 .quote-row__montant {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-home-v3 .quote-row__ttc {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--hymo-fg-4);
}

.project-home-v3 .quote-row__statut {
  width: 140px;
  height: 30px;
  font-size: 12px;
}

.project-home-v3 .operation-compte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  margin-bottom: 22px;
}

@media (width <= 760px) {
  .project-home-v3 .operation-compte {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .operation-compte__lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hymo-border);
}

.project-home-v3 .operation-compte__lignes dt {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .operation-compte__lignes dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.project-home-v3 .operation-compte__total {
  border-top: 2px solid var(--hymo-border-strong);
  margin-top: 4px;
  border-bottom: none !important;
  padding-top: 10px !important;
}

.project-home-v3 .operation-compte__total dt {
  font-weight: 700;
  font-size: 13px !important;
  color: var(--hymo-fg-2) !important;
}

.project-home-v3 .operation-compte__total dd {
  letter-spacing: -.02em;
  font-size: 18px !important;
}

.project-home-v3 .operation-compte__total--negatif dd {
  color: #af2b1d;
}

.project-home-v3 .operation-compte__taux {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.project-home-v3 .operation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hymo-border);
}

@media (width <= 700px) {
  .project-home-v3 .operation-grid {
    grid-template-columns: 1fr;
  }
}

.project-home-v3 .operation-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-home-v3 .operation-compte--sans-marge {
  grid-template-columns: 1fr;
}

.project-home-v3 .listing-card, .project-home-v3 .buyer-card, .project-home-v3 .quote-row, .project-home-v3 .proj-doc, .project-home-v3 .pv-bloc, .project-home-v3 .cl-entete, .project-home-v3 .cl-phase, .project-home-v3 .cl-section, .project-home-v3 .cl-conclusion, .project-home-v3 .cl-liste__item, .project-home-v3 .fiche-annonces__vide, .project-home-v3 .cl-vide {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #ffffff38, var(--hymo-shadow-card);
}

.project-home-v3 .cl-entete, .project-home-v3 .cl-conclusion {
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
}

.project-home-v3 .listing-card--retenu {
  box-shadow: inset 0 1px 0 #ffffffd9, 0 0 0 2px var(--hymo-red-soft), var(--hymo-shadow-card);
}

.project-home-v3 .quote-row--engage, .project-home-v3 .proj-doc--manquant {
  box-shadow: inset 0 1px 0 #ffffffb3, var(--hymo-shadow-card);
}

.project-home-v3 .proj-doc--manquant {
  border-left: 3px solid #dd3e2c;
}

.project-home-v3 .outils-simulations {
  margin-top: 34px;
}

.project-home-v3 .outils-simulations__titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  margin: 0 0 12px;
}

.project-home-v3 .outils-simulations__vide {
  padding: 20px 22px;
  border: 1px dashed var(--hymo-border);
  border-radius: 16px;
  background: #fff6;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
  max-width: 62ch;
  margin: 0;
}

.project-home-v3 .outils-simulations__liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-home-v3 .outils-simulation {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: #ffffff8c;
  border: 1px solid #ffffffbf;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffffd9, var(--hymo-shadow-card);
  transition: transform var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.project-home-v3 .outils-simulation:hover {
  border-color: var(--hymo-red-line);
}

.project-home-v3 .outils-simulation:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.project-home-v3 .outils-simulation__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
}

.project-home-v3 .outils-simulation__icone svg {
  width: 16px;
  height: 16px;
}

.project-home-v3 .outils-simulation__corps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.project-home-v3 .outils-simulation__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.project-home-v3 .outils-simulation__meta {
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.project-home-v3 .outils-simulation__fleche {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--hymo-fg-4);
}

.listing-capture {
  padding: 16px 18px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: var(--hymo-red-faint);
  border: 1px solid var(--hymo-red-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.listing-capture__ligne {
  display: flex;
  gap: 8px;
  align-items: center;
}

.listing-capture__ligne .listing-field__control {
  flex: 1;
}

.fiche-annonces__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.project-home-v3 .fiche-annonces__actions .fiche-annonces__ajouter {
  margin-top: 0;
}

.capture-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capture-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: left;
  border: 1px solid var(--hymo-border);
  background: var(--hymo-surface);
  transition: border-color var(--hymo-t) var(--hymo-ease), transform var(--hymo-t) var(--hymo-ease);
}

.capture-item:hover:not(:disabled) {
  border-color: var(--hymo-red-line);
}

.capture-item:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.capture-item:disabled {
  opacity: .55;
  cursor: default;
}

.capture-item__vignette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-4);
}

.capture-item__vignette img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.capture-item__vignette svg {
  width: 18px;
  height: 18px;
}

.capture-item__corps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.capture-item__titre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-item__meta {
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.capture-item__prix {
  font-size: 14px;
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.capture-attente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hymo-fg-3);
}

.listing-capture .listings-invite__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border-strong);
  color: var(--hymo-fg-2);
  transition: border-color var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.listing-capture .listings-invite__btn svg {
  width: 15px;
  height: 15px;
}

.listing-capture .listings-invite__btn:hover:not(:disabled) {
  border-color: var(--hymo-red);
  color: var(--hymo-red);
}

.listing-capture .listings-invite__btn:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}

.listing-capture .listings-invite__active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #20794d;
}

.listing-capture .listings-invite__active svg {
  width: 14px;
  height: 14px;
}


/* [project]/src/styles/pages/step-view.css [app-client] (css, ) */
.step-view-v3 {
  position: relative;
  min-height: 100%;
  padding: 48px 32px 80px;
  display: flex;
  justify-content: center;
  background: #f5f4f1;
}

@media (width <= 1023px) {
  .step-view-v3 {
    padding: 36px 24px 60px;
  }
}

@media (width <= 767px) {
  .step-view-v3 {
    padding: 24px 18px 110px;
  }
}

.step-view-v3 .focus-col {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.step-view-v3 .focus-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.step-view-v3 .back-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  width: 48px;
  padding: 0;
  color: var(--hymo-red);
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all .42s cubic-bezier(.2, .8, .2, 1);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: none;
  isolation: isolate;
}

.step-view-v3 .back-arrow svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 13px;
}

.step-view-v3 .back-arrow .back-arrow-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--hymo-red);
  letter-spacing: -.005em;
  max-width: 0;
  opacity: 0;
  transition: max-width .42s var(--hymo-ease), opacity .25s ease, margin .42s var(--hymo-ease);
}

.step-view-v3 .back-arrow:hover {
  width: 220px;
  border-color: var(--hymo-border-strong);
  color: var(--hymo-red);
  background: var(--hymo-red-soft);
  box-shadow: none;
}

.step-view-v3 .back-arrow:hover .back-arrow-label {
  max-width: 180px;
  opacity: 1;
  margin: 0 12px 0 10px;
}

.step-view-v3 .now-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: var(--hymo-red);
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: none;
}

.step-view-v3 .now-pill .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: 1.6s ease-in-out infinite hymo-pulse;
}

.step-view-v3 .now-pill--done svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.step-view-v3 .proj-mini-card {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #ffffffc7 0%, #ffffff8c 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid #ffffffbf;
  border-radius: 18px;
  box-shadow: inset 0 1px #ffffffe6, 0 1px 2px #0f0c090a, 0 18px 36px -16px #0f0c091a;
  overflow: hidden;
  min-width: 0;
}

.step-view-v3 .proj-mini-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 20px;
  border-right: 1px solid #0f0c0912;
}

.step-view-v3 .proj-mini-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.step-view-v3 .proj-mini-eyebrow:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--hymo-red);
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
}

.step-view-v3 .proj-mini-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--hymo-fg);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.step-view-v3 .proj-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-width: 0;
}

.step-view-v3 .proj-mini-stat {
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
}

.step-view-v3 .proj-mini-stat + .proj-mini-stat:before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(#0000 0%, #0f0c0914 50%, #0000 100%);
}

.step-view-v3 .proj-mini-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.step-view-v3 .proj-mini-stat-label svg {
  width: 11px;
  height: 11px;
}

.step-view-v3 .proj-mini-stat-value {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--hymo-fg);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-view-v3 .proj-mini-stat.accent .proj-mini-stat-label, .step-view-v3 .proj-mini-stat.accent .proj-mini-stat-value {
  color: var(--hymo-red);
}

@media (width <= 900px) {
  .step-view-v3 .proj-mini-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
  }

  .step-view-v3 .proj-mini-info {
    padding-right: 0;
    border-right: none;
    padding-bottom: 12px;
    border-bottom: 1px solid #0f0c0912;
  }

  .step-view-v3 .proj-mini-name {
    max-width: 100%;
    white-space: normal;
  }
}

@media (width <= 560px) {
  .step-view-v3 .proj-mini-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .step-view-v3 .proj-mini-stat {
    padding: 8px 0;
  }

  .step-view-v3 .proj-mini-stat + .proj-mini-stat:before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, #0000 0%, #0f0c0914 50%, #0000 100%);
  }
}

.step-view-v3 .focus-context-line {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  margin-bottom: 14px;
  letter-spacing: -.005em;
}

.step-view-v3 .focus-context-line strong {
  color: var(--hymo-fg-2);
  font-weight: 600;
}

.step-view-v3 .focus-step-marker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 4px 0;
}

.step-view-v3 .focus-step-marker__num {
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--hymo-red);
  font-variant-numeric: tabular-nums;
  background: var(--hymo-red);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 18px;
  border-right: 2px solid var(--hymo-red-line);
  flex-shrink: 0;
}

.step-view-v3 .focus-step-marker__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.step-view-v3 .focus-step-marker__lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hymo-red);
}

.step-view-v3 .focus-step-marker__progress {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg-2);
  letter-spacing: -.005em;
}

.step-view-v3 .focus-step-marker__progress strong {
  font-weight: 700;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.step-view-v3 .focus-step-marker__phase {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

@media (width <= 600px) {
  .step-view-v3 .focus-step-marker {
    gap: 14px;
    margin-bottom: 14px;
  }

  .step-view-v3 .focus-step-marker__num {
    font-size: 46px;
    padding-right: 14px;
  }
}

.step-view-v3 .focus-title {
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--hymo-fg);
  margin: 0 0 18px;
}

@media (width <= 1023px) {
  .step-view-v3 .focus-title {
    font-size: 34px;
  }
}

@media (width <= 767px) {
  .step-view-v3 .focus-title {
    font-size: 27px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
}

.step-view-v3 .focus-lead {
  font-size: 16px;
  font-weight: 400;
  color: var(--hymo-fg-2);
  line-height: 1.65;
  letter-spacing: -.003em;
  margin: 0 0 36px;
  padding: 20px 24px;
  background: #ffffff80;
  border: 1px solid #0f0c090f;
  border-radius: 14px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px #ffffffb3;
}

@media (width <= 767px) {
  .step-view-v3 .focus-lead {
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 28px;
    padding: 16px 18px;
  }
}

.step-view-v3 .checklist {
  background: linear-gradient(135deg, #ffffffc7 0%, #ffffff8c 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid #ffffffbf;
  border-radius: 20px;
  padding: 8px;
  box-shadow: inset 0 1px #ffffffe6, 0 1px 2px #0f0c090a, 0 22px 48px -16px #0f0c091f;
  margin: 0 0 36px;
}

.step-view-v3 .check-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  gap: 12px;
}

.step-view-v3 .check-title-tx {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.step-view-v3 .check-key-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
  white-space: nowrap;
}

.step-view-v3 .check-key-badge svg {
  width: 11px;
  height: 11px;
}

.step-view-v3 .check-progress {
  font-size: 12px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.step-view-v3 .check-progress strong {
  color: var(--hymo-fg);
  font-weight: 600;
}

.step-view-v3 .done-group {
  margin: 6px 6px 10px;
  border-radius: 14px;
  background: var(--hymo-red-soft);
  border: 1.5px solid var(--hymo-red-line);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: none;
  overflow: hidden;
}

.step-view-v3 .done-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .done-group-head:hover {
  background: #ffffff73;
}

.step-view-v3 .check-mini {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--hymo-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: none;
}

.step-view-v3 .check-mini:after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg)translate(.5px, -1px);
}

.step-view-v3 .done-group-head .label {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--hymo-red);
  letter-spacing: -.005em;
  line-height: 1.3;
}

.step-view-v3 .done-group-head .label strong {
  font-weight: 700;
}

.step-view-v3 .done-group-head .toggle {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--hymo-red);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.step-view-v3 .done-group-head .toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .done-group.open .done-group-head .toggle svg {
  transform: rotate(180deg);
}

.step-view-v3 .done-group-body {
  padding: 4px 4px 6px;
  background: #ffffff59;
  border-top: 1px solid var(--hymo-red-line);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.step-view-v3 .check-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
}

.step-view-v3 .check-wrap + .check-wrap {
  border-top: 1px solid var(--hymo-surface-2, #f2f0ec);
}

.step-view-v3 .done-group-body .check-wrap + .check-wrap {
  border-top-color: #fff9;
}

.step-view-v3 .check-wrap.current {
  margin: 4px 6px 18px;
  border-radius: 14px;
  background: var(--hymo-glass-2);
  border: 1.5px solid #fff9;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: none;
  border-top: none !important;
}

.step-view-v3 .check-wrap.current + .check-wrap {
  border-top: none;
}

.step-view-v3 .check-wrap.current .check-label {
  color: var(--hymo-red);
  font-weight: 600;
}

.step-view-v3 .check-item-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 14px;
  padding: 4px;
  border-radius: 12px;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .check-item-row:hover {
  background: var(--hymo-surface-2, #f2f0ec);
}

.step-view-v3 .check-wrap.current .check-item-row:hover {
  background: #f6cbd459;
}

.step-view-v3 .check-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--hymo-surface);
  border: 1.5px solid var(--hymo-border-strong, #bfb9ae);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
  padding: 0;
  margin-left: 10px;
}

.step-view-v3 .check-box:hover {
  border-color: var(--hymo-fg-3);
}

.step-view-v3 .check-box.done {
  background: var(--hymo-red);
  border-color: var(--hymo-red);
  position: relative;
}

.step-view-v3 .check-box.done:after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg)translate(1px, -1px);
}

.step-view-v3 .check-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;
}

.step-view-v3 .check-label {
  font-size: 15px;
  color: var(--hymo-fg);
  letter-spacing: -.005em;
  font-weight: 500;
  line-height: 1.4;
  min-width: 0;
}

.step-view-v3 .check-label--done {
  color: var(--hymo-fg-3);
  text-decoration: line-through;
  text-decoration-color: var(--hymo-fg-4);
}

.step-view-v3 .check-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.step-view-v3 .check-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hymo-surface-2, #f2f0ec);
  color: var(--hymo-fg-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid var(--hymo-border);
  flex-shrink: 0;
  font-family: inherit;
}

.step-view-v3 .check-tag svg {
  width: 12px;
  height: 12px;
  color: var(--hymo-fg-3);
}

.step-view-v3 .check-tag.linked {
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
  border-color: #0000;
}

.step-view-v3 .check-tag.linked svg {
  color: var(--hymo-red);
}

.step-view-v3 .check-tag.amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.step-view-v3 .check-chev {
  color: var(--hymo-fg-4);
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
  flex-shrink: 0;
}

.step-view-v3 .check-wrap.open .check-chev {
  transform: rotate(180deg);
  color: var(--hymo-red);
}

.step-view-v3 .check-detail {
  padding: 10px 18px 22px 50px;
  margin-top: 2px;
  animation: hymo-detail-in .28s var(--hymo-ease) both;
}

@keyframes hymo-detail-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

@media (width <= 600px) {
  .step-view-v3 .check-detail {
    padding: 8px 12px 18px;
  }
}

.step-view-v3 .check-detail .detail-form {
  margin: 4px 0 26px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.step-view-v3 .detail-prose {
  font-size: 14.5px;
  color: var(--hymo-fg-2);
  line-height: 1.7;
  max-width: 720px;
}

.step-view-v3 .detail-prose p {
  margin-bottom: 14px;
}

.step-view-v3 .detail-prose p:last-child {
  margin-bottom: 0;
}

.step-view-v3 .detail-prose strong {
  color: var(--hymo-fg);
  font-weight: 600;
}

.step-view-v3 .detail-prose ul, .step-view-v3 .detail-prose ol {
  margin: 8px 0 14px;
  padding-left: 20px;
}

.step-view-v3 .detail-prose li {
  margin: 4px 0;
}

.step-view-v3 .detail-prose code {
  background: var(--hymo-surface-2, #f2f0ec);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .92em;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}

.step-view-v3 .detail-prose a {
  color: var(--hymo-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.step-view-v3 .detail-prose h1, .step-view-v3 .detail-prose h2, .step-view-v3 .detail-prose h3, .step-view-v3 .detail-prose h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hymo-red);
  line-height: 1.3;
  margin: 26px 0 16px;
}

.step-view-v3 .detail-prose h1:first-child, .step-view-v3 .detail-prose h2:first-child, .step-view-v3 .detail-prose h3:first-child, .step-view-v3 .detail-prose h4:first-child {
  margin-top: 2px;
}

.step-view-v3 .detail-prose h1:before, .step-view-v3 .detail-prose h2:before, .step-view-v3 .detail-prose h3:before, .step-view-v3 .detail-prose h4:before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 2px;
  background: var(--hymo-red);
  border-radius: 2px;
}

.step-view-v3 .detail-prose h2 + p, .step-view-v3 .detail-prose h3 + p, .step-view-v3 .detail-prose h1 + p, .step-view-v3 .detail-prose h4 + p {
  font-size: 14.5px;
}

.step-view-v3 .detail-prose h2 + p:first-line, .step-view-v3 .detail-prose h3 + p:first-line {
  color: var(--hymo-fg);
}

.step-view-v3 .detail-tips {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--hymo-red-faint);
  border: 1px solid var(--hymo-red-line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
}

.step-view-v3 .detail-tips .ti {
  color: var(--hymo-red);
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

.step-view-v3 .detail-tips-body {
  font-size: 13.5px;
  color: var(--hymo-fg-2);
  line-height: 1.55;
  min-width: 0;
  flex: 1;
}

.step-view-v3 .detail-tips-body > strong {
  display: block;
  color: var(--hymo-fg);
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.step-view-v3 .detail-tips-body p {
  margin-bottom: 8px;
}

.step-view-v3 .detail-tips-body p:last-child {
  margin-bottom: 0;
}

.step-view-v3 .detail-tips-body ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.step-view-v3 .detail-tips-body li {
  margin: 4px 0;
}

.step-view-v3 .detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.step-view-v3 .detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--hymo-border);
  background: var(--hymo-surface);
  color: var(--hymo-fg);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .detail-btn:hover {
  background: var(--hymo-red-faint);
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
}

.step-view-v3 .detail-btn svg {
  width: 13px;
  height: 13px;
  color: var(--hymo-fg-3);
}

.step-view-v3 .detail-btn:hover svg {
  color: var(--hymo-red);
}

.step-view-v3 .detail-btn-meta {
  color: var(--hymo-fg-3);
  font-weight: 400;
}

.step-view-v3 .detail-btn:hover .detail-btn-meta {
  color: var(--hymo-red);
}

.step-view-v3 .step-nav {
  display: grid;
  grid-template-columns: 220px auto 220px;
  align-items: center;
  gap: 18px;
  margin: 40px 0;
  width: 100%;
}

.step-view-v3 .step-nav > .new-project-btn-shell {
  justify-self: center;
}

.step-view-v3 .step-nav-arrow--prev {
  justify-self: start;
}

.step-view-v3 .step-nav-arrow--next {
  justify-self: end;
}

.step-view-v3 .step-nav-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  padding: 0;
  color: var(--hymo-red);
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all .42s cubic-bezier(.2, .8, .2, 1);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: none;
  flex-shrink: 0;
  isolation: isolate;
}

.step-view-v3 .step-nav-arrow svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.step-view-v3 .step-nav-arrow .step-nav-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--hymo-red);
  letter-spacing: -.005em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .42s var(--hymo-ease), opacity .25s ease, margin .42s var(--hymo-ease);
}

.step-view-v3 .step-nav-arrow:hover:not(:disabled) {
  width: 215px;
  border-color: var(--hymo-border-strong);
  color: var(--hymo-red);
  background: var(--hymo-red-soft);
  box-shadow: none;
}

.step-view-v3 .step-nav-arrow--prev:hover:not(:disabled) .step-nav-label {
  max-width: 170px;
  opacity: 1;
  margin-left: 12px;
}

.step-view-v3 .step-nav-arrow--next:hover:not(:disabled) .step-nav-label {
  max-width: 170px;
  opacity: 1;
  margin-right: 12px;
}

.step-view-v3 .step-nav-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

@media (width <= 700px) {
  .step-view-v3 .step-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "main main"
                         "prev next";
    gap: 14px;
  }

  .step-view-v3 .step-nav > .new-project-btn-shell {
    grid-area: main;
    width: 100%;
  }

  .step-view-v3 .step-nav > .new-project-btn-shell > .new-project-btn--compact {
    width: 100%;
    justify-content: center;
  }

  .step-view-v3 .step-nav-arrow--prev {
    grid-area: prev;
    justify-self: start;
  }

  .step-view-v3 .step-nav-arrow--next {
    grid-area: next;
    justify-self: end;
  }
}

.step-view-v3 .new-project-btn-shell {
  display: inline-block;
  position: relative;
}

.step-view-v3 .new-project-btn-shell:before {
  content: "";
  position: absolute;
  inset: -24px -42px;
  background: none;
  filter: blur(22px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.step-view-v3 .new-project-btn {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  color: var(--hymo-red);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
  transition: all .32s var(--hymo-ease);
}

.step-view-v3 .new-project-btn:hover:not(:disabled) {
  background: var(--hymo-red-soft);
  border-color: var(--hymo-border-strong);
  box-shadow: none;
}

.step-view-v3 .new-project-btn svg {
  width: 16px;
  height: 16px;
  color: var(--hymo-red);
  transition: transform .32s var(--hymo-ease);
}

.step-view-v3 .new-project-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

@media (width <= 767px) {
  .step-view-v3 .new-project-btn {
    width: 100%;
    justify-content: center;
    padding: 18px 26px;
  }

  .step-view-v3 .new-project-btn-shell {
    width: 100%;
  }
}

.step-view-v3 .new-project-btn-shell--compact:before {
  inset: -14px -26px;
  filter: blur(16px);
}

.step-view-v3 .new-project-btn--compact {
  padding: 10px 22px;
  font-size: 13px;
  border-radius: 12px;
  gap: 8px;
}

.step-view-v3 .new-project-btn--compact svg {
  width: 14px;
  height: 14px;
}

.step-view-v3 .e-tabs-wrap {
  margin-top: 40px;
}

.step-view-v3 .e-tabs-heading {
  margin-bottom: 18px;
}

.step-view-v3 .e-tabs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-red);
  margin-bottom: 10px;
}

.step-view-v3 .e-tabs-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hymo-red);
}

.step-view-v3 .e-tabs-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--hymo-fg);
  margin: 0;
}

@media (width <= 767px) {
  .step-view-v3 .e-tabs-title {
    font-size: 22px;
  }
}

.step-view-v3 .e-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  background: #ffffffb8;
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid #ffffffd9;
  border-radius: 14px;
  box-shadow: inset 0 1px #fff, 0 1px 2px #0f0c090f, 0 12px 32px -10px #0f0c092e;
  overflow-x: auto;
  scrollbar-width: none;
}

.step-view-v3 .e-tabs::-webkit-scrollbar {
  display: none;
}

.step-view-v3 .e-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  color: var(--hymo-fg-3);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.008em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--hymo-t) var(--hymo-ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.step-view-v3 .e-tab svg {
  width: 15px;
  height: 15px;
  color: var(--hymo-fg-4);
  transition: color var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .e-tab:hover {
  color: var(--hymo-fg);
  background: #fff9;
}

.step-view-v3 .e-tab:hover svg {
  color: var(--hymo-fg-2);
}

.step-view-v3 .e-tab.active {
  color: var(--hymo-red);
  font-weight: 600;
  background: var(--hymo-glass-2);
  border: 1px solid #fff9;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: none;
}

.step-view-v3 .e-tab.active svg {
  color: var(--hymo-red);
}

.step-view-v3 .e-tab-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

@media (width <= 767px) {
  .step-view-v3 .e-tab {
    font-size: 13px;
    padding: 9px 14px;
  }
}

.step-view-v3 .e-panel {
  display: none;
}

.step-view-v3 .e-panel.active {
  display: block;
  animation: panel-in .35s var(--hymo-ease) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.step-view-v3 .e-section {
  margin: 32px 0 56px;
}

.step-view-v3 .e-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hymo-red);
  margin-bottom: 10px;
}

.step-view-v3 .e-section-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hymo-red);
}

.step-view-v3 .e-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  margin: 0 0 8px;
}

.step-view-v3 .e-section-lead {
  font-size: 14px;
  color: var(--hymo-fg-3);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 640px;
}

.step-view-v3 .res-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-view-v3 .res-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--hymo-glass-strong);
  border: 1px solid var(--hymo-glass-border-light);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--hymo-shadow-glass);
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t) var(--hymo-ease);
  cursor: pointer;
}

.step-view-v3 .res-card:hover {
  border-color: var(--hymo-red-line);
  box-shadow: none;
}

.step-view-v3 .res-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-view-v3 .res-mark svg {
  width: 18px;
  height: 18px;
}

.step-view-v3 .res-info {
  flex: 1;
  min-width: 0;
}

.step-view-v3 .res-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  line-height: 1.3;
}

.step-view-v3 .res-desc {
  font-size: 12.5px;
  color: var(--hymo-fg-3);
  margin-top: 4px;
}

.step-view-v3 .res-action {
  color: var(--hymo-fg-4);
  transform: translateX(-4px);
  opacity: .6;
  transition: all var(--hymo-t) var(--hymo-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-view-v3 .res-card:hover .res-action {
  color: var(--hymo-red);
  transform: translateX(3px);
  opacity: 1;
}

.step-view-v3 .res-action svg {
  width: 16px;
  height: 16px;
}

.step-view-v3 .sim-feature {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-red-line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all var(--hymo-t) var(--hymo-ease);
  cursor: pointer;
  box-shadow: none;
}

.step-view-v3 .sim-feature:hover {
  box-shadow: none;
}

.step-view-v3 .sim-mark {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--hymo-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-view-v3 .sim-mark svg {
  width: 22px;
  height: 22px;
}

.step-view-v3 .sim-info {
  min-width: 0;
}

.step-view-v3 .sim-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hymo-red);
}

.step-view-v3 .sim-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--hymo-fg);
  margin: 4px 0 2px;
}

.step-view-v3 .sim-meta {
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.step-view-v3 .sim-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--hymo-red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step-view-v3 .notes-block {
  background: var(--hymo-glass-strong);
  border: 1px solid var(--hymo-glass-border-light);
  border-radius: 16px;
  padding: 22px 24px;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--hymo-shadow-glass);
}

.step-view-v3 .notes-prose {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hymo-fg-2);
}

.step-view-v3 .notes-prose p {
  margin-bottom: 10px;
}

.step-view-v3 .notes-prose p:last-child {
  margin-bottom: 0;
}

.step-view-v3 .notes-prose strong {
  color: var(--hymo-fg);
  font-weight: 600;
}

.step-view-v3 .notes-empty {
  font-style: italic;
  color: var(--hymo-fg-4);
}

.step-view-v3 .notes-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #0f0c090f;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.step-view-v3 .notes-meta button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .notes-meta button:hover {
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
}

.step-view-v3 .notes-meta button svg {
  width: 13px;
  height: 13px;
}

.step-view-v3 .notes-editor {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid var(--hymo-border);
  border-radius: 12px;
  background: var(--hymo-surface);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hymo-fg);
  outline: none;
  resize: vertical;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .notes-editor:focus {
  border-color: var(--hymo-red);
  box-shadow: none;
}

.step-view-v3 .notes-editor-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.step-view-v3 .doc-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-view-v3 .doc-line {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  border-radius: 12px;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .doc-line:hover {
  border-color: var(--hymo-red-line);
}

.step-view-v3 .doc-line-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--hymo-red-soft);
  color: var(--hymo-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-view-v3 .doc-line-mark svg {
  width: 16px;
  height: 16px;
}

.step-view-v3 .doc-line-info {
  min-width: 0;
}

.step-view-v3 .doc-line-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-view-v3 .doc-line-meta {
  font-size: 12px;
  color: var(--hymo-fg-3);
  font-variant-numeric: tabular-nums;
}

.step-view-v3 .doc-line-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.step-view-v3 .doc-line-actions button, .step-view-v3 .doc-line-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--hymo-border);
  border-radius: 8px;
  color: var(--hymo-fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .doc-line-actions button:hover, .step-view-v3 .doc-line-actions a:hover {
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
}

.step-view-v3 .doc-line-actions svg {
  width: 13px;
  height: 13px;
}

.step-view-v3 .doc-line-actions__delete {
  padding: 6px 8px !important;
  color: var(--hymo-fg-4) !important;
}

.step-view-v3 .doc-line-actions__delete:hover {
  border-color: #e4676799 !important;
  color: #d02525 !important;
  background: #fceeee80 !important;
}

.step-view-v3 .doc-line-actions__delete svg {
  width: 14px;
  height: 14px;
}

.step-view-v3 .doc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1.5px dashed var(--hymo-border-strong);
  border-radius: 12px;
  background: none;
  color: var(--hymo-fg-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .doc-add:hover {
  border-color: var(--hymo-red);
  border-style: solid;
  color: var(--hymo-red);
  background: var(--hymo-red-faint);
}

.step-view-v3 .doc-add svg {
  width: 14px;
  height: 14px;
}

.step-view-v3 .loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 16px;
}

.step-view-v3 .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--hymo-red-line);
  border-top-color: var(--hymo-red);
  border-radius: 50%;
  animation: .8s linear infinite hymo-spin;
}

.step-view-v3 .empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--hymo-fg-3);
  font-size: 13.5px;
}

.step-view-v3 .check-show-more {
  margin: 6px 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 12px);
  padding: 12px 14px;
  background: #ffffff8c;
  border: 1px dashed var(--hymo-border-strong, #bfb9ae);
  border-radius: 12px;
  color: var(--hymo-fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .check-show-more:hover {
  border-style: solid;
  border-color: var(--hymo-red-line);
  background: var(--hymo-red-faint);
  color: var(--hymo-red);
}

.step-view-v3 .check-show-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .check-show-more.open svg {
  transform: rotate(180deg);
}

.step-view-v3 .notes-editor-actions {
  align-items: center;
}

.step-view-v3 .notes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.step-view-v3 .notes-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.step-view-v3 .notes-btn--ghost {
  background: #fff9;
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-2);
}

.step-view-v3 .notes-btn--ghost:hover:not(:disabled) {
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
}

.step-view-v3 .struct-form {
  position: relative;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--hymo-red-soft);
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

.step-view-v3 .struct-form:before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: none;
  pointer-events: none;
}

.step-view-v3 .struct-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.step-view-v3 .struct-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: help;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-red);
  line-height: 1.2;
}

.step-view-v3 .struct-form__eyebrow > svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.step-view-v3 .struct-form__help {
  color: var(--hymo-fg-4);
  transition: color .2s var(--hymo-ease);
  width: 13px !important;
  height: 13px !important;
}

.step-view-v3 .struct-form__eyebrow:hover .struct-form__help {
  color: var(--hymo-red);
}

.step-view-v3 .struct-form__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  background: #ffffff8c;
  border: 1px solid #ffffffb3;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

.step-view-v3 .struct-form__status--saving {
  color: var(--hymo-red);
}

.step-view-v3 .struct-form__status--saved {
  color: #279b6b;
  background: #ddf8ed8c;
  border-color: #b3e6d099;
}

.step-view-v3 .struct-form__status--error {
  color: #d02525;
  background: #fceded8c;
  border-color: #f2c0c099;
}

.step-view-v3 .struct-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-view-v3 .struct-form__group-title {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hymo-fg);
}

.step-view-v3 .struct-form__group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (width >= 768px) {
  .step-view-v3 .struct-form__group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.step-view-v3 .struct-form__label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hymo-fg);
}

.step-view-v3 .struct-form__unit {
  margin-left: 4px;
  color: var(--hymo-fg-3);
  font-weight: 400;
}

.step-view-v3 .struct-form__required {
  margin-left: 4px;
  color: var(--hymo-red);
}

.step-view-v3 .struct-form__hint {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--hymo-fg-3);
  line-height: 1.45;
}

.step-view-v3 .struct-form__sync {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--hymo-red);
  background: #fbe9ed8c;
  border: 1px solid #f2c0ca66;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.step-view-v3 .struct-form__error {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #edabab80;
  background: #fceeee8c;
  color: #c32222;
  font-size: 12.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.step-view-v3 .struct-form .struct-form__input, .step-view-v3 .struct-form .struct-form__select-trigger {
  width: 100%;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--hymo-fg);
  border-radius: 12px;
  outline: none;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1.5px #ffffffd9, inset 0 -1px #ffffff40, 0 1px 2px #0f0c090a, 0 4px 12px -4px #0f0c0914;
  transition: all .2s var(--hymo-ease);
  height: 44px !important;
  background: linear-gradient(#ffffffb3 0%, #fff6 100%) !important;
  border: 1.5px solid #ffffffbf !important;
}

.step-view-v3 .struct-form .struct-form__input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.step-view-v3 .struct-form .struct-form__input::placeholder, .step-view-v3 .struct-form .struct-form__select-trigger[data-placeholder] {
  color: var(--hymo-fg-4);
}

.step-view-v3 .struct-form .struct-form__input:hover, .step-view-v3 .struct-form .struct-form__select-trigger:hover {
  box-shadow: none;
  border-color: #ffffffe6 !important;
}

.step-view-v3 .struct-form .struct-form__input:focus-visible, .step-view-v3 .struct-form .struct-form__select-trigger:focus, .step-view-v3 .struct-form .struct-form__select-trigger[data-state="open"] {
  box-shadow: none;
  border-color: #e64d6b80 !important;
}

.struct-form__select-content {
  overflow: hidden;
  background: var(--hymo-red-soft) !important;
  border: 1.5px solid #ffffffbf !important;
  border-radius: 14px !important;
  padding: 6px !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  box-shadow: inset 0 1.5px #ffffffd9, inset 0 -1px #ffffff38, 0 1px 2px #0f0c090f, 0 20px 48px -14px #0f0c0938 !important;
}

.struct-form__select-item {
  position: relative;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  outline: none;
  transition: all .16s var(--hymo-ease);
  display: flex !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: var(--hymo-fg) !important;
}

.struct-form__select-item[data-highlighted], .struct-form__select-item[data-state="checked"] {
  box-shadow: inset 0 1px #fffc;
  background: var(--hymo-red-soft) !important;
  color: var(--hymo-red) !important;
}

.struct-form__tooltip {
  font-weight: 500;
  letter-spacing: -.005em;
  max-width: 320px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--hymo-red-soft) !important;
  border: 1.5px solid #ffffffb3 !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  box-shadow: none !important;
  color: var(--hymo-fg) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.step-view-v3 .focus-title {
  transition: color .32s var(--hymo-ease), text-decoration-color .32s var(--hymo-ease);
}

.step-view-v3 .focus-title.done {
  color: var(--hymo-fg-3);
  text-decoration: line-through;
  text-decoration-color: #0f0c092e;
  text-decoration-thickness: 2px;
}

.step-view-v3 .step-done-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 18px 24px;
  margin: 0 0 32px;
  border-radius: 16px;
  background: var(--hymo-red-soft);
  border: 1.5px solid var(--hymo-red-line);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: none;
  animation: .42s cubic-bezier(.2, .8, .2, 1) both step-done-banner-in;
}

@keyframes step-done-banner-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

.step-view-v3 .step-done-banner__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: auto;
}

.step-view-v3 .step-done-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hymo-red);
}

.step-view-v3 .step-done-banner__dash {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--hymo-red);
  border-radius: 2px;
}

.step-view-v3 .step-done-banner__lead {
  font-size: 14px;
  color: var(--hymo-fg-2);
  line-height: 1.45;
  letter-spacing: -.005em;
}

@media (width <= 600px) {
  .step-view-v3 .step-done-banner {
    padding: 16px 18px;
  }

  .step-view-v3 .step-done-banner .new-project-btn-shell {
    width: 100%;
  }

  .step-view-v3 .step-done-banner .new-project-btn--compact {
    width: 100%;
    justify-content: center;
  }
}

.step-view-v3 .step-allactions-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 18px 24px;
  margin: 12px 0 24px;
  border-radius: 16px;
  background: var(--hymo-red-soft);
  border: 1.5px dashed var(--hymo-red-line);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--hymo-fg-2);
  letter-spacing: -.005em;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  animation: step-callout-in .32s var(--hymo-ease) both;
}

@keyframes step-callout-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

.step-view-v3 .step-allactions-callout strong {
  color: var(--hymo-red);
  font-weight: 700;
}

.step-educational {
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--card);
}

.step-educational__summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.step-educational__summary:hover {
  color: var(--foreground);
}

.step-educational__body {
  padding: 0 1.25rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.65;
}

.step-educational__body h2 {
  margin: 1.25rem 0 .5rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.step-educational__body h3 {
  margin: 1rem 0 .375rem;
  font-size: .9375rem;
  font-weight: 600;
}

.step-educational__body p {
  margin: .5rem 0;
}

.step-educational__body ul, .step-educational__body ol {
  margin: .5rem 0 .5rem 1.25rem;
}

.step-educational__body table {
  margin: .75rem 0;
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.step-educational__body th, .step-educational__body td {
  border: 1px solid var(--border);
  padding: .375rem .625rem;
  text-align: left;
}

.step-view-v3 .res-card--hymo {
  border-color: var(--hymo-red-line);
  background: linear-gradient(180deg, #ffffffb8 0%, #fff0 55%), var(--hymo-red-faint);
  width: 100%;
  text-align: left;
  font: inherit;
}

.step-view-v3 .res-mark--hymo {
  background: var(--hymo-red);
  color: #fff;
  box-shadow: none;
}

.step-view-v3 .res-retrouver {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hymo-red-2);
}

.step-view-v3 .res-card--hymo:focus-visible {
  outline: 2px solid var(--hymo-red);
  outline-offset: 2px;
}


/* [project]/src/styles/features/markdown-tables.css [app-client] (css, ) */
.md-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .75rem 0;
}

.md-table-scroll > table {
  margin: 0;
  width: auto;
  min-width: 100%;
}

@media (width <= 767px) {
  .md-table-scroll > table {
    min-width: -moz-max-content;
    min-width: max-content;
  }

  .md-table-scroll:after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 24px;
    height: 100%;
    margin-left: -24px;
    background: linear-gradient(90deg, #fff0, #ffffffe6);
    pointer-events: none;
  }
}


/* [project]/src/styles/features/guided-tour.css [app-client] (css, ) */
.guided-tour__scrim {
  position: fixed;
  inset: 0;
  background: #0f0c097a;
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
}

.guided-tour__ring {
  position: fixed;
  pointer-events: none;
  box-shadow: 0 0 0 2px hsl(var(--blue, var(--primary))), 0 0 0 9px hsl(var(--blue, var(--primary)) / .18);
}

.guided-tour__card {
  position: fixed;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  background: hsl(var(--card) / .97);
  backdrop-filter: blur(var(--glass-blur)) saturate(175%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(175%);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 24px 56px -18px #0f0c0952;
  padding: 20px;
}

.guided-tour__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: hsl(var(--muted));
}

.guided-tour__progress-fill {
  display: block;
  height: 100%;
  background: hsl(var(--blue, var(--primary)));
}

.guided-tour__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.guided-tour__count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(var(--blue, var(--primary)));
}

.guided-tour__context:after {
  content: " · ";
  color: hsl(var(--muted-foreground));
}

.guided-tour__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px 0;
  border-radius: var(--radius-sm, 8px);
  color: hsl(var(--muted-foreground));
  transition: background-color var(--duration-fast, .15s), color var(--duration-fast, .15s);
}

.guided-tour__close:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.guided-tour__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}

.guided-tour__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  margin-bottom: 18px;
}

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

.guided-tour__skip {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: color var(--duration-fast, .15s);
}

.guided-tour__skip:hover {
  color: hsl(var(--foreground));
  text-decoration: underline;
}

.guided-tour__card .guided-tour__next {
  background: hsl(var(--blue, var(--primary)));
  color: #fff;
}

.guided-tour__card .guided-tour__next:hover {
  background: hsl(var(--blue-2, var(--primary)));
}

@media (prefers-reduced-motion: reduce) {
  .guided-tour__scrim, .guided-tour__ring, .guided-tour__card {
    transition: none !important;
  }
}


/* [project]/src/styles/pages/calendar.css [app-client] (css, ) */
:root {
  --cal-color: var(--hymo-fg);
  --cal-color-light: color-mix(in srgb, var(--cal-color) 62%, white);
  --cal-color-dark: color-mix(in srgb, var(--cal-color) 78%, black);
  --cal-soft: color-mix(in srgb, var(--cal-color) 8%, white);
  --cal-faint: color-mix(in srgb, var(--cal-color) 4%, white);
  --cal-line: color-mix(in srgb, var(--cal-color) 14%, white);
  --cal-glow: color-mix(in srgb, var(--cal-color) 14%, transparent);
  --cal-halo: color-mix(in srgb, var(--cal-color) 22%, transparent);
  --cal-grad: var(--cal-color);
  --cal-grad-bar: var(--cal-color);
  --cal-glass-bg: linear-gradient(180deg, #ffffffb3 0%, #fff0 45%), linear-gradient(135deg, #fff6 0%, #fff0 50%, #ffffff38 100%), #ffffff8c;
  --cal-glass-border: 1.5px solid #ffffffb3;
  --cal-glass-shadow: inset 0 1.5px 0 #ffffffe6, inset 0 -1px 0 #ffffff40, inset 1px 0 0 #ffffff59, inset -1px 0 0 #ffffff59, 0 1px 2px #0f0c090d, 0 14px 36px -10px #0f0c0924, 0 32px 64px -28px #0f0c0929;
  --cal-field-bg: #ffffff42;
  --cal-field-bg-hover: #ffffff6b;
  --cal-field-bg-focus: #ffffff94;
  --cal-field-border: #0f0c091a;
  --cal-field-blur: blur(14px) saturate(165%);
  --cal-field-shadow: inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #ffffff2e, 0 1px 2px #0f0c090a;
  --cal-popover-radius: var(--radius-lg);
  --cal-glass-pop-bg: linear-gradient(180deg, #ffffffeb 0%, #ffffffc7 100%);
  --cal-glass-pop-shadow: inset 0 1px 0 #ffffffd9, 0 24px 64px -16px #0f0c092e, 0 4px 12px -2px #0f0c090f;
}

.cal-select, .cal-select-content {
  --set-color: var(--cal-color);
  --set-glow: var(--cal-glow);
  --set-faint: var(--cal-faint);
}

.cal-select {
  --set-field-bg: var(--cal-field-bg);
  --set-field-bg-hover: var(--cal-field-bg-hover);
}

.cal-page-bg :focus-visible, .cal-select-content :focus-visible, .month-picker :focus-visible {
  outline-color: var(--cal-color);
}

[data-radix-popper-content-wrapper]:has(.cal-select-content) {
  z-index: 70 !important;
}

.cal-select-content.cal-select-content {
  z-index: 70;
  max-height: min(280px, var(--radix-select-content-available-height));
  width: var(--radix-select-trigger-width);
  min-width: var(--radix-select-trigger-width);
  padding: 6px;
  border-radius: var(--cal-popover-radius);
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--cal-glass-pop-shadow);
}

.cal-select-content [data-radix-select-viewport] {
  height: auto;
  max-height: none;
}

.cal-select {
  height: 40px;
  border-radius: 11px;
  border-color: var(--cal-field-border);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  font-weight: 500;
}

.cal-select:hover {
  background: var(--cal-field-bg-hover);
}

.cal-select[data-state="open"] {
  background: var(--cal-field-bg-focus);
}

.cal-page-bg {
  --set-color: var(--cal-color);
  --set-color-light: var(--cal-color-light);
  --set-color-dark: var(--cal-color-dark);
  --set-soft: var(--cal-soft);
  --set-faint: var(--cal-faint);
  --set-line: var(--cal-line);
  --set-glow: var(--cal-glow);
  --set-halo: var(--cal-halo);
}

.cal-page-bg .set-datepicker__panel {
  left: 50%;
  transform: translateX(-50%);
  max-height: none;
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--cal-glass-pop-shadow);
}

.cal-page-bg .set-datepicker__field {
  border-color: var(--cal-field-border);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
}

.cal-page-bg .set-datepicker__field:hover {
  background: var(--cal-field-bg-hover);
}

.cal-page-bg .set-datepicker--open .set-datepicker__field, .cal-page-bg .set-datepicker__field:focus-within {
  background: var(--cal-field-bg-focus);
  box-shadow: none;
}

.cal-page-bg .set-datepicker__field svg {
  color: var(--hymo-fg-3);
}

.cal-page-bg .set-datepicker--open .set-datepicker__field svg {
  color: var(--cal-color);
}

.event-form-modal .set-datepicker--open, .quick-create-popover .set-datepicker--open {
  z-index: 5;
}

.cal-page-bg .btn-primary, .cal-page-bg .btn-primary:hover {
  background: var(--cal-color);
  color: #fff;
  border-color: #0000;
}

.cal-page-bg .btn-primary:hover {
  background: var(--cal-color-dark);
}

.glass-timepicker {
  position: relative;
  flex: 1;
  min-width: 0;
}

.glass-timepicker__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--cal-field-border);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--hymo-fg);
  cursor: pointer;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.glass-timepicker__field:hover {
  background: var(--cal-field-bg-hover);
}

.glass-timepicker__field:focus-visible, .glass-timepicker--open .glass-timepicker__field {
  outline: none;
  background: #fffffff5;
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.glass-timepicker--invalid .glass-timepicker__field {
  border-color: color-mix(in srgb, var(--cal-danger) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-danger) 12%, transparent);
}

.glass-timepicker__field svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--hymo-fg-3);
}

.glass-timepicker--open .glass-timepicker__field svg {
  color: var(--cal-color);
}

.glass-timepicker__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max(100%, 132px);
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: var(--cal-popover-radius);
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--cal-glass-pop-shadow);
  scrollbar-width: thin;
  scrollbar-color: #0f0c0938 transparent;
}

.glass-timepicker__panel::-webkit-scrollbar {
  width: 8px;
}

.glass-timepicker__panel::-webkit-scrollbar-track {
  background: none;
  margin-block: 6px;
}

.glass-timepicker__panel::-webkit-scrollbar-thumb {
  background: #0f0c0933;
  border: 2px solid #0000;
  background-clip: content-box;
  border-radius: 999px;
}

.glass-timepicker__slot {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
  font-family: inherit;
}

.glass-timepicker__slot:hover {
  background: var(--cal-soft);
  color: var(--cal-color);
}

.glass-timepicker__slot--selected, .glass-timepicker__slot--selected:hover {
  background: var(--cal-color);
  color: #fff;
  font-weight: 600;
}

.glass-timepicker__slot:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: -2px;
}

.event-form-modal .glass-timepicker--open {
  z-index: 5;
}

.cal-page-bg {
  position: relative;
  background: var(--hymo-bg);
}

.cal-page-bg:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}

.cal-page-bg > * {
  position: relative;
  z-index: 1;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.cal-layout {
  display: flex;
  gap: 24px;
}

.cal-main {
  flex: 1;
  min-width: 0;
}

.cal-page-bg .glass-card {
  position: relative;
  background: var(--cal-glass-bg);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: var(--cal-glass-border);
  border-radius: 22px;
  box-shadow: var(--cal-glass-shadow);
}

.cal-page-bg .glass-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  opacity: .55;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}

.ambient-glow.violet {
  background: color-mix(in srgb, var(--cal-color) 6%, transparent);
}

.ambient-glow.navy {
  background: color-mix(in srgb, var(--cal-color) 4%, transparent);
}

.glow-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: 10%;
}

.glow-2 {
  width: 350px;
  height: 350px;
  bottom: 5%;
  left: 5%;
}

.cal-search {
  position: relative;
  flex: 220px;
  min-width: 0;
  max-width: 320px;
}

.cal-header:has(.cal-search--open) {
  z-index: 30;
}

.cal-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--cal-field-border);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.cal-search__field:hover {
  background: var(--cal-field-bg-hover);
}

.cal-search:focus-within .cal-search__field {
  background: var(--cal-field-bg-focus);
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.cal-search__icon {
  flex-shrink: 0;
  color: var(--hymo-fg-4);
}

.cal-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 13.5px;
  color: var(--hymo-fg);
  font-family: inherit;
}

.cal-search__input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.cal-search__input::placeholder {
  color: var(--hymo-fg-4);
}

.cal-search__input:focus, .cal-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.cal-search__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--hymo-fg-4);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.cal-search__clear:hover {
  background: #0f0c090f;
  color: var(--hymo-fg);
}

.cal-search__clear:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 1px;
}

.cal-search__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 16px;
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--cal-glass-pop-shadow);
  scrollbar-width: thin;
  scrollbar-color: #0f0c0938 transparent;
}

.cal-search__panel::-webkit-scrollbar {
  width: 8px;
}

.cal-search__panel::-webkit-scrollbar-track {
  background: none;
  margin-block: 6px;
}

.cal-search__panel::-webkit-scrollbar-thumb {
  background: #0f0c0933;
  border: 2px solid #0000;
  background-clip: content-box;
  border-radius: 999px;
}

.cal-search__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 11px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease);
  font-family: inherit;
}

.cal-search__result:hover {
  background: var(--cal-soft);
}

.cal-search__result:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: -2px;
}

.cal-search__result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #ffffffb3;
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #fffc, 0 0 0 1px #0f0c090d;
}

.cal-search__result-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cal-search__result-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-search__result-meta {
  font-size: 11px;
  color: var(--hymo-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-search__empty, .cal-search__more {
  padding: 12px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
}

.cal-search__more {
  padding-top: 8px;
  border-top: 1px solid #0f0c090f;
  margin-top: 4px;
}

@media (width <= 767px) {
  .cal-search {
    max-width: none;
  }
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.cal-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hymo-border);
  border-radius: 10px;
  background: var(--hymo-glass-soft);
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
  transition: all var(--hymo-t) var(--hymo-ease);
  cursor: pointer;
}

.cal-nav-btn:hover {
  background: #ffffffd9;
  color: var(--cal-color);
}

.cal-today-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--hymo-border);
  border-radius: 10px;
  background: var(--hymo-glass-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.cal-today-btn:hover {
  background: #ffffffd9;
  color: var(--cal-color);
}

.cal-period-wrapper {
  position: relative;
}

.cal-current-period {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.cal-current-period:hover {
  color: var(--cal-color);
  background: color-mix(in srgb, var(--cal-color) 6%, transparent);
}

.month-picker {
  position: fixed;
  background: linear-gradient(#ffffffeb 0%, #fffc 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid #ffffffd9;
  border-radius: var(--cal-popover-radius);
  padding: 16px;
  box-shadow: inset 0 1px #ffffffe6, 0 24px 48px -12px #0f0c092e, 0 4px 12px -2px #0f0c090f;
  z-index: 9999;
  width: 260px;
}

.month-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #0f0c090f;
}

.month-picker__year {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
}

.month-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.month-picker__item {
  padding: 10px 6px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
  text-align: center;
}

.month-picker__item:hover {
  background: color-mix(in srgb, var(--cal-color) 8%, white);
  color: var(--cal-color);
}

.month-picker__item--active {
  background: var(--cal-color);
  color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cal-color) 25%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.month-picker__item--active:hover {
  background: var(--cal-color);
  color: #fff;
  opacity: .92;
}

.month-picker__item--today:not(.month-picker__item--active) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cal-color) 55%, transparent);
  color: var(--cal-color);
}

.tab-nav {
  display: flex;
  gap: 4px;
  background: var(--hymo-surface-2);
  border-radius: 12px;
  padding: 3px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-nav-item {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  border-radius: 10px;
  border: none;
  background: none;
  transition: all .2s;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-nav-item.active, .tab-nav-item[aria-selected="true"] {
  background: #ffffffeb;
  color: var(--hymo-fg);
  font-weight: 600;
  box-shadow: 0 1px 3px #00000014;
}

.tab-nav-item:hover:not(.active):not([aria-selected="true"]) {
  color: var(--hymo-fg);
}

.cal-page-bg .tab-nav {
  background: #ffffffb8;
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid #ffffffd9;
  border-radius: 14px;
  padding: 5px;
  box-shadow: inset 0 1px #fff, 0 1px 2px #0f0c090f, 0 12px 32px -10px #0f0c0924;
}

.cal-page-bg .tab-nav-item {
  color: var(--hymo-fg-3);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.cal-page-bg .tab-nav-item.active, .cal-page-bg .tab-nav-item[aria-selected="true"] {
  background: linear-gradient(180deg, #fffffff5 0%, color-mix(in srgb, var(--cal-color) 7%, white) 100%);
  color: var(--cal-color);
  box-shadow: inset 0 1.5px 0 #ffffffbf, 0 8px 18px -8px color-mix(in srgb, var(--cal-color) 32%, transparent);
}

.cal-page-bg .tab-nav-item:hover:not(.active):not([aria-selected="true"]) {
  color: var(--hymo-fg);
}

.cal-month {
  border-radius: 18px;
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: #ffffff4d;
  border-bottom: 1px solid #0f0c090f;
}

.cal-weekday {
  min-width: 0;
  overflow: hidden;
  padding: 12px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hymo-fg-4);
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-day {
  min-width: 0;
  min-height: 124px;
  padding: 8px;
  border-right: 1px solid #0f0c090f;
  border-bottom: 1px solid #0f0c090f;
  background: #ffffff80;
  transition: background .15s;
  cursor: pointer;
}

.cal-day:nth-child(7n) {
  border-right: none;
}

.cal-day:hover {
  background: #fffc;
}

.cal-day.other-month {
  background: #0f0c0905;
}

.cal-day.other-month .cal-day-number {
  color: color-mix(in srgb, var(--hymo-fg-4) 55%, transparent);
}

.cal-day.today .cal-day-number {
  background: var(--cal-color);
  color: #fff;
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.cal-day-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  border-radius: 50%;
  margin-bottom: 4px;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 3px;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
  white-space: nowrap;
  overflow: hidden;
  border: none;
  max-width: 100%;
  background: #ffffff9e;
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #ffffffbf, 0 0 0 1px #0f0c090d;
}

.cal-event:hover {
  background: #ffffffeb;
  box-shadow: inset 0 1px #ffffffe6, 0 0 0 1px #0f0c0917, 0 4px 12px -4px #0f0c0929;
}

.cal-event:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 1px;
}

.cal-event-icon {
  flex-shrink: 0;
  color: var(--hymo-fg-3);
}

.cal-event-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hymo-fg);
}

.cal-more-events {
  font-size: 11px;
  color: var(--hymo-fg-3);
  padding: 2px 6px;
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  text-align: left;
}

.cal-more-events:hover {
  color: var(--cal-color);
}

.cal-week {
  border-radius: 18px;
  overflow: hidden;
}

.cal-week-scrollable {
  overflow-x: auto;
}

.cal-day-scroll {
  max-height: 600px;
  overflow-y: auto;
}

.cal-week-allday {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border-bottom: 1px solid #0f0c090f;
  background: #ffffff59;
  min-height: 36px;
  align-items: start;
}

.cal-week-allday__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hymo-fg-4);
  padding: 6px 4px;
}

.cal-week-allday__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 3px;
  border-left: 1px solid #0f0c090a;
  min-height: 28px;
}

.cal-week-allday__event {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: filter .15s;
  color: var(--cal-fg, var(--hymo-fg-2));
  background: var(--cal-bg, #ffffffb8);
  box-shadow: inset 0 1px #fffc, 0 0 0 1px #0f0c090d;
}

.cal-week-allday__event:hover {
  filter: brightness(.95);
}

.cal-week-allday__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-week-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: #ffffff4d;
  border-bottom: 1px solid #0f0c090f;
}

.cal-week-header-cell {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 12px 8px;
  text-align: center;
}

.cal-week-header-cell .day-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hymo-fg-3);
}

.cal-week-header-cell .day-number {
  font-size: 22px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin-top: 2px;
}

.cal-week-header-cell.today .day-number {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cal-color);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.cal-week-body {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  position: relative;
}

.cal-time-col {
  border-right: 1px solid #0f0c090f;
}

.cal-time-slot {
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 8px;
  font-size: 11px;
  color: var(--hymo-fg-3);
  border-bottom: 1px solid #0f0c090a;
  transform: translateY(-6px);
}

.cal-time-slot:first-child {
  transform: none;
  padding-top: 4px;
}

.cal-day-col {
  border-right: 1px solid #0f0c090f;
  position: relative;
}

.cal-day-col:last-child {
  border-right: none;
}

.cal-hour-row {
  height: 60px;
  border-bottom: 1px solid #0f0c090a;
}

.cal-week-event, .cal-day-event {
  position: absolute;
  padding: 5px 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), transform var(--hymo-t) var(--hymo-ease);
  background: linear-gradient(#ffffff8c 0%, #fff0 60%), #ffffffa8;
  backdrop-filter: blur(12px) saturate(165%);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #ffffffd9, inset 0 0 0 1px #ffffff80, 0 0 0 1px #0f0c090f, 0 3px 8px -3px #0f0c0924;
}

.cal-week-event:hover, .cal-day-event:hover {
  background: linear-gradient(#ffffffbf 0%, #ffffff0d 60%), #ffffffe0;
  box-shadow: inset 0 1px #fffffff2, inset 0 0 0 1px #fff9, 0 0 0 1px #0f0c091a, 0 12px 24px -10px #0f0c0938;
  z-index: 5;
}

.cal-week-event:focus-visible, .cal-day-event:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 1px;
}

.cal-week-event-header, .cal-day-event-header {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.cal-week-event-icon, .cal-day-event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #ffffffb3;
  color: var(--hymo-fg-3);
  box-shadow: inset 0 1px #fffc, 0 0 0 1px #0f0c090d;
}

.cal-week-event-title, .cal-day-event-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hymo-fg);
}

.cal-week-event-time, .cal-day-event-time {
  font-size: 10px;
  color: var(--hymo-fg-4);
}

.cal-week-event-property, .cal-day-event-property {
  font-size: 10px;
  font-weight: 500;
  color: var(--hymo-fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-day-event {
  left: 4px;
  right: 4px;
}

.cal-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.cal-sidebar-section {
  padding: 20px;
  border-radius: 18px;
}

.cal-sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin-bottom: 12px;
}

.cal-sidebar-title--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal-sidebar-title__action {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  cursor: pointer;
  transition: color var(--hymo-t-fast) var(--hymo-ease);
}

.cal-sidebar-title__action:hover {
  color: var(--cal-color);
}

.cal-sidebar-title__action:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.cal-category-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  transition: opacity .15s;
  background: none;
  border: none;
  text-align: left;
}

.cal-category-filter.inactive {
  opacity: .4;
}

.cal-category-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #ffffffb3;
  color: var(--hymo-fg-2);
  box-shadow: inset 0 1px #ffffffd9, 0 0 0 1px #0f0c090f;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.cal-category-filter:hover .cal-category-glyph {
  background: #fffffff2;
  color: var(--cal-color);
}

.cal-category-label {
  font-size: 13px;
  color: var(--hymo-fg);
  font-weight: 500;
  flex: 1;
}

.cal-category-count {
  font-size: 11px;
  color: var(--hymo-fg-3);
  font-weight: 500;
  background: var(--hymo-surface-2);
  padding: 1px 8px;
  border-radius: 9999px;
}

.mini-cal {
  width: 100%;
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mini-cal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.mini-cal-nav {
  display: flex;
  gap: 4px;
}

.mini-cal-nav-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--hymo-fg-3);
  cursor: pointer;
  border-radius: 4px;
  transition: all .15s;
}

.mini-cal-nav-btn:hover {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
}

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.mini-cal-day-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  padding: 4px 0;
  text-transform: uppercase;
}

.mini-cal-day {
  text-align: center;
  font-size: 12px;
  padding: 4px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--hymo-fg);
  transition: all .15s;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  margin: 0 auto;
}

.mini-cal-day:hover {
  background: var(--hymo-surface-2);
}

.mini-cal-day.other {
  color: color-mix(in srgb, var(--hymo-fg-4) 55%, transparent);
}

.mini-cal-day.today {
  background: var(--cal-color);
  color: #fff;
  font-weight: 600;
}

.upcoming-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #0f0c090f;
}

.upcoming-event:last-child {
  border-bottom: none;
}

.upcoming-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.upcoming-event-dot {
  background: var(--hymo-fg-4);
}

.upcoming-event-info {
  flex: 1;
  min-width: 0;
}

.upcoming-event-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-event-time {
  font-size: 11px;
  color: var(--hymo-fg-3);
  margin-top: 1px;
}

.cal-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px 0 0;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg-3);
}

.cal-legend-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 7px;
  background: #ffffffad;
  color: var(--hymo-fg-3);
  box-shadow: inset 0 1px #fffc, 0 0 0 1px #0f0c090d;
}

.cal-category-filter:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
  border-radius: 6px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.animate-in {
  animation: .4s ease-out both fadeInUp;
}

.animate-delay-1 {
  animation-delay: 60ms;
}

.animate-delay-2 {
  animation-delay: .12s;
}

.animate-delay-3 {
  animation-delay: .18s;
}

.cal-page-bg .page-title {
  font-size: clamp(34px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--hymo-fg);
}

@media (width <= 1023px) {
  .cal-layout {
    flex-direction: column;
  }

  .cal-sidebar {
    width: 100%;
  }
}

@media (width <= 767px) {
  .cal-day {
    min-height: 60px;
  }

  .cal-layout {
    gap: 16px;
  }
}

.event-detail-popover {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.event-detail-popover__backdrop {
  position: absolute;
  inset: 0;
  background: #0f0c0952;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-detail-popover__panel {
  position: relative;
  z-index: 1;
  width: 380px;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  animation: .25s ease-out both fadeInUp;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid #ffffffb3;
  box-shadow: var(--cal-glass-pop-shadow);
}

.event-detail-popover__header {
  padding: 22px 24px 18px;
  position: relative;
  color: var(--hymo-fg);
  background: linear-gradient(180deg, #ffffff8c 0%, #fff0 100%), color-mix(in srgb, var(--cal-color) 4%, transparent);
  border-bottom: 1px solid #0f0c0912;
}

.event-detail-popover--alerte {
  background: linear-gradient(180deg, #ffffff80 0%, #fff0 100%), var(--cal-danger-light);
  border-bottom-color: color-mix(in srgb, var(--cal-danger) 20%, transparent);
}

.event-detail-popover--alerte .event-detail-popover__category {
  background: color-mix(in srgb, var(--cal-danger) 12%, white);
  color: var(--cal-danger);
}

.event-detail-popover__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hymo-fg-3);
  background: #ffffffb8;
  box-shadow: 0 0 0 1px #0f0c090f;
  padding: 4px 10px;
  border-radius: 7px;
  margin-bottom: 10px;
}

.event-detail-popover__title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
  padding-right: 64px;
  line-height: 1.3;
  color: var(--hymo-fg);
  letter-spacing: -.01em;
}

.event-detail-popover__time {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg-3);
}

.event-detail-popover__header-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.event-detail-popover__delete, .event-detail-popover__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #0f0c0914;
  background: #ffffffbf;
  color: var(--hymo-fg-3);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-detail-popover__close {
  position: static;
}

.event-detail-popover__delete:hover {
  background: var(--cal-danger);
  border-color: var(--cal-danger);
  color: #fff;
  transform: scale(1.05);
}

.event-detail-popover__delete:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.event-detail-popover__close:hover {
  background: #fffffffa;
  color: var(--hymo-fg);
  transform: scale(1.05);
}

.event-detail-popover__delete:focus-visible, .event-detail-popover__close:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.event-detail-popover__body {
  padding: 24px;
}

.event-detail-popover__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #0f0c090f;
}

.event-detail-popover__row:last-child {
  border-bottom: none;
}

.event-detail-popover__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--hymo-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hymo-fg-3);
}

.event-detail-popover__label {
  font-size: 11px;
  color: var(--hymo-fg-3);
  margin-bottom: 2px;
}

.event-detail-popover__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  white-space: pre-line;
}

.event-detail-popover__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  vertical-align: middle;
}

.event-detail-popover__badge--success, .event-detail-popover__badge--info {
  background: var(--cal-soft);
  color: var(--hymo-fg-2);
}

.event-detail-popover__badge--warning {
  background: color-mix(in srgb, var(--cal-danger) 7%, white);
  color: color-mix(in srgb, var(--cal-danger) 78%, var(--hymo-fg));
}

.event-detail-popover__badge--danger {
  background: var(--cal-danger-light);
  color: var(--cal-danger);
}

.event-detail-popover__actions {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #0f0c0912;
}

.event-detail-popover__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 12px;
  transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
  border: none;
  font-size: 14px;
  height: 44px;
  padding: 0 24px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
}

.event-detail-popover__btn:active {
  transform: scale(.97);
}

.event-detail-popover__btn:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.event-detail-popover__btn--full {
  width: 100%;
}

.event-detail-popover__btn--primary {
  color: #fff;
  box-shadow: 0 2px 8px #00000026;
}

.event-detail-popover__btn--primary:hover {
  box-shadow: 0 4px 12px #0003;
}

.event-detail-popover__btn--primary {
  background: var(--cal-color);
}

.event-detail-popover__btn--primary:hover {
  background: var(--cal-color-dark);
}

.event-detail-popover__btn--outline {
  background: var(--hymo-glass-soft);
  color: var(--hymo-fg);
  border: 1px solid var(--hymo-border);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
}

.event-detail-popover__btn--outline:hover {
  background: #ffffffd9;
  color: var(--cal-color);
  box-shadow: inset 0 1px #ffffffb3, 0 2px 4px #0f0c090f;
}

.event-detail-popover__btn--danger {
  gap: 7px;
  background: none;
  color: var(--cal-danger);
  border: 1px solid color-mix(in srgb, var(--cal-danger) 26%, transparent);
}

.event-detail-popover__btn--danger:hover:not(:disabled) {
  background: var(--cal-danger);
  border-color: var(--cal-danger);
  color: #fff;
}

.event-detail-popover__btn--danger:focus-visible {
  outline: 2px solid var(--cal-danger);
  outline-offset: 2px;
}

.event-detail-popover__btn--danger:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.event-detail-popover__btn--ghost {
  background: #ffffff73;
  color: var(--hymo-fg-3);
  border: 1px solid #0000;
}

.event-detail-popover__btn--ghost:hover {
  background: #ffffffbf;
  color: var(--cal-color);
  border-color: var(--hymo-border-strong);
}

@media (width <= 767px) {
  .event-detail-popover {
    align-items: flex-end;
    padding: 0;
  }

  .event-detail-popover__panel {
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    animation: .28s ease-out both slideInUp;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

.cal-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--cal-color) 7%, white);
  border: 1px solid color-mix(in srgb, var(--cal-color) 18%, transparent);
  border-radius: 12px;
  margin-bottom: 16px;
}

.cal-filter-banner__text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cal-color);
  font-weight: 500;
}

.cal-filter-banner__icon {
  flex-shrink: 0;
}

.cal-filter-banner__reset {
  font-size: 13px;
  font-weight: 500;
  color: var(--cal-color);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .15s;
  padding: 0;
}

.cal-filter-banner__reset:hover {
  opacity: .7;
}

.cal-filter-banner__reset:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.cal-sidebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-sidebar-title__icon {
  color: var(--hymo-fg-3);
  flex-shrink: 0;
}

.cal-property-filter-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.cal-property-filter-all__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  flex: 1;
}

.cal-property-filter-all__count {
  font-size: 11px;
  color: var(--hymo-fg-3);
}

.cal-property-filter-divider {
  height: 1px;
  background: #0f0c0914;
  margin: 6px 0;
}

.cal-property-filter-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.cal-property-filter-item--inactive {
  opacity: .45;
}

.cal-property-filter-item:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.cal-property-filter-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cal-property-filter-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-property-filter-item__city {
  font-size: 11px;
  color: var(--hymo-fg-3);
  margin-top: 1px;
}

.cal-property-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hymo-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all .15s;
  color: #fff;
}

.cal-property-checkbox--checked {
  background: var(--cal-color);
  border-color: var(--cal-color);
}

.cal-property-checkbox--partial {
  background: var(--cal-color);
  border-color: var(--cal-color);
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-page-property-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cal-color) 8%, white);
  color: var(--cal-color);
  font-size: 12px;
  font-weight: 500;
}

.quick-create-popover__backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
}

.quick-create-popover {
  position: relative;
  border-radius: var(--cal-popover-radius);
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1.5px solid #ffffffd9;
  box-shadow: var(--cal-glass-pop-shadow);
  overflow: hidden;
  animation: .18s ease-out both fadeInUp;
  display: flex;
  flex-direction: column;
}

.quick-create-popover:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(60% 45% at 100% 0, #fff6, #0000 68%);
}

.quick-create-popover > * {
  position: relative;
  z-index: 1;
}

.quick-create-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  flex-shrink: 0;
}

.quick-create-popover__title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
}

.quick-create-popover__close {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: none;
  background: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}

.quick-create-popover__close:hover {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
}

.quick-create-popover__close:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.quick-create-popover__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.quick-create-popover__date-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--cal-soft);
  box-shadow: inset 0 0 0 1px #0f0c090d;
}

.quick-create-popover__date-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.quick-create-popover__time-label {
  font-size: 12px;
  color: var(--hymo-fg-3);
  font-weight: 500;
}

.quick-create-popover__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-create-popover__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--hymo-fg-3);
}

.quick-create-popover__input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--cal-field-border);
  border-radius: 11px;
  font-size: 13px;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  outline: none;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
}

.quick-create-popover__input:hover {
  background: var(--cal-field-bg-hover);
}

.quick-create-popover__input:focus {
  background: var(--cal-field-bg-focus);
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.quick-create-popover__input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.quick-create-popover__input::placeholder {
  color: var(--hymo-fg-4);
}

.quick-create-popover__error {
  font-size: 11px;
  color: var(--cal-danger);
  margin-top: 2px;
}

.quick-create-popover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #0f0c0912;
  flex-shrink: 0;
}

.quick-create-popover__more-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .15s;
  font-family: inherit;
}

.quick-create-popover__more-link:hover {
  color: var(--cal-color);
}

.quick-create-popover__more-link:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.quick-create-popover__submit {
  height: 34px;
  padding: 0 18px;
  background: var(--cal-color);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cal-color) 25%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.quick-create-popover__submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cal-color) 86%, black);
}

.quick-create-popover__submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.quick-create-popover__submit:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.cal-drag-guide {
  position: absolute;
  top: var(--guide-top);
  left: 0;
  right: 0;
  z-index: 6;
  pointer-events: none;
  border-top: 1px dashed color-mix(in srgb, var(--cal-color) 55%, transparent);
}

.cal-drag-guide__time {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--cal-color);
  white-space: nowrap;
}

.cal-now-line {
  position: absolute;
  top: var(--now-top);
  left: 0;
  right: 0;
  z-index: 7;
  pointer-events: none;
  border-top: 1.5px dashed var(--cal-danger);
}

.cal-now-line__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cal-danger);
  transform: translate(-50%, -50%);
}

.drag-selection {
  position: absolute;
  left: 3px;
  right: 3px;
  background: color-mix(in srgb, var(--cal-color) 12%, transparent);
  border: 2px dashed var(--cal-color);
  border-radius: 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--cal-color);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.event-form-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.event-form-modal__backdrop {
  position: absolute;
  inset: 0;
  background: #0f0c0952;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-form-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: min(880px, 100dvh - 48px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(#ffffff9e 0%, #fff0 40%), linear-gradient(135deg, #ffffff61 0%, #fff0 52%, #ffffff3d 100%), #ffffffb8;
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1.5px solid #ffffffc7;
  box-shadow: inset 0 1.5px #ffffffe6, inset 0 -1px #ffffff47, inset 1px 0 #fff6, inset -1px 0 #fff6, 0 1px 2px #0f0c090d, 0 28px 72px -20px #0f0c093d, 0 4px 12px -2px #0f0c090f;
  animation: .22s ease-out both fadeInUp;
}

.event-form-modal__panel:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(60% 45% at 100% 0, #fff6, #0000 68%);
}

.event-form-modal__panel > * {
  position: relative;
  z-index: 1;
}

.event-form-modal__panel form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.event-form-modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #0f0c0912;
}

.event-form-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.event-form-modal__close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}

.event-form-modal__close:hover {
  background: var(--hymo-surface-2);
  color: var(--hymo-fg);
}

.event-form-modal__close:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.event-form-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: #0f0c0938 transparent;
}

.event-form-modal__body::-webkit-scrollbar {
  width: 10px;
}

.event-form-modal__body::-webkit-scrollbar-track {
  background: none;
  margin-block: 8px;
}

.event-form-modal__body::-webkit-scrollbar-thumb {
  background: #0f0c0933;
  border: 3px solid #0000;
  background-clip: content-box;
  border-radius: 999px;
}

.event-form-modal__body::-webkit-scrollbar-thumb:hover {
  background: #0f0c0957;
  background-clip: content-box;
}

.event-form-modal__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-form-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-form-modal__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg-3);
}

.event-form-modal__required {
  color: var(--cal-danger);
}

.event-form-modal__input, .event-form-modal__select, .event-form-modal__textarea {
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--cal-field-border);
  border-radius: 11px;
  font-size: 13px;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  outline: none;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
}

.event-form-modal__input, .event-form-modal__select {
  height: 40px;
}

.event-form-modal__input:hover, .event-form-modal__select:hover, .event-form-modal__textarea:hover {
  background: var(--cal-field-bg-hover);
}

.event-form-modal__input:focus, .event-form-modal__select:focus, .event-form-modal__textarea:focus {
  background: var(--cal-field-bg-focus);
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.event-form-modal__input::-moz-placeholder, .event-form-modal__textarea::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.event-form-modal__input::placeholder, .event-form-modal__textarea::placeholder {
  color: var(--hymo-fg-4);
}

.event-form-modal__input[aria-invalid="true"], .event-form-modal__textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--cal-danger) 55%, transparent);
}

.event-form-modal__input[aria-invalid="true"]:focus, .event-form-modal__textarea[aria-invalid="true"]:focus {
  border-color: var(--cal-danger);
  box-shadow: var(--cal-field-shadow), 0 0 0 3px color-mix(in srgb, var(--cal-danger) 18%, transparent);
}

.event-form-modal__input[aria-invalid="true"]:focus-visible, .event-form-modal__textarea[aria-invalid="true"]:focus-visible {
  outline-color: var(--cal-danger);
}

.event-form-modal__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6962' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.event-form-modal__textarea {
  padding: 10px 12px;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

.event-form-modal__location {
  position: relative;
}

.event-form-modal__location input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--cal-field-border);
  border-radius: 11px;
  font-size: 13px;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.event-form-modal__location input:hover {
  background: var(--cal-field-bg-hover);
}

.event-form-modal__location input:focus, .event-form-modal__location input:focus-visible {
  outline: none;
  background: var(--cal-field-bg-focus);
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.event-form-modal__location-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--hymo-fg-4);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.event-form-modal__location-clear:hover {
  background: #0f0c090f;
  color: var(--hymo-fg);
}

.event-form-modal__location-clear:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 1px;
}

.event-form-modal__location [role="listbox"], .event-form-modal__location ul {
  z-index: 40;
  border-radius: 14px;
  background: var(--cal-glass-pop-bg);
  backdrop-filter: blur(32px) saturate(185%);
  -webkit-backdrop-filter: blur(32px) saturate(185%);
  border: 1.5px solid #ffffffbf;
  box-shadow: var(--cal-glass-pop-shadow);
}

.event-form-modal__time-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-form-modal__time-input {
  width: 90px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--hymo-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  outline: none;
  text-align: center;
  font-family: inherit;
  transition: all .2s;
}

.event-form-modal__time-input:focus {
  border-color: var(--cal-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-color) 15%, transparent);
}

.event-form-modal__time-sep {
  font-size: 14px;
  color: var(--hymo-fg-3);
  font-weight: 500;
}

.event-form-modal__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.event-form-modal__toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
}

.event-form-modal__toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--hymo-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.event-form-modal__toggle--on {
  background: var(--cal-color);
}

.event-form-modal__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px #00000026;
}

.event-form-modal__toggle--on .event-form-modal__toggle-thumb {
  transform: translateX(18px);
}

.event-form-modal__recurrence-placeholder {
  height: 40px;
  border: 1px dashed var(--hymo-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  color: var(--hymo-fg-4);
}

.event-form-modal__error {
  font-size: 11px;
  color: var(--cal-danger);
}

.event-form-modal__submit-error {
  margin: 0 24px;
  padding: 10px 14px;
  background: var(--cal-danger-light);
  border: 1px solid color-mix(in srgb, var(--cal-danger) 26%, transparent);
  border-radius: 11px;
  font-size: 13px;
  color: var(--cal-danger);
  font-weight: 500;
}

.event-form-modal__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px;
  border-top: 1px solid #0f0c0912;
}

.event-form-modal__btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.event-form-modal__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.event-form-modal__btn:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.event-form-modal__btn--outline {
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
}

.event-form-modal__btn--outline:hover:not(:disabled) {
  background: #ffffffd9;
  color: var(--cal-color);
}

.event-form-modal__btn--primary {
  background: var(--cal-color);
  color: #fff;
  border: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cal-color) 25%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.event-form-modal__btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cal-color) 86%, black);
}

@media (width <= 767px) {
  .event-form-modal__body {
    grid-template-columns: 1fr;
  }

  .event-form-modal {
    align-items: flex-end;
    padding: 0;
  }

  .event-form-modal__panel {
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
  }
}

.dark .cal-page-bg .glass-card {
  background: linear-gradient(180deg, hsl(var(--card) / .78) 0%, hsl(var(--card) / .62) 100%);
  border-color: hsl(var(--border) / .8);
}

.dark .cal-day {
  background: hsl(var(--card) / .5);
}

.dark .cal-day:hover {
  background: hsl(var(--background-elevated) / .8);
}

.dark .cal-day.other-month {
  background: hsl(var(--background) / .3);
}

.dark .cal-day-number, .dark .cal-sidebar-title, .dark .cal-current-period, .dark .cal-category-label, .dark .upcoming-event-title {
  color: hsl(var(--foreground));
}

.dark .cal-today-btn, .dark .cal-nav-btn {
  background: hsl(var(--background-elevated) / .9);
  border-color: hsl(var(--border) / .8);
  color: hsl(var(--foreground));
}

.dark .mini-cal-day {
  color: hsl(var(--foreground));
}

.dark .mini-cal-day.other {
  color: hsl(var(--foreground-subtle));
}

.dark .cal-current-period:hover {
  background: hsl(var(--foreground) / .08);
}

.dark .month-picker {
  background: hsl(var(--popover));
  border-color: hsl(var(--border));
  box-shadow: 0 10px 32px #00000080;
}

.dark .month-picker__year {
  color: hsl(var(--foreground));
}

.dark .month-picker__item {
  color: hsl(var(--foreground));
}

.dark .month-picker__item:hover {
  background: hsl(var(--foreground) / .08);
}

.dark .cal-event, .dark .cal-week-event, .dark .cal-day-event, .dark .cal-week-allday__event {
  background: hsl(var(--background-elevated) / .72);
  color: hsl(var(--foreground-muted));
  box-shadow: 0 0 0 1px hsl(var(--border) / .6);
}

.dark .cal-event .cal-event-title, .dark .cal-week-event-title, .dark .cal-day-event-title {
  color: hsl(var(--foreground));
}

.dark .cal-event:hover, .dark .cal-week-event:hover, .dark .cal-day-event:hover {
  background: hsl(var(--background-elevated));
}

.dark .cal-category-glyph, .dark .cal-legend-glyph, .dark .cal-week-event-icon, .dark .cal-day-event-icon {
  background: hsl(var(--background-elevated) / .8);
  color: hsl(var(--foreground-muted));
  box-shadow: 0 0 0 1px hsl(var(--border) / .6);
}

.recurrence-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recurrence-selector__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recurrence-selector__toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
}

.recurrence-selector__toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--hymo-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.recurrence-selector__toggle--on {
  background: var(--cal-color);
}

.recurrence-selector__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px #00000026;
}

.recurrence-selector__toggle--on .recurrence-selector__toggle-thumb {
  transform: translateX(18px);
}

.recurrence-panel {
  background: #ffffff8c;
  border: 1px solid #0f0c090f;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.recurrence-panel__divider {
  height: 1px;
  background: var(--hymo-border);
  margin: 12px 0;
}

.recurrence-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.recurrence-field:last-child {
  margin-bottom: 0;
}

.recurrence-field--top {
  align-items: flex-start;
}

.recurrence-field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  min-width: 72px;
  flex-shrink: 0;
}

.recurrence-field__select {
  min-width: 160px;
}

.recurrence-field__select:focus {
  border-color: var(--cal-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cal-color) 15%, transparent);
}

.recurrence-field__input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--hymo-border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.recurrence-field__input:focus {
  border-color: var(--cal-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cal-color) 15%, transparent);
}

.recurrence-field__input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.recurrence-field__input--small {
  width: 60px;
  text-align: center;
}

.recurrence-field__input--inline {
  width: 60px;
  text-align: center;
  height: 30px;
}

.recurrence-field__input--date {
  width: 150px;
}

.recurrence-field__unit {
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.recurrence-day-picker {
  display: flex;
  gap: 5px;
}

.recurrence-day-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hymo-border);
  background: var(--cal-field-bg);
  box-shadow: var(--cal-field-shadow);
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recurrence-day-btn:hover {
  border-color: var(--hymo-border-strong);
  background: var(--hymo-surface-2);
}

.recurrence-day-btn--selected {
  background: var(--cal-color);
  color: #fff;
  border-color: var(--cal-color);
}

.recurrence-day-btn:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.recurrence-field__error {
  margin-top: 6px;
  padding-left: 30px;
  font-size: 11px;
  color: var(--cal-danger);
}

.recurrence-end-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recurrence-end-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hymo-fg);
}

.recurrence-end-option__label {
  flex-shrink: 0;
}

.recurrence-radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--hymo-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  cursor: pointer;
  transition: border-color .15s;
  padding: 0;
}

.recurrence-end-option--checked .recurrence-radio-circle {
  border-color: var(--cal-color);
}

.recurrence-radio-circle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cal-color);
}

.recurrence-radio-circle:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.recurrence-summary {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cal-color) 7%, white);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cal-color) 14%, transparent);
  margin-top: 10px;
}

.recurrence-summary__icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.recurrence-summary__text {
  font-size: 12px;
  font-weight: 500;
  color: var(--cal-color);
  line-height: 1.5;
}

.recurrence-occurrences {
  margin-top: 12px;
}

.recurrence-occurrences__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin-bottom: 6px;
}

.recurrence-occurrences__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.recurrence-occurrence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  box-shadow: var(--cal-field-shadow);
  border: 1px solid #0f0c090f;
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg);
}

.recurrence-occurrence-item__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cal-soft);
  color: var(--hymo-fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
}

.rec-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rec-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: #0f0c0952;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rec-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  border: 1px solid #ffffffb3;
  border-radius: 20px;
  background: linear-gradient(#ffffffeb 0%, #ffffffc7 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px #ffffffd9, 0 24px 64px -16px #0f0c092e, 0 4px 12px -2px #0f0c090f;
  overflow: hidden;
  animation: .22s ease-out both fadeInUp;
}

.rec-dialog__header {
  padding: 28px 28px 0;
  text-align: center;
}

.rec-dialog__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.rec-dialog__icon--amber {
  background: color-mix(in srgb, var(--cal-danger) 7%, white);
  color: color-mix(in srgb, var(--cal-danger) 78%, var(--hymo-fg));
}

.rec-dialog__icon--red {
  background: var(--cal-danger-light);
  color: var(--cal-danger);
}

.rec-dialog__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin-bottom: 8px;
}

.rec-dialog__desc {
  font-size: 13px;
  color: var(--hymo-fg-3);
  line-height: 1.5;
  margin-bottom: 24px;
}

.rec-dialog__body {
  padding: 0 28px;
}

.rec-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 24px 28px;
  border-top: 1px solid var(--hymo-border);
  margin-top: 24px;
}

.rec-dialog__btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}

.rec-dialog__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.rec-dialog__btn:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.rec-dialog__btn--outline {
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg);
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c0908;
}

.rec-dialog__btn--outline:hover {
  background: #ffffffd9;
  color: var(--cal-color);
}

.rec-dialog__btn--primary {
  background: var(--cal-color);
  color: #fff;
  border: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cal-color) 25%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--cal-color) 45%, transparent);
}

.rec-dialog__btn--primary:hover {
  background: color-mix(in srgb, var(--cal-color) 86%, black);
}

.rec-dialog__btn--danger {
  background: var(--cal-danger);
  color: #fff;
  border: none;
}

.rec-dialog__btn--danger:hover {
  background: color-mix(in srgb, var(--cal-danger) 82%, black);
}

.rec-option-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--hymo-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  background: none;
  width: 100%;
  font-family: inherit;
}

.rec-option-card:hover {
  border-color: var(--hymo-border-strong);
  background: var(--hymo-surface-2);
}

.rec-option-card--selected {
  border-color: var(--cal-color);
  background: color-mix(in srgb, var(--cal-color) 5%, white);
}

.rec-option-card:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.rec-option-card__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--hymo-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color .15s;
}

.rec-option-card--selected .rec-option-card__radio {
  border-color: var(--cal-color);
}

.rec-option-card__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cal-color);
}

.rec-option-card__content {
  flex: 1;
}

.rec-option-card__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin-bottom: 2px;
}

.rec-option-card__desc {
  display: block;
  font-size: 12px;
  color: var(--hymo-fg-3);
  line-height: 1.4;
}

.rec-delete-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.rec-delete-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hymo-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.rec-delete-option:hover {
  background: var(--hymo-surface-2);
  border-color: var(--hymo-border-strong);
}

.rec-delete-option--selected {
  border-color: var(--cal-danger);
  background: var(--cal-danger-light);
}

.rec-delete-option:focus-visible {
  outline: 2px solid var(--cal-danger);
  outline-offset: 2px;
}

.rec-delete-option__circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--hymo-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s;
}

.rec-delete-option--selected .rec-delete-option__circle {
  border-color: var(--cal-danger);
}

.rec-delete-option__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cal-danger);
}

.rec-warning-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 62px;
  padding: 12px 14px;
  background: var(--cal-danger-light);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--cal-danger) 14%, transparent);
}

.rec-warning-box--neutral {
  background: var(--cal-soft);
  border-color: #0f0c0912;
}

.rec-warning-box--neutral .rec-warning-box__icon, .rec-warning-box--neutral .rec-warning-box__text {
  color: var(--hymo-fg-3);
}

.rec-warning-box__icon {
  flex-shrink: 0;
  color: var(--cal-danger);
  margin-top: 1px;
}

.rec-warning-box__text {
  font-size: 12px;
  font-weight: 500;
  color: var(--cal-danger);
  line-height: 1.5;
}

@media (width <= 767px) {
  .rec-dialog {
    align-items: flex-end;
    padding: 0;
  }

  .rec-dialog__panel {
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    overflow-y: auto;
  }
}

.reminder-panel {
  background: #ffffff8c;
  border: 1px solid #0f0c090f;
  border-radius: 12px;
  padding: 16px;
}

.reminder-panel--loading {
  height: 48px;
  opacity: .4;
  background: var(--hymo-surface-2);
  border-radius: 12px;
  border: none;
  padding: 0;
}

.reminder-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reminder-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.reminder-panel__count {
  font-size: 11px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  background: var(--hymo-surface-2);
  padding: 2px 8px;
  border-radius: 9999px;
}

.reminder-panel__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.reminder-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #0f0c090f;
}

.reminder-chip:last-child {
  border-bottom: none;
}

.reminder-chip__time {
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
  flex: 1;
}

.reminder-chip__channel {
  font-size: 12px;
  color: var(--hymo-fg-3);
  background: var(--hymo-surface-2);
  padding: 3px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}

.reminder-chip__remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--hymo-fg-4);
  cursor: pointer;
  border-radius: 6px;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
}

.reminder-chip__remove:hover {
  background: var(--cal-danger-light);
  color: color-mix(in srgb, var(--cal-danger) 82%, black);
}

.reminder-chip__remove:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.reminder-chip__remove:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.reminder-panel__add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-top: 1px solid #0f0c0912;
  padding-top: 12px;
  margin-top: 4px;
}

.reminder-panel__add-row .reminder-panel__add-btn {
  grid-column: 2;
  width: 100%;
}

.reminder-panel__empty {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
  margin-bottom: 12px;
}

.reminder-panel__select {
  min-width: 0;
}

.reminder-panel__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid #0f0c0924;
  background: var(--cal-field-bg-focus);
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-color);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  box-shadow: inset 0 1px #ffffffb3, 0 1px 2px #0f0c090a;
}

.reminder-panel__add-btn:hover:not(:disabled) {
  background: #fff;
  border-color: #0f0c0942;
}

.reminder-panel__add-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.reminder-panel__add-btn:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 2px;
}

.participants-panel {
  background: #ffffff8c;
  border: 1px solid #0f0c090f;
  border-radius: 12px;
  padding: 14px;
}

.participants-panel__empty, .participants-panel__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
}

.participants-panel__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.participants-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #ffffffb3;
  box-shadow: 0 0 0 1px #0f0c090d;
}

.participants-panel__role {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.participants-panel__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--hymo-fg);
}

.participants-panel__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--hymo-fg-4);
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.participants-panel__remove:hover {
  background: var(--cal-danger-light);
  color: var(--cal-danger);
}

.participants-panel__remove:focus-visible {
  outline: 2px solid var(--cal-color);
  outline-offset: 1px;
}

.participants-panel__add {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  border-top: 1px solid #0f0c0912;
  padding-top: 12px;
  margin-top: 4px;
}

.participants-panel__select {
  width: 100%;
}

.participants-panel__or {
  align-self: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--hymo-fg-4);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.participants-panel__free-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cal-field-border);
  border-radius: 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--hymo-fg);
  background: var(--cal-field-bg);
  backdrop-filter: var(--cal-field-blur);
  -webkit-backdrop-filter: var(--cal-field-blur);
  outline: none;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.participants-panel__free-input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.participants-panel__free-input::placeholder {
  color: var(--hymo-fg-4);
}

.participants-panel__free-input:hover:not(:disabled) {
  background: var(--cal-field-bg-hover);
}

.participants-panel__free-input:focus, .participants-panel__free-input:focus-visible {
  background: var(--cal-field-bg-focus);
  border-color: color-mix(in srgb, var(--cal-color) 45%, transparent);
  box-shadow: none;
}

.participants-panel__free-input:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.participants-panel__note {
  font-size: 11px;
  color: var(--hymo-fg-4);
}

.participants-panel__error {
  margin-top: 8px;
  font-size: 11px;
  color: var(--cal-danger);
}

.event-detail-popover__reminders {
  padding: 12px 24px;
  border-top: 1px solid #0f0c090f;
}

.event-detail-popover__reminder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hymo-fg-3);
  margin-bottom: 8px;
}

.event-detail-popover__reminder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-detail-popover__reminder-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-detail-popover__reminder-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--hymo-fg);
  flex: 1;
}

.event-detail-popover__reminder-channel {
  font-size: 11px;
  color: var(--hymo-fg-3);
  background: var(--hymo-surface-2);
  padding: 2px 8px;
  border-radius: 4px;
}

@media (width <= 767px) {
  .reminder-panel__add-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .reminder-panel__add-row .reminder-panel__add-btn {
    grid-column: 1;
  }
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-google-header-group {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.cal-google-settings-btn {
  padding: 4px;
  border-radius: 8px;
  color: var(--hymo-fg-3);
  transition: color .15s, background .15s;
}

.cal-google-settings-btn:hover {
  color: var(--cal-color);
  background: color-mix(in srgb, var(--cal-color) 6%, transparent);
}

.cal-google-sync-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: .15s ease-out cal-panel-in;
}

@keyframes cal-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

.cal-google-sync-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cal-google-sync-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--hymo-fg);
  margin: 0;
}

.cal-google-sync-panel__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-google-sync-panel__section {
  border-top: 1px solid #0f0c0912;
  padding-top: 12px;
}

.cal-google-sync-panel__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  margin: 0 0 8px;
}

@media (width <= 767px) {
  .cal-google-sync-panel {
    width: calc(100vw - 32px);
    right: -16px;
  }
}


/* [project]/src/styles/pages/settings-v3.css [app-client] (css, ) */
:root {
  --set-color: var(--hymo-fg);
  --set-color-light: color-mix(in srgb, var(--set-color) 72%, white);
  --set-color-dark: color-mix(in srgb, var(--set-color) 72%, black);
  --set-soft: color-mix(in srgb, var(--set-color) 8%, white);
  --set-faint: color-mix(in srgb, var(--set-color) 4%, white);
  --set-line: color-mix(in srgb, var(--set-color) 26%, white);
  --set-glow: color-mix(in srgb, var(--set-color) 22%, transparent);
  --set-halo: color-mix(in srgb, var(--set-color) 32%, transparent);
  --set-grad: var(--set-color);
  --set-grad-kpi: var(--set-color);
  --set-grad-bar: var(--set-color);
}

.settings-v3 {
  position: relative;
  min-height: 100%;
  background: var(--hymo-bg);
}

.settings-v3:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}

.settings-v3 > * {
  position: relative;
  z-index: 1;
}

.set-accent-text {
  background: var(--set-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.set-head {
  position: relative;
  padding: 8px 0 4px;
}

.set-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
}

.set-head__eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--set-color);
  box-shadow: none;
}

.set-head__title {
  margin-top: 10px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.05;
  color: var(--hymo-fg);
}

.set-head__lead {
  margin-top: 8px;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
}

.set-tabs-shell {
  position: sticky;
  top: 12px;
  z-index: 30;
  margin-top: 22px;
}

.set-tabs {
  display: flex;
  width: 100%;
  gap: 3px;
  padding: 5px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line-2);
  border-radius: 16px;
  box-shadow: var(--hymo-v4-shadow);
}

.set-tabs::-webkit-scrollbar {
  display: none;
}

.set-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid #0000;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
  color: var(--hymo-fg-3);
  transition: color var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.set-tab:hover {
  color: var(--hymo-fg);
}

.set-tab--active {
  font-weight: 600;
  color: #fff;
  background: var(--hymo-v4-ink);
  border-color: var(--hymo-v4-ink);
  box-shadow: none;
}

.set-tab__icon {
  width: 15px;
  height: 15px;
  opacity: .85;
}

@media (width >= 768px) {
  .set-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    background: var(--hymo-v4-card);
    border: 1px solid var(--hymo-v4-line-2);
    box-shadow: var(--hymo-v4-shadow);
  }

  .set-tab {
    flex: auto;
  }
}

.set-card {
  position: relative;
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line);
  border-radius: 22px;
  box-shadow: var(--hymo-v4-shadow);
  padding: 24px;
}

.set-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  opacity: .5;
}

.set-card > * {
  position: relative;
  z-index: 1;
}

.set-card--lift {
  transition: transform var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease);
}

.set-card--lift:hover {
  border-color: var(--set-line);
  box-shadow: none;
}

.set-card--danger:after {
  background: none;
}

.set-card__head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.set-card__title {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--hymo-fg);
}

.set-card__desc {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
}

.set-icon-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--set-color);
  background: var(--set-soft);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: none;
}

.set-icon-tile svg {
  width: 18px;
  height: 18px;
}

.set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid #0000;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.006em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), filter var(--hymo-t) var(--hymo-ease);
}

.set-btn:disabled {
  opacity: .55;
  pointer-events: none;
}

.set-btn svg {
  width: 15px;
  height: 15px;
}

.set-btn--sm {
  padding: 7px 13px;
  font-size: 12.5px;
  border-radius: 10px;
}

.set-btn--primary {
  color: #fff;
  font-weight: 700;
  background: var(--hymo-v4-ink);
  border: 1px solid var(--hymo-v4-ink);
  box-shadow: none;
}

.set-btn--primary:hover {
  color: #fff;
  background: #000;
}

.set-btn--primary:active {
}

.set-btn--glass {
  color: var(--set-color);
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  box-shadow: none;
}

.set-btn--glass:hover {
  color: var(--set-color-dark);
  background: var(--hymo-surface-2);
}

.set-btn--ghost {
  color: var(--hymo-fg-2);
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-border);
  box-shadow: none;
}

.set-btn--ghost:hover {
  border-color: var(--set-line);
  color: var(--set-color);
  background: var(--hymo-v4-card);
}

.set-btn--danger {
  color: #b81e1e;
  background: #dc28280f;
  border: 1px solid #d65c5c59;
  box-shadow: none;
}

.set-btn--danger:hover {
  background: #dc28281a;
  border-color: #d1474780;
}

.set-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid #0000;
  background: #ffffffa6;
}

.set-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.set-pill--ok {
  color: var(--set-color);
  background: var(--set-soft);
  border-color: var(--set-line);
}

.set-pill--warn {
  color: var(--hymo-fg-2);
  background: #0f0c090d;
  border-color: #0f0c091f;
}

.set-pill--off {
  color: var(--hymo-fg-4);
  background: #0f0c0908;
  border-color: #0f0c0914;
}

.set-pill--accent {
  color: var(--set-color);
  background: var(--set-soft);
  border-color: var(--set-line);
}

.set-pill--danger {
  color: #b81e1e;
  background: #dc282814;
  border-color: #d65c5c4d;
}

.set-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hymo-fg-3);
  background: #0f0c090d;
}

.set-tab--active .set-count, .set-seg [aria-selected="true"] .set-count, .set-seg [data-state="active"] .set-count {
  color: #fff;
  background: var(--set-color);
}

.set-seg {
  display: inline-flex;
  width: 100%;
  gap: 2px;
  padding: 3px;
  background: #0f0c090a;
  border: 1px solid var(--hymo-v4-line);
  border-radius: 11px;
}

.set-seg > button, .set-seg > a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  white-space: nowrap;
  transition: color var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.set-seg > button[aria-checked="true"], .set-seg > button[aria-selected="true"], .set-seg > button[data-state="active"], .set-seg > a[aria-current="page"] {
  background: var(--hymo-surface);
  color: var(--set-color);
  box-shadow: none;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.set-row + .set-row {
  border-top: 1px solid #0f0c090d;
}

.set-row__label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--hymo-fg);
}

.set-row__hint {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hymo-fg-3);
}

.set-rows {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--hymo-glass-border-light);
  background: var(--hymo-glass-soft);
  box-shadow: var(--hymo-shadow-glass);
}

.set-rows__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  transition: background var(--hymo-t-fast) var(--hymo-ease);
}

.set-cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--hymo-fg-3);
}

.set-rows__item + .set-rows__item {
  border-top: 1px solid #0f0c090d;
}

.set-rows__item:hover {
  background: #ffffff8c;
}

.settings-v3 input[type="text"], .settings-v3 input[type="email"], .settings-v3 input[type="tel"], .settings-v3 input[type="password"], .settings-v3 input[type="number"], .settings-v3 input[type="date"], .settings-v3 input[type="url"], .settings-v3 input[type="search"], .settings-v3 select, .settings-v3 textarea {
  border-radius: 12px;
  border: 1px solid #0f0c091a;
  background: #ffffffbf;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.settings-v3 input[type="text"]:focus, .settings-v3 input[type="email"]:focus, .settings-v3 input[type="tel"]:focus, .settings-v3 input[type="password"]:focus, .settings-v3 input[type="number"]:focus, .settings-v3 input[type="date"]:focus, .settings-v3 input[type="url"]:focus, .settings-v3 input[type="search"]:focus, .settings-v3 select:focus, .settings-v3 textarea:focus {
  outline: none;
  background: #fffffff2;
  border-color: color-mix(in srgb, var(--set-color) 45%, transparent);
  box-shadow: none;
}

.settings-v3 label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.004em;
  color: var(--hymo-fg-2);
}

.settings-v3 [role="switch"][data-state="checked"], .settings-v3 button[role="switch"].bg-primary {
  background-color: var(--set-color);
}

.settings-v3 [role="switch"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.set-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid var(--set-line);
  color: var(--hymo-fg-2);
  background: var(--set-soft);
  box-shadow: none;
}

.set-tip__icon {
  flex: none;
  color: var(--set-color);
  margin-top: 1px;
}

.set-tip__icon svg {
  width: 17px;
  height: 17px;
}

.set-tip strong {
  color: var(--hymo-fg);
  font-weight: 700;
}

.set-tip p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hymo-fg-2);
}

.set-tip--warn {
  border-color: #d9972659;
  background: #f4a8251a;
}

.set-tip--warn .set-tip__icon {
  color: #b3660f;
}

.set-tip--danger {
  border-color: #d65c5c59;
  background: #df3a3a12;
}

.set-tip--danger .set-tip__icon {
  color: #c52020;
}

.set-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 4px;
  color: var(--hymo-fg-4);
}

.set-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--hymo-fg-4);
}

.set-note p {
  font-size: 12.5px;
  line-height: 1.5;
}

.set-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 24px;
  border-radius: 16px;
  border: 1.5px dashed #0f0c091f;
  background: #ffffff73;
  text-align: center;
}

.set-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--set-color);
  background: var(--set-soft);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: none;
}

.set-empty__icon svg {
  width: 21px;
  height: 21px;
}

.set-empty__title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
}

.set-empty__text {
  max-width: 380px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hymo-fg-3);
}

.set-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: none;
  transition: color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease), transform var(--hymo-t) var(--hymo-ease);
}

.set-back:hover {
  color: var(--set-color);
  border-color: var(--set-line);
}

.set-back svg {
  width: 15px;
  height: 15px;
}

.set-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff8c;
  border: 1px solid var(--hymo-v4-line);
}

.set-skeleton:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, #0000, #ffffffbf, #0000);
  animation: set-shimmer 1.6s var(--hymo-ease) infinite;
}

@keyframes set-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.set-avatar-ring {
  border-radius: 999px;
  padding: 3px;
  background: var(--set-soft);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: none;
}

.set-divider {
  height: 1px;
  border: 0;
  background: var(--hymo-v4-line);
}

.set-quill .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid #0f0c090f;
  padding: 8px 2px;
}

.set-quill .ql-container.ql-snow {
  border: 0;
  font-size: 14px;
  font-family: inherit;
}

.set-quill .ql-editor {
  min-height: 220px;
  padding: 14px 2px;
}

.set-quill .ql-editor.ql-blank:before {
  left: 2px;
  right: 2px;
  color: var(--hymo-fg-4);
  font-style: normal;
}

.set-modal {
  overflow: hidden;
  border-radius: 24px !important;
}

.set-modal:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  opacity: .4;
}

.set-modal > * {
  position: relative;
  z-index: 1;
}

.set-modal > button {
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  opacity: 1;
  color: var(--hymo-fg-3);
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-border);
  box-shadow: var(--hymo-v4-shadow);
  transition: color var(--hymo-t-fast) var(--hymo-ease), transform var(--hymo-t-fast) var(--hymo-ease);
  z-index: 2;
}

.set-modal > button:hover {
  color: var(--set-color);
}

.set-modal__head {
  padding-bottom: 16px;
  border-bottom: 1px solid #0000;
  border-bottom: 1px solid var(--hymo-v4-line);
}

.set-modal__head .set-icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.set-modal__head .set-icon-tile svg {
  width: 20px;
  height: 20px;
}

.set-datepicker {
  position: relative;
}

.set-card:has(.set-datepicker--open), .set-rows:has(.set-datepicker--open) {
  z-index: 40;
}

.set-datepicker__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #0f0c091a;
  background: #ffffffbf;
  font-size: 14px;
  color: var(--hymo-fg);
  cursor: text;
  transition: border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.set-datepicker__field:hover {
  background: #ffffffe6;
}

.set-datepicker__field:focus-within, .set-datepicker--open .set-datepicker__field {
  outline: none;
  background: #fffffff2;
  border-color: color-mix(in srgb, var(--set-color) 45%, transparent);
  box-shadow: none;
}

.set-datepicker__input {
  flex: auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  outline: none;
}

.set-datepicker__input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.set-datepicker__input::placeholder {
  color: var(--hymo-fg-4);
}

.set-datepicker__input:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.set-datepicker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__trigger:hover {
  background: color-mix(in srgb, var(--set-color) 10%, transparent);
}

.set-datepicker__trigger:focus-visible {
  outline: 2px solid var(--set-color);
  outline-offset: 1px;
}

.set-datepicker__field svg {
  width: 15px;
  height: 15px;
  color: var(--set-color);
  flex: none;
}

.set-datepicker__scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #0000;
  background: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hymo-fg);
  text-transform: capitalize;
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease), border-color var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__scope:hover {
  background: color-mix(in srgb, var(--set-color) 9%, transparent);
}

.set-datepicker__scope:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--set-color) 45%, transparent);
  box-shadow: none;
}

.set-datepicker__scope-caret {
  width: 13px;
  height: 13px;
  color: var(--set-color);
  flex: none;
}

.set-datepicker__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 0;
}

.set-datepicker__cell {
  height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__cell:hover:not(:disabled) {
  background: color-mix(in srgb, var(--set-color) 10%, transparent);
  color: var(--set-color);
}

.set-datepicker__cell--selected, .set-datepicker__cell--selected:hover:not(:disabled) {
  background: var(--set-color);
  color: #fff;
}

.set-datepicker__cell:focus-visible {
  outline: 2px solid var(--set-color);
  outline-offset: -2px;
}

.set-datepicker__cell:disabled {
  opacity: .32;
  cursor: not-allowed;
}

.set-datepicker__day:disabled, .set-datepicker__action:disabled {
  opacity: .32;
  cursor: not-allowed;
}

.set-datepicker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 296px;
  padding: 14px;
  border-radius: 18px;
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line);
  box-shadow: var(--hymo-v4-shadow);
}

.set-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.set-datepicker__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--hymo-fg-3);
  background: var(--hymo-glass-soft);
  border: 1px solid var(--hymo-border);
  box-shadow: none;
  transition: color var(--hymo-t-fast) var(--hymo-ease), transform var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__navbtn:hover {
  color: var(--set-color);
}

.set-datepicker__navbtn svg {
  width: 14px;
  height: 14px;
}

.set-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hymo-fg-4);
}

.set-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.set-datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--hymo-fg-2);
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__day:hover {
  background: color-mix(in srgb, var(--set-color) 8%, white);
  color: var(--set-color);
}

.set-datepicker__day--out {
  color: var(--hymo-fg-4);
  opacity: .55;
}

.set-datepicker__day--today {
  box-shadow: inset 0 0 0 1.5px var(--set-line);
  color: var(--set-color);
  font-weight: 700;
}

.set-datepicker__day--selected, .set-datepicker__day--selected:hover {
  background: var(--set-color);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.set-datepicker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #0f0c090f;
}

.set-datepicker__action {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--set-color);
  transition: background var(--hymo-t-fast) var(--hymo-ease);
}

.set-datepicker__action:hover {
  background: color-mix(in srgb, var(--set-color) 8%, white);
}

.settings-v3 .glass, .settings-v3 .surface-card, .settings-v3 .glass-card {
  background: var(--hymo-glass-strong);
  border: 1px solid var(--hymo-glass-border-light);
  border-radius: 18px;
  box-shadow: var(--hymo-shadow-glass);
}

.settings-v3 .set-seg {
  display: inline-flex;
  height: auto;
  width: 100%;
  gap: 2px;
  padding: 3px;
  background: #0f0c090a;
  border: 1px solid var(--hymo-v4-line);
  border-radius: 11px;
  color: var(--hymo-fg-3);
}

.settings-v3 .set-seg > button {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  background: none;
  box-shadow: none;
}

.settings-v3 .set-seg > button[data-state="active"], .settings-v3 .set-seg > button[aria-selected="true"] {
  background: var(--hymo-surface);
  color: var(--set-color);
  box-shadow: none;
}

@media (width <= 767px) {
  .set-head__title {
    font-size: 26px;
  }

  .set-tabs-shell {
    top: 8px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }

  .set-tabs-shell:after {
    content: "";
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg, #fff0 0%, #fffc 100%);
  }

  .set-card {
    padding: 18px;
    border-radius: 16px;
  }

  .set-tabs {
    background: var(--hymo-v4-card);
    border: 1px solid var(--hymo-v4-line-2);
    box-shadow: var(--hymo-v4-shadow);
  }

  .set-rows__item {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}


/* [project]/src/styles/features/messaging-v3.css [app-client] (css, ) */
:root {
  --msg-color: var(--hymo-fg);
  --msg-page-bg: var(--hymo-bg);
  --msg-color-light: color-mix(in srgb, var(--msg-color) 72%, white);
  --msg-color-dark: color-mix(in srgb, var(--msg-color) 72%, black);
  --msg-soft: color-mix(in srgb, var(--msg-color) 8%, white);
  --msg-faint: color-mix(in srgb, var(--msg-color) 4%, white);
  --msg-line: color-mix(in srgb, var(--msg-color) 26%, white);
  --msg-glow: color-mix(in srgb, var(--msg-color) 22%, transparent);
  --msg-halo: color-mix(in srgb, var(--msg-color) 32%, transparent);
  --msg-grad: var(--msg-color);
  --msg-grad-bar: var(--msg-color);
}

[data-portal="tenant"] {
  --msg-color: #519087;
  --msg-page-bg: #fff;
  --msg-color-light: color-mix(in srgb, var(--msg-color) 72%, white);
  --msg-color-dark: color-mix(in srgb, var(--msg-color) 72%, black);
  --msg-soft: color-mix(in srgb, var(--msg-color) 8%, white);
  --msg-faint: color-mix(in srgb, var(--msg-color) 4%, white);
  --msg-line: color-mix(in srgb, var(--msg-color) 26%, white);
  --msg-glow: color-mix(in srgb, var(--msg-color) 22%, transparent);
  --msg-halo: color-mix(in srgb, var(--msg-color) 32%, transparent);
  --msg-grad: var(--msg-color);
  --msg-grad-bar: var(--msg-color);
}

.messaging-shell {
  position: relative;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  height: calc(100dvh - var(--portal-header-h, 56px));
  min-height: 520px;
  overflow: visible;
  background: var(--msg-page-bg);
}

.messaging-shell:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}

.messaging-shell > * {
  position: relative;
  z-index: 1;
}

.conversation-list, .messaging-shell__main {
  position: relative;
  background: linear-gradient(#ffffffb3 0%, #fff0 45%), linear-gradient(135deg, #fff6 0%, #fff0 50%, #ffffff38 100%), #ffffff8c;
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1.5px solid #ffffffb3;
  border-radius: 22px;
  box-shadow: inset 0 1.5px #ffffffe6, inset 0 -1px #ffffff40, inset 1px 0 #ffffff59, inset -1px 0 #ffffff59, 0 1px 2px #0f0c090d, 0 14px 36px -10px #0f0c0924, 0 32px 64px -28px #0f0c0929;
}

.messaging-shell__main:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  opacity: .5;
}

.conversation-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.conversation-list:after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(#0000, #0f0c090f 40% 60%, #0000);
}

.conversation-list:has(.contact-search__dropdown) {
  z-index: 40;
}

.messaging-shell__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  border: none;
}

.conversation-list__header {
  position: relative;
  z-index: 1;
  padding: 18px 18px 12px;
}

.conversation-list__header:after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #0000, #0f0c091a 25% 75%, #0000);
}

.conversation-list__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hymo-fg);
  margin: 0;
}

.conversation-list__subtitle {
  font-size: 12px;
  color: var(--hymo-fg-4);
  margin: 2px 0 12px;
}

.conversation-list__search {
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.conversation-list__search-icon, .contact-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--hymo-fg-4);
  pointer-events: none;
}

.conversation-list__search-input, .contact-search__input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border-radius: 12px;
  border: 1px solid #0f0c0914;
  background: #ffffff80;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--hymo-fg);
  outline: none;
  transition: border-color var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

.conversation-list__search-input:focus, .contact-search__input:focus {
  border-color: var(--hymo-border-strong);
  background: #ffffffd9;
}

.contact-search__input {
  padding: 0 36px;
}

.conversation-list__filters {
  display: flex;
  gap: 6px;
}

.conversation-list__pill {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid #0f0c0914;
  background: none;
  color: var(--hymo-fg-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), border-color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.conversation-list__pill:hover {
  background: #0f0c0908;
}

.conversation-list__pill.is-active {
  color: var(--hymo-fg);
  font-weight: 650;
  background: #fffffff2;
  border: 1px solid #0f0c0914;
  box-shadow: 0 1px 2px #0f0c090d, 0 6px 14px -8px #0f0c092e;
}

.conversation-list__scroll {
  flex: auto;
  overflow-y: auto;
  min-height: 0;
  padding: 8px;
  list-style: none;
  margin: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #0f0c0929 transparent;
}

.conversation-list__scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.conversation-list__scroll::-webkit-scrollbar-track {
  background: none;
  margin-block: 8px;
}

.conversation-list__scroll::-webkit-scrollbar-thumb {
  background: #0f0c0929;
  border-radius: 999px;
}

.conversation-list__scroll::-webkit-scrollbar-thumb:hover {
  background: #0f0c094d;
}

.conversation-list__skeleton {
  height: 64px;
  margin-bottom: 6px;
}

.chat-header__skeleton {
  height: 64px;
  border-radius: 16px;
  margin: 12px 20px 0;
}

.conversation-list__empty, .conversation-list__error {
  padding: 24px 16px;
  text-align: center;
  color: var(--hymo-fg-3);
  font-size: 13px;
  line-height: 1.5;
}

.conversation-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background var(--hymo-t) var(--hymo-ease);
  align-items: flex-start;
  position: relative;
}

.conversation-item:hover {
  background: #0f0c0908;
}

.conversation-item--active {
  background: #ffffffeb;
  outline: 1px solid #0f0c090f;
  box-shadow: 0 1px 2px #0f0c090a;
}

.conversation-item__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px #0f0c090d;
}

.conversation-item__body {
  flex: 1;
  min-width: 0;
}

.conversation-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.conversation-item__title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item--unread .conversation-item__title {
  font-weight: 800;
}

.conversation-item__time {
  font-size: 11px;
  color: var(--hymo-fg-4);
  flex-shrink: 0;
}

.conversation-item__subtitle {
  font-size: 11px;
  color: var(--hymo-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.conversation-item__preview {
  font-size: 12px;
  color: var(--hymo-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.conversation-item--unread .conversation-item__preview {
  color: var(--hymo-fg);
  font-weight: 600;
}

.conversation-item__badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--msg-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  gap: 12px;
}

.chat-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  background: var(--msg-soft);
  color: var(--msg-color);
  box-shadow: 0 0 0 10px var(--msg-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-empty__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--hymo-fg);
}

.chat-empty__text {
  font-size: 13px;
  color: var(--hymo-fg-3);
  max-width: 320px;
  margin: 0;
}

.chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-view--loading, .chat-view--empty {
  padding: 40px;
  color: var(--hymo-fg-3);
  font-size: 13px;
  text-align: center;
}

.chat-view--keyboard {
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--msg-line);
  background: #ffffff73;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.chat-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid var(--msg-line);
  background: none;
  color: var(--hymo-fg);
  transition: background var(--hymo-t) var(--hymo-ease);
}

.chat-header__back:hover {
  background: var(--msg-faint);
}

.chat-header__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px #0f0c090d;
}

.chat-header__info {
  flex: 1;
  min-width: 0;
}

.chat-header__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hymo-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header__role {
  font-size: 11px;
  color: var(--hymo-fg-4);
  margin-top: 1px;
}

.chat-header__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--hymo-fg-4);
  margin-top: 2px;
}

.message-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #0f0c0929 transparent;
}

.message-thread::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.message-thread::-webkit-scrollbar-track {
  background: none;
  margin-block: 8px;
}

.message-thread::-webkit-scrollbar-thumb {
  background: #0f0c0929;
  border-radius: 999px;
}

.message-thread::-webkit-scrollbar-thumb:hover {
  background: #0f0c094d;
}

.message-thread__skeleton {
  height: 40px;
  border-radius: 12px;
}

.message-thread--error, .message-thread__empty {
  color: var(--hymo-fg-3);
  font-size: 13px;
  text-align: center;
  padding: 40px 16px;
}

.message-thread__history-error {
  font-size: 11.5px;
  text-align: center;
  color: #ae2929;
  padding: 8px 16px;
}

.msg-load-more {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  margin-bottom: 8px;
  border-radius: 999px;
  border: 1px solid var(--msg-line);
  background: #ffffff80;
  color: var(--msg-color);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.msg-load-more:hover {
  background: var(--msg-soft);
}

.msg-load-more:disabled {
  opacity: .5;
  pointer-events: none;
}

.message-thread__day {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 72%);
  margin: 6px auto;
  text-align: center;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--hymo-fg-4);
}

.message-thread__day:before, .message-thread__day:after {
  content: "";
  flex: 1;
  height: 1px;
}

.message-thread__day:before {
  background: linear-gradient(90deg, #0000, #0f0c0924);
}

.message-thread__day:after {
  background: linear-gradient(90deg, #0f0c0924, #0000);
}

.message-row {
  display: flex;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 68%;
}

.message-row--own {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-row--other {
  margin-right: auto;
}

.message-thread__item {
  margin-top: 14px;
}

.message-thread__item:first-of-type {
  margin-top: 0;
}

.message-thread__item--grouped {
  margin-top: 3px;
}

.message-row__avatar--ghost {
  visibility: hidden;
}

.message-row__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hymo-surface-2);
  color: var(--hymo-fg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #0f0c090d;
}

.message-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.message-row--own .message-row__body {
  align-items: flex-end;
}

.message-row__author {
  font-size: 11px;
  color: var(--hymo-fg-3);
  font-weight: 600;
  margin-bottom: 2px;
}

.message-row__time {
  font-size: 10.5px;
  color: var(--hymo-fg-4);
  margin-top: 2px;
}

.message-row__state {
  font-size: 10.5px;
  color: var(--hymo-fg-4);
  margin-top: 2px;
}

.message-row__failed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #ae2929;
  margin-top: 2px;
}

.message-row--failed .message-bubble--own {
  border: 1px solid #da6262;
  background: #fcf3f3;
  color: var(--hymo-fg);
  box-shadow: none;
}

.message-bubble {
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  max-width: 100%;
}

.message-row--grouped-top .message-bubble--own {
  border-top-right-radius: 6px;
}

.message-row--grouped-top .message-bubble--other {
  border-top-left-radius: 6px;
}

.message-bubble--own {
  background: var(--hymo-fg);
  color: #fff;
  border: none;
  border-bottom-right-radius: 6px;
  box-shadow: 0 1px 2px #0f0c091f;
}

.message-bubble--other {
  background: #ffffffd9;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid #ffffffbf;
  box-shadow: 0 1px 2px #0f0c090a;
  border-bottom-left-radius: 6px;
  color: var(--hymo-fg);
}

.message-bubble--system {
  align-self: center;
  background: none;
  color: var(--hymo-fg-4);
  font-style: italic;
  font-size: 12px;
  padding: 4px 12px;
}

.message-bubble--pending {
  opacity: .65;
}

.message-bubble__content {
  margin: 0;
  white-space: pre-wrap;
}

.message-bubble__attachments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.message-attachment--image {
  display: block;
}

.message-attachment--image img {
  max-width: 260px;
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid #ffffffb3;
  display: block;
}

.message-attachment--file {
  padding: 8px 12px;
  border: 1px solid var(--msg-line);
  border-radius: 12px;
  background: #fff9;
  color: var(--hymo-fg);
}

.message-bubble--own .message-attachment--file {
  background: #ffffff1f;
  border-color: #ffffff47;
  color: #fff;
}

.message-attachment__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--hymo-fg-3);
}

.message-attachment__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.message-attachment__name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  color: var(--hymo-fg);
}

.message-attachment__size {
  font-size: 10px;
  color: var(--hymo-fg-4);
}

.message-attachment__download {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--hymo-fg-4);
}

.compose-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  border-top: none;
  background: none;
}

.compose-bar__row {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  padding: 4px;
  border-radius: 24px;
  border: 1px solid var(--hymo-border);
  background: #ffffffe6;
  box-shadow: 0 1px 2px #0f0c090a;
  transition: border-color var(--hymo-t) var(--hymo-ease);
}

.compose-bar__row:focus-within {
  border-color: var(--hymo-border-strong);
}

.compose-bar__attach {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.compose-bar__attach:hover:not(:disabled) {
  background: var(--msg-faint);
  color: var(--msg-color);
}

.compose-bar__attach:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.compose-bar__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compose-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--msg-line);
  background: #fff9;
  border-radius: 12px;
  max-width: 260px;
  position: relative;
}

.compose-attachment--uploading {
  opacity: .7;
}

.compose-attachment--error {
  border-color: #da6262;
  background: #fcf3f3;
}

.compose-attachment__thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.compose-attachment__icon {
  width: 24px;
  height: 24px;
  color: var(--hymo-fg-3);
  flex-shrink: 0;
  margin: 6px;
}

.compose-attachment__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.compose-attachment__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.compose-attachment__status {
  font-size: 10px;
  color: var(--hymo-fg-4);
}

.compose-attachment--error .compose-attachment__status {
  color: #ae2929;
}

.compose-attachment__remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--msg-soft);
  border: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.compose-attachment__remove:hover {
  background: var(--msg-color);
  color: #fff;
}

.compose-bar__input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 6px;
  border: none;
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.4;
  resize: none;
  background: none;
  color: var(--hymo-fg);
  outline: none;
  font-family: inherit;
}

.compose-bar__input:focus {
  border: none;
  box-shadow: none;
}

.compose-bar__input:disabled {
  background: none;
  color: var(--hymo-fg-4);
  cursor: not-allowed;
}

.compose-bar__send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: var(--hymo-fg);
  border: none;
  box-shadow: 0 6px 16px -8px #0f0c0966;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.compose-bar__send:hover:not(:disabled) {
  box-shadow: 0 10px 22px -8px #14182d99;
}

.compose-bar__send:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.contact-search {
  position: relative;
  margin-bottom: 10px;
}

.contact-search__input-wrap {
  position: relative;
  display: block;
}

.contact-search__spinner {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--hymo-fg-4);
  animation: .8s linear infinite msg-spin;
}

@keyframes msg-spin {
  to {
    transform: translateY(-50%)rotate(360deg);
  }
}

.contact-search__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  background: #ffffffd9;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid #ffffffb3;
  border-radius: 16px;
  box-shadow: 0 24px 48px -16px #0f0c092e;
  z-index: 40;
  padding: 6px;
  margin: 0;
  list-style: none;
}

.contact-search__group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hymo-fg-4);
  padding: 8px 8px 4px;
}

.contact-search__empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--hymo-fg-3);
}

.contact-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.contact-search__item.is-active, .contact-search__item:hover {
  background: var(--msg-soft);
}

.contact-search__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--msg-color) 12%, white);
  color: var(--msg-color);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-search__item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.contact-search__item-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--hymo-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-search__item-email {
  font-size: 11px;
  color: var(--hymo-fg-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-search__item-property {
  font-size: 11px;
  color: var(--hymo-fg-4);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-search__item-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
  background: var(--msg-soft);
  color: var(--msg-color);
}

.msg-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff8c;
  border: 1px solid #ffffffb3;
}

.msg-skeleton:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, #0000, #ffffffbf, #0000);
  animation: msg-shimmer 1.6s var(--hymo-ease) infinite;
}

@keyframes msg-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.msg-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--msg-line);
  background: #ffffff80;
  color: var(--msg-color);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.msg-retry:hover {
  background: var(--msg-soft);
}

.msg-nav-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--msg-color);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
}

@media (width <= 767px) {
  body:has(.messaging-shell--chat-active) .pierre-fab {
    display: none;
  }
}

@media (width <= 1023px) {
  .messaging-shell {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
    height: auto;
    min-height: calc(100dvh - var(--portal-header-h, 56px));
  }

  .messaging-shell--chat-active {
    position: fixed;
    inset: var(--portal-header-h, 56px) 0 0 0;
    z-index: var(--msg-z-shell, 20);
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .messaging-shell--chat-active .messaging-shell__main {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .messaging-shell--chat-active .conversation-list {
    display: none;
  }

  .messaging-shell:not(.messaging-shell--chat-active) .messaging-shell__main {
    display: none;
  }

  .messaging-shell:not(.messaging-shell--chat-active) .conversation-list {
    border-radius: 0;
  }

  .messaging-shell:not(.messaging-shell--chat-active) .conversation-list:after {
    display: none;
  }

  .message-row {
    max-width: 90%;
  }
}

@media (width <= 767px) {
  .conversation-list, .messaging-shell__main {
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border-radius: 16px;
  }

  .conversation-list__header {
    padding: 13px 13px 9px;
  }

  .chat-header {
    padding: 9px 15px;
  }

  .message-thread {
    padding: 15px;
  }

  .compose-bar {
    padding: 9px 12px;
  }

  .contact-search__dropdown {
    max-height: 320px;
  }
}

.messaging-shell :focus-visible {
  outline: 2px solid var(--msg-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .messaging-shell *, .msg-skeleton:after, .contact-search__spinner {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* [project]/src/styles/pages/contacts.css [app-client] (css, ) */
.table-card.empty-state {
  padding: 48px 32px;
  text-align: center;
}

.table-card.loading-state {
  padding: 48px 32px;
  text-align: center;
}

.empty-state {
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-100, #f5f5f5);
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.5;
  max-width: 360px;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 14px 24px;
}

.data-table thead tr th {
  text-align: left;
  border-bottom: 1px solid #e2e8f0cc;
}

.data-table thead tr th:last-child {
  text-align: right;
}

.data-table tbody tr td:last-child {
  text-align: right;
}

.data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #e2e8f080;
}

.empty-text, .loading-text {
  color: var(--muted-foreground);
  font-size: 14px;
}

.contact-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-cell-name {
  font-weight: 500;
  color: var(--foreground);
}

--link.contact-cell-name {
  text-decoration: none;
  color: inherit;
}

.contact-cell-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
}

.contact-cell-avatar.plumber {
  background: #dbeafe;
  color: #2563eb;
}

.contact-cell-avatar.electrician {
  background: #fef3c7;
  color: #d97706;
}

.contact-cell-avatar.heating {
  background: #fee2e2;
  color: #dc2626;
}

.contact-cell-avatar.locksmith {
  background: #fce7f3;
  color: #db2777;
}

.contact-cell-avatar.insurance {
  background: #d1fae5;
  color: #059669;
}

.contact-cell-avatar.notary {
  background: #f3e8ff;
  color: #7c3aed;
}

.contact-cell-avatar.syndic {
  background: #cffafe;
  color: #0891b2;
}

.contact-cell-avatar.diagnostician {
  background: #e0e7ff;
  color: #4338ca;
}

.contact-cell-avatar.agency {
  background: #f1f5f9;
  color: #475569;
}

.contact-cell-avatar.general, .contact-cell-avatar.other {
  background: #f5f5f5;
  color: #737373;
}

.rating-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.star-rating-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.star-value {
  font-weight: 500;
  color: var(--foreground);
  font-size: 13px;
}

.star-icons {
  display: flex;
  gap: 2px;
  align-items: center;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full, 9999px);
  background: linear-gradient(135deg, #f5b92726, #f5b92714);
  color: #b8860b;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #f5b92740;
  width: -moz-fit-content;
  width: fit-content;
}

.trust-badge svg {
  color: var(--accent, #f5b927);
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge.badge-info {
  background: #0366d61a;
  color: #1ca0f2;
}

.badge.badge-warning {
  background: #f5a6231a;
  color: #ff8000;
}

.badge.badge-success {
  background: #22c55e1a;
  color: #157f3c;
}

.badge.badge-accent {
  background: #d4af371a;
  color: #d9a520;
}

.badge.badge-neutral {
  background: #6b72801a;
  color: #5c6670;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.kpi-card {
  padding: 20px 24px;
  border-radius: var(--radius-xl, 20px);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.kpi-card:hover {
  transform: translateY(-2px);
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon.blue {
  background: #dbeafe;
  color: #2563eb;
}

.kpi-icon.gold {
  background: #f5b92726;
  color: #92610a;
}

.kpi-icon.green {
  background: var(--success-light, #ecfdf5);
  color: var(--success, #2d6a4f);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  margin-bottom: 2px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -.5px;
  line-height: 1.2;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 24px;
}

@media (width >= 768px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 13px;
  color: var(--muted-foreground);
}

.search-bar {
  position: relative;
  margin-bottom: 20px;
}

.search-bar input {
  width: 100%;
  height: 44px;
  padding: 0 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  font-size: 14px;
  color: var(--foreground);
  background: #fff;
  outline: none;
  transition: all .2s;
}

.search-bar input:focus {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px #0f172a14;
}

.search-bar input::-moz-placeholder {
  color: var(--muted-foreground);
}

.search-bar input::placeholder {
  color: var(--muted-foreground);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}

.search-shortcut {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--neutral-400, #a3a3a3);
  pointer-events: none;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  background: var(--neutral-100, #f5f5f5);
  border: 1px solid var(--neutral-200, #e5e5e5);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
}

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

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all .15s;
}

.btn-icon:hover {
  background: var(--neutral-50, #fafafa);
  color: var(--foreground);
  border-color: var(--neutral-300, #d4d4d4);
}

.btn-icon:active {
  transform: scale(.95);
}

.btn-disabled {
  opacity: .5;
  pointer-events: none;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.category-filters-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  flex: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-filters-scroll::-webkit-scrollbar {
  display: none;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid hsl(var(--border));
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.category-pill:hover {
  border-color: var(--neutral-300, #d4d4d4);
  color: hsl(var(--foreground));
}

.category-pill.active {
  background: hsl(var(--foreground));
  color: #fff;
  border-color: hsl(var(--foreground));
}

.category-pill .count {
  background: #00000014;
  padding: 1px 7px;
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  font-weight: 600;
}

.category-pill.active .count {
  background: #fff3;
}

.view-toggle {
  display: flex;
  background: var(--neutral-100, #f5f5f5);
  border-radius: var(--radius, 8px);
  padding: 3px;
  gap: 2px;
}

.view-toggle-btn {
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all .2s;
}

.view-toggle-btn.active {
  background: #fff;
  color: var(--foreground);
  box-shadow: 0 1px 3px #00000014;
}

.page-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--radius-lg, 14px);
  background: #fff;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.trust-toggle:hover {
  border-color: var(--neutral-300, #d4d4d4);
  color: var(--foreground);
}

.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--neutral-200, #e5e5e5);
  border-radius: var(--radius-full, 9999px);
  transition: background .2s;
  flex-shrink: 0;
}

.toggle-switch:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px #00000026;
  transition: transform .2s;
}

.toggle-switch.active {
  background: var(--accent, #f5b927);
}

.toggle-switch.active:after {
  transform: translateX(16px);
}

.contact-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-sort {
  margin-left: auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.contact-card {
  padding: 24px;
  border-radius: var(--radius-xl, 20px);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
  position: relative;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass-lg, 0 16px 48px 0 #00000014);
}

.contact-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.contact-card .contact-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.contact-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
}

--link.contact-card-name {
  text-decoration: none;
  color: inherit;
}

.contact-card-company {
  font-size: 12px;
  color: var(--muted-foreground);
}

.contact-card-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--neutral-100, #f5f5f5);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 16px;
}

.contact-card-trust {
  margin-bottom: 12px;
}

.contact-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.no-rating {
  font-size: 12px;
  color: var(--neutral-400, #a3a3a3);
  font-style: italic;
  margin-bottom: 12px;
}

.contact-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.contact-card-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.contact-card-info-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .6;
}

.contact-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f080;
}

.star-rating {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.star {
  color: var(--neutral-300, #d4d4d4);
  font-size: 14px;
  line-height: 1;
}

.star.filled {
  color: var(--accent, #f5b927);
}

.star.star-lg {
  font-size: 18px;
}

.star-rating-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-left: 6px;
}

.star-rating-count {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-left: 4px;
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.contact-avatar.plumber {
  background: #dbeafe;
  color: #2563eb;
}

.contact-avatar.electrician {
  background: #fef3c7;
  color: #d97706;
}

.contact-avatar.locksmith {
  background: #fce7f3;
  color: #db2777;
}

.contact-avatar.heating {
  background: #fee2e2;
  color: #dc2626;
}

.contact-avatar.diagnostician {
  background: #e0e7ff;
  color: #4338ca;
}

.contact-avatar.insurance {
  background: #d1fae5;
  color: #059669;
}

.contact-avatar.notary {
  background: #f3e8ff;
  color: #7c3aed;
}

.contact-avatar.syndic {
  background: #cffafe;
  color: #0891b2;
}

.contact-avatar.agency {
  background: #f1f5f9;
  color: #475569;
}

.contact-avatar.general {
  background: #f5f5f5;
  color: #737373;
}

.contact-avatar.other {
  background: #f5f5f5;
  color: #737373;
}

@media (width <= 1200px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 900px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-filters-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-sort {
    margin-left: 0;
    width: 100%;
  }

  .contact-sort > * {
    width: 100%;
  }
}

.animate-in {
  animation: .4s ease-out slideInUp;
}

.animate-delay-1 {
  animation-delay: .1s;
}

.animate-delay-2 {
  animation-delay: .2s;
}

.animate-delay-3 {
  animation-delay: .3s;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.rating-card {
  padding: 28px;
  margin-bottom: 24px;
}

.rating-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 4px;
}

.rating-card-subtitle {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 24px;
}

.rating-card-title-empty {
  color: var(--muted-foreground);
  font-style: italic;
}

.evaluer-page-loading {
  text-align: center;
  padding: 48px;
  color: var(--muted-foreground);
}

.provider-info-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--neutral-50, #fafafa);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 28px;
}

.provider-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.provider-avatar-lg.plumber {
  background: #dbeafe;
  color: #2563eb;
}

.provider-avatar-lg.electrician {
  background: #fef3c7;
  color: #d97706;
}

.provider-avatar-lg.locksmith {
  background: #fce7f3;
  color: #db2777;
}

.provider-avatar-lg.heating {
  background: #fee2e2;
  color: #dc2626;
}

.provider-avatar-lg.diagnostician {
  background: #e0e7ff;
  color: #4338ca;
}

.provider-avatar-lg.insurance {
  background: #d1fae5;
  color: #059669;
}

.provider-avatar-lg.notary {
  background: #f3e8ff;
  color: #7c3aed;
}

.provider-avatar-lg.syndic {
  background: #cffafe;
  color: #0891b2;
}

.provider-avatar-lg.general, .provider-avatar-lg.other {
  background: #f5f5f5;
  color: #737373;
}

.provider-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.provider-info-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
}

.provider-info-company {
  font-size: 13px;
  color: var(--muted-foreground);
}

.star-section {
  text-align: center;
  margin-bottom: 28px;
}

.star-section .star-rating-interactive {
  justify-content: center;
  margin-bottom: 8px;
}

.star-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.star-rating-interactive {
  display: flex;
  gap: 6px;
}

.star-interactive {
  cursor: pointer;
  color: var(--neutral-200, #e5e5e5);
  transition: all .2s;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.star-interactive.filled, .star-interactive:hover {
  color: var(--accent, #f5b927);
  transform: scale(1.15);
}

.star-interactive:focus-visible {
  outline: 2px solid var(--accent, #f5b927);
  border-radius: 4px;
}

.star-interactive.star-interactive-lg {
  font-size: 32px;
}

.star-interactive.star-interactive-sm {
  font-size: 20px;
}

.quick-tags-section {
  margin-bottom: 24px;
}

.quick-tags-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 10px;
}

.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-tag {
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all .2s;
}

.quick-tag:hover {
  border-color: var(--neutral-300, #d4d4d4);
  color: var(--foreground);
  background: var(--neutral-50, #fafafa);
}

.quick-tag.selected {
  border-color: var(--foreground);
  background: var(--foreground);
  color: #fff;
}

.quick-tag:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

.comment-section {
  margin-bottom: 0;
}

.comment-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 8px;
}

.summary-card {
  padding: 28px;
  margin-bottom: 24px;
}

.summary-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 24px;
}

.summary-loading {
  text-align: center;
  padding: 24px;
  color: var(--muted-foreground);
}

.summary-empty {
  text-align: center;
  padding: 32px;
}

.summary-empty-title {
  font-size: 14px;
  color: var(--muted-foreground);
  font-style: italic;
}

.summary-empty-subtitle {
  font-size: 12px;
  color: var(--neutral-400, #a3a3a3);
  margin-top: 8px;
}

.summary-layout {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
}

.rating-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
}

.rating-big-number {
  font-size: 42px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -2px;
  line-height: 1;
}

.rating-big-suffix {
  font-size: 18px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.rating-big-stars {
  display: flex;
  gap: 3px;
  margin: 8px 0 6px;
}

.rating-big-count {
  font-size: 12px;
  color: var(--muted-foreground);
}

.distribution-side {
  flex: 1;
}

.rating-distribution {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.rating-bar-label {
  width: 16px;
  text-align: right;
  color: var(--muted-foreground);
  font-weight: 500;
}

.rating-bar-track {
  flex: 1;
  height: 6px;
  background: var(--neutral-100, #f5f5f5);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background: var(--accent, #f5b927);
  border-radius: var(--radius-full, 9999px);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.rating-bar-count {
  width: 16px;
  text-align: left;
  color: var(--muted-foreground);
  font-size: 11px;
}

.recent-comments-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f080;
}

.comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.comment-stars {
  display: inline-flex;
  gap: 1px;
  align-items: center;
}

.comment-stars .star {
  font-size: 12px;
}

.comment-date {
  font-size: 11px;
  color: var(--neutral-400, #a3a3a3);
  margin-left: auto;
}

.comment-text {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.incident-summary {
  padding: 24px 28px;
  margin-bottom: 24px;
}

.incident-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.incident-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -.3px;
}

.incident-summary-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.incident-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.incident-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
}

.incident-detail-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}

.info-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--info-light, #f0f9ff);
  border-radius: var(--radius-md, 12px);
  margin: 20px 0;
}

.info-box-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.info-box-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
}

.info-box-text {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

@media (width <= 700px) {
  .incident-summary-details {
    grid-template-columns: 1fr;
  }

  .summary-layout {
    flex-direction: column;
    gap: 24px;
  }

  .rating-big {
    min-width: auto;
  }
}

.steps {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.step:before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.step:last-child:before {
  display: none;
}

.step.completed:before {
  background: var(--success);
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  background: var(--neutral-200, #e5e5e5);
  color: var(--muted-foreground);
}

.step.completed .step-dot {
  background: var(--success);
  color: #fff;
}

.step.active .step-dot {
  background: var(--foreground);
  color: #fff;
}

.step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.step.active .step-label {
  color: var(--foreground);
  font-weight: 600;
}

.step.completed .step-label {
  color: var(--success);
  font-weight: 600;
}

.provider-section {
  padding: 28px;
  margin-bottom: 24px;
}

.provider-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.provider-section-subtitle {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.category-mapping {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-mapping svg {
  color: var(--neutral-400);
}

.suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1.5px solid var(--neutral-200, #e5e5e5);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  margin-bottom: 8px;
  position: relative;
}

.suggestion-card:hover:not(.selected) {
  border-color: var(--neutral-300, #d4d4d4);
  background: var(--neutral-50, #fafafa);
  box-shadow: 0 2px 8px #0000000d;
}

.suggestion-card.selected {
  border-color: var(--primary, #2563eb);
  background: var(--primary-50, #eff6ff);
  box-shadow: 0 0 0 1px var(--primary, #2563eb);
}

.suggestion-card:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}

.provider-select-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--neutral-300, #d4d4d4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .18s;
  margin-top: 2px;
}

.suggestion-card:hover:not(.selected) .provider-select-indicator {
  border-color: var(--neutral-400, #a3a3a3);
}

.suggestion-card.selected .provider-select-indicator {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

.suggestion-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.suggestion-avatar.plumber {
  background: #dbeafe;
  color: #2563eb;
}

.suggestion-avatar.electrician {
  background: #fef3c7;
  color: #d97706;
}

.suggestion-avatar.locksmith {
  background: #fce7f3;
  color: #db2777;
}

.suggestion-avatar.heating {
  background: #fee2e2;
  color: #dc2626;
}

.suggestion-avatar.diagnostician {
  background: #e0e7ff;
  color: #4338ca;
}

.suggestion-avatar.insurance {
  background: #d1fae5;
  color: #059669;
}

.suggestion-avatar.notary {
  background: #f3e8ff;
  color: #7c3aed;
}

.suggestion-avatar.syndic {
  background: #cffafe;
  color: #0891b2;
}

.suggestion-avatar.general, .suggestion-avatar.other {
  background: #f5f5f5;
  color: #737373;
}

.suggestion-info {
  flex: 1;
  min-width: 0;
}

.suggestion-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
  transition: color .18s;
}

.suggestion-card.selected .suggestion-name {
  color: var(--primary, #2563eb);
}

.suggestion-company {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}

.suggestion-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.suggestion-meta-item {
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 4px;
}

.suggestion-phone {
  font-size: 12px;
  color: var(--info);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
  text-decoration: none;
}

.suggestion-phone:hover {
  color: #1e6e9e;
}

.no-rating-text {
  font-size: 12px;
  color: var(--neutral-400, #a3a3a3);
  font-style: italic;
}

.no-provider-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px dashed var(--border);
  background: var(--neutral-50);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 10px;
}

.no-provider-card:hover {
  border-color: var(--neutral-300);
  background: #fff;
}

.no-provider-card:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

.no-provider-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-100);
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.no-provider-text {
  font-size: 13px;
  color: var(--muted-foreground);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

.add-new-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--info);
  cursor: pointer;
  transition: color .15s;
  padding: 4px 0;
  text-decoration: none;
}

.add-new-link:hover {
  color: #1e6e9e;
}

.notification-options {
  padding: 24px 28px;
  margin-bottom: 24px;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 16px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--foreground);
  cursor: pointer;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.content-wrapper {
  max-width: 720px;
}

.provider-suggestion__empty {
  text-align: center;
  padding: 32px 0 16px;
}

.provider-suggestion__empty p {
  margin-bottom: 12px;
}

.incident-summary {
  padding: 20px 24px;
  margin-bottom: 24px;
}

.incident-summary-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
}

.incident-summary-location {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

.incident-summary-tags {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.ambient-glow-navy {
  width: 400px;
  height: 400px;
  top: -100px;
  right: 10%;
  background: #0f172a08;
}

.ambient-glow-violet {
  width: 350px;
  height: 350px;
  bottom: 5%;
  left: 5%;
  background: #7c3aed0a;
}

.profile-page {
  position: relative;
}

.profile-page__content {
  position: relative;
  z-index: 1;
}

.profile-page__back {
  margin-bottom: 20px;
}

.section-card {
  padding: 24px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  gap: 24px;
}

.profile-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar {
  flex-shrink: 0;
  width: 64px !important;
  height: 64px !important;
  font-size: 22px !important;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
}

.profile-company {
  font-size: 14px;
  color: var(--muted-foreground);
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.profile-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-rating-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
}

.profile-rating-count {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-left: 2px;
}

.profile-header-right {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-item.full-width {
  grid-column: 1 / -1;
}

.contact-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
}

.contact-info-value {
  font-size: 14px;
  color: var(--foreground);
  font-weight: 500;
}

.contact-info-value a {
  color: var(--info);
  text-decoration: none;
  transition: color .15s;
}

.contact-info-value a:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.contact-info-notes {
  font-size: 13px;
  color: var(--muted-foreground);
  font-style: italic;
  line-height: 1.5;
}

.associated-properties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.property-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full, 9999px);
  background: var(--neutral-100, #f5f5f5);
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
}

.kpi-grid--provider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kpi-card--centered {
  text-align: center;
  padding: 20px 16px;
  background: var(--neutral-50, #fafafa);
  border-radius: var(--radius-md, 12px);
  border: 1px solid #e2e8f080;
}

.kpi-card--centered .kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 4px;
}

.kpi-card--centered .kpi-label {
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.review-card {
  padding: 16px;
  background: var(--neutral-50, #fafafa);
  border-radius: var(--radius-md, 12px);
  border: 1px solid #e2e8f080;
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.review-date {
  font-size: 12px;
  color: var(--muted-foreground);
}

.review-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.review-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  background: #f5b9271a;
  color: #b8860b;
  font-size: 11px;
  font-weight: 500;
}

.review-text {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

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

.timeline-row-left {
  flex: 1;
  min-width: 0;
}

.timeline-row-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.timeline-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

.timeline-property {
  font-size: 12px;
  color: var(--muted-foreground);
}

.timeline-dot.danger {
  border-color: var(--danger, #d62828);
  background: var(--danger-light, #fef2f2);
}

.glow-1 {
  position: absolute;
  top: -40px;
  right: 10%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, #2563eb0a 0%, #0000 70%);
  pointer-events: none;
  z-index: 0;
}

.glow-2 {
  position: absolute;
  top: 400px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, #7c3aed0a 0%, #0000 70%);
  pointer-events: none;
  z-index: 0;
}

.glow-3 {
  position: absolute;
  bottom: -80px;
  right: -40px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, #0f172a08 0%, #0000 70%);
  pointer-events: none;
  z-index: 0;
}

.animate-delay-4 {
  animation-delay: .4s;
}

.contact-card.trusted {
  box-shadow: 0 0 0 1px #f5b92733, 0 8px 32px #f5b9270f;
  border: 1px solid #f5b92740;
}

.contact-card.trusted:hover {
  box-shadow: 0 0 0 1px #f5b92759, 0 12px 40px #f5b9271f;
}

.contact-card.trusted.newly-earned {
  animation: 2s ease-in-out infinite goldenPulse;
}

@keyframes goldenPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px #f5b92733, 0 8px 32px #f5b9270f;
  }

  50% {
    box-shadow: 0 0 0 2px #f5b92759, 0 8px 32px #f5b92724, 0 0 24px #f5b92714;
  }
}

tr.trusted td:first-child {
  border-left: 3px solid #f5b92780;
}

.rating-cell .trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f5b92726, #f5b92714);
  color: #b8860b;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #f5b92740;
  width: auto;
  cursor: default;
}

.profile-header-card {
  padding: 0;
  overflow: hidden;
}

.contact-info-icon {
  display: inline;
  margin-right: 4px;
}

.empty-text--centered {
  text-align: center;
  padding: 24px 0;
}

.badge--small {
  font-size: 11px;
}

@media (width <= 1024px) {
  .profile-header {
    flex-direction: column;
    gap: 16px;
  }

  .profile-header-right {
    width: 100%;
  }

  .kpi-grid--provider {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .profile-header-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-row {
    flex-direction: column;
    gap: 6px;
  }

  .timeline-row-right {
    padding-left: 0;
  }
}

.search-bar-large input {
  height: 56px;
  padding: 0 120px 0 52px;
  font-size: 15px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  box-shadow: 0 4px 16px #0000000a;
}

.search-bar-large input:focus {
  border-color: var(--foreground);
  box-shadow: 0 0 0 4px #0f172a14, 0 4px 16px #0000000a;
}

.search-bar-large .search-icon {
  left: 18px;
}

.search-bar-large .search-shortcut {
  right: 18px;
}

@media (width <= 1023px) {
  .search-shortcut {
    display: none;
  }
}

.search-results-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}

.search-results-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
}

.search-results-count strong {
  font-weight: 700;
}

.search-results-scope {
  font-size: 13px;
  color: var(--muted-foreground);
}

mark.highlight {
  background: #f5b92733;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
  color: inherit;
}

.property-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.property-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 4px;
}

.pagination-info {
  font-size: 13px;
  color: var(--muted-foreground);
}

.pagination-buttons {
  display: flex;
  gap: 4px;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}

.pagination-btn:hover:not(:disabled):not(.active) {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
  color: var(--foreground);
}

.pagination-btn.active {
  background: var(--foreground);
  color: #fff;
  border-color: var(--foreground);
}

.pagination-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.command-palette__row-desc {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 1px;
}

@media (width <= 768px) {
  .pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .search-bar-large input {
    height: 48px;
    font-size: 14px;
  }
}


/* [project]/src/styles/pages/einvoicing.css [app-client] (css, ) */
.einvoicing-deadline {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  margin-bottom: 18px;
  border: 1px solid #0f0c0912;
  background: var(--hymo-surface);
  box-shadow: 0 1px 2px #0f0c090a, 0 12px 32px -20px #0f0c0929;
}

.einvoicing-deadline__icon {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 9px;
  border-radius: 12px;
  color: var(--hymo-fg-3);
  background: var(--hymo-surface-2);
}

.einvoicing-deadline--urgent .einvoicing-deadline__icon {
  color: hsl(var(--warning));
  background: hsl(var(--warning-light));
}

.einvoicing-deadline__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.einvoicing-deadline__body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.einvoicing-entity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
}

.einvoicing-entity__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
}

.einvoicing-entity__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.einvoicing-entity__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.einvoicing-entity__note--warning {
  color: hsl(var(--warning));
}

.einvoicing-entity__note--error {
  color: hsl(var(--destructive));
}

.einvoicing-entity__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.einvoicing-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.einvoicing-counterparty {
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
}

.einvoicing-counterparty:hover {
  text-decoration: underline;
}

.einvoicing-cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.einvoicing-row-link {
  cursor: pointer;
  transition: background .16s;
}

.einvoicing-row-link:hover {
  background: #f1f5f980;
}

.einvoicing-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid #f5a62359;
  background: #f5a62314;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--warning));
}

.einvoicing-suggestion__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.einvoicing-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (width <= 1023px) {
  .einvoicing-detail-grid {
    grid-template-columns: 1fr;
  }
}

.einvoicing-panel {
  padding: 20px 24px;
}

.einvoicing-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 16px;
}

.einvoicing-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  font-size: 13px;
}

.einvoicing-facts dt {
  color: var(--muted-foreground);
  margin-bottom: 2px;
}

.einvoicing-facts dd {
  font-weight: 500;
  color: var(--foreground);
}

.einvoicing-totals {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid #e2e8f0cc;
}

.einvoicing-totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-foreground);
}

.einvoicing-totals__row + .einvoicing-totals__row {
  margin-top: 6px;
}

.einvoicing-totals__row--main {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0cc;
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
}

.einvoicing-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.einvoicing-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.einvoicing-timeline__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: 1px;
  background: #6b72801f;
  color: #5c6670;
}

.einvoicing-timeline__marker--outbound {
  background: #0366d61a;
  color: #0c84cf;
}

.einvoicing-timeline__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.einvoicing-timeline__direction {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-foreground);
}

.einvoicing-timeline__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.einvoicing-timeline__message {
  margin-top: 4px;
  font-size: 13px;
  color: var(--foreground);
}

.einvoicing-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  border-radius: 20px;
  border: 1px dashed #e2e8f0;
  text-align: center;
}

.einvoicing-empty__icon {
  color: var(--muted-foreground);
  opacity: .7;
}

.einvoicing-skeleton {
  height: 56px;
  border-radius: var(--radius-md, 12px);
  background: #f1f5f9e6;
  animation: 1.6s ease-in-out infinite einvoicing-pulse;
}

.einvoicing-skeleton + .einvoicing-skeleton {
  margin-top: 8px;
}

@keyframes einvoicing-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

.einvoicing-notice {
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid #e2e8f0cc;
  background: #f1f5f999;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.einvoicing-notice p + p {
  margin-top: 8px;
  color: var(--muted-foreground);
}

.einvoicing-regulatory {
  padding: 20px 24px;
  margin-bottom: 20px;
}

.einvoicing-regulatory__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.einvoicing-regulatory__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg, 16px);
  background: #f1f5f9e6;
  border: 1px solid #e2e8f0e6;
  color: var(--muted-foreground);
}

.einvoicing-regulatory__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

.einvoicing-regulatory__subtitle {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 4px 0 0;
}

.einvoicing-regulatory__dates {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

@media (width >= 768px) {
  .einvoicing-regulatory__dates {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.einvoicing-regulatory__dates > div {
  padding: 12px 16px;
  border-radius: var(--radius-lg, 16px);
  background: #f8fafcb3;
  border: 1px solid #e2e8f0b3;
}

.einvoicing-regulatory__dates dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.einvoicing-regulatory__dates dd {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

.einvoicing-regulatory__details {
  border-top: 1px solid #e2e8f0b3;
}

.einvoicing-regulatory__details p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.einvoicing-regulatory__details p + p {
  margin-top: 10px;
}

.einvoicing-regulatory__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.einvoicing-regulatory__list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
  padding-left: 14px;
  position: relative;
}

.einvoicing-regulatory__list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8e6;
}

.einvoicing-regulatory__source {
  margin: 14px 0 0;
  font-size: 12.5px;
}

.einvoicing-regulatory__source a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.einvoicing-regulatory__source a:hover {
  color: var(--foreground);
}

.einvoicing-canvas {
  min-height: 100%;
  background: var(--hymo-bg);
}

.einvoicing-page {
  padding: 20px 16px 24px;
}

@media (width >= 768px) {
  .einvoicing-page {
    padding: 36px 32px 80px;
  }
}

.einvoicing-page, .einvoicing-dialog {
  --einv-accent: #7f388a;
  --einv-card: var(--hymo-surface);
  --einv-line: #0f0c0912;
  --einv-line-2: #0f0c091f;
  --einv-shadow: 0 1px 2px #0f0c090a, 0 12px 32px -20px #0f0c0929;
  --primary: 292 42% 38%;
  --ring: 292 42% 38%;
}

.dark .einvoicing-page, .dark .einvoicing-dialog {
  --primary: 292 45% 60%;
  --ring: 292 45% 60%;
}

.einvoicing-dialog.pd-scrollbar {
  scrollbar-color: #a74ab573 transparent;
}

.einvoicing-dialog.pd-scrollbar::-webkit-scrollbar-thumb {
  background: #a74ab566;
  background-clip: content-box;
}

.einvoicing-dialog.pd-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9236a1b3;
  background-clip: content-box;
}

.einvoicing-page .einvoicing-hero {
  margin-bottom: 18px;
}

.einvoicing-page .einvoicing-hero__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--hymo-fg);
  margin: 0 0 6px;
}

@media (width <= 767px) {
  .einvoicing-page .einvoicing-hero__title {
    font-size: 30px;
  }
}

.einvoicing-page .einvoicing-hero__title .accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--einv-accent);
}

.einvoicing-page .einvoicing-hero__brief {
  font-size: 17px;
  font-weight: 500;
  color: var(--hymo-fg-3);
  line-height: 1.45;
  max-width: 680px;
  margin: 0;
}

@media (width <= 767px) {
  .einvoicing-page .einvoicing-hero__brief {
    font-size: 15px;
  }
}

.einvoicing-page .glass-card, .einvoicing-page .set-card {
  background: var(--einv-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--einv-line);
  box-shadow: var(--einv-shadow);
}

.einvoicing-page .set-card:after {
  display: none;
}

.einvoicing-page .set-card:hover {
  border-color: var(--einv-line-2);
}

.einv-kpi {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: var(--einv-card);
  border: 1px solid var(--einv-line);
  box-shadow: var(--einv-shadow);
  transition: transform .16s var(--hymo-ease, ease), border-color .16s, box-shadow .16s;
}

.einv-kpi:hover {
  transform: translateY(-1px);
  border-color: var(--einv-line-2);
}

.einv-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--hymo-fg-3);
}

.einv-kpi__head svg {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.einv-kpi__val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--hymo-fg);
  font-variant-numeric: tabular-nums;
}

.einvoicing-seal {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  border: 1.5px solid #bccce6;
  background: #fffffff0;
  box-shadow: 0 1px 2px #1e3a8a14, inset 0 1px #ffffffe6;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s;
}

.einvoicing-seal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #1e3a8a24, inset 0 1px #ffffffe6;
}

.einvoicing-seal__mark {
  width: 150px;
  height: auto;
}

.einvoicing-seal__caption {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--muted-foreground);
  text-align: center;
  max-width: 170px;
}

.einvoicing-deadline--ok .einvoicing-deadline__icon {
  color: #7f388a;
  background: #f6edf8;
}

@media (width <= 640px) {
  .einvoicing-deadline {
    flex-wrap: wrap;
  }

  .einvoicing-seal {
    flex-basis: 100%;
    margin-top: 4px;
    margin-left: 32px;
    max-width: calc(100% - 32px);
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }

  .einvoicing-seal__mark {
    width: 110px;
  }

  .einvoicing-seal__caption {
    text-align: left;
  }
}

.einvoicing-page .set-btn, .einvoicing-page .set-pill, .einvoicing-page .set-empty {
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.einvoicing-page .set-btn--primary {
  color: var(--hymo-surface);
  background: var(--einv-accent);
  border-color: #0000;
  box-shadow: var(--einv-shadow);
}

.einvoicing-page .set-btn--primary:hover {
  background: color-mix(in srgb, var(--einv-accent) 86%, black);
}

.einvoicing-page .set-btn--glass, .einvoicing-page .set-btn--ghost {
  color: var(--hymo-fg-2);
  background: var(--hymo-surface);
  border-color: var(--einv-line-2);
  box-shadow: none;
}

.einvoicing-page .set-btn--glass:hover, .einvoicing-page .set-btn--ghost:hover {
  background: var(--hymo-surface-2);
  border-color: var(--hymo-border-strong);
}

.einvoicing-page .set-btn--danger {
  color: hsl(var(--danger));
  background: hsl(var(--danger-light));
  border-color: #0000;
}

.einvoicing-page .set-btn--danger:hover {
  background: color-mix(in srgb, hsl(var(--danger)) 14%, var(--hymo-surface));
}

.einvoicing-page .set-pill {
  background: var(--hymo-surface-2);
  border-color: #0000;
}

.einvoicing-page .set-pill--ok {
  color: hsl(var(--success));
  background: hsl(var(--success-light));
}

.einvoicing-page .set-pill--warn {
  color: var(--hymo-fg-2);
  background: var(--hymo-surface-2);
  border-color: var(--einv-line-2);
}

.einvoicing-page .set-pill--off {
  color: var(--hymo-fg-4);
  background: var(--hymo-surface-2);
}

.einvoicing-page .set-pill--accent {
  color: var(--einv-accent);
  background: color-mix(in srgb, var(--einv-accent) 9%, var(--hymo-surface));
}

.einvoicing-page .set-pill--danger {
  color: hsl(var(--danger));
  background: hsl(var(--danger-light));
}

.einvoicing-page .set-empty {
  background: var(--hymo-surface);
  border: 1px solid var(--einv-line);
  box-shadow: var(--einv-shadow);
}

.kyb-panel {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--einv-line-2);
  border-radius: var(--radius-md);
  background: var(--hymo-surface-2);
}

.kyb-panel--standby {
  border-left: 3px solid hsl(var(--warning));
}

.kyb-panel--waiting {
  border-left: 3px solid hsl(var(--info));
}

.kyb-panel--rejected {
  border-left: 3px solid hsl(var(--danger));
}

.kyb-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.kyb-panel__body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hymo-fg-2);
}

.kyb-panel__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.kyb-panel__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (width >= 768px) {
  .kyb-panel__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .kyb-panel__field {
    grid-column: 1 / -1;
  }
}

.kyb-panel--more-info {
  border-left: 3px solid var(--einv-accent);
}

.kyb-panel__request {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--hymo-surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--hymo-fg);
}

.kyb-panel__docs {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.kyb-panel__docs li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.einvoicing-migration, .einvoicing-migration-code {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--einv-line, #0f0c0912);
  border-left: 3px solid var(--einv-accent, #7f388a);
  background: var(--einv-card, var(--hymo-surface));
}

.einvoicing-migration-code__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.einvoicing-migration-code__value {
  flex: auto;
  min-width: 0;
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--einv-line-2, #0f0c091f);
  background: var(--hymo-bg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
}

.einvoicing-migration__steps {
  margin: 10px 0 0;
  padding-left: 18px;
  list-style: decimal;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.einvoicing-migration__steps li + li {
  margin-top: 4px;
}


/* [project]/src/styles/pages/candidate-portal.css [app-client] (css, ) */
.candidate-portal {
  min-height: 100vh;
  background: var(--portal-candidate-light);
}

.candidate-layout {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 64px;
  padding: 32px;
  min-height: calc(100vh - 64px);
  position: relative;
}

.candidate-header {
  height: 64px;
  background: #fff;
  border-bottom: 2px solid var(--portal-candidate);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.candidate-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.candidate-header__logo-text {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -2px;
  color: hsl(var(--foreground));
}

.candidate-header__logo-label {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

.candidate-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.candidate-header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--portal-candidate);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.candidate-portal__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  background: #0d94880a;
}

.greeting-banner {
  background: #f0fdfa99;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #ccfbf166;
  box-shadow: 0 8px 32px #0000000f;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 20px;
}

.greeting-banner__emoji {
  font-size: 28px;
  margin-bottom: 4px;
  display: block;
}

.greeting-banner__title {
  font-size: 24px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}

.greeting-banner__address {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 12px;
}

.greeting-banner__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.greeting-banner__since {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-card {
  background: #ffffffb3;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #e2e8f0cc;
  box-shadow: 0 8px 32px #0000000a;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.progress-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.progress-card__label {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.progress-card__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--portal-candidate);
}

.progress-card__bar-track {
  height: 12px;
  background: hsl(var(--border));
  border-radius: 9999px;
  overflow: hidden;
}

.progress-card__bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--portal-candidate);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.progress-card__hint {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-card__hint-icon {
  color: var(--portal-candidate);
}

.dossier-section {
  background: #ffffffb3;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #e2e8f0cc;
  box-shadow: 0 8px 32px #0000000a;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.dossier-section__header {
  margin-bottom: 20px;
}

.dossier-section__title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.dossier-section__subtitle {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.dossier-section__upload-btn {
  background: var(--portal-candidate);
  color: #fff;
}

.dossier-section__upload-btn:hover {
  background: var(--portal-candidate-hover);
}

.doc-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doc-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f080;
}

.doc-checklist__item:last-child {
  border-bottom: none;
}

.doc-checklist__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-checklist__icon--done {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
}

.doc-checklist__icon--pending {
  background: #fef3c7;
  color: #d97706;
}

.doc-checklist__icon--missing {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
}

.doc-checklist__name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.doc-checklist__status--done {
  font-size: 12px;
  color: hsl(var(--success));
}

.doc-checklist__status--pending {
  font-size: 12px;
  color: #d97706;
}

.doc-checklist__status--missing {
  font-size: 12px;
  color: hsl(var(--danger));
}

.locked-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.locked-section-card {
  padding: 40px;
  text-align: center;
  border-radius: 20px;
  background: #f1f5f980;
  border: 2px dashed hsl(var(--border));
}

.locked-section-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: hsl(var(--muted-foreground));
}

.locked-section-card__title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 8px;
}

.locked-section-card__desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  max-width: 200px;
  margin: 0 auto;
}

.property-info-card {
  background: #ffffffb3;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #e2e8f0cc;
  box-shadow: 0 8px 32px #0000000a;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.property-info-card__section-title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 20px;
}

.property-info-card__photo {
  width: 100%;
  height: 180px;
  background: hsl(var(--border));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  gap: 8px;
  margin-bottom: 20px;
}

.property-info-card__address {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 4px;
}

.property-info-card__details {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 8px;
}

.property-info-card__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--portal-candidate);
}

.property-info-card__charges {
  font-size: 13px;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}

.candidate-footer-info {
  text-align: center;
  padding: 32px 0;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.badge-step-analyse {
  background: #e0f2fe;
  color: #0284c7;
  border-radius: 9999px;
  padding: 3px 12px;
  font-weight: 600;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}

.badge-teal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: #0d94881f;
  color: var(--portal-teal);
}

.card-section {
  padding: 28px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.progress-bar-lg {
  height: 10px;
  background: var(--neutral-200);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar-fill.teal {
  height: 100%;
  border-radius: 9999px;
  background: var(--portal-teal);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.teal-glow {
  background: #0d94880a;
}

.tracking-glow-top {
  width: 500px;
  height: 500px;
  top: -120px;
  right: -100px;
}

.tracking-glow-bottom {
  width: 400px;
  height: 400px;
  bottom: 300px;
  left: -120px;
}

.animate-delay-5 {
  animation-delay: .4s;
}

.pct-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.pct-circle-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.pct-circle-inner {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--portal-teal);
  letter-spacing: -.5px;
  z-index: 1;
}

.progress-section {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.progress-main {
  flex: 1;
  min-width: 200px;
}

.progress-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--portal-teal);
  letter-spacing: -1.5px;
  line-height: 1;
}

.progress-value span {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0;
}

.progress-label {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
  margin-bottom: 12px;
}

.progress-breakdown {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.progress-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.progress-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.progress-stat-dot.done {
  background: var(--portal-teal);
}

.progress-stat-dot.pending {
  background: #d97706;
}

.doc-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #e2e8f080;
}

.doc-row:last-child {
  border-bottom: none;
}

.doc-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.doc-status-icon.done {
  background: var(--success-light);
  color: var(--success);
}

.doc-status-icon.pending {
  background: #fef3c7;
  color: #d97706;
}

.doc-content {
  flex: 1;
  min-width: 0;
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
}

.doc-description {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.doc-date {
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.doc-replace-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--portal-teal);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .15s;
  text-decoration: none;
}

.doc-replace-link:hover {
  color: var(--portal-teal-hover);
  text-decoration: underline;
}

.doc-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.upload-area-compact {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
  min-width: 220px;
  background: none;
}

.upload-area-compact:hover {
  border-color: var(--portal-teal);
  background: #f0fdfa66;
}

.upload-area-compact .upload-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
}

.upload-area-compact .upload-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 2px;
}

.upload-area-compact .upload-subtitle {
  font-size: 11px;
  color: var(--muted-foreground);
}

.optional-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.optional-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  color: var(--muted-foreground);
}

.file-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--success-light);
  color: var(--success);
  font-size: 11px;
  font-weight: 500;
}

.success-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: #0d948814;
  border: 1px solid #0d948833;
}

.success-banner-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--portal-teal-muted);
  color: var(--portal-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-banner-content {
  flex: 1;
}

.success-banner-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--portal-teal);
  margin-bottom: 4px;
}

.success-banner-text {
  font-size: 13px;
  color: var(--muted-foreground);
}

.confetti-container {
  position: relative;
  overflow: visible;
  margin-bottom: 24px;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  animation: 2s ease-out forwards confettiFall;
}

.confetti:first-child {
  left: 10%;
  top: -10px;
  background: var(--portal-teal);
  animation-delay: 0s;
  transform: rotate(15deg);
}

.confetti:nth-child(2) {
  left: 25%;
  top: -15px;
  background: #f5b927;
  animation-delay: .1s;
  transform: rotate(-20deg);
  width: 6px;
  height: 10px;
}

.confetti:nth-child(3) {
  left: 40%;
  top: -8px;
  background: #3b82f6;
  animation-delay: .2s;
  transform: rotate(45deg);
}

.confetti:nth-child(4) {
  left: 55%;
  top: -12px;
  background: #ec4899;
  animation-delay: .15s;
  transform: rotate(-10deg);
  width: 10px;
  height: 6px;
}

.confetti:nth-child(5) {
  left: 70%;
  top: -10px;
  background: var(--portal-teal);
  animation-delay: 50ms;
  transform: rotate(30deg);
}

.confetti:nth-child(6) {
  left: 85%;
  top: -14px;
  background: #f5b927;
  animation-delay: .25s;
  transform: rotate(-35deg);
  width: 6px;
  height: 8px;
}

.confetti:nth-child(7) {
  left: 15%;
  top: -6px;
  background: #8b5cf6;
  animation-delay: .18s;
  transform: rotate(60deg);
}

.confetti:nth-child(8) {
  left: 60%;
  top: -16px;
  background: #10b981;
  animation-delay: 80ms;
  transform: rotate(-45deg);
  width: 7px;
  height: 7px;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0)rotate(0)scale(1);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(60px)rotate(720deg)scale(.3);
  }
}

.animate-in {
  animation: .4s ease-out both fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.animate-delay-1 {
  animation-delay: 80ms;
}

.animate-delay-2 {
  animation-delay: .16s;
}

.animate-delay-3 {
  animation-delay: .24s;
}

.animate-delay-4 {
  animation-delay: .32s;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
}

.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.workflow-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline:before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 1;
}

.timeline-date {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.timeline-content {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}

.timeline-detail {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.status-hero {
  padding: 40px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.status-hero:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #0d94880f;
  pointer-events: none;
}

.status-hero:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #0d94880a;
  pointer-events: none;
}

.status-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--portal-teal-muted);
  color: var(--portal-teal);
  margin-bottom: 16px;
  position: relative;
}

.status-label-main {
  font-size: 28px;
  font-weight: 800;
  color: var(--portal-teal);
  letter-spacing: -.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--portal-teal);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.pulse-dot:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #0d94884d;
  animation: 2s ease-out infinite pulse-ring;
}

@keyframes pulse-ring {
  0% {
    transform: scale(.8);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.status-description {
  font-size: 15px;
  color: var(--muted-foreground);
  margin-bottom: 12px;
  line-height: 1.5;
}

.status-since {
  font-size: 13px;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d948814;
  padding: 4px 14px;
  border-radius: 9999px;
}

.guidance-card {
  padding: 28px;
  margin-bottom: 20px;
}

.guidance-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guidance-text {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 16px;
}

.guidance-eta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--portal-teal-muted);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-teal);
}

.guidance-action-link {
  margin-top: 16px;
}

.guidance-action-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-teal);
  text-decoration: none;
  transition: color .2s;
}

.guidance-action-text:hover {
  color: var(--portal-teal-hover);
}

.workflow-section {
  padding: 28px;
  margin-bottom: 20px;
}

.workflow-section .section-title {
  margin-bottom: 24px;
}

.workflow-simplified {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 0 8px;
}

.workflow-simplified .ws-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.ws-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: all .2s;
  position: relative;
}

.ws-step-dot.completed {
  background: var(--success);
}

.ws-step-dot.active {
  background: var(--portal-teal);
  box-shadow: 0 0 0 5px #0d948833, 0 0 20px #0d948826;
  transform: scale(1.15);
  animation: 2.5s ease-in-out infinite active-glow;
}

@keyframes active-glow {
  0%, 100% {
    box-shadow: 0 0 0 5px #0d948833, 0 0 20px #0d948826;
  }

  50% {
    box-shadow: 0 0 0 8px #0d948826, 0 0 30px #0d948833;
  }
}

.ws-step-dot.pending {
  background: var(--neutral-200, #e2e8f0);
  color: var(--neutral-400, #94a3b8);
}

.ws-step-number {
  font-size: 13px;
}

.ws-step-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  color: var(--muted-foreground);
  max-width: 100px;
  line-height: 1.4;
}

.ws-step-label.completed {
  color: var(--success);
}

.ws-step-label.active {
  color: var(--portal-teal);
  font-weight: 700;
}

.ws-connector {
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  right: calc(18px - 50%);
  height: 3px;
  border-radius: 2px;
  z-index: 0;
}

.ws-connector.done {
  background: var(--success);
}

.ws-connector.in-progress {
  background: var(--success);
}

.ws-connector.upcoming {
  background: var(--neutral-200, #e2e8f0);
}

.timeline-section {
  padding: 28px;
  margin-bottom: 20px;
}

.timeline-dot.teal {
  background: var(--portal-teal);
}

.timeline-dot.green {
  background: var(--success);
}

.timeline-dot.blue {
  background: #3b82f6;
}

.timeline-dot.purple {
  background: #8b5cf6;
}

.timeline-dot.gray {
  background: #94a3b8;
}

.timeline-dot.red {
  background: #ef4444;
}

.property-reminder {
  padding: 24px;
  margin-bottom: 20px;
}

.property-reminder-title {
  margin-bottom: 16px;
}

.property-mini {
  display: flex;
  gap: 16px;
  align-items: center;
}

.property-mini-photo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--neutral-200, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.property-mini-photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
}

.property-mini-info {
  flex: 1;
  min-width: 0;
}

.property-mini-address {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.property-mini-details {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.property-mini-owner {
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-footer {
  text-align: center;
  padding: 32px 0 16px;
}

.contact-footer a {
  font-size: 13px;
  color: var(--portal-teal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  text-decoration: none;
}

.contact-footer a:hover {
  color: var(--portal-teal-hover);
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot:before, .ws-step-dot.active, .confetti, .animate-in {
    animation: none !important;
  }
}

@media (width <= 767px) {
  .locked-grid {
    grid-template-columns: 1fr;
  }

  .candidate-layout {
    padding: 20px;
  }

  .candidate-header {
    padding: 0 16px;
  }

  .greeting-banner {
    padding: 24px;
  }

  .locked-section-card {
    padding: 24px;
  }

  .doc-row {
    flex-direction: column;
  }

  .doc-action {
    width: 100%;
  }

  .upload-area-compact {
    min-width: unset;
    width: 100%;
  }

  .progress-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .status-hero {
    padding: 28px 20px;
  }

  .status-label-main {
    font-size: 22px;
  }

  .workflow-simplified {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .ws-step {
    min-width: 80px;
  }

  .property-mini {
    flex-direction: column;
    text-align: center;
  }

  .property-mini-owner {
    justify-content: center;
  }
}


/* [project]/src/styles/pages/candidate-transition.css [app-client] (css, ) */
.accept-modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal, 40);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.accept-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px #0000001a, 0 8px 24px #0000000f;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  animation: .4s ease-out both fadeInUp;
}

.accept-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  margin-bottom: 20px;
}

.accept-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
}

.accept-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s;
}

.accept-modal__close:hover {
  background: var(--neutral-100);
}

.accept-modal__close:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.accept-modal__body {
  padding: 0 28px;
}

.accept-modal__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-light);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: .6s cubic-bezier(.34, 1.56, .64, 1) celebrate;
}

.accept-modal__congrats {
  font-size: 22px;
  font-weight: 800;
  color: var(--foreground);
  text-align: center;
  margin-bottom: 8px;
}

.accept-modal__desc {
  font-size: 14px;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 24px;
}

.accept-modal__section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 12px;
}

.accept-modal__checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s;
}

.accept-modal__checkbox-option:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-100);
}

.accept-modal__checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}

.accept-modal__checkbox--checked {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #fff;
}

.accept-modal__checkbox-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}

.accept-modal__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.accept-modal__footer {
  padding: 20px 28px 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.accept-summary-card {
  background: #ffffff80;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #fff6;
  box-shadow: 0 4px 6px -1px #00000005;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.accept-summary-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

.accept-summary-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accept-summary-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.accept-summary-card__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.accept-summary-card__value--green {
  color: var(--success);
}

.accept-summary-card__divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.transition-action-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.transition-action-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.5;
}

.transition-action-list__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success-light);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.bulk-reject-prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--warning-light);
  border: 1px solid #e76f5133;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
}

.bulk-reject-prompt__icon {
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.bulk-reject-prompt__content {
  flex: 1;
  min-width: 0;
}

.bulk-reject-prompt__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.bulk-reject-prompt__desc {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.bulk-reject-prompt__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.bulk-reject-prompt__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s;
}

.bulk-reject-prompt__close:hover {
  background: #0000000f;
}

.welcome-banner {
  background: #f0fdfacc;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #0d948833;
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  animation: .4s ease-out both fadeInUp;
}

.welcome-banner__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
}

.welcome-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--portal-teal-muted);
  color: var(--portal-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.welcome-banner__title-group {
  flex: 1;
  min-width: 0;
  padding-right: 32px;
}

.welcome-banner__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 4px;
}

.welcome-banner__property {
  font-size: 13px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome-banner__type-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--portal-teal);
  background: var(--portal-teal-muted);
  padding: 2px 8px;
  border-radius: 4px;
}

.welcome-banner__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s;
}

.welcome-banner__close:hover {
  background: #0000000f;
}

.welcome-banner__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 60px;
}

.welcome-banner__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.welcome-banner__step svg {
  color: var(--portal-teal);
  flex-shrink: 0;
}

@keyframes celebrate {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .accept-modal__success-icon, .accept-modal, .welcome-banner {
    animation: none !important;
  }
}

@media (width <= 767px) {
  .accept-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
  }

  .accept-summary-card__grid {
    grid-template-columns: 1fr;
  }

  .bulk-reject-prompt {
    flex-direction: column;
  }

  .bulk-reject-prompt__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .welcome-banner__steps {
    padding-left: 0;
  }
}


/* [project]/src/styles/pages/candidate-rejection.css [app-client] (css, ) */
.candidate-layout--rejection {
  position: relative;
  min-height: 100%;
  padding: 56px 32px 80px;
  overflow-x: hidden;
  background: #fff;
}

@media (width <= 1023px) {
  .candidate-layout--rejection {
    padding: 36px 24px 60px;
  }
}

@media (width <= 767px) {
  .candidate-layout--rejection {
    padding: 24px 18px 110px;
  }
}

.candidate-layout--rejection .focus-col {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.candidate-layout--rejection .card-section {
  margin-bottom: 24px;
}

.rejection-banner {
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
}

.rejection-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0f0c090d;
  border: 1px solid #0f0c0914;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.rejection-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 12px;
}

.reusable-space-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--portal-teal-muted);
  background: #0d94880f;
}

.reusable-space-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: #0d94881a;
  border: 1px solid var(--portal-teal-muted);
  color: var(--portal-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reusable-space-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
}

.reusable-space-text {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

.reusable-space-text strong {
  color: var(--portal-teal-hover);
  font-weight: 600;
}

.rejection-message {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 16px;
}

.rejection-address {
  color: var(--foreground);
  font-weight: inherit;
}

.rejection-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
}

.download-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #0f0c090f;
  flex-wrap: wrap;
}

.download-section-head-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.download-section-head-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: #0d94881a;
  border: 1px solid var(--portal-teal-muted);
  color: var(--portal-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.download-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--portal-teal);
  color: #fff;
  border: 1px solid var(--portal-teal);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}

.download-all-btn:hover:not(:disabled) {
  background: var(--portal-teal-hover);
  transform: translateY(-1px);
}

.download-all-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.download-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.download-section-desc {
  font-size: 13px;
  color: var(--muted-foreground);
}

.doc-download-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f080;
}

.doc-download-item:last-child {
  border-bottom: none;
}

.doc-download-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.doc-download-info {
  flex: 1;
  min-width: 0;
}

.doc-download-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
}

.doc-download-meta {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.doc-download-action {
  flex-shrink: 0;
}

.doc-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--portal-teal);
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: background .15s;
  text-decoration: none;
}

.doc-download-link:hover {
  background: var(--portal-teal-muted);
}

.doc-download-empty {
  font-size: 13px;
  color: var(--muted-foreground);
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

.doc-download-divider {
  margin: 20px 0;
}

.rgpd-card {
  padding: 24px;
  background: #0f0c0905;
  border: 1px solid #0f0c0914;
  margin-bottom: 24px;
}

.rgpd-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.rgpd-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: #0f0c090d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.candidate-layout--rejection .progress-bar-fill.blue {
  background: var(--portal-teal);
}

.rgpd-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.rgpd-text {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.rgpd-deletion-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-top: 12px;
}

.rgpd-progress {
  margin-top: 16px;
}

.rgpd-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.rgpd-progress-label strong {
  color: var(--foreground);
  font-weight: 600;
}

.locked-grid-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.locked-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.locked-card {
  padding: 24px;
  text-align: center;
  border-radius: var(--radius-xl);
  background: #f1f5f999;
  border: 2px dashed var(--border);
  transition: none;
}

.locked-card:hover {
  background: #f1f5f999;
  box-shadow: none;
  transform: none;
}

.locked-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--neutral-400);
}

.locked-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-400);
  margin-bottom: 6px;
}

.locked-card-desc {
  font-size: 12px;
  color: var(--neutral-400);
}

.locked-card--readonly {
  border-color: var(--portal-teal-muted);
  background: #f0fdfa4d;
}

.locked-card--readonly .locked-card-icon {
  background: var(--portal-teal-muted);
  color: var(--portal-teal);
}

.locked-card--readonly .locked-card-title {
  color: var(--muted-foreground);
}

.locked-card--readonly .locked-card-desc {
  color: var(--portal-teal);
  font-weight: 500;
}

.rejection-help-footer {
  text-align: center;
  padding: 32px 0 16px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.rejection-help-footer a {
  color: var(--portal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rejection-help-footer a:hover {
  color: var(--portal-teal-hover);
}

.ambient-glow--rejection-red {
  background: #0d94880d;
}

.ambient-glow-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.ambient-glow-2 {
  width: 500px;
  height: 500px;
  top: 50px;
  left: -200px;
}

.ambient-glow-3 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: -50px;
}

.rejection-error {
  padding: 32px;
  text-align: center;
}

.doc-download-name, .doc-download-meta {
  overflow-wrap: anywhere;
}

@media (width <= 768px) {
  .locked-grid {
    grid-template-columns: 1fr;
  }

  .rejection-banner {
    padding: 24px 16px;
  }

  .download-section-header {
    flex-direction: column;
    align-items: stretch;
  }

  .download-all-btn {
    width: 100%;
    justify-content: center;
  }

  .doc-download-item {
    flex-wrap: wrap;
  }

  .doc-download-info {
    flex-basis: calc(100% - 54px);
  }

  .doc-download-action {
    flex-basis: 100%;
    margin-top: 8px;
  }

  .doc-download-link {
    justify-content: center;
    width: 100%;
    background: var(--portal-teal-muted);
    min-height: 40px;
  }
}


/* [project]/src/styles/pages/candidate-consent.css [app-client] (css, ) */
.dossier-consent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--portal-teal-muted);
  background: #0d94880f;
}

.dossier-consent__title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
}

.dossier-consent__text {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0;
}

.dossier-consent__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dossier-consent__checkbox-label {
  font-size: 13px;
  color: hsl(var(--foreground));
  line-height: 1.5;
  cursor: pointer;
}

.dossier-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dossier-consent__btn-primary, .dossier-consent__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.dossier-consent__btn-primary {
  background: var(--portal-teal);
  border: 1px solid var(--portal-teal);
  color: #fff;
}

.dossier-consent__btn-primary:hover:not(:disabled) {
  background: var(--portal-teal-hover);
  border-color: var(--portal-teal-hover);
}

.dossier-consent__btn-primary:disabled {
  background: hsl(var(--border));
  border-color: hsl(var(--border));
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
}

.dossier-consent__btn-secondary {
  background: none;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.dossier-consent__btn-secondary:hover {
  border-color: var(--portal-teal-muted);
  color: var(--portal-teal-hover);
}

.dossier-consent--compact {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex-wrap: wrap;
}

.dossier-consent__icon {
  color: var(--portal-teal);
  flex-shrink: 0;
}

.dossier-consent__compact-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: hsl(var(--foreground));
}

.dossier-consent__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--portal-teal);
  text-decoration: none;
  white-space: nowrap;
}

.dossier-consent__link:hover {
  color: var(--portal-teal-hover);
  text-decoration: underline;
}

@media (width >= 768px) {
  .dossier-consent__actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .dossier-consent__btn-primary, .dossier-consent__btn-secondary {
    width: auto;
  }
}


/* [project]/src/styles/pages/candidate-dossier-ready.css [app-client] (css, ) */
.candidate-layout--dossier-ready {
  position: relative;
  min-height: 100%;
  padding: 56px 32px 80px;
  overflow-x: hidden;
  background: #fff;
}

@media (width <= 1023px) {
  .candidate-layout--dossier-ready {
    padding: 36px 24px 60px;
  }
}

@media (width <= 767px) {
  .candidate-layout--dossier-ready {
    padding: 24px 18px 110px;
  }
}

.candidate-layout--dossier-ready .focus-col {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.candidate-layout--dossier-ready .card-section {
  margin-bottom: 24px;
}

.dossier-ready__hero {
  padding: 36px 32px;
  margin-bottom: 24px;
}

.dossier-ready__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--portal-teal);
  margin-bottom: 10px;
}

.dossier-ready__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 12px;
}

.dossier-ready__text {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 0 20px;
}

.dossier-ready__hero-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dossier-ready__status {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  padding: 6px 16px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
}

.dossier-ready__manage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--portal-teal-muted);
  color: var(--portal-teal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.dossier-ready__manage-link:hover {
  background: var(--portal-teal-muted);
  transform: translateY(-1px);
}

.dossier-ready__section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 16px;
}

.dossier-ready__doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier-ready__summary-list {
  margin: 0;
}

.dossier-ready__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #0f0c090f;
}

.dossier-ready__summary-row:last-child {
  border-bottom: none;
}

.dossier-ready__summary-row dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.dossier-ready__summary-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--foreground);
  text-align: right;
  overflow-wrap: anywhere;
}

.dossier-ready__help-footer {
  text-align: center;
  padding: 32px 0 16px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.dossier-ready__help-footer a {
  color: var(--portal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dossier-ready__help-footer a:hover {
  color: var(--portal-teal-hover);
}

.dossier-ready__error {
  padding: 32px;
  text-align: center;
}

@media (width <= 767px) {
  .dossier-ready__hero {
    padding: 24px 20px;
  }

  .dossier-ready__summary-row {
    flex-direction: column;
    gap: 4px;
  }

  .dossier-ready__summary-row dd {
    text-align: left;
  }
}


/* [project]/src/styles/features/manager-onboarding.css [app-client] (css, ) */
.manager-onboarding-welcome, .manager-registration-form, .manager-onboarding-confirmation, .manager-login-accept, .manager-auto-accept__error, .manager-onboarding-flow__accepted, .invitation-page-content__accepted {
  background: #f8f6ffe0;
  border: 1px solid #7c3aed2e;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.manager-onboarding-confirmation {
  background: #f0fdf4e0;
  border: 1px solid #2d6a4f2e;
}

.manager-auto-accept__error {
  background: #fef2f2d9;
  border: 1px solid #ef444433;
}

.invitation-page-content__accepted {
  background: #f0fdfad9;
  border: 1px solid #0d948833;
}

.manager-onboarding-welcome__icon, .manager-login-accept__icon {
  background: #7c3aed14;
}

.manager-onboarding-confirmation__role {
  background: #7c3aed14;
  color: #6d28d9;
}

.manager-onboarding-confirmation__permissions {
  background: #f8fafccc;
}

.invitation-page__glow--top {
  background: radial-gradient(circle, #0d948812 0%, #0000 70%);
}

.invitation-page__glow--bottom {
  background: radial-gradient(circle, #0d94880d 0%, #0000 70%);
}


/* [project]/src/styles/pages/projects.css [app-client] (css, ) */
.projects-page, .project-phases, .project-wizard, .fiche-projet-page, .project-onboarding, .action-panel, .step-detail, .structuring-action-form {
  --phase-1: #b2345e;
  --phase-1-light: #faeff3;
  --phase-2: #9739c6;
  --phase-2-light: #f7effa;
  --primary: 340 55% 45%;
  --primary-foreground: 0 0% 100%;
}

.projects-page .kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.projects-page .kpi-card {
  padding: 20px 24px;
  border-radius: var(--radius-xl, 20px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.projects-page .kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.projects-page .kpi-icon.blue {
  background: var(--phase-2-light);
  color: var(--phase-2);
}

.projects-page .kpi-icon.green {
  background: var(--phase-3-light);
  color: var(--phase-3);
}

.projects-page .kpi-icon.gold {
  background: var(--phase-4-light);
  color: var(--phase-4);
}

.projects-page .kpi-icon.purple {
  background: var(--phase-1-light);
  color: var(--phase-1);
}

.projects-page .kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-foreground);
  margin-bottom: 2px;
}

.projects-page .kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: hsl(var(--foreground));
}

.projects-page .kpi-value.green {
  color: var(--phase-3);
}

.projects-page .kpi-value.gold {
  color: var(--phase-4);
}

.projects-page .kpi-value.purple {
  color: var(--phase-1);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.project-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glass-lg);
}

.project-card__top {
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-card__title {
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--foreground));
  padding: 0 24px;
  margin-top: 16px;
  line-height: 1.3;
}

.project-card__body {
  padding: 16px 24px;
  flex: 1;
}

.project-card__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.project-card__progress-pct {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.project-card__step {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 10px;
  line-height: 1.4;
}

.project-card__step--archived {
  margin-top: 8px;
}

.project-card__step strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.project-card .progress-bar {
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.project-card .progress-bar--archived {
  margin-top: 10px;
}

.project-card .progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--phase-1);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.project-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f099;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.project-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-card__meta-item svg {
  width: 14px;
  height: 14px;
  opacity: .6;
}

.project-card__meta-time {
  margin-left: auto;
  font-style: italic;
  font-size: 11px;
}

.project-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 24px;
}

.project-card__actions .btn-primary-action {
  flex: 1;
}

.badge-phase-1 {
  background: var(--phase-1-light);
  color: var(--phase-1);
}

.badge-phase-2 {
  background: var(--phase-2-light);
  color: var(--phase-2);
}

.badge-phase-3 {
  background: var(--phase-3-light);
  color: var(--phase-3);
}

.badge-phase-4 {
  background: var(--phase-4-light);
  color: var(--phase-4);
}

.badge-phase-5 {
  background: var(--phase-5-light);
  color: var(--phase-5);
}

.badge-accent {
  background: #f5b92726;
  color: #92610a;
}

.project-card--archived {
  opacity: .55;
  filter: saturate(.3);
}

.project-card--archived:hover {
  opacity: .8;
  filter: saturate(.5);
}

.archived-section {
  margin-top: 8px;
}

.archived-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}

.archived-toggle:hover {
  color: hsl(var(--foreground));
}

.archived-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.archived-label {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

@media (width <= 1200px) {
  .projects-grid, .archived-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-page .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 768px) {
  .projects-grid, .archived-cards {
    grid-template-columns: 1fr;
  }

  .projects-page .kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* [project]/src/styles/pages/step-detail.css [app-client] (css, ) */
.project-phases__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.project-phases__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}

.project-phases__back:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.project-phases__title {
  font-size: 24px;
  font-weight: 800;
  color: hsl(var(--foreground));
  line-height: 1.2;
}

.project-phases__subtitle {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

.project-phases__progress {
  padding: 28px 32px;
  margin-bottom: 24px;
}

.project-phases__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-phases__progress-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.project-phases__progress-pct {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--phase-1), var(--phase-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.project-phases__progress-text {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.project-phases__progress-sub {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.project-phases__progress-bar {
  height: 12px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.project-phases__progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--phase-1), var(--phase-2));
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

.project-phases__settings-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}

.project-phases__settings-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.project-phases__phase-dots {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f080;
}

.project-phases__dots-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-phases__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid;
  position: relative;
  flex-shrink: 0;
}

.project-phases__dot--completed {
  background: var(--dot-color);
  border-color: var(--dot-color);
}

.project-phases__dot--in-progress {
  border-color: var(--dot-color);
  background: none;
  overflow: hidden;
}

.project-phases__dot--in-progress:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--dot-color);
}

.project-phases__dot--pending {
  border-color: var(--neutral-300, #94a3b880);
  background: none;
}

.project-phases__dots-label {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}

.project-phases__next-action {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  border-left: 3px solid var(--phase-1);
}

.project-phases__next-action-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-phases__next-action-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--phase-1);
}

.project-phases__next-action-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.project-phases__next-action-desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-phases__next-action-btn {
  flex-shrink: 0;
}

.phases-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phase-card {
  overflow: hidden;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.phase-card:hover {
  box-shadow: var(--shadow-glass-lg);
}

.phase-card--locked {
  opacity: .65;
}

.phase-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.phase-card__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.phase-card__number--1 {
  background: var(--phase-1);
}

.phase-card__number--2 {
  background: var(--phase-2);
}

.phase-card__number--3 {
  background: var(--phase-3);
}

.phase-card__number--4 {
  background: var(--phase-4);
}

.phase-card__number--5 {
  background: var(--phase-5);
}

.phase-card__info {
  flex: 1;
  min-width: 0;
}

.phase-card__name {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 10px;
}

.phase-card__range {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  color: hsl(var(--muted-foreground));
}

.phase-card__progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.phase-card__progress-bar {
  flex: 1;
  max-width: 200px;
  height: 5px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.phase-card__progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .6s;
}

.phase-card__progress-fill--1 {
  background: var(--phase-1);
}

.phase-card__progress-fill--2 {
  background: var(--phase-2);
}

.phase-card__progress-fill--3 {
  background: var(--phase-3);
}

.phase-card__progress-fill--4 {
  background: var(--phase-4);
}

.phase-card__progress-fill--5 {
  background: var(--phase-5);
}

.phase-card__progress-text {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  white-space: nowrap;
}

.phase-card__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.phase-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.phase-card__status--completed {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
}

.phase-card__status--in-progress {
  background: var(--info-light);
  color: var(--info);
}

.phase-card__status--pending {
  background: var(--neutral-100);
  color: hsl(var(--muted-foreground));
}

.phase-card__chevron {
  width: 20px;
  height: 20px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  transition: transform .2s;
}

.phase-card__chevron--expanded {
  transform: rotate(180deg);
}

.phase-card__body {
  padding: 0 24px 24px;
  border-top: 1px solid hsl(var(--border));
  overflow: hidden;
}

.phase-card__step-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.phase-card__step-list--timeline {
  position: relative;
}

.step-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f080;
  cursor: pointer;
  transition: background .15s;
}

.step-list-item--last {
  border-bottom: none;
}

.step-list-item:hover {
  background: #f8fafc80;
}

.step-list-item--current {
  background: var(--phase-1-light);
  margin: 0 -24px;
  padding: 16px 24px;
  border-left: 3px solid var(--phase-1);
  border-bottom-color: #e2e8f04d;
}

.step-list-item--current:hover {
  background: var(--phase-1-light);
}

.step-list-item__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.step-list-item__line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--neutral-200);
  margin-top: 4px;
}

.step-list-item__line--completed {
  background: hsl(var(--success) / .35);
}

.step-list-item__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  border: 2.5px solid var(--neutral-300);
  background: var(--neutral-100, #f1f5f9cc);
  color: #0000;
  transition: all .2s;
}

.step-list-item__check:hover {
  border-color: hsl(var(--success));
  background: hsl(var(--success) / .12);
  color: hsl(var(--success));
  transform: scale(1.1);
  box-shadow: 0 0 0 4px hsl(var(--success) / .1);
}

.step-list-item__check--completed {
  background: hsl(var(--success));
  border-color: hsl(var(--success));
  color: #fff;
  box-shadow: 0 0 0 3px hsl(var(--success) / .15);
}

.step-list-item__check--completed:hover {
  opacity: .85;
  background: hsl(var(--success));
  transform: scale(1.1);
  box-shadow: 0 0 0 4px hsl(var(--success) / .15);
}

.step-list-item__check--current {
  border-color: var(--phase-1);
  background: #b2345e14;
  color: #b2345e4d;
  animation: 2s infinite step-pulse;
}

@keyframes step-pulse {
  0%, 100% {
    box-shadow: 0 0 #b2345e66;
  }

  50% {
    box-shadow: 0 0 0 6px #b2345e00;
  }
}

.step-list-item__check--pending {
  background: var(--neutral-100, #f1f5f9cc);
  border-color: var(--neutral-300);
  border-style: dashed;
}

.step-list-item__info {
  flex: 1;
  min-width: 0;
}

.step-list-item__number {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  display: block;
  margin-bottom: 2px;
}

.step-list-item__title {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.step-list-item__title--completed {
  color: hsl(var(--muted-foreground));
}

.step-list-item__title--current {
  font-weight: 700;
}

.step-list-item__desc {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.step-list-item__action {
  flex-shrink: 0;
  align-self: center;
}

.step-list-item__open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-lg, 16px);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .2s;
  background: var(--phase-1);
  color: #fff;
}

.step-list-item__open-btn:hover {
  filter: brightness(.9);
  transform: translateX(2px);
}

.step-detail__header {
  padding: 28px;
  margin-bottom: 20px;
}

.step-detail__header-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.step-detail__back {
  width: 36px;
  height: 36px;
  border-radius: var(--radius, 8px);
  border: 1px solid hsl(var(--border));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: all .2s;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.step-detail__back:hover {
  background: var(--neutral-50);
  color: hsl(var(--foreground));
}

.step-detail__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

.step-detail__number--1 {
  background: var(--phase-1);
  box-shadow: 0 4px 12px #8b5cf640;
}

.step-detail__number--2 {
  background: var(--phase-2);
  box-shadow: 0 4px 12px #2563eb40;
}

.step-detail__number--3 {
  background: var(--phase-3);
  box-shadow: 0 4px 12px #10b98140;
}

.step-detail__number--4 {
  background: var(--phase-4);
  box-shadow: 0 4px 12px #f59e0b40;
}

.step-detail__number--5 {
  background: var(--phase-5);
  box-shadow: 0 4px 12px #ef444440;
}

.step-detail__header-info {
  flex: 1;
  min-width: 0;
}

.step-detail__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.step-detail__title {
  font-size: 22px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}

.step-detail__description {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 640px;
}

.step-detail__personalization {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: hsl(var(--primary) / .08);
  border: 1px solid hsl(var(--primary) / .22);
}

.step-detail__personalization-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: hsl(var(--primary));
}

.step-detail__personalization-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.step-detail__personalization-title {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--primary));
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}

.step-detail__personalization-body {
  font-size: 14px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  margin: 0;
}

.step-detail__meta-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.step-detail__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
}

.step-detail__status--phase-1 {
  background: var(--phase-1-light);
  color: var(--phase-1);
}

.step-detail__status--phase-2 {
  background: var(--phase-2-light);
  color: var(--phase-2);
}

.step-detail__status--phase-3 {
  background: var(--phase-3-light);
  color: var(--phase-3);
}

.step-detail__status--phase-4 {
  background: var(--phase-4-light);
  color: var(--phase-4);
}

.step-detail__status--phase-5 {
  background: var(--phase-5-light);
  color: var(--phase-5);
}

.step-detail__progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 320px;
}

.step-detail__progress-label {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.step-detail__progress-bar {
  flex: 1;
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.step-detail__progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.step-detail__progress-fill--1 {
  background: var(--phase-1);
}

.step-detail__progress-fill--2 {
  background: var(--phase-2);
}

.step-detail__progress-fill--3 {
  background: var(--phase-3);
}

.step-detail__progress-fill--4 {
  background: var(--phase-4);
}

.step-detail__progress-fill--5 {
  background: var(--phase-5);
}

.step-detail__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-edu {
  border-radius: var(--radius-xl, 20px);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.step-edu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: background .15s;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.step-edu__header:hover {
  background: #f8fafc80;
}

.step-edu__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-edu__title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.step-edu__chevron {
  width: 20px;
  height: 20px;
  color: hsl(var(--muted-foreground));
  transition: transform .3s;
}

.step-edu__chevron--expanded {
  transform: rotate(180deg);
}

.step-edu__preview {
  padding: 0 28px 16px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  border-top: 1px solid #e2e8f080;
  padding-top: 16px;
}

.step-edu__body {
  padding: 0 28px 24px;
  border-top: 1px solid #e2e8f080;
  overflow: hidden;
}

.step-edu__tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f04d;
}

.step-edu__tip:last-child {
  border-bottom: none;
}

.step-edu__tip-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 600;
}

.step-edu__tip-icon--phase-1 {
  background: var(--phase-1-light);
  color: var(--phase-1);
}

.step-edu__tip-icon--phase-2 {
  background: var(--phase-2-light);
  color: var(--phase-2);
}

.step-edu__tip-icon--phase-3 {
  background: var(--phase-3-light);
  color: var(--phase-3);
}

.step-edu__tip-icon--phase-4 {
  background: var(--phase-4-light);
  color: var(--phase-4);
}

.step-edu__tip-icon--phase-5 {
  background: var(--phase-5-light);
  color: var(--phase-5);
}

.step-edu__tip-text {
  font-size: 13px;
  color: hsl(var(--foreground));
  line-height: 1.6;
}

.step-edu__tip-text strong {
  font-weight: 600;
}

.step-detail-actions {
  padding: 24px 28px;
  margin-bottom: 20px;
}

.step-detail-actions__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.step-detail-actions__header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: hsl(var(--foreground));
}

.step-detail-actions__title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
}

.step-detail-actions__subtitle {
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}

.step-detail-actions__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}

.step-detail-actions__progress {
  margin-bottom: 20px;
}

.step-detail-actions__progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #94a3b81f;
  overflow: hidden;
}

.step-detail-actions__progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}

.step-detail-actions__progress-fill--1 {
  background: var(--phase-1, #6366f1);
}

.step-detail-actions__progress-fill--2 {
  background: var(--phase-2, #2563eb);
}

.step-detail-actions__progress-fill--3 {
  background: var(--phase-3, #f59e0b);
}

.step-detail-actions__progress-fill--4 {
  background: var(--phase-4, #10b981);
}

.step-detail-actions__progress-fill--5 {
  background: var(--phase-5, #8b5cf6);
}

.step-detail-actions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-detail-actions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .15s;
}

.step-detail-actions__item:hover {
  background: #f8fafc99;
}

.step-detail-actions__item--done {
  opacity: .7;
}

.step-detail-actions__check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  border: 2px solid var(--neutral-300, #94a3b866);
  background: none;
  color: #0000;
  transition: all .2s;
}

.step-detail-actions__check:hover {
  border-color: hsl(var(--success));
  background: hsl(var(--success) / .08);
  color: hsl(var(--success));
  transform: scale(1.05);
}

.step-detail-actions__check--done {
  color: #fff;
  border-color: #0000;
}

.step-detail-actions__check--phase-1 {
  background: var(--phase-1, #6366f1);
}

.step-detail-actions__check--phase-2 {
  background: var(--phase-2, #2563eb);
}

.step-detail-actions__check--phase-3 {
  background: var(--phase-3, #f59e0b);
}

.step-detail-actions__check--phase-4 {
  background: var(--phase-4, #10b981);
}

.step-detail-actions__check--phase-5 {
  background: var(--phase-5, #8b5cf6);
}

.step-detail-actions__label {
  font-size: 14px;
  color: hsl(var(--foreground));
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.step-detail-actions__label--done {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}

.step-detail-actions__type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  background: #94a3b81a;
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.step-detail-actions__required {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--destructive, 0 84% 60%));
  flex-shrink: 0;
}

.step-detail__data {
  padding: 0;
}

.step-detail__data-header {
  padding: 24px 28px 0;
}

.step-detail__data-title {
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 4px;
}

.step-detail__data-subtitle {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.step-detail__data-tabs {
  padding: 16px 28px 0;
}

.step-detail__data-body {
  padding: 0 28px 28px;
}

.step-documents__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-documents__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-md, 12px);
  transition: background .15s;
  border: 1px solid #0000;
}

.step-documents__row:hover {
  background: var(--neutral-50);
  border-color: hsl(var(--border));
}

.step-documents__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius, 8px);
  background: var(--phase-2-light);
  color: var(--phase-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-documents__info {
  flex: 1;
  min-width: 0;
}

.step-documents__name {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-documents__meta {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-documents__separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--neutral-300);
}

.step-documents__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.step-documents__empty, .step-notes__empty, .step-detail__links-empty {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  padding: 16px 0;
  text-align: center;
}

.step-documents__add-btn, .step-notes__add-btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-lg, 16px);
  border: 1px dashed hsl(var(--border));
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all .2s;
}

.step-documents__add-btn:hover, .step-notes__add-btn:hover {
  border-color: var(--phase-2);
  color: var(--phase-2);
  background: var(--phase-2-light);
}

.step-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-notes__item {
  padding: 14px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid hsl(var(--border));
  background: #fff;
}

.step-notes__content {
  font-size: 14px;
  color: hsl(var(--foreground));
  line-height: 1.6;
  white-space: pre-wrap;
}

.step-notes__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.step-notes__date {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

.step-notes__delete {
  opacity: .5;
  transition: opacity .2s;
}

.step-notes__delete:hover {
  opacity: 1;
}

.step-notes__form {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}

.step-notes__textarea {
  width: 100%;
  padding: 14px 16px;
  border: none;
  font-size: 14px;
  color: hsl(var(--foreground));
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.step-notes__textarea:focus {
  outline: none;
}

.step-notes__form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid hsl(var(--border));
  background: var(--neutral-50);
}

.step-detail__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-detail__link-row, .step-detail__resource-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid hsl(var(--border));
  background: #fff;
  transition: all .2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.step-detail__link-row:hover, .step-detail__resource-row:hover {
  border-color: var(--phase-2);
  box-shadow: 0 2px 8px #2563eb14;
  transform: translateX(4px);
}

.step-detail__link-icon, .step-detail__resource-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.step-detail__link-info, .step-detail__resource-info {
  flex: 1;
  min-width: 0;
}

.step-detail__link-name, .step-detail__resource-name {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
}

.step-detail__link-source, .step-detail__resource-source {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-detail__link-arrow, .step-detail__resource-arrow {
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  transition: color .2s;
}

.step-detail__link-row:hover .step-detail__link-arrow, .step-detail__resource-row:hover .step-detail__resource-arrow {
  color: var(--phase-2);
}

.step-detail__checklist {
  padding: 24px 28px;
}

.step-detail__checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.step-detail__checklist-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.step-detail__checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-detail__checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius, 8px);
  transition: background .15s;
}

.step-detail__checklist-item:hover {
  background: var(--neutral-50);
}

.step-detail__checklist-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-detail__checklist-check--done {
  background: hsl(var(--success));
  color: #fff;
}

.step-detail__checklist-check--pending {
  border: 2px solid var(--neutral-300);
  background: #fff;
}

.step-detail__checklist-label {
  font-size: 14px;
  color: hsl(var(--foreground));
  flex: 1;
}

.step-detail__checklist-item--done .step-detail__checklist-label {
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: var(--neutral-300);
}

.step-detail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-radius: var(--radius-xl, 20px);
  background: #fff;
  border: 1px solid hsl(var(--border));
}

.step-detail__validate-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-lg, 16px);
  border: 2px dashed var(--neutral-300);
  background: var(--neutral-100, #f1f5f9cc);
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.step-detail__validate-btn:hover {
  border-color: hsl(var(--success));
  border-style: solid;
  background: hsl(var(--success) / .1);
  color: hsl(var(--success));
  transform: scale(1.03);
  box-shadow: 0 0 0 4px hsl(var(--success) / .08);
}

.step-detail__validate-btn--completed {
  border-style: solid;
  border-color: hsl(var(--success));
  background: hsl(var(--success));
  color: #fff;
  box-shadow: 0 0 0 3px hsl(var(--success) / .15);
}

.step-detail__validate-btn--completed:hover {
  opacity: .85;
  background: hsl(var(--success));
  color: #fff;
  box-shadow: 0 0 0 4px hsl(var(--success) / .2);
}

.step-detail__validate-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.step-detail__complete-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-lg, 16px);
  border: 2px dashed var(--neutral-300);
  background: var(--neutral-100, #f1f5f9cc);
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
}

.step-detail__complete-btn:hover {
  border-color: hsl(var(--success));
  border-style: solid;
  background: hsl(var(--success) / .1);
  color: hsl(var(--success));
  transform: scale(1.03);
  box-shadow: 0 0 0 4px hsl(var(--success) / .08);
}

.step-detail__complete-btn--completed {
  border-style: solid;
  border-color: hsl(var(--success));
  background: hsl(var(--success));
  color: #fff;
  box-shadow: 0 0 0 3px hsl(var(--success) / .15);
}

.step-detail__complete-btn--completed:hover {
  opacity: .85;
  background: hsl(var(--success));
  color: #fff;
}

.step-detail__complete-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.step-detail__complete-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--neutral-300);
  background: #fff;
  color: #0000;
  flex-shrink: 0;
  transition: all .2s;
}

.step-detail__complete-btn:hover .step-detail__complete-check {
  border-color: hsl(var(--success));
  border-style: solid;
  color: hsl(var(--success));
  background: hsl(var(--success) / .1);
}

.step-detail__complete-check--done {
  border-style: solid;
  border-color: #fff;
  background: #ffffff40;
  color: #fff;
}

.step-detail__complete-btn--completed:hover .step-detail__complete-check--done {
  border-color: #fff;
  background: #ffffff4d;
  color: #fff;
}

.step-detail__resources {
  padding: 24px 28px;
}

.step-detail__resources-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.step-detail__resources-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (width <= 768px) {
  .step-detail__header-top {
    flex-direction: column;
    gap: 12px;
  }

  .step-detail__meta-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .step-documents__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .step-documents__actions {
    align-self: flex-end;
  }

  .step-detail__actions {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 100px;
  }

  .project-phases__progress-left {
    flex-direction: column;
    gap: 12px;
  }

  .phase-card__header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .phase-card__right {
    width: 100%;
    justify-content: flex-end;
  }

  .step-list-item--current {
    margin: 0 -16px;
    padding: 16px;
  }

  .project-phases__next-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .project-phases__next-action-btn {
    align-self: flex-end;
  }

  .project-phases__phase-dots {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .step-list-item__open-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  .step-tool-links__grid {
    grid-template-columns: 1fr;
  }

  .step-resources__sim-card {
    flex-direction: column;
    gap: 12px;
  }

  .step-resources__sim-actions {
    margin-left: 0;
  }

  .step-resources__article-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .step-resources__article-actions {
    margin-left: 0;
  }

  .sim-link-dialog {
    width: 95vw;
    max-height: 80vh;
  }
}

.step-tool-links {
  padding: 0;
}

.step-tool-links__header {
  padding: 24px 28px 0;
}

.step-tool-links__title {
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.step-tool-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px 28px 28px;
}

@media (width <= 1024px) {
  .step-tool-links__grid {
    grid-template-columns: 1fr;
  }
}

.step-tool-links__card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.step-tool-links__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass-lg);
}

.step-tool-links__icon {
  width: 32px;
  height: 32px;
  color: var(--phase-1);
  margin-bottom: 12px;
}

.step-tool-links__card-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}

.step-tool-links__card-desc {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  margin-bottom: 12px;
}

.step-tool-links__badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
  width: -moz-fit-content;
  width: fit-content;
}

.step-tool-links__badge--green {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #065f461a;
}

.step-tool-links__badge--purple {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #6d28d91a;
}

.step-tool-links__card-footer {
  margin-top: auto;
}

.step-resources {
  padding: 0;
}

.step-resources__header {
  padding: 24px 28px 0;
}

.step-resources__title {
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.step-resources__body {
  padding: 20px 28px 28px;
}

.step-resources__empty {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  text-align: center;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.step-resources__list {
  display: flex;
  flex-direction: column;
}

.step-resources__sim-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid hsl(var(--border));
}

.step-resources__sim-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-resources__sim-card:first-child {
  padding-top: 0;
}

.step-resources__sim-info {
  flex: 1;
  min-width: 0;
}

.step-resources__sim-title {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 6px;
}

.step-resources__sim-meta {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-resources__sim-sep {
  color: var(--neutral-300);
}

.step-resources__sim-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 16px;
}

.step-resources__article-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #e2e8f080;
}

.step-resources__article-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-resources__article-card:first-child {
  padding-top: 0;
}

.step-resources__article-info {
  flex: 1;
  min-width: 0;
}

.step-resources__article-title {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 4px;
}

.step-resources__article-meta {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.step-resources__article-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 16px;
}

.step-resources__save-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.step-resources__save-btn:hover {
  background: var(--neutral-100);
  color: hsl(var(--foreground));
}

.step-resources__article-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--phase-1);
  white-space: nowrap;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.step-resources__article-link:hover {
  color: hsl(var(--foreground));
}

.step-resources__ext-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}

.step-resources__ext-card:hover {
  border-color: var(--phase-1);
  box-shadow: 0 2px 8px #8b5cf614;
}

.step-resources__ext-title {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
}

.step-resources__ext-desc {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.step-documents__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.step-documents__count {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.step-documents__header-actions {
  display: flex;
  gap: 8px;
}

.step-documents__add-trigger {
  cursor: pointer;
}

.step-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-doc-icon--pdf {
  background: #fef2f2;
  color: #dc2626;
}

.step-doc-icon--img {
  background: #f0f9ff;
  color: #2563eb;
}

.step-doc-icon--doc {
  background: #eff6ff;
  color: #2563eb;
}

.step-doc-action {
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid hsl(var(--border));
  background: #fff;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.step-doc-action:hover {
  background: var(--neutral-50);
  color: hsl(var(--foreground));
  border-color: var(--neutral-300);
}

.step-doc-action--danger:hover {
  background: var(--danger-light, #fef2f2);
  color: var(--danger, #dc2626);
  border-color: #d628284d;
}

.step-doc-upload {
  margin-top: 16px;
  padding: 24px 16px;
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-md, 12px);
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}

.step-doc-upload:hover, .step-doc-upload--dragover {
  border-color: var(--phase-2);
  background: var(--phase-2-light);
}

.step-doc-upload--disabled {
  opacity: .5;
  cursor: not-allowed;
}

.step-doc-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.step-doc-upload__icon {
  color: hsl(var(--muted-foreground));
  margin-bottom: 4px;
}

.step-doc-upload__text {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.step-doc-upload__hint {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

.step-doc-upload__input {
  display: none;
}

.step-doc-upload__error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--danger, #dc2626);
}

.step-dates {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-dates__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-dates__label {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-dates__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-dates__input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 8px);
  font-size: 13px;
  color: hsl(var(--foreground));
  background: #fff;
  font-family: inherit;
  outline: none;
  transition: all .2s;
}

.step-dates__input:focus {
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px #0f172a14;
}

.step-dates__status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}

.step-dates__status--green {
  background: var(--success-light, #ecfdf5);
  color: var(--success, #059669);
}

.step-dates__status--red {
  background: var(--danger-light, #fef2f2);
  color: var(--danger, #dc2626);
}

.step-dates__status--orange {
  background: #fffbeb;
  color: #d97706;
}

.step-dates__status--muted {
  background: var(--neutral-100);
  color: hsl(var(--muted-foreground));
}

.step-dates__timeline {
  margin-top: 4px;
  padding: 16px;
  background: var(--neutral-50);
  border-radius: var(--radius-md, 12px);
}

.step-dates__timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 8px;
}

.step-dates__timeline-bar {
  position: relative;
  height: 6px;
  background: var(--neutral-200);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.step-dates__timeline-fill {
  height: 100%;
  background: var(--phase-2);
  border-radius: var(--radius-full, 9999px);
  transition: width .6s;
}

.step-dates__timeline-duration {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--phase-2);
  margin-top: 8px;
}

.step-notes__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.step-notes__count {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.step-notes__date {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  margin-bottom: 8px;
}

.step-notes__action-btn {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition: color .15s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.step-notes__action-btn:hover {
  color: hsl(var(--foreground));
}

.step-notes__action-btn--danger:hover {
  color: var(--danger, #dc2626);
}

.step-notes__checklist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 13px;
}

.step-notes__checkbox {
  font-size: 16px;
  line-height: 1;
}

.step-notes__checkbox--checked {
  color: var(--success, #059669);
}

.step-notes__bullet {
  padding: 2px 0 2px 4px;
  font-size: 13px;
}

.step-note-editor {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  margin-bottom: 12px;
}

.step-note-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: var(--neutral-50);
  border-bottom: 1px solid hsl(var(--border));
}

.step-note-editor__toolbar-btn {
  width: 32px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-sm, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all .15s;
}

.step-note-editor__toolbar-btn:hover {
  background: var(--neutral-200);
  color: hsl(var(--foreground));
}

.step-note-editor__toolbar-sep {
  width: 1px;
  height: 20px;
  background: hsl(var(--border));
  margin: 0 4px;
}

.step-note-editor__textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: none;
  font-size: 13px;
  color: hsl(var(--foreground));
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
}

.step-note-editor__textarea::-moz-placeholder {
  color: var(--neutral-400);
}

.step-note-editor__textarea::placeholder {
  color: var(--neutral-400);
}

.step-note-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid hsl(var(--border));
  background: var(--neutral-50);
}

.step-note-editor__char-count {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

.step-note-editor__footer-actions {
  display: flex;
  gap: 8px;
}

.link-doc-dialog__overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 16px;
}

.link-doc-dialog {
  width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.link-doc-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid hsl(var(--border));
}

.link-doc-dialog__title {
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-doc-dialog__close {
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0;
}

.link-doc-dialog__close:hover {
  color: hsl(var(--foreground));
}

.link-doc-dialog__search {
  position: relative;
  padding: 16px 24px;
  border-bottom: 1px solid hsl(var(--border));
}

.link-doc-dialog__search-icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}

.link-doc-dialog__search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 8px);
  font-size: 14px;
  color: hsl(var(--foreground));
  background: #fff;
}

.link-doc-dialog__search-input:focus {
  outline: none;
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px #0f172a14;
}

.link-doc-dialog__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
  max-height: 300px;
}

.link-doc-dialog__empty {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  text-align: center;
  padding: 24px 0;
}

.link-doc-dialog__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #0000;
  border-radius: var(--radius, 8px);
  background: none;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 4px;
}

.link-doc-dialog__item:hover {
  background: var(--neutral-50);
}

.link-doc-dialog__item--selected {
  border-color: var(--phase-2);
  background: var(--phase-2-light);
}

.link-doc-dialog__item-title {
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 2px;
}

.link-doc-dialog__item-meta {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.link-doc-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid hsl(var(--border));
}

@media (width <= 768px) {
  .step-documents__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .step-documents__header-actions {
    align-self: flex-end;
  }

  .step-dates__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .step-notes__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .link-doc-dialog {
    width: 95vw;
    max-height: 80vh;
  }

  .step-note-editor__footer {
    flex-direction: column;
    gap: 8px;
  }
}

.sim-link-dialog__overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #ae1e461a, #0000 55%), #0f0c096b;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 16px;
  animation: sim-link-overlay-in .22s var(--hymo-ease, ease-out);
}

@keyframes sim-link-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sim-link-dialog {
  position: relative;
  width: 620px;
  max-width: 100%;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  padding: 22px 36px 18px;
  border-radius: 20px;
  isolation: isolate;
  background: var(--hymo-red-soft);
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: none;
  animation: sim-link-dialog-in .28s var(--hymo-ease, cubic-bezier(.2, .8, .2, 1));
}

.sim-link-dialog:before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: none;
  pointer-events: none;
}

@keyframes sim-link-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.97);
  }

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

.sim-link-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: #ffffff80;
  border: 1px solid #ffffffb3;
  color: var(--hymo-fg-3);
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: all .2s var(--hymo-ease);
}

.sim-link-dialog__close svg {
  width: 16px;
  height: 16px;
}

.sim-link-dialog__close:hover {
  color: var(--hymo-red);
  border-color: var(--hymo-red-line);
  transform: rotate(90deg);
}

.sim-link-dialog__icon {
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--hymo-red);
  background: var(--hymo-red-soft);
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: none;
}

.sim-link-dialog__icon svg {
  width: 18px;
  height: 18px;
}

.sim-link-dialog__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--hymo-fg);
  text-align: center;
}

.sim-link-dialog__lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hymo-fg-3);
  text-align: center;
  letter-spacing: -.005em;
}

.sim-link-dialog__search {
  position: relative;
  margin-bottom: 10px;
}

.sim-link-dialog__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--hymo-fg-4);
  pointer-events: none;
}

.sim-link-dialog__search-input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  font-size: 14px;
  font-family: inherit;
  color: var(--hymo-fg);
  background: linear-gradient(#ffffffb3 0%, #fff6 100%);
  border: 1.5px solid #ffffffb3;
  border-radius: 12px;
  outline: none;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1.5px #ffffffd9, 0 1px 2px #0f0c090a;
  transition: all .2s var(--hymo-ease);
}

.sim-link-dialog__search-input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.sim-link-dialog__search-input::placeholder {
  color: var(--hymo-fg-4);
}

.sim-link-dialog__search-input:hover {
  border-color: #ffffffe6;
}

.sim-link-dialog__search-input:focus-visible {
  border-color: #e64d6b80;
  box-shadow: none;
}

.sim-link-dialog__list {
  flex: 1;
  overflow-y: auto;
  padding: 2px;
  margin: 0 -2px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
}

.sim-link-dialog__empty {
  font-size: 13px;
  color: var(--hymo-fg-3);
  text-align: center;
  padding: 14px 0 8px;
  font-style: italic;
}

.sim-link-dialog__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid #ffffff80;
  border-radius: 12px;
  background: linear-gradient(#ffffff8c 0%, #ffffff38 100%);
  cursor: pointer;
  transition: all .18s var(--hymo-ease);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px #ffffffb3;
  font-family: inherit;
}

.sim-link-dialog__item:hover {
  border-color: #ffffffd9;
  box-shadow: none;
}

.sim-link-dialog__item--selected, .sim-link-dialog__item--selected:hover {
  border-color: #e4678080;
  background: var(--hymo-red-soft);
  box-shadow: none;
}

.sim-link-dialog__item--selected .sim-link-dialog__item-title {
  color: var(--hymo-red);
}

.sim-link-dialog__item-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--hymo-fg);
  margin-bottom: 2px;
}

.sim-link-dialog__item-meta {
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.sim-link-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid #ffffff80;
}

.sim-link-dialog__cancel {
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hymo-fg-2);
  background: #fff9;
  border: 1px solid var(--hymo-border);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: all .2s var(--hymo-ease);
}

.sim-link-dialog__cancel:hover {
  border-color: var(--hymo-red-line);
  color: var(--hymo-red);
}

.sim-link-dialog .new-project-btn-shell {
  display: inline-block;
  position: relative;
}

.sim-link-dialog .new-project-btn-shell--compact:before {
  content: "";
  position: absolute;
  inset: -14px -26px;
  background: none;
  filter: blur(16px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.sim-link-dialog .new-project-btn--compact {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  color: var(--hymo-red);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  background: var(--hymo-glass-2);
  border: 1px solid var(--hymo-border);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
  transition: all .32s cubic-bezier(.2, .8, .2, 1);
}

.sim-link-dialog .new-project-btn--compact:hover:not(:disabled) {
  background: var(--hymo-red-soft);
  box-shadow: none;
}

.sim-link-dialog .new-project-btn--compact:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.step-detail-actions__row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 6px;
  transition: color .15s;
}

.step-detail-actions__row:hover .step-detail-actions__label {
  color: hsl(var(--primary));
}

.step-detail-actions__row:hover .step-detail-actions__chevron {
  transform: translateX(2px);
  color: hsl(var(--primary));
}

.step-detail-actions__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.step-detail-actions__duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: #94a3b81a;
  border-radius: 4px;
  padding: 2px 8px;
}

.step-detail-actions__chevron {
  color: hsl(var(--muted-foreground));
  transition: transform .15s, color .15s;
}

.action-panel__overlay {
  position: fixed;
  inset: 0;
  background: #0f172a2e;
  z-index: 60;
  animation: .18s ease-out action-panel-fade-in;
}

.action-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 100vw);
  max-width: 100vw;
  background: hsl(var(--background));
  border-left: 1px solid #f4d7e1;
  box-shadow: -12px 0 48px -8px #d9467d2e;
  display: flex;
  flex-direction: column;
  z-index: 61;
  animation: .22s cubic-bezier(.32, .72, 0, 1) action-panel-slide-in;
  overflow: hidden;
  box-sizing: border-box;
}

.action-panel *, .action-panel :before, .action-panel :after {
  box-sizing: border-box;
}

@keyframes action-panel-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes action-panel-slide-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.action-panel__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: linear-gradient(#f8fafc99, #0000);
  flex-shrink: 0;
}

.action-panel__header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.action-panel__phase {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.action-panel__duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: #94a3b81f;
  border-radius: 999px;
  padding: 4px 10px;
}

.action-panel__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background .15s, color .15s;
}

.action-panel__close:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.action-panel__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: hsl(var(--foreground));
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.action-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s;
}

.action-panel__toggle:hover {
  border-color: hsl(var(--success));
  background: hsl(var(--success) / .06);
}

.action-panel__toggle-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid hsl(var(--muted-foreground) / .4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0000;
  transition: all .18s;
}

.action-panel__toggle--done {
  border-color: #0000;
  background: hsl(var(--success) / .08);
  color: hsl(var(--success));
}

.action-panel__toggle--done .action-panel__toggle-check {
  border-color: #0000;
  color: #fff;
}

.action-panel__toggle--phase-1 .action-panel__toggle-check {
  background: var(--phase-1, #6366f1);
}

.action-panel__toggle--phase-2 .action-panel__toggle-check {
  background: var(--phase-2, #2563eb);
}

.action-panel__toggle--phase-3 .action-panel__toggle-check {
  background: var(--phase-3, #f59e0b);
}

.action-panel__toggle--phase-4 .action-panel__toggle-check {
  background: var(--phase-4, #10b981);
}

.action-panel__toggle--phase-5 .action-panel__toggle-check {
  background: var(--phase-5, #8b5cf6);
}

.action-panel__body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-panel__section {
  padding: 16px 18px;
  border-radius: 10px;
  background: hsl(var(--muted) / .35);
  border: 1px solid hsl(var(--border));
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.action-panel__section--example {
  background: hsl(var(--primary) / .05);
  border-color: hsl(var(--primary) / .18);
}

.action-panel__section-title {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 12px;
}

.action-panel__empty {
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  text-align: center;
  padding: 40px 16px;
  font-style: italic;
}

.action-panel__markdown {
  font-size: 14px;
  line-height: 1.65;
  color: hsl(var(--foreground));
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.action-panel__markdown h1, .action-panel__markdown h2, .action-panel__markdown h3 {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
}

.action-panel__markdown p {
  margin: 0 0 10px;
}

.action-panel__markdown p:last-child {
  margin-bottom: 0;
}

.action-panel__markdown strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.action-panel__markdown ul, .action-panel__markdown ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.action-panel__markdown ul li, .action-panel__markdown ol li {
  margin-bottom: 4px;
}

.action-panel__markdown code {
  background: hsl(var(--muted));
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.action-panel__markdown pre {
  background: hsl(var(--muted));
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  max-width: 100%;
}

.action-panel__markdown pre code {
  background: none;
  padding: 0;
  white-space: pre;
  overflow-x: auto;
  display: block;
}

.action-panel__markdown a {
  color: hsl(var(--primary));
  word-break: break-all;
}

.action-panel__markdown table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}

.action-panel__markdown th, .action-panel__markdown td {
  padding: 6px 10px;
  border: 1px solid hsl(var(--border));
  text-align: left;
}

.action-panel__markdown th {
  background: hsl(var(--muted) / .5);
  font-weight: 600;
}

.action-panel__tools {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-panel__tool {
  margin: 0;
}

.action-panel__tool-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: all .15s;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.action-panel__tool-link:hover {
  border-color: hsl(var(--primary) / .5);
  background: hsl(var(--primary) / .04);
  transform: translateX(2px);
}

.action-panel__tool-name {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  flex-shrink: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 50%;
}

.action-panel__tool-action {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.action-panel__tool-icon {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

@media (width <= 640px) {
  .action-panel {
    width: 100vw;
  }
}


/* [project]/src/styles/pages/gantt.css [app-client] (css, ) */
.project-home-v3 .glass-card {
  position: relative;
  background: var(--hymo-v4-card);
  border: 1px solid var(--hymo-v4-line);
  border-radius: var(--hymo-v4-r);
  box-shadow: var(--hymo-v4-shadow);
  overflow: hidden;
}

.project-home-v3 .glass-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  z-index: 0;
}

.project-home-v3 .glass-card > * {
  position: relative;
  z-index: 1;
}

.gantt-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gantt-wrapper::-webkit-scrollbar {
  height: 8px;
}

.gantt-wrapper::-webkit-scrollbar-track {
  background: none;
}

.gantt-wrapper::-webkit-scrollbar-thumb {
  background: #0f0c091a;
  border-radius: 999px;
}

.gantt-wrapper::-webkit-scrollbar-thumb:hover {
  background: #0f0c092e;
}

.gantt-chart {
  position: relative;
  display: grid;
  grid-template-columns: 260px repeat(var(--gantt-months), minmax(96px, 1fr));
  min-width: 800px;
}

.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--hymo-red);
  z-index: 5;
  pointer-events: none;
  box-shadow: none;
}

.gantt-today-label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--hymo-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: none;
}

.gantt-header-corner {
  grid-column: 1 / 2;
  padding: 16px 22px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hymo-fg-4);
  border-bottom: 1px solid #0f0c0914;
  background: #ffffff80;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  left: 0;
  z-index: 3;
}

.gantt-header-month {
  padding: 16px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  border-bottom: 1px solid #0f0c0914;
  border-left: 1px solid #0f0c090a;
  letter-spacing: -.005em;
}

.gantt-header-month--current {
  color: var(--hymo-red);
  font-weight: 700;
  background: #f8dde366;
}

.gantt-phase-label {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: #ffffff73;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: none;
  border-bottom: 1px solid #0f0c0914;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: sticky;
  left: 0;
  z-index: 3;
  transition: background var(--hymo-t) var(--hymo-ease);
}

.gantt-phase-label:hover {
  background: #ffffffa6;
}

.gantt-phase-label--current {
  background: var(--hymo-red-soft);
  box-shadow: inset 3px 0 0 var(--hymo-red);
}

.gantt-phase-label--current:hover {
  background: #f6d5dcb3;
}

.gantt-phase-label--done {
  opacity: .85;
}

.gantt-phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--hymo-surface);
  border: 1px solid var(--hymo-border);
  color: var(--hymo-fg-3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gantt-phase-label--current .gantt-phase-num {
  background: var(--hymo-surface);
  color: var(--hymo-red);
  border-color: var(--hymo-red);
  box-shadow: 0 0 0 3px var(--hymo-red-soft);
}

.gantt-phase-label--done .gantt-phase-num {
  background: var(--hymo-red-soft);
  border-color: #e0526e4d;
  color: var(--hymo-red);
  position: relative;
}

.gantt-phase-label--done .gantt-phase-num:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--hymo-red);
  border-bottom: 2.5px solid var(--hymo-red);
  transform: rotate(-45deg)translate(1px, -2px);
}

.gantt-phase-label--done .gantt-phase-num {
  color: #0000;
}

.gantt-phase-info {
  min-width: 0;
}

.gantt-phase-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--hymo-fg);
  line-height: 1.2;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-phase-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.gantt-phase-sub strong {
  font-weight: 600;
  color: var(--hymo-red);
}

.gantt-phase-sub svg {
  width: 11px;
  height: 11px;
  color: var(--hymo-red);
}

.gantt-phase-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--hymo-fg-4);
  transition: all var(--hymo-t) var(--hymo-ease);
}

.gantt-phase-chev svg {
  width: 14px;
  height: 14px;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.gantt-phase-label--open .gantt-phase-chev {
  background: var(--hymo-red);
  color: #fff;
}

.gantt-phase-label--open .gantt-phase-chev svg {
  transform: rotate(180deg);
}

.gantt-phase-timeline {
  grid-column: 2 / -1;
  position: relative;
  height: 60px;
  border-bottom: 1px solid #0f0c090f;
  background: #ffffff2e;
}

.gantt-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: var(--hymo-red);
  overflow: hidden;
}

.gantt-bar-label {
  position: relative;
  z-index: 2;
}

.gantt-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--hymo-red);
  opacity: .85;
  z-index: 1;
  border-radius: inherit;
}

.gantt-bar--done {
  background: var(--hymo-red);
  color: #fff;
  box-shadow: none;
}

.gantt-bar--current {
  background: var(--hymo-red-soft);
  border: 1.5px solid #e0526e73;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.gantt-bar--current .gantt-bar-label {
  color: var(--hymo-red);
}

.gantt-bar--planned {
  background: #fff6;
  border: 1.5px dashed #0f0c0933;
  color: var(--hymo-fg-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gantt-step-label {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 34px;
  font-size: 12.5px;
  color: var(--hymo-fg-2);
  background: #ffffff52;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #0f0c090a;
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: 40px;
}

.gantt-step-label .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.gantt-step-label-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--hymo-fg-4);
}

.gantt-step-label--done {
  opacity: .7;
  color: var(--hymo-fg-3);
}

.gantt-step-label--done .truncate {
  text-decoration: line-through;
  text-decoration-color: #6e696259;
}

.gantt-step-label--done .gantt-step-label-icon {
  color: var(--hymo-red);
}

.gantt-step-label--active {
  background: #fbeef180;
  font-weight: 600;
  color: var(--hymo-red);
}

.gantt-step-label--active .gantt-step-label-icon {
  color: var(--hymo-red);
}

.gantt-step-label--pending {
  opacity: .72;
}

.gantt-step-label--pending .gantt-step-label-icon {
  color: var(--hymo-fg-4);
}

.gantt-step-timeline {
  grid-column: 2 / -1;
  position: relative;
  height: 40px;
  border-bottom: 1px solid #0f0c090a;
}

.gantt-step-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid #0000;
  transition: all var(--hymo-t) var(--hymo-ease);
  font-family: inherit;
  padding: 0;
  background: none;
}

.gantt-step-bar:hover {
  transform: translateY(-50%)scale(1.05);
  box-shadow: 0 6px 18px #0f0c092e;
  z-index: 4;
}

.gantt-step-bar--completed {
  background: var(--hymo-red);
  border-color: #0000;
  box-shadow: none;
}

.gantt-step-bar--completed:hover {
  background: var(--hymo-red-2);
  box-shadow: none;
}

.gantt-step-bar--in-progress {
  background: var(--hymo-red-soft);
  border-color: var(--hymo-red);
  border-width: 1.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  animation: 2s ease-in-out infinite hymo-gantt-pulse;
}

@keyframes hymo-gantt-pulse {
  0%, 100% {
    box-shadow: none;
  }

  50% {
    box-shadow: none;
  }
}

.gantt-step-bar--pending {
  background: #ffffff73;
  border: 1.5px dashed #0f0c0938;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gantt-step-bar--pending:hover {
  background: #ffffffb3;
  border-color: var(--hymo-red);
}

.gantt-step-bar--overdue {
  background: var(--hymo-red-soft);
  border: 1.5px solid var(--hymo-red);
  box-shadow: none;
  animation: 1.6s ease-in-out infinite hymo-gantt-pulse;
}

.gantt-step-bar--upcoming {
  background: #fae6ea8c;
  border: 1.5px dashed #e0526e73;
  backdrop-filter: blur(8px);
}

.gantt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 16px 24px;
  border-top: 1px solid #0f0c090f;
  background: #ffffff52;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11.5px;
  color: var(--hymo-fg-3);
}

.gantt-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.gantt-legend__dot {
  width: 16px;
  height: 10px;
  border-radius: 4px;
}

.gantt-legend__dot--completed {
  background: var(--hymo-red);
  box-shadow: none;
}

.gantt-legend__dot--in-progress {
  background: #f8dde3b3;
  border: 1.5px solid var(--hymo-red);
}

.gantt-legend__dot--planned {
  background: #ffffff80;
  border: 1.5px dashed #0f0c0952;
}

.gantt-legend__line {
  width: 16px;
  height: 0;
  border-top: 2px dashed var(--hymo-red);
}

.gantt-date-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (width <= 480px) {
  .gantt-date-editor {
    grid-template-columns: 1fr;
  }
}


/* [project]/src/styles/pages/kanban.css [app-client] (css, ) */
.kanban-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  margin: 18px 0 22px;
}

.kanban-filter-select {
  grid-column: 1;
  width: 100% !important;
  height: 40px !important;
}

.kanban-filter-select.kanban-filter-select--narrow {
  grid-column: 2;
  width: 100% !important;
}

.kanban-search {
  position: relative;
  grid-column: 4;
  width: 100%;
}

@media (width <= 1023px) {
  .kanban-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .kanban-filter-select, .kanban-filter-select.kanban-filter-select--narrow, .kanban-search {
    grid-column: auto;
    width: 100% !important;
  }
}

.kanban-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--hymo-fg-4);
  pointer-events: none;
  z-index: 1;
}

.kanban-search-input {
  padding-left: 36px !important;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 8px;
  align-items: start;
}

@media (width <= 1023px) {
  .kanban-board {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}

.kanban-board::-webkit-scrollbar {
  height: 8px;
}

.kanban-board::-webkit-scrollbar-track {
  background: none;
}

.kanban-board::-webkit-scrollbar-thumb {
  background: #0f0c091a;
  border-radius: 999px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: #0f0c092e;
}

.kanban-column {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(#ffffffb3 0%, #fff0 45%), linear-gradient(135deg, #fff6 0%, #fff0 50%, #ffffff38 100%), #ffffff8c;
  border: 1.5px solid #ffffffb3;
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: inset 0 1.5px #ffffffe6, inset 0 -1px #ffffff40, inset 1px 0 #ffffff59, inset -1px 0 #ffffff59, 0 1px 2px #0f0c090d, 0 14px 36px -10px #0f0c092e;
  overflow: hidden;
  min-height: 320px;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.kanban-column:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  z-index: 0;
}

.kanban-column > * {
  position: relative;
  z-index: 1;
}

.kanban-column--drag-over {
  border-color: var(--hymo-red-line);
  background: var(--hymo-red-soft);
  box-shadow: none;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid #0f0c090f;
}

.kanban-column-header__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #fff9;
}

.kanban-column-header__dot--gray {
  background: var(--hymo-fg-4);
}

.kanban-column-header__dot--red {
  background: var(--hymo-red);
}

.kanban-column-header__dot--red-soft {
  background: #e4819580;
  border: 1.5px dashed var(--hymo-red);
  box-shadow: none;
  width: 10px;
  height: 10px;
}

.kanban-column-header__title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hymo-fg);
}

.kanban-column-header__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffffffb3;
  border: 1px solid #ffffffbf;
  color: var(--hymo-fg-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px #fffc;
}

.kanban-column-header__count--red {
  color: var(--hymo-red);
}

.kanban-column-header__count--red-soft {
  color: var(--hymo-red);
  background: #f8dde38c;
  border-color: #e0526e4d;
}

.kanban-column-header__count--gray {
  color: var(--hymo-fg-3);
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 2px;
  min-height: 200px;
}

.kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(#ffffffd9 0%, #ffffff73 55%, #ffffff8c 100%);
  border: 1.5px solid #ffffffb8;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1.5px #ffffffe6, inset 0 -1px #ffffff40, inset 1px 0 #ffffff59, inset -1px 0 #ffffff59, 0 1px 2px #0f0c090d, 0 6px 16px -8px #0f0c0924;
  cursor: grab;
  transition: transform .22s var(--hymo-ease), box-shadow .22s var(--hymo-ease), opacity .18s ease;
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card:hover {
  box-shadow: inset 0 1.5px #fffffff2, inset 0 -1px #ffffff4d, inset 1px 0 #fff6, inset -1px 0 #fff6, 0 1px 2px #0f0c090f, 0 12px 28px -10px #0f0c0938;
}

.kanban-card--dragging {
  opacity: .5;
  transform: rotate(-1.5deg)scale(.98);
}

.kanban-card--done {
  opacity: .78;
}

.kanban-card--done .kanban-card__title {
  color: var(--hymo-fg-3);
  text-decoration: line-through;
  text-decoration-color: #6e696259;
}

.kanban-card--highlighted {
  background: var(--hymo-red-soft);
  border-color: #ffffffb3;
  box-shadow: none;
}

.kanban-card--highlighted .kanban-card__step, .kanban-card--highlighted .kanban-card__title {
  color: var(--hymo-red);
}

.kanban-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kanban-card__step {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hymo-fg-4);
  font-variant-numeric: tabular-nums;
}

.kanban-card__drag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: .4;
  cursor: grab;
  transition: opacity .18s;
}

.kanban-card:hover .kanban-card__drag {
  opacity: .7;
}

.kanban-card__drag-row {
  display: flex;
  gap: 2px;
}

.kanban-card__drag-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hymo-fg-3);
}

.kanban-card__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.4;
  color: var(--hymo-fg);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.kanban-card__phase-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff9;
  border: 1px solid #ffffffb3;
  color: var(--hymo-fg-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow: inset 0 1px #fffc;
}

.badge-phase-1, .badge-phase-2, .badge-phase-3, .badge-phase-4, .badge-phase-5 {
  background: #ffffffa6 !important;
}

.kanban-card__priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
}

.kanban-card__priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-card__priority-dot--low {
  background: var(--hymo-fg-4);
}

.kanban-card__priority-dot--medium {
  background: #e48195b3;
}

.kanban-card__priority-dot--high {
  background: var(--hymo-red);
  box-shadow: none;
}

.kanban-card__blocker {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fae6ea99;
  border: 1px dashed #e0526e66;
  color: var(--hymo-red);
  font-size: 11.5px;
  line-height: 1.4;
  backdrop-filter: blur(10px);
}

.kanban-card__blocker svg {
  color: var(--hymo-red) !important;
}

.kanban-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed #0f0c0914;
}

.kanban-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--hymo-fg-3);
  font-weight: 500;
}

.kanban-card__meta-item--overdue {
  color: var(--hymo-red) !important;
}

.kanban-card__no-docs {
  font-size: 11px;
  color: var(--hymo-fg-4);
  font-style: italic;
  padding-top: 6px;
  border-top: 1px dashed #0f0c0914;
}

.kanban-card__done-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hymo-red);
  padding-top: 4px;
}

.kanban-card__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed #0f0c0914;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.kanban-card__date-item {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

.kanban-card__date-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hymo-fg-4);
}

.kanban-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px auto 0;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hymo-fg-3);
  background: #ffffff8c;
  border: 1px dashed #0f0c0929;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--hymo-t) var(--hymo-ease);
}

.kanban-more:hover {
  color: var(--hymo-red);
  border-color: var(--hymo-red-line);
  background: #fbeef1b3;
}


/* [project]/src/styles/pages/mise-en-gestion.css [app-client] (css, ) */
.mise-en-gestion, .handoff, .mise-en-gestion-card {
  --accent-bien: var(--hymo-blue);
  --accent-bien-contraste: #fff;
}

.dark .mise-en-gestion, .dark .handoff, .dark .mise-en-gestion-card {
  --accent-bien: #6396ee;
  --accent-bien-contraste: #0e1320;
}

.mise-en-gestion {
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 20px 140px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mise-en-gestion__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mise-en-gestion__retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 550;
  color: hsl(var(--foreground-subtle));
  transition: color var(--duration-fast, .15s) ease;
}

.mise-en-gestion__retour:hover {
  color: var(--accent-bien);
}

.mise-en-gestion__title {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 640;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
  text-wrap: balance;
}

.mise-en-gestion__lede {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: hsl(var(--foreground-muted));
}

.mise-en-gestion__etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px;
  text-align: center;
  font-size: 14.5px;
  color: hsl(var(--foreground-muted));
}

.mise-en-gestion__attente {
  margin: 0;
  max-width: 52ch;
  line-height: 1.6;
}

.handoff {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.handoff__sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.handoff-section {
  padding: 22px;
  border-radius: var(--radius-lg, 14px);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}

.handoff-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.handoff-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
}

.handoff-section__count {
  font-size: 12px;
  font-weight: 550;
  color: hsl(var(--foreground-muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.handoff-section__desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: hsl(var(--foreground-muted));
}

.handoff-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (width >= 768px) {
  .handoff-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.handoff-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handoff-field__label {
  font-size: 13px;
  font-weight: 580;
  color: hsl(var(--foreground));
}

.handoff-field__unite {
  margin-left: 4px;
  font-weight: 400;
  color: hsl(var(--foreground-subtle));
}

.handoff-field__requis {
  margin-left: 3px;
  color: var(--accent-bien);
}

.handoff-field__readonly {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  color: hsl(var(--foreground-muted));
}

.handoff-field--manquant .handoff-field__label {
  color: var(--accent-bien);
}

.handoff-field__origine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent-bien);
  transition: opacity var(--duration-fast, .15s) ease;
}

.handoff-field__origine:hover {
  opacity: .75;
  text-decoration: underline;
}

.handoff-field__origine svg {
  width: 12px;
  height: 12px;
}

.handoff__footer {
  position: sticky;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-lg, 14px);
  background: hsl(var(--background-elevated) / .86);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px) saturate(175%);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
}

.handoff__manquants, .handoff__pret {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.handoff__manquants {
  color: hsl(var(--foreground-muted));
}

.handoff__manquants svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent-bien);
}

.handoff__pret {
  color: hsl(var(--foreground-muted));
}

.handoff__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-bien);
  color: var(--accent-bien-contraste);
}

.handoff__cta:hover:not(:disabled) {
  background: var(--accent-bien);
}

.mise-en-gestion-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.mise-en-gestion-card__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: hsl(var(--foreground-subtle));
}

.mise-en-gestion-card__body {
  flex: 260px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mise-en-gestion-card__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mise-en-gestion-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--foreground-muted));
}

.mise-en-gestion-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 580;
  white-space: nowrap;
  transition: background var(--duration-fast, .15s) ease;
}

.mise-en-gestion-card__cta svg {
  width: 15px;
  height: 15px;
}

.mise-en-gestion-card--prete {
  border-color: var(--accent-bien);
  background: hsl(var(--background-muted));
}

.mise-en-gestion-card--prete .mise-en-gestion-card__icon {
  color: var(--accent-bien);
}

.mise-en-gestion-card--prete .mise-en-gestion-card__cta {
  background: var(--accent-bien);
  color: var(--accent-bien-contraste);
}

.mise-en-gestion-card--prete .mise-en-gestion-card__cta:hover {
  background: var(--accent-bien);
}

.mise-en-gestion-card--fait .mise-en-gestion-card__icon {
  color: hsl(var(--success));
}

.mise-en-gestion-card--fait .mise-en-gestion-card__cta {
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.mise-en-gestion-card--fait .mise-en-gestion-card__cta:hover {
  background: hsl(var(--background-muted));
}


/* [project]/src/styles/components/glass-modal.css [app-client] (css, ) */
.glass-modal {
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#ffffffeb 0%, #ffffffc7 100%) !important;
  border: 1px solid #ffffffb3 !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px #ffffffd9, 0 24px 64px -16px #0f0c092e, 0 4px 12px -2px #0f0c090f !important;
}

.glass-modal:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 70% at 100% 0, #c2d8f438, #0000 70%), radial-gradient(40% 50% at 0 100%, #dfe9f62e, #0000 70%);
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}

.glass-modal-overlay {
  background: #0f0c0952;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (width <= 767px) {
  .glass-modal {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-radius: 16px;
  }
}

.pd-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #5c91d673 transparent;
}

.pd-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.pd-scrollbar::-webkit-scrollbar-track {
  background: none;
  margin-block: 8px;
}

.pd-scrollbar::-webkit-scrollbar-thumb {
  background: #5c91d666;
  border: 2px solid #0000;
  background-clip: content-box;
  border-radius: 999px;
  -webkit-transition: background-color .16s;
  transition: background-color .16s;
}

.pd-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2674d9b3;
  background-clip: content-box;
}


/* [project]/src/styles/components/form-fields.css [app-client] (css, ) */
.number-field {
  position: relative;
  display: block;
  width: 100%;
}

.number-field__input--with-unit {
  padding-right: 44px !important;
}

.number-field__unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--foreground-subtle, #838995);
}

.number-field__input::-webkit-outer-spin-button, .number-field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.number-field__input[type="number"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  -moz-appearance: textfield;
}


/* [project]/src/styles/features/pierre.css [app-client] (css, ) */
.pierre-root {
  --pierre-gold: #dc9d09;
  --pierre-gold-deep: #a05f03;
  --pierre-gold-bright: #facb0f;
  --pierre-ember: #f37216;
  --pierre-soft: #fdf5dd;
  --pierre-faint: #fefbf1;
  --pierre-line: #e8d29c;
  --pierre-glow: #dc9d0940;
  --pierre-halo: #dc9d0966;
  --pierre-grad: linear-gradient(135deg, var(--pierre-gold-bright) 0%, #e99d07 48%, var(--pierre-ember) 100%);
  --pierre-grad-text: linear-gradient(120deg, #bc7f06 0%, var(--pierre-ember) 100%);
}

.pierre-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: min(420px, 100vw - 32px);
  height: min(640px, 100dvh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: var(--hymo-glass-deep);
  backdrop-filter: blur(var(--hymo-glass-blur-strong)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--hymo-glass-blur-strong)) saturate(180%);
  border: 1px solid var(--hymo-glass-border-light);
  box-shadow: inset 0 1px 0 #ffffffd9, 0 2px 4px #0f0c090f, 0 32px 64px -24px #0f0c0947, 0 24px 56px -20px var(--pierre-glow);
  overflow: hidden;
  transform-origin: calc(100% - 30px) calc(100% - 30px);
  animation: pierre-pop .36s var(--hymo-ease) both;
  transition: width var(--hymo-t) var(--hymo-ease);
}

.pierre-panel--wide {
  width: min(760px, 100vw - 32px);
}

.pierre-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 55% at 100% 0, #fac72e29, #0000 62%), radial-gradient(70% 45% at 0 100%, #f47b2512, #0000 60%);
  pointer-events: none;
}

.pierre-panel > * {
  position: relative;
}

@keyframes pierre-pop {
  from {
    opacity: 0;
    transform: scale(.92)translateY(14px);
  }

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

.pierre-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #c1bbaf59;
}

.pierre-panel__avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pierre-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 #ffffff80, 0 8px 20px -8px var(--pierre-halo);
}

.pierre-panel__avatar svg {
  width: 20px;
  height: 20px;
}

.pierre-panel__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pierre-panel__name {
  font-family: var(--font-serif), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1.1;
  background: var(--pierre-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.pierre-panel__subtitle {
  display: block;
  min-width: 0;
  font-size: 12px;
  color: var(--hymo-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pierre-panel__pulse {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 6px 0 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  animation: 2.4s ease-in-out infinite hymo-pulse;
}

.pierre-panel__close, .pierre-panel__action {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-panel__close:hover, .pierre-panel__action:hover {
  background: #0f0c090f;
  color: var(--hymo-fg);
}

.pierre-panel__close:focus-visible, .pierre-panel__action:focus-visible {
  outline: 2px solid var(--pierre-gold-deep);
  outline-offset: 2px;
}

.pierre-panel__close svg, .pierre-panel__action svg {
  width: 16px;
  height: 16px;
}

.pierre-panel__action[aria-pressed="true"] {
  background: var(--pierre-soft);
  color: var(--pierre-gold-deep);
}

.pierre-panel__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pierre-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #0f0c092e transparent;
}

.pierre-msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  animation: pierre-msg-in .24s var(--hymo-ease) both;
}

.pierre-msg--pierre {
  align-self: flex-start;
  background: #ffffffd1;
  border: 1px solid #ffffffd9;
  border-bottom-left-radius: 6px;
  color: var(--hymo-fg-2);
  box-shadow: 0 1px 2px #0f0c090d, 0 8px 20px -12px #0f0c091f;
}

.pierre-msg--user {
  align-self: flex-end;
  background: var(--pierre-grad);
  color: #fff;
  font-weight: 500;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0 1px 0 #ffffff59, 0 10px 24px -12px var(--pierre-halo);
}

@keyframes pierre-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.pierre-md p {
  margin: 0 0 8px;
}

.pierre-md p:last-child {
  margin-bottom: 0;
}

.pierre-md strong {
  font-weight: 650;
  color: var(--hymo-fg);
}

.pierre-md h1, .pierre-md h2, .pierre-md h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hymo-fg);
  margin: 10px 0 4px;
}

.pierre-md h1:first-child, .pierre-md h2:first-child, .pierre-md h3:first-child {
  margin-top: 0;
}

.pierre-md ul, .pierre-md ol {
  margin: 4px 0;
  padding-left: 18px;
}

.pierre-md li {
  margin-bottom: 2px;
}

.pierre-md ul {
  list-style: disc;
}

.pierre-md ol {
  list-style: decimal;
}

.pierre-md li::marker {
  color: var(--pierre-gold-deep);
}

.pierre-md a {
  color: var(--pierre-gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pierre-line);
  text-underline-offset: 2px;
}

.pierre-md code {
  background: #0f0c090d;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
}

.pierre-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
  display: block;
  overflow-x: auto;
}

.pierre-md th, .pierre-md td {
  border: 1px solid #c1bbaf80;
  padding: 4px 8px;
  text-align: left;
}

.pierre-md th {
  background: var(--pierre-faint);
  font-weight: 650;
}

.pierre-md tr:nth-child(2n) {
  background: #ffffff80;
}

.pierre-msg__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: var(--pierre-grad);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff6, 0 10px 24px -10px var(--pierre-halo);
  transition: transform var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-msg__action:hover {
  transform: translateY(-1px);
}

.pierre-msg__action svg {
  width: 14px;
  height: 14px;
}

.pierre-empty {
  margin: auto;
  text-align: center;
  padding: 24px 28px;
  animation: pierre-msg-in .4s var(--hymo-ease) .12s both;
}

.pierre-empty__icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  color: var(--pierre-gold);
  opacity: .55;
}

.pierre-empty__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hymo-fg-4);
}

.pierre-empty__line em {
  font-family: var(--font-serif), Georgia, serif;
  font-style: italic;
  font-size: 16.5px;
  background: var(--pierre-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.pierre-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px 16px;
  align-self: flex-start;
  background: #ffffffd1;
  border: 1px solid #ffffffd9;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px #0f0c090d;
}

.pierre-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pierre-gold);
  animation: 1.4s infinite pierre-typing-bounce;
}

.pierre-typing__dot:nth-child(2) {
  animation-delay: .2s;
}

.pierre-typing__dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes pierre-typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .4;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.pierre-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 10px;
}

.pierre-suggestions__chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hymo-glass-border);
  background: #fff9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  color: var(--hymo-fg-3);
  cursor: pointer;
  transition: all var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-suggestions__chip:hover {
  border-color: var(--pierre-line);
  color: var(--pierre-gold-deep);
  background: var(--pierre-faint);
  box-shadow: 0 6px 16px -8px var(--pierre-glow);
}

.pierre-composer {
  display: flex;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid #c1bbaf52;
}

.pierre-composer__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  background: #ffffffa8;
  border: 1px solid var(--hymo-glass-border);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--hymo-fg);
  transition: border-color var(--hymo-t-fast) var(--hymo-ease), box-shadow var(--hymo-t-fast) var(--hymo-ease), background var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-composer__input::-moz-placeholder {
  color: var(--hymo-fg-4);
}

.pierre-composer__input::placeholder {
  color: var(--hymo-fg-4);
}

.pierre-composer__input:focus {
  outline: none;
  border-color: var(--pierre-line);
  background: #fff;
  box-shadow: 0 0 0 4px #dc9d0924;
}

.pierre-composer__send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--pierre-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff73, 0 10px 24px -10px var(--pierre-halo);
  transition: transform var(--hymo-t-fast) var(--hymo-ease), opacity var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-composer__send svg {
  width: 18px;
  height: 18px;
}

.pierre-composer__send:hover:not(:disabled) {
  transform: scale(1.06);
}

.pierre-composer__send:disabled {
  opacity: .35;
  cursor: default;
}

.pierre-msg-skeleton {
  height: 34px;
  border-radius: 18px;
  background: #0f0c090f;
  animation: 1.5s ease-in-out infinite pulse;
}

.pierre-msg-skeleton--pierre {
  align-self: flex-start;
  width: 70%;
  border-bottom-left-radius: 6px;
}

.pierre-msg-skeleton--user {
  align-self: flex-end;
  width: 45%;
  border-bottom-right-radius: 6px;
}

.pierre-notice {
  align-self: center;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--pierre-line);
  background: var(--pierre-faint);
  font-size: 12px;
  color: var(--hymo-fg-3);
  text-align: center;
}

.pierre-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pierre-history-in .22s var(--hymo-ease) both;
}

@keyframes pierre-history-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

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

.pierre-history__title {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hymo-fg-3);
}

.pierre-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pierre-history__item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 14px;
  border: 1px solid #0000;
  transition: background var(--hymo-t-fast) var(--hymo-ease), border-color var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-history__item--active {
  background: var(--pierre-faint);
  border-color: var(--pierre-line);
}

.pierre-history__open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
  border: none;
  border-radius: 14px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.pierre-history__open:hover {
  background: #0f0c090a;
}

.pierre-history__open:focus-visible {
  outline: 2px solid var(--pierre-gold-deep);
  outline-offset: -2px;
}

.pierre-history__item-title {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg);
}

.pierre-history__item-meta {
  font-size: 12px;
  color: var(--hymo-fg-3);
}

.pierre-history__delete {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--hymo-fg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--hymo-t-fast) var(--hymo-ease), color var(--hymo-t-fast) var(--hymo-ease);
}

.pierre-history__delete svg {
  width: 16px;
  height: 16px;
}

.pierre-history__delete:hover {
  background: #0f0c090f;
  color: hsl(var(--danger));
}

.pierre-history__confirm {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--hymo-fg-2);
}

.pierre-history__confirm-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--hymo-glass-border);
  border-radius: 999px;
  background: #fff9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  cursor: pointer;
}

.pierre-history__confirm-btn--danger {
  border-color: #0000;
  background: hsl(var(--danger));
  color: hsl(var(--destructive-foreground));
}

.pierre-history__confirm-btn:disabled {
  opacity: .5;
  cursor: default;
}

.pierre-history__skeleton {
  height: 52px;
  border-radius: 14px;
  background: #0f0c090f;
  animation: 1.5s ease-in-out infinite pulse;
}

.pierre-history__state {
  margin: auto;
  text-align: center;
  padding: 24px 20px;
  color: var(--hymo-fg-2);
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pierre-history__cta {
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--pierre-grad);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px var(--pierre-halo);
}

.pierre-history__retry, .pierre-history__more {
  align-self: center;
  padding: 7px 14px;
  border: 1px solid var(--hymo-glass-border);
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--pierre-gold-deep);
  cursor: pointer;
}

.pierre-history__retry:disabled, .pierre-history__more:disabled {
  opacity: .5;
  cursor: default;
}

.pierre-nav {
  position: relative;
  display: inline-flex;
}

.pierre-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--hymo-glass-border-light);
  border-radius: 999px;
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(var(--hymo-glass-blur-soft)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--hymo-glass-blur-soft)) saturate(170%);
  box-shadow: var(--hymo-shadow-glass);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hymo-fg-2);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--hymo-t-fast) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease);
}

.pierre-nav__trigger:hover, .pierre-nav__trigger:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--hymo-shadow-glass), 0 6px 18px -6px var(--pierre-glow);
}

.pierre-nav__trigger-icon {
  width: 16px;
  height: 16px;
  color: var(--pierre-gold);
  filter: drop-shadow(0 1px 1px #78350f2e);
}

.pierre-nav__trigger-label em {
  font-family: var(--font-serif), Georgia, serif;
  font-style: italic;
  font-size: 15px;
  background: var(--pierre-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.pierre-nav__popover {
  position: fixed;
  inset: 0;
}

.pierre-backdrop {
  position: absolute;
  inset: 0;
  background: #0f0c092e;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pierre-veil-in .24s var(--hymo-ease) both;
}

@keyframes pierre-veil-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pierre-nav__popover .pierre-panel {
  position: fixed;
  top: 72px;
  right: 16px;
  bottom: 16px;
  height: auto;
  transform-origin: calc(100% - 30px) 0;
}

.pierre-fab {
  position: fixed;
  bottom: 20px;
  right: 16px;
  display: none;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.pierre-fab__disc {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pierre-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -10px 18px #78350f38, 0 1px 2px #0f0c091f, 0 14px 36px -10px var(--pierre-halo);
  animation: 3.6s ease-in-out infinite pierre-breathe;
}

.pierre-fab__icon {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 2px #78350f4d);
}

.pierre-fab__status {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  animation: 2.4s ease-in-out infinite hymo-pulse;
}

@keyframes pierre-breathe {
  0%, 100% {
    box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -10px 18px #78350f38, 0 1px 2px #0f0c091f, 0 14px 36px -10px var(--pierre-halo);
  }

  50% {
    box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -10px 18px #78350f38, 0 1px 2px #0f0c091f, 0 14px 36px -10px var(--pierre-glow), 0 0 0 14px #dc9d090f;
  }
}

@media (width <= 767px) {
  .pierre-nav__trigger {
    display: none;
  }

  .pierre-fab {
    display: inline-flex;
  }

  .pierre-panel__action--wide {
    display: none;
  }

  .pierre-nav__popover .pierre-panel {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    height: min(640px, 100dvh - 24px);
    border-radius: 24px;
    transform-origin: calc(100% - 30px) 100%;
  }

  body:has([data-portal="owner"]) .pierre-fab, body:has([data-portal="tenant"]) .pierre-fab {
    bottom: 88px;
  }

  body:has([data-portal="owner"]) .pierre-nav__popover .pierre-panel, body:has([data-portal="tenant"]) .pierre-nav__popover .pierre-panel {
    bottom: 88px;
    height: min(640px, 100dvh - 100px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pierre-fab__disc, .pierre-fab__status, .pierre-backdrop, .pierre-panel, .pierre-panel__pulse, .pierre-msg, .pierre-typing__dot, .pierre-history, .pierre-history__skeleton, .pierre-msg-skeleton {
    animation: none !important;
  }

  .pierre-nav__trigger, .pierre-panel {
    transition: none;
  }
}

.pierre-in {
  animation: .42s cubic-bezier(.22, 1, .36, 1) both pierre-in;
}

@keyframes pierre-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pierre-card {
  border-color: #e8d29c80;
  box-shadow: 0 1px 2px #dc9d090f, 0 24px 60px -24px #a05f0338;
}

@media (prefers-reduced-motion: reduce) {
  .pierre-in {
    animation: none;
  }
}

.pierre-bubble {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid #ffffffb3;
  box-shadow: inset 0 1px #fffc;
}

.pierre-bubble--me {
  background: linear-gradient(#243061 0%, #18234e 100%);
  border-color: #2f3f7fe6;
  color: #fff;
  box-shadow: inset 0 1px #ffffff29, 0 12px 28px -14px #18234e80;
}

.pierre-bubble--him {
  background: linear-gradient(#fef8e7f5 0%, #fbefd0e0 100%);
  border-color: #eaca8699;
  box-shadow: inset 0 1px #ffffffe6, 0 12px 30px -16px #a05f034d;
}

.pierre-card {
  background: radial-gradient(120% 90% at 8% -10%, #fefbf1f2, #0000 58%), linear-gradient(#ffffffb8 0%, #ffffff6b 100%), #fef9ec8c;
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
}

.pierre-cta {
  background: linear-gradient(#ffffff8c 0%, #ffffff2e 100%), #fdeec447;
  border: 1.5px solid #f0c975a6;
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  box-shadow: inset 0 1.5px #ffffffd9, inset 0 -1px #ffffff4d, 0 14px 34px -16px #a05f0359;
  animation: .9s cubic-bezier(.22, 1, .36, 1) both pierre-cta-in;
  transition: transform var(--hymo-t, .2s) ease, box-shadow var(--hymo-t, .2s) ease, background var(--hymo-t, .2s) ease;
}

.pierre-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(#ffffffb3 0%, #ffffff4d 100%), #fcecba6b;
  box-shadow: inset 0 1.5px #fffffff2, 0 18px 40px -16px #a05f0373;
}

@keyframes pierre-cta-in {
  from {
    opacity: 0;
    transform: translateY(14px)scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pierre-cta {
    animation: none;
  }
}

.pierre-composer {
  background: linear-gradient(#ffffffeb 0%, #fef9ebe0 100%);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px #ffffffe6, 0 14px 34px -18px #a05f0359;
}

.pierre-thread {
  mask-image: linear-gradient(#000 calc(100% - 138px), #0000 calc(100% - 70px));
  -webkit-mask-image: linear-gradient(#000 calc(100% - 138px), #0000 calc(100% - 70px));
}

.pierre-composer--call {
  animation: 2.2s ease-in-out infinite pierre-composer-shake;
}

.pierre-composer--call:focus-within {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .pierre-composer--call {
    animation: none;
  }
}

.pierre-thread {
  scrollbar-width: thin;
  scrollbar-color: #f8e2a0 #faf5e580;
}

.pierre-thread::-webkit-scrollbar {
  width: 26px;
}

.pierre-thread::-webkit-scrollbar-track {
  background: none;
}

.pierre-thread::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(#faebb2, #f3d791);
  border: 8px solid #0000;
  background-clip: content-box;
  box-shadow: inset 0 1px #ffffff80;
  -webkit-transition: background .2s;
  transition: background .2s;
}

.pierre-thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#f9e294, #f3cc72);
  background-clip: content-box;
}

.pierre-thread::-webkit-scrollbar-track {
  background: #faf5e58c;
  border-radius: 999px;
  margin: 10px 0;
}

@keyframes pierre-composer-shake {
  0% {
    transform: translateX(0);
    border-color: #e8d29c80;
    box-shadow: inset 0 1px #ffffffe6, 0 14px 34px -18px #a05f0359, 0 0 #dc9d0952;
  }

  3% {
    transform: translateX(-6px);
    border-color: #dc9d09cc;
  }

  7% {
    transform: translateX(6px);
  }

  11% {
    transform: translateX(-4px);
  }

  15% {
    transform: translateX(4px);
  }

  19% {
    transform: translateX(-2px);
  }

  23%, 100% {
    transform: translateX(0);
    border-color: #e8d29c80;
    box-shadow: inset 0 1px #ffffffe6, 0 14px 34px -18px #a05f0359, 0 0 0 14px #dc9d0900;
  }
}


/* [project]/src/styles/features/error-screen.css [app-client] (css, ) */
.error-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--hymo-bg);
}

.error-screen--full {
  min-height: 100vh;
}

.error-screen--embedded {
  min-height: 60vh;
  border-radius: 20px;
}

.error-screen__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
}

.error-screen__illustration {
  width: min(560px, 88vw);
  height: auto;
  margin: -8% auto -10%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .error-screen__illustration {
    display: none;
  }
}

.error-screen__brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--hymo-fg);
}

.error-screen__brand-dot {
  color: var(--hymo-blue);
}

.error-screen__code {
  margin-top: 0;
  font-family: var(--font-sans), sans-serif;
  font-size: clamp(64px, 16vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  background: var(--hymo-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
}

.error-screen__title {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--hymo-fg);
}

.error-screen__desc {
  margin: 10px auto 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hymo-fg-3);
}

.error-screen__actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

@media (width >= 640px) {
  .error-screen__actions {
    flex-direction: row;
  }
}

.error-screen__cta, .error-screen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  max-width: 320px;
  transition: transform var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), background var(--hymo-t) var(--hymo-ease);
}

@media (width >= 640px) {
  .error-screen__cta, .error-screen__btn {
    width: auto;
  }
}

.error-screen__cta {
  border: none;
  color: #fff;
  background: var(--hymo-blue);
  box-shadow: none;
}

.error-screen__cta:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

.error-screen__btn {
  color: var(--hymo-fg-2);
  border: 1px solid var(--hymo-border);
  background: linear-gradient(#ffffff8c 0%, #fff3 100%);
  box-shadow: var(--hymo-shadow-glass);
}

.error-screen__btn:hover {
  box-shadow: var(--hymo-shadow-glass-hover);
}

.error-screen__btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
  width: auto;
}

.error-screen__report {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hymo-blue);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--hymo-t) ease;
}

.error-screen__report:hover {
  color: var(--hymo-blue-2);
}

.error-screen__report:disabled {
  opacity: .6;
  cursor: default;
}

.error-screen__link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--hymo-fg-4);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--hymo-t) ease;
}

.error-screen__link:hover {
  color: var(--hymo-fg-2);
}

.error-screen__hint, .error-screen__reassure, .error-screen__status {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hymo-fg-4);
  max-width: 46ch;
  margin-inline: auto;
}

.error-screen__hint {
  margin-top: 2px;
}

.error-screen__reassure {
  margin-top: 20px;
}

.error-screen__status {
  min-height: 16px;
  margin-top: 4px;
  color: var(--hymo-fg-3);
}

.error-screen__details {
  margin-top: 18px;
  text-align: left;
}

.error-screen__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hymo-fg-4);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--hymo-t) ease;
}

.error-screen__details-toggle:hover {
  color: var(--hymo-fg-2);
}

.error-screen__details-chevron {
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.error-screen__details-chevron--open {
  transform: rotate(180deg);
}

.error-screen__details-panel {
  margin-top: 6px;
  border-radius: 14px;
  padding: 14px 16px;
}

.error-screen__details-pre {
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--hymo-fg-2);
}

.error-screen__details-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}


/* [project]/src/styles/features/support.css [app-client] (css, ) */
.support-dialog, .support-tickets {
  --primary: 30 11% 4%;
  --primary-foreground: 0 0% 100%;
  --ring: 30 11% 4%;
  --accent: var(--muted);
  --accent-foreground: var(--foreground);
}

.support-dialog[data-portal="tenant"], [data-portal="tenant"] .support-tickets {
  --primary: 172 28% 44%;
  --primary-foreground: 0 0% 100%;
  --ring: 172 28% 44%;
}

.dark .support-dialog, .dark .support-tickets {
  --primary: 40 8% 92%;
  --primary-foreground: 30 11% 6%;
  --ring: 40 8% 92%;
}

.support-dialog .support-btn--primary, .support-tickets .support-btn--primary {
  color: var(--st-color-dark);
  font-weight: 600;
  background: var(--st-soft);
  border: 1px solid var(--st-line);
  box-shadow: 0 1px 2px var(--st-glow);
  transition: background-color var(--hymo-t, .2s) var(--hymo-ease, ease), border-color var(--hymo-t, .2s) var(--hymo-ease, ease), box-shadow var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-dialog .support-btn--primary:hover:not(:disabled), .support-tickets .support-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--st-color) 16%, white);
  border-color: var(--st-color);
  box-shadow: 0 8px 20px -12px var(--st-glow);
}

.support-dialog .support-btn--primary:focus-visible, .support-tickets .support-btn--primary:focus-visible {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
}

.support-dialog .support-btn--cancel:hover:not(:disabled), .support-dialog .support-btn--cancel:focus-visible {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
}

.support-dialog::-webkit-scrollbar, .support-select::-webkit-scrollbar, .support-context__pre::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.support-dialog::-webkit-scrollbar-track, .support-select::-webkit-scrollbar-track, .support-context__pre::-webkit-scrollbar-track {
  background: none;
  margin-block: 16px;
}

.support-dialog::-webkit-scrollbar-thumb, .support-select::-webkit-scrollbar-thumb, .support-context__pre::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--st-color) 14%, transparent);
  border: 4px solid #0000;
  background-clip: content-box;
  border-radius: 999px;
}

.support-dialog:hover::-webkit-scrollbar-thumb, .support-select:hover::-webkit-scrollbar-thumb, .support-context__pre:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--st-color) 28%, transparent);
  background-clip: content-box;
}

.support-dialog::-webkit-scrollbar-thumb:hover, .support-select::-webkit-scrollbar-thumb:hover, .support-context__pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--st-color) 45%, transparent);
  background-clip: content-box;
}

@supports not selector(::-webkit-scrollbar) {
  .support-dialog, .support-select, .support-context__pre {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--st-color) 24%, transparent) transparent;
  }
}

.support-select {
  --accent: var(--muted);
  --accent-foreground: var(--foreground);
}

.support-severity {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.support-severity__option {
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius, .5rem);
  padding: .375rem .75rem;
  font-size: .875rem;
  background: none;
  cursor: pointer;
  transition: background-color var(--hymo-t, .2s) var(--hymo-ease, ease), border-color var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-severity__option:hover {
  border-color: var(--st-line);
}

.support-severity__option:focus-visible {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
}

.support-severity__option--checked {
  background: var(--st-soft);
  border-color: var(--st-color);
  color: var(--st-color-dark);
  font-weight: 600;
}

.support-success__icon {
  color: var(--st-color);
}

@media (prefers-reduced-motion: reduce) {
  .support-dialog .support-btn--primary, .support-tickets .support-btn--primary, .support-severity__option {
    transition: none;
  }
}

.support-kind {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

@media (width >= 480px) {
  .support-kind {
    grid-template-columns: 1fr 1fr;
  }
}

.support-kind__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, .5rem);
  padding: .75rem;
  text-align: left;
  background: none;
  cursor: pointer;
  transition: border-color var(--hymo-t, .2s) var(--hymo-ease, ease), background-color var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-kind__card:hover {
  border-color: hsl(var(--border-hover, var(--border)));
}

.support-kind__card:focus-visible {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
}

.support-kind__card--checked {
  border-color: var(--st-color);
  background: var(--st-soft);
}

.support-kind__icon {
  color: var(--st-color);
}

.support-kind__title {
  font-size: .875rem;
  font-weight: 600;
}

.support-kind__hint {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}

@media (prefers-reduced-motion: reduce) {
  .support-kind__card {
    transition: none;
  }
}

.support-context__chevron {
  transition: transform var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-context__chevron--open {
  transform: rotate(180deg);
}

.support-context__pre {
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace), ui-monospace, monospace;
}

@media (prefers-reduced-motion: reduce) {
  .support-context__chevron {
    transition: none;
  }
}

.support-screenshot__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius, .5rem);
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-screenshot__dropzone:focus-within {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
}

.support-screenshot__label {
  font-size: .875rem;
}

.support-screenshot__hint {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}

.support-screenshot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem;
  margin-bottom: .5rem;
}

.support-screenshot__item {
  position: relative;
}

.support-screenshot__img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--radius, .5rem);
}

.support-screenshot__size {
  display: block;
  font-size: .6875rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.support-screenshot__remove {
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: .25rem;
  background: hsl(var(--background) / .85);
  transition: background-color var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-screenshot__count {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}

@media (prefers-reduced-motion: reduce) {
  .support-screenshot__dropzone, .support-screenshot__remove {
    transition: none;
  }
}

.support-requests {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: .25rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid hsl(var(--border));
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}

.support-requests__link {
  font-weight: 600;
  color: var(--st-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-requests__link:focus-visible {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.support-requests__count {
  white-space: nowrap;
}


/* [project]/src/styles/features/support-tickets.css [app-client] (css, ) */
:root {
  --st-color: var(--hymo-fg);
  --st-color-dark: color-mix(in srgb, var(--st-color) 72%, black);
  --st-page-bg: var(--hymo-bg);
  --st-soft: color-mix(in srgb, var(--st-color) 8%, white);
  --st-faint: color-mix(in srgb, var(--st-color) 4%, white);
  --st-line: color-mix(in srgb, var(--st-color) 22%, white);
  --st-glow: color-mix(in srgb, var(--st-color) 18%, transparent);
  --st-bubble-own: color-mix(in srgb, var(--st-color) 10%, white);
}

[data-portal="tenant"] {
  --st-color: #519087;
  --st-color-dark: color-mix(in srgb, var(--st-color) 72%, black);
  --st-page-bg: #fff;
  --st-soft: color-mix(in srgb, var(--st-color) 8%, white);
  --st-faint: color-mix(in srgb, var(--st-color) 4%, white);
  --st-line: color-mix(in srgb, var(--st-color) 22%, white);
  --st-glow: color-mix(in srgb, var(--st-color) 18%, transparent);
  --st-bubble-own: color-mix(in srgb, var(--st-color) 10%, white);
}

.support-tickets {
  min-height: calc(100dvh - var(--portal-header-h, 56px));
  padding: 1.5rem 1rem 5rem;
  background: var(--st-page-bg);
  color: var(--hymo-fg);
}

@media (width >= 768px) {
  .support-tickets {
    padding: 2.5rem 2rem 5rem;
  }
}

.support-tickets__inner {
  max-width: 840px;
  margin: 0 auto;
}

.support-tickets__head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

@media (width >= 768px) {
  .support-tickets__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.support-tickets__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-color);
}

.support-tickets__eyebrow:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--st-color);
  box-shadow: 0 0 0 4px var(--st-glow);
}

.support-tickets__title {
  margin: .25rem 0 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.support-tickets__lead {
  margin: .25rem 0 0;
  font-size: .9375rem;
  color: var(--hymo-fg-2, hsl(var(--muted-foreground)));
}

.support-ticket-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.support-ticket-list__skeleton {
  height: 84px;
  border-radius: var(--radius-lg, .75rem);
}

.support-ticket-list__error, .support-ticket-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--st-line);
  border-radius: var(--radius-lg, .75rem);
  text-align: center;
  background: var(--st-faint);
}

.support-ticket-list__empty-title {
  font-size: 1rem;
  font-weight: 600;
}

.support-ticket-list__empty-text, .support-ticket-list__error-text {
  font-size: .875rem;
  color: var(--hymo-fg-2, hsl(var(--muted-foreground)));
  max-width: 34ch;
}

.support-ticket-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg, .75rem);
  background: hsl(var(--card));
  text-decoration: none;
  color: inherit;
  transition: border-color var(--hymo-t, .2s) var(--hymo-ease, ease), box-shadow var(--hymo-t, .2s) var(--hymo-ease, ease), transform var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.support-ticket-item:hover {
  border-color: var(--st-color);
  box-shadow: 0 6px 20px -12px var(--st-glow);
  transform: translateY(-1px);
}

.support-ticket-item:focus-visible {
  outline: 2px solid var(--st-color);
  outline-offset: 2px;
}

.support-ticket-item--closed {
  background: var(--st-faint);
}

.support-ticket-item__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.support-ticket-item__ref {
  font-family: var(--font-mono, ui-monospace), ui-monospace, monospace;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--st-color);
}

.support-ticket-item__module {
  font-size: .75rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
}

.support-ticket-item__excerpt {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-item__meta {
  grid-column: 1 / -1;
  font-size: .75rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
}

.support-ticket-item__status {
  justify-self: end;
  align-self: start;
}

.support-thread__back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--hymo-fg-2, hsl(var(--muted-foreground)));
  text-decoration: none;
}

.support-thread__back:hover {
  color: var(--st-color);
}

.support-thread__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}

.support-thread__ref {
  font-family: var(--font-mono, ui-monospace), ui-monospace, monospace;
  font-size: .875rem;
  font-weight: 600;
  color: var(--st-color);
}

.support-thread__title {
  flex-basis: 100%;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.support-thread__meta {
  font-size: .8125rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
}

.support-thread__description {
  padding: 1rem 1.125rem;
  border: 1px solid var(--st-line);
  border-left: 3px solid var(--st-color);
  border-radius: var(--radius-lg, .75rem);
  background: hsl(var(--card));
  font-size: .9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.support-thread__messages {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.5rem 0;
}

.support-thread__closed {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-lg, .75rem);
  background: var(--st-soft);
  font-size: .875rem;
  color: var(--hymo-fg-2, hsl(var(--muted-foreground)));
}

.support-thread__error, .support-thread__notfound {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--st-line);
  border-radius: var(--radius-lg, .75rem);
  text-align: center;
  background: var(--st-faint);
}

.support-bubble {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: min(85%, 560px);
}

.support-bubble--user {
  align-self: flex-end;
  align-items: flex-end;
}

.support-bubble--team {
  align-self: flex-start;
  align-items: flex-start;
}

.support-bubble--system {
  align-self: center;
  align-items: center;
  max-width: 100%;
}

.support-bubble__author {
  font-size: .75rem;
  font-weight: 600;
  color: var(--hymo-fg-2, hsl(var(--muted-foreground)));
}

.support-bubble__content {
  margin: 0;
  padding: .625rem .875rem;
  border-radius: var(--radius-lg, .75rem);
  border: 1px solid var(--st-line);
  background: hsl(var(--card));
  font-size: .9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.support-bubble--user .support-bubble__content {
  background: var(--st-bubble-own);
  border-color: #0000;
}

.support-bubble--system .support-bubble__content {
  padding: .375rem .75rem;
  border: 0;
  background: none;
  font-size: .8125rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
  text-align: center;
}

.support-bubble__time {
  font-size: .6875rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
}

.support-reply {
  position: sticky;
  bottom: calc(var(--mobile-nav-h, 74px)  + env(safe-area-inset-bottom, 0px)  + .5rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem;
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg, .75rem);
  background: hsl(var(--card));
  box-shadow: 0 10px 30px -18px var(--st-glow);
}

@media (width >= 1024px) {
  .support-reply {
    bottom: 1rem;
  }
}

.support-reply__row {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

.support-reply__hint, .support-reply__error {
  margin: 0;
  font-size: .75rem;
  color: var(--hymo-fg-3, hsl(var(--muted-foreground)));
}

.support-reply__error {
  color: hsl(var(--destructive));
}

@media (prefers-reduced-motion: reduce) {
  .support-ticket-item {
    transition: none;
  }
}


/* [project]/src/styles/pages/edl.css [app-client] (css, ) */
[data-edl] {
  --edl-gap: 1.25rem;
}

[data-edl] .edl-inv__intro {
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

[data-edl] .edl-inv__rows {
  display: flex;
  flex-direction: column;
}

[data-edl] .edl-inv__row {
  padding: .875rem 0;
  border-top: 1px solid hsl(var(--foreground) / .06);
}

[data-edl] .edl-inv__row:first-child {
  padding-top: 0;
  border-top: 0;
}

[data-edl] .edl-inv__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.75rem;
}

[data-edl] .edl-inv__row-title {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
}

[data-edl] .edl-inv__row-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: hsl(var(--blue-soft));
  font-size: 1rem;
}

[data-edl] .edl-inv__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .625rem;
  margin-top: .5rem;
}

[data-edl] .edl-inv__label {
  display: block;
  margin-bottom: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: hsl(var(--fg-4));
}

[data-edl] .edl-inv__input {
  height: 2.75rem;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / .7);
  padding: 0 .75rem;
  font-size: .9375rem;
  color: hsl(var(--foreground));
  box-shadow: none;
  transition: border-color var(--hymo-t) var(--hymo-ease);
}

[data-edl] .edl-inv__input:focus-visible, [data-edl] .edl-inv__input[data-state="open"] {
  border-color: hsl(var(--blue) / .6);
  outline: none;
  box-shadow: none;
}

[data-edl] .edl-inv__input::-moz-placeholder {
  color: hsl(var(--fg-4));
}

[data-edl] .edl-inv__input::placeholder {
  color: hsl(var(--fg-4));
}

[data-edl] .edl-inv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
}

[data-edl] .edl-inv__chip {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .375rem;
  border-radius: 9px;
  border: 1px solid #0000;
  padding: 0 .75rem;
  background: hsl(var(--surface-3) / .6);
  color: hsl(var(--muted-foreground));
  font-size: .8125rem;
  font-weight: 500;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), transform var(--hymo-t-fast) var(--hymo-ease);
}

[data-edl] .edl-inv__chip[aria-pressed="true"] {
  background: hsl(var(--blue));
  color: hsl(var(--background));
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

[data-edl] .edl-inv__chip:active {
  transform: scale(.97);
}

[data-edl] .edl-inv__chip:disabled {
  opacity: .5;
}

[data-edl] .edl-inv__text-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .375rem;
  margin-left: -.5rem;
  border-radius: 8px;
  padding: 0 .5rem;
  color: hsl(var(--blue));
  font-size: .8125rem;
  font-weight: 600;
  transition: color var(--hymo-t) var(--hymo-ease);
}

[data-edl] .edl-inv__text-btn:hover {
  color: hsl(var(--blue-2));
}

[data-edl] .edl-inv__text-btn--danger {
  color: hsl(var(--danger));
}

[data-edl] .edl-inv__text-btn--icon {
  min-width: 44px;
  justify-content: center;
  margin-left: 0;
  margin-right: -.5rem;
}

[data-edl] .edl-inv__text-btn:disabled {
  opacity: .5;
}

[data-edl] .edl-inv__total {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid hsl(var(--foreground) / .06);
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--blue-2));
}

@media (width >= 768px) {
  [data-edl] .edl-inv__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-edl] .edl-inv__fields--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

[data-edl] .edl-cond, [data-property-detail] .edl-cond {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid #0000;
  padding: 0 .875rem;
  font-size: .8125rem;
  font-weight: 500;
  transition: all var(--hymo-t) var(--hymo-ease);
}

[data-edl] .edl-cond--neuf {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
  border-color: hsl(var(--success) / .35);
}

[data-edl] .edl-cond--tres-bon {
  background: hsl(var(--success-light) / .55);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / .2);
}

[data-edl] .edl-cond--bon {
  background: hsl(var(--info-light));
  color: hsl(var(--info));
  border-color: hsl(var(--info) / .3);
}

[data-edl] .edl-cond--usage {
  background: hsl(var(--warning-light));
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / .35);
}

[data-edl] .edl-cond--mauvais {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
  border-color: hsl(var(--danger) / .35);
}

[data-edl] .edl-cond--selected.edl-cond--neuf {
  background: hsl(var(--success));
  color: hsl(var(--background));
  border-color: hsl(var(--success));
}

[data-edl] .edl-cond--selected.edl-cond--tres-bon {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
  border-color: hsl(var(--success));
  box-shadow: inset 0 0 0 1px hsl(var(--success));
}

[data-edl] .edl-cond--selected.edl-cond--bon {
  background: hsl(var(--info));
  color: hsl(var(--background));
  border-color: hsl(var(--info));
}

[data-edl] .edl-cond--selected.edl-cond--usage {
  background: hsl(var(--warning));
  color: hsl(var(--background));
  border-color: hsl(var(--warning));
}

[data-edl] .edl-cond--selected.edl-cond--mauvais {
  background: hsl(var(--danger));
  color: hsl(var(--background));
  border-color: hsl(var(--danger));
}

[data-edl] .edl-cond--readonly {
  min-height: 0;
  padding: .125rem .625rem;
  font-size: .75rem;
}


/* [project]/src/styles/features/edl-field.css [app-client] (css, ) */
.edl-field {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: hsl(var(--background-subtle));
}

.edl-field__header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(var(--hymo-glass-blur)) saturate(180%);
  border-bottom: 1px solid var(--hymo-glass-border-light);
  box-shadow: 0 1px 2px #0f0c090a;
}

.edl-field__progress {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: hsl(var(--blue));
}

.edl-field__header-lead {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}

.edl-field__header-add {
  color: hsl(var(--blue));
}

.edl-field__room-head-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.edl-field__room-edit {
  color: hsl(var(--muted-foreground));
}

.edl-field__room-delete {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--danger));
}

.edl-field__room-delete:hover {
  text-decoration: underline;
}

.edl-field__main {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  padding-bottom: 7.5rem;
}

.edl-field__room-elements {
  display: flex;
  flex-direction: column;
}

.edl-field__room-notes {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--foreground) / .06);
}

.edl-field__room-notes-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.edl-field__element {
  padding: .625rem 0 .875rem;
  border-top: 1px solid hsl(var(--foreground) / .06);
}

.edl-field__element:first-child {
  padding-top: 0;
  border-top: 0;
}

.edl-field__element-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.75rem;
}

.edl-field__element-label {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
}

.edl-field__element-tools {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-shrink: 0;
}

.edl-field__element-count {
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--blue));
}

.edl-field__element-toggle {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.75rem;
  align-items: center;
  justify-content: center;
  color: hsl(var(--fg-4));
  transition: color var(--hymo-t-fast) var(--hymo-ease);
}

.edl-field__element-toggle:hover {
  color: hsl(var(--blue));
}

.edl-field__element-toggle[aria-expanded="true"] {
  color: hsl(var(--blue));
}

.edl-field__element-toggle:disabled {
  opacity: .5;
}

.edl-field__element-chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--hymo-t) var(--hymo-ease);
}

.edl-field__element-toggle[aria-expanded="true"] .edl-field__element-chevron {
  transform: rotate(180deg);
}

.edl-field__element-entry-ref {
  margin-top: -.125rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}

.edl-field__element-today-label {
  margin-top: .375rem;
  margin-bottom: -.25rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: hsl(var(--blue));
}

.edl-field__element-conditions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin-top: .25rem;
  padding: 0 2px;
}

.edl-field__element-conditions:before {
  content: "";
  position: absolute;
  inset: 4px 0;
  border-radius: 10px;
  background: hsl(var(--surface-3) / .6);
}

.edl-field__element-pill {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  padding: 4px 0;
}

.edl-field__element-pill-fill {
  display: inline-flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 0 .125rem;
  color: hsl(var(--muted-foreground));
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease), box-shadow var(--hymo-t) var(--hymo-ease), transform var(--hymo-t-fast) var(--hymo-ease);
}

.edl-field__element-pill[aria-pressed="true"] .edl-field__element-pill-fill {
  background: hsl(var(--blue));
  color: hsl(var(--background));
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.edl-field__element-pill:active .edl-field__element-pill-fill {
  transform: scale(.97);
}

.edl-field__element-pill:disabled .edl-field__element-pill-fill {
  opacity: .5;
}

.edl-field__element-detail {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
  animation: edl-field-reveal var(--hymo-t-slow) var(--hymo-ease) both;
}

@keyframes edl-field-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

.edl-field .edl-field__notes {
  min-height: 2.5rem;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / .7);
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.4;
  color: hsl(var(--foreground));
  box-shadow: none;
  resize: none;
  transition: border-color var(--hymo-t) var(--hymo-ease);
}

.edl-field .edl-field__notes:focus-visible {
  border-color: hsl(var(--blue) / .6);
  outline: none;
  box-shadow: none;
}

.edl-field .edl-field__notes::-moz-placeholder {
  color: hsl(var(--fg-4));
}

.edl-field .edl-field__notes::placeholder {
  color: hsl(var(--fg-4));
}

.edl-field__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1rem .75rem;
  background: var(--hymo-glass-strong);
  backdrop-filter: blur(var(--hymo-glass-blur)) saturate(180%);
  border-top: 1px solid var(--hymo-glass-border-light);
  box-shadow: 0 -1px 2px #0f0c090a;
}

.edl-field__footer-back, .edl-field__header-add, .edl-field__room-edit, .edl-field__banner-back {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: hsl(var(--foreground));
  transition: transform var(--hymo-t-fast) var(--hymo-ease);
}

.edl-field__footer-back:before, .edl-field__header-add:before, .edl-field__room-edit:before, .edl-field__banner-back:before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: var(--radius-full);
  background: hsl(var(--background));
  box-shadow: var(--hymo-shadow-card);
  transition: box-shadow var(--hymo-t) var(--hymo-ease);
}

.edl-field__footer-back svg, .edl-field__header-add svg, .edl-field__room-edit svg, .edl-field__banner-back svg {
  position: relative;
}

.edl-field__footer-back:hover:before, .edl-field__header-add:hover:before, .edl-field__room-edit:hover:before, .edl-field__banner-back:hover:before {
  box-shadow: var(--hymo-shadow-pop);
}

.edl-field__footer-back:active, .edl-field__header-add:active, .edl-field__room-edit:active, .edl-field__banner-back:active {
  transform: scale(.96);
}

.edl-field__footer-back:disabled {
  opacity: .5;
}

.edl-field__banner-back {
  color: hsl(var(--blue));
}

.edl-field .edl-field__footer-next {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-cta);
}

.edl-field__done-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.edl-field__done-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: hsl(var(--blue));
}

.edl-field__done-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: hsl(var(--foreground));
}

.edl-field__done-sub {
  margin-top: -.25rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}

.edl-field__done-text {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.45;
  color: hsl(var(--foreground));
}

.edl-field__done-remaining {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: .75rem;
  border-top: 1px solid hsl(var(--foreground) / .06);
}

.edl-field__done-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid hsl(var(--foreground) / .06);
}

.edl-field__done-item-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: .125rem;
  color: hsl(var(--blue));
}

.edl-field__done-item-title {
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.edl-field__done-item-text {
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: hsl(var(--muted-foreground));
}

.edl-field__done-link {
  font-weight: 600;
  color: hsl(var(--blue));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.edl-field__done-error {
  margin-top: .75rem;
  font-size: .8125rem;
  color: hsl(var(--danger));
}

.edl-field__main--centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.edl-field__sent-card {
  width: 100%;
  max-width: 28rem;
}

.edl-field__done-icon--warning {
  color: hsl(var(--warning));
}

.edl-field__sent-countdown {
  margin-top: .75rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}

.edl-field__confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.edl-field__confetti-piece {
  position: absolute;
  top: -1rem;
  width: .5rem;
  height: .75rem;
  border-radius: 2px;
  opacity: 0;
  background: hsl(var(--blue));
  animation: 2.8s cubic-bezier(.25, .6, .4, 1) forwards edl-field-confetti-fall;
}

.edl-field__confetti-piece:nth-child(4n+2) {
  background: hsl(var(--blue-3));
  width: .375rem;
}

.edl-field__confetti-piece:nth-child(4n+3) {
  background: hsl(var(--warning));
  height: .5rem;
}

.edl-field__confetti-piece:nth-child(4n+4) {
  background: hsl(var(--success));
  border-radius: 9999px;
  width: .5rem;
  height: .5rem;
}

.edl-field__confetti-piece:first-child {
  left: 4%;
  animation-delay: 0s;
  animation-duration: 2.6s;
}

.edl-field__confetti-piece:nth-child(2) {
  left: 12%;
  animation-delay: .18s;
  animation-duration: 3.1s;
}

.edl-field__confetti-piece:nth-child(3) {
  left: 20%;
  animation-delay: 60ms;
  animation-duration: 2.8s;
}

.edl-field__confetti-piece:nth-child(4) {
  left: 27%;
  animation-delay: .3s;
  animation-duration: 3.4s;
}

.edl-field__confetti-piece:nth-child(5) {
  left: 34%;
  animation-delay: .12s;
  animation-duration: 2.5s;
}

.edl-field__confetti-piece:nth-child(6) {
  left: 41%;
  animation-delay: .42s;
  animation-duration: 3s;
}

.edl-field__confetti-piece:nth-child(7) {
  left: 48%;
  animation-delay: 30ms;
  animation-duration: 2.9s;
}

.edl-field__confetti-piece:nth-child(8) {
  left: 55%;
  animation-delay: .24s;
  animation-duration: 3.3s;
}

.edl-field__confetti-piece:nth-child(9) {
  left: 62%;
  animation-delay: .36s;
  animation-duration: 2.7s;
}

.edl-field__confetti-piece:nth-child(10) {
  left: 69%;
  animation-delay: 90ms;
  animation-duration: 3.2s;
}

.edl-field__confetti-piece:nth-child(11) {
  left: 76%;
  animation-delay: .21s;
  animation-duration: 2.6s;
}

.edl-field__confetti-piece:nth-child(12) {
  left: 83%;
  animation-delay: .48s;
  animation-duration: 3s;
}

.edl-field__confetti-piece:nth-child(13) {
  left: 90%;
  animation-delay: .15s;
  animation-duration: 3.4s;
}

.edl-field__confetti-piece:nth-child(14) {
  left: 96%;
  animation-delay: .33s;
  animation-duration: 2.8s;
}

.edl-field__confetti-piece:nth-child(15) {
  left: 16%;
  animation-delay: .54s;
  animation-duration: 3.1s;
}

.edl-field__confetti-piece:nth-child(16) {
  left: 44%;
  animation-delay: .27s;
  animation-duration: 2.7s;
}

.edl-field__confetti-piece:nth-child(17) {
  left: 72%;
  animation-delay: .6s;
  animation-duration: 3.3s;
}

.edl-field__confetti-piece:nth-child(18) {
  left: 58%;
  animation-delay: .39s;
  animation-duration: 2.9s;
}

@keyframes edl-field-confetti-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0)rotate(0);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(1.5rem, 100dvh, 0)rotate(900deg);
  }
}

.edl-field__step-intro {
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}

.edl-field__rows {
  display: flex;
  flex-direction: column;
}

.edl-field__row {
  padding: .75rem 0;
  border-top: 1px solid hsl(var(--foreground) / .06);
}

.edl-field__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.edl-field__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.75rem;
}

.edl-field__row-label {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
}

.edl-field__row-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-top: .25rem;
}

.edl-field__row-fields--2 {
  grid-template-columns: 1fr 1fr;
}

.edl-field__field-label {
  display: block;
  margin-bottom: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: hsl(var(--fg-4));
}

.edl-field .edl-field__input {
  height: 2.75rem;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / .7);
  padding: 0 .75rem;
  font-size: .9375rem;
  color: hsl(var(--foreground));
  box-shadow: none;
  transition: border-color var(--hymo-t) var(--hymo-ease);
}

.edl-field .edl-field__input:focus-visible {
  border-color: hsl(var(--blue) / .6);
  outline: none;
  box-shadow: none;
}

.edl-field .edl-field__input::-moz-placeholder {
  color: hsl(var(--fg-4));
}

.edl-field .edl-field__input::placeholder {
  color: hsl(var(--fg-4));
}

.edl-field__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.75rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}

.edl-field__stepper {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.edl-field__stepper-btn {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: hsl(var(--blue));
  background: hsl(var(--blue-soft));
  transition: background var(--hymo-t-fast) var(--hymo-ease), transform var(--hymo-t-fast) var(--hymo-ease);
}

.edl-field__stepper-btn:active {
  transform: scale(.96);
}

.edl-field__stepper-btn:disabled {
  opacity: .4;
}

.edl-field__stepper-value {
  min-width: 2.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
}

.edl-field__total {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid hsl(var(--foreground) / .06);
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--blue-2));
}

.edl-field__text-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .375rem;
  margin-left: -.5rem;
  border-radius: 8px;
  padding: 0 .5rem;
  color: hsl(var(--blue));
  font-size: .8125rem;
  font-weight: 600;
  transition: color var(--hymo-t) var(--hymo-ease);
}

.edl-field__text-btn:hover {
  color: hsl(var(--blue-2));
}

.edl-field__text-btn--danger {
  color: hsl(var(--danger));
}

.edl-field__text-btn--icon {
  min-width: 44px;
  justify-content: center;
  margin-left: 0;
  margin-right: -.5rem;
}

.edl-field__text-btn:disabled {
  opacity: .5;
}

.edl-field__meter-photo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

.edl-field__footer-hint {
  flex-basis: 100%;
  margin: -.125rem 0 .25rem;
  font-size: .75rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
}

.edl-field__footer-hint--error {
  margin: .25rem 0 0;
  color: hsl(var(--danger));
}

.edl-field__footer {
  flex-wrap: wrap;
}

.edl-field__sync-icon {
  width: .875rem;
  height: .875rem;
}

.edl-field__sync-icon--spin {
  animation: 1s linear infinite edl-field-spin;
}

@keyframes edl-field-spin {
  to {
    transform: rotate(360deg);
  }
}

.edl-field__sync-pending {
  opacity: .85;
}

.edl-field__empty {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem;
  text-align: center;
  background: hsl(var(--background-subtle));
}

.edl-field__empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--blue));
}

.edl-field__empty-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.edl-field__empty-text {
  max-width: 26rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}

.edl-field__empty-cta {
  margin-top: .5rem;
}

.edl-field__empty-cta button {
  min-height: 44px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.edl-field__blockers {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1rem;
  background: hsl(var(--background-subtle));
}

.edl-field__blockers-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.edl-field__blockers-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.edl-field__photo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.edl-field__photo-tile {
  position: relative;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: hsl(var(--surface-3));
  box-shadow: var(--hymo-shadow-card);
}

.edl-field__photo-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: .25rem;
  color: hsl(var(--background));
  background: none;
  transition: opacity var(--hymo-t) var(--hymo-ease);
}

.edl-field__photo-remove svg {
  border-radius: var(--radius-full);
  background: hsl(var(--foreground) / .6);
  padding: .125rem;
}

.edl-field__photo-remove:disabled {
  opacity: .5;
}

.edl-field__photo-tile--pending {
  flex-direction: column;
  gap: .25rem;
  padding: .25rem;
  font-size: .625rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.edl-field__photo-add {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .375rem;
  margin-left: -.5rem;
  border-radius: 8px;
  padding: 0 .5rem;
  color: hsl(var(--blue));
  font-size: .8125rem;
  font-weight: 600;
  transition: color var(--hymo-t) var(--hymo-ease);
}

.edl-field__photo-add:hover {
  color: hsl(var(--blue-2));
}

.edl-field__photo-add:disabled {
  opacity: .6;
}

.edl-field__recap {
  padding-bottom: 1rem;
}

.edl-field__recap-header {
  padding-bottom: .5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.edl-field__recap-row {
  scroll-margin-top: 1rem;
}

.edl-field__recap-entry-ref {
  font-style: italic;
}

.edl-field__recap-actions {
  background: hsl(var(--background));
}

@media (prefers-reduced-motion: reduce) {
  .edl-field__element-detail, .edl-field__element-chevron {
    animation: none;
    transition: none;
  }

  .edl-field__confetti {
    display: none;
  }
}

@media (width <= 767px) {
  .edl-field__main {
    padding: .75rem;
    padding-bottom: 7.5rem;
  }

  .edl-field .pd-glass-card {
    padding: 1rem;
  }
}

@media (width >= 768px) {
  .edl-field__main > * {
    max-width: 44rem;
    margin-inline: auto;
  }

  .edl-field__element-conditions {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
  }

  .edl-field__element-pill-fill {
    padding: 0 .875rem;
    font-size: .8125rem;
  }
}


/* [project]/src/styles/features/document-drive.css [app-client] (css, ) */
.doc-drive {
  --drive-accent: var(--blue, var(--primary));
  --drive-accent-2: var(--blue-2, var(--primary));
  --drive-accent-soft: var(--blue-soft, var(--secondary));
  --drive-accent-line: var(--blue-line, var(--border));
  --drive-accent-faint: var(--blue-faint, var(--background-subtle));
  --drive-fg-4: var(--fg-4, var(--muted-foreground));
  --drive-surface-2: var(--surface-3, var(--secondary));
  --drive-surface-1: var(--bg-tint, var(--background-subtle));
  --drive-custom: 38 92% 40%;
  --drive-custom-soft: 38 100% 95%;
  --drive-custom-line: 38 80% 80%;
  --drive-preview-h: 148px;
  --drive-thumb-inset: 10px;
}

.dark .doc-drive {
  --drive-custom: 38 90% 62%;
  --drive-custom-soft: 38 40% 14%;
  --drive-custom-line: 38 45% 28%;
}

.doc-drive-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-drive-section + .doc-drive-section {
  margin-top: 18px;
}

.doc-drive-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.doc-drive-section__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.doc-drive-section__hint {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.doc-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-folder-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 12px 0 14px;
  border-radius: 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  transition: border-color var(--hymo-t, .2s) var(--hymo-ease, ease), box-shadow var(--hymo-t, .2s) var(--hymo-ease, ease), background var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.doc-folder-tile:hover {
  border-color: hsl(var(--border-hover));
  box-shadow: var(--hymo-shadow-card);
}

.doc-folder-tile:focus-visible {
  outline: 2px solid hsl(var(--drive-accent));
  outline-offset: 2px;
}

.doc-folder-tile--drop {
  background: hsl(var(--drive-accent-soft));
  border-color: hsl(var(--drive-accent));
  box-shadow: 0 0 0 3px hsl(var(--drive-accent-line));
}

.doc-folder-tile__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: hsl(var(--info));
}

.doc-folder-tile--custom .doc-folder-tile__icon {
  color: hsl(var(--drive-custom));
}

.doc-folder-tile--drop .doc-folder-tile__icon {
  color: hsl(var(--drive-accent));
}

.doc-folder-tile__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.doc-folder-tile__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-folder-tile__count {
  font-size: 11.5px;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
}

.doc-folder-tile--drop .doc-folder-tile__count {
  color: hsl(var(--drive-accent-2));
  font-weight: 500;
}

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid #0000;
}

.doc-chip--neutral {
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}

.doc-chip--accent {
  background: hsl(var(--drive-accent-soft));
  color: hsl(var(--drive-accent-2));
  border-color: hsl(var(--drive-accent-line));
}

.doc-chip--custom {
  background: hsl(var(--drive-custom-soft));
  color: hsl(var(--drive-custom));
  border-color: hsl(var(--drive-custom-line));
}

.doc-chip--danger {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
  border-color: hsl(var(--danger) / .25);
}

.doc-chip--warning {
  background: hsl(var(--warning-light));
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / .3);
}

.doc-chip--success {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
  border-color: hsl(var(--success) / .3);
}

.doc-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: hsl(var(--card));
  color: hsl(var(--drive-fg-4));
}

.doc-thumb--card {
  width: calc(100% - 2 * var(--drive-thumb-inset));
  height: calc(var(--drive-preview-h)  - var(--drive-thumb-inset));
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -1px #0f0c090f, 0 8px 24px -12px #0f0c0959;
}

.doc-thumb--row {
  width: 40px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid hsl(var(--border));
}

.doc-thumb--mini {
  width: 30px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid hsl(var(--border));
}

.doc-thumb--icon {
  background: hsl(var(--drive-surface-2));
}

.doc-thumb--pdf.doc-thumb--icon {
  color: hsl(var(--danger));
}

.doc-thumb--image.doc-thumb--icon {
  color: hsl(var(--info));
}

.doc-thumb--sheet.doc-thumb--icon {
  color: hsl(var(--success));
}

.doc-thumb__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
  display: block;
}

.doc-thumb__icon {
  width: 34%;
  height: 34%;
  min-width: 16px;
  min-height: 16px;
}

.doc-file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--hymo-shadow-glass);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--hymo-t, .2s) var(--hymo-ease, ease), box-shadow var(--hymo-t, .2s) var(--hymo-ease, ease), transform var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.doc-file-card:hover {
  border-color: hsl(var(--border-hover));
  box-shadow: var(--hymo-shadow-card);
  transform: translateY(-2px);
}

.doc-file-card:focus-visible {
  outline: 2px solid hsl(var(--drive-accent));
  outline-offset: 2px;
}

.doc-file-card--highlight {
  animation: doc-card-flash 3s var(--hymo-ease, ease-out) both;
}

@keyframes doc-card-flash {
  0%, 60% {
    box-shadow: 0 0 0 2px hsl(var(--drive-accent)), var(--hymo-shadow-card);
  }

  100% {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-file-card--highlight {
    animation: none;
    box-shadow: 0 0 0 2px hsl(var(--drive-accent));
  }
}

.doc-file-card--selected {
  border-color: hsl(var(--drive-accent));
  box-shadow: 0 0 0 3px hsl(var(--drive-accent-line));
}

.doc-file-card--ghost {
  cursor: default;
}

.doc-file-card--ghost:hover {
  transform: none;
  box-shadow: var(--hymo-shadow-glass);
  border-color: hsl(var(--border));
}

.doc-file-card--skeleton {
  height: 200px;
  background: hsl(var(--secondary));
  animation: 1.5s ease-in-out infinite pulse;
  cursor: default;
}

.doc-file-card--error {
  border-color: hsl(var(--danger) / .5);
}

.doc-file-card__preview {
  position: relative;
  height: var(--drive-preview-h);
  background: hsl(var(--drive-surface-1));
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.doc-file-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.doc-file-card__badge-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.doc-file-card__checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}

.doc-file-card__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: hsl(var(--drive-accent));
  cursor: pointer;
}

.doc-file-card__body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 8px 10px 12px;
}

.doc-file-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.doc-file-card__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-file-card__meta {
  font-size: 11.5px;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-file-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.doc-file-card__chips:empty {
  display: none;
}

.doc-file-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: -2px;
  color: hsl(var(--drive-fg-4));
}

.doc-file-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.doc-file-card__status--shared {
  color: hsl(var(--drive-accent));
}

.doc-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--card) / .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.doc-ghost__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(hsl(var(--drive-accent)) calc(var(--doc-progress, 0) * 1%), hsl(var(--drive-accent-line)) 0);
}

.doc-ghost__ring--error {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
}

.doc-ghost__ring--done {
  background: hsl(var(--success-light));
  color: hsl(var(--success));
}

.doc-ghost__value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsl(var(--card));
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--drive-accent-2));
  font-variant-numeric: tabular-nums;
}

.doc-ghost__retry {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--drive-accent));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.doc-ghost__retry:hover {
  text-decoration: underline;
}

.doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.doc-breadcrumb::-webkit-scrollbar {
  display: none;
}

.doc-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.doc-breadcrumb__link {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 4px 6px;
  border-radius: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.doc-breadcrumb__link:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.doc-breadcrumb__link:focus-visible {
  outline: 2px solid hsl(var(--drive-accent));
  outline-offset: 1px;
}

.doc-breadcrumb__current {
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--foreground));
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-breadcrumb__sep {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: hsl(var(--drive-fg-4));
}

.doc-breadcrumb__ellipsis {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 4px 6px;
  border-radius: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: .08em;
}

.doc-breadcrumb__ellipsis:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.doc-breadcrumb__ellipsis:focus-visible {
  outline: 2px solid hsl(var(--drive-accent));
  outline-offset: 1px;
}

.doc-breadcrumb__link--drop, .doc-breadcrumb__ellipsis--drop {
  background: hsl(var(--drive-accent-soft));
  color: hsl(var(--drive-accent-2));
  box-shadow: 0 0 0 2px hsl(var(--drive-accent-line));
}

.doc-grid__item[draggable="true"] {
  cursor: grab;
}

.doc-grid__item[draggable="true"]:active {
  cursor: grabbing;
}

@media (width >= 1024px) {
  .doc-filter-bar.doc-filter-bar {
    flex-wrap: nowrap;
  }

  .doc-breadcrumb.doc-breadcrumb {
    flex: auto;
  }

  .doc-breadcrumb__link, .doc-breadcrumb__current {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .doc-breadcrumb__item:last-child {
    flex-shrink: 0;
  }

  .doc-filter-bar__search-wrapper.doc-filter-bar__search-wrapper {
    flex: 0 240px;
    min-width: 120px;
  }
}

.doc-drive__content {
  position: relative;
  border-radius: 20px;
  transition: box-shadow var(--hymo-t, .2s) var(--hymo-ease, ease);
}

.doc-drive__content--drop {
  box-shadow: inset 0 0 0 2px hsl(var(--drive-accent));
  background: hsl(var(--drive-accent-faint));
}

.doc-drive__drop-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  background: hsl(var(--card) / .6);
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--drive-accent-2));
  pointer-events: none;
}

.doc-tree-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px 12px;
}

.doc-tree-panel__head .doc-tree-panel__title {
  padding: 0;
}

.doc-tree-panel__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: hsl(var(--drive-accent));
  cursor: pointer;
}

.doc-tree-panel__add:hover {
  background: hsl(var(--drive-accent-soft));
}

.doc-tree-panel__add:disabled {
  color: hsl(var(--drive-fg-4));
  cursor: not-allowed;
}

.doc-tree-item--drop {
  background: hsl(var(--drive-accent-soft));
  box-shadow: inset 0 0 0 1px hsl(var(--drive-accent));
}

.doc-tree-item--drop .doc-tree-item__icon {
  color: hsl(var(--drive-accent));
}

.doc-tree-item--custom .doc-tree-item__icon {
  color: hsl(var(--drive-custom));
}

.doc-tree-item--active .doc-tree-item__icon {
  color: hsl(var(--drive-accent));
}

.doc-tree-item--active {
  background: hsl(var(--drive-accent-soft));
}

.doc-tree-item__menu {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--hymo-t-fast, .12s) ease, background var(--hymo-t-fast, .12s) ease;
}

.doc-tree-row:hover .doc-tree-item__menu, .doc-tree-row:focus-within .doc-tree-item__menu, .doc-tree-item__menu[data-state="open"], .doc-tree-row--active .doc-tree-item__menu {
  opacity: 1;
}

.doc-tree-item__menu:hover {
  background: hsl(var(--card));
}

@media (hover: none) {
  .doc-tree-item__menu {
    opacity: 1;
  }
}

.doc-tree-row {
  position: relative;
  display: flex;
  align-items: center;
}

.doc-tree-row .doc-tree-item {
  padding-right: 36px;
  padding-left: calc(12px + var(--tree-depth, 0) * 16px);
}

.doc-tree-item__chevron--open {
  transform: rotate(90deg);
}

.doc-tree-item__rename-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--drive-accent));
  box-shadow: 0 0 0 3px hsl(var(--drive-accent-line));
  color: hsl(var(--foreground));
  font-size: 13px;
  outline: none;
}

.doc-tree-ghost {
  margin-top: 6px;
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border-strong, var(--border)));
}

.doc-tree-ghost:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--drive-accent));
  background: hsl(var(--drive-accent-faint));
}

.doc-tree-ghost:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.doc-tree-menu__hint {
  padding: 6px 10px 4px;
  font-size: 11px;
  line-height: 1.4;
  color: hsl(var(--drive-fg-4));
}

.doc-upload-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(360px, 100vw - 32px);
  border-radius: 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--hymo-shadow-pop);
  overflow: hidden;
  animation: doc-dock-in var(--hymo-t-slow, .32s) var(--hymo-ease, ease);
}

@keyframes doc-dock-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.doc-upload-dock__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 8px 0 14px;
  background: hsl(var(--drive-accent-faint));
  border-bottom: 1px solid hsl(var(--drive-accent-line));
  color: hsl(var(--drive-accent-2));
}

.doc-upload-dock--done .doc-upload-dock__head {
  background: hsl(var(--success-light));
  border-bottom-color: hsl(var(--success) / .3);
  color: hsl(var(--success));
}

.doc-upload-dock--error .doc-upload-dock__head {
  background: hsl(var(--danger-light));
  border-bottom-color: hsl(var(--danger) / .3);
  color: hsl(var(--danger));
}

.doc-upload-dock--collapsed .doc-upload-dock__head {
  border-bottom: 0;
}

.doc-upload-dock__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-upload-dock__ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.doc-upload-dock__ctl:hover {
  background: hsl(var(--card) / .7);
  color: hsl(var(--foreground));
}

.doc-upload-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.doc-upload-dock__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 14px;
  border-bottom: 1px solid hsl(var(--border));
}

.doc-upload-dock__row:last-child {
  border-bottom: 0;
}

.doc-upload-dock__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-upload-dock__name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-upload-dock__meta {
  font-size: 11px;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-upload-dock__meta--error {
  color: hsl(var(--danger));
}

.doc-upload-dock__bar {
  height: 4px;
  border-radius: 2px;
  background: hsl(var(--secondary));
  overflow: hidden;
}

.doc-upload-dock__bar-fill {
  height: 100%;
  border-radius: 2px;
  background: hsl(var(--drive-accent));
  transition: width var(--hymo-t, .2s) linear;
}

.doc-upload-dock__pct {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--drive-accent));
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.doc-upload-dock__ok {
  color: hsl(var(--success));
  flex-shrink: 0;
}

.doc-upload-dock__retry {
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--drive-accent));
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.doc-upload-dock__retry:hover {
  background: hsl(var(--drive-accent-soft));
}

@media (width <= 767px) {
  .doc-upload-dock {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}

.doc-type-select__content {
  max-height: min(60vh, var(--radix-select-content-available-height));
}

.doc-type-select__group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
  padding-top: .625rem;
}

[role="group"] + [role="group"] > .doc-type-select__group-label {
  border-top: 1px solid hsl(var(--border));
  margin-top: .25rem;
}

.doc-batch-dialog.doc-batch-dialog {
  max-width: min(920px, 100vw - 2rem);
}

.doc-batch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.doc-batch__all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: hsl(var(--drive-surface-1));
  border: 1px solid hsl(var(--border));
}

.doc-batch__all-label {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--foreground-muted));
}

.doc-batch__all-select {
  height: 32px;
  font-size: 12.5px;
  flex: 200px;
  min-width: 160px;
  background: hsl(var(--background));
}

.doc-batch__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  padding-right: 2px;
}

.doc-batch-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px;
  grid-template-areas: "thumb name remove"
                       "thumb type type"
                       "thumb folder folder";
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.doc-batch-row__thumb {
  grid-area: thumb;
  align-self: start;
}

.doc-batch-row__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.doc-batch-row__input {
  height: 32px;
  font-size: 13px;
  min-width: 0;
}

.doc-batch-row__input[aria-invalid="true"] {
  border-color: hsl(var(--danger));
}

.doc-batch-row__ext {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.doc-batch-row__select {
  height: 32px;
  font-size: 12.5px;
  min-width: 0;
}

.doc-batch-row > .doc-batch-row__select:first-of-type {
  grid-area: type;
}

.doc-batch-row > .doc-batch-row__select:nth-of-type(2) {
  grid-area: folder;
}

.doc-batch-row__remove {
  grid-area: remove;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: hsl(var(--muted-foreground));
  transition: background var(--duration-fast, .15s) var(--ease-out, ease-out), color var(--duration-fast, .15s);
}

.doc-batch-row__remove:hover, .doc-batch-row__remove:focus-visible {
  background: hsl(var(--danger-light));
  color: hsl(var(--danger));
  outline: none;
}

.doc-batch__error {
  font-size: 12.5px;
  color: hsl(var(--danger));
  margin: 0;
}

.doc-batch__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

@media (width >= 768px) {
  .doc-batch-row {
    grid-template-columns: 36px minmax(160px, 1.2fr) minmax(150px, 1fr) minmax(140px, 1fr) 32px;
    grid-template-areas: "thumb name type folder remove";
  }

  .doc-batch-row__thumb {
    align-self: center;
  }
}

.doc-folder-select__content {
  max-height: min(50vh, var(--radix-select-content-available-height));
}

.doc-folder-select__item.doc-folder-select__item--d1 {
  padding-left: 1.75rem;
}

.doc-folder-select__item.doc-folder-select__item--d2 {
  padding-left: 2.5rem;
}

.doc-folder-select__item.doc-folder-select__item--d3 {
  padding-left: 3.25rem;
}

.doc-folder-select__item.doc-folder-select__item--d4 {
  padding-left: 4rem;
}

@media (prefers-reduced-motion: reduce) {
  .doc-upload-dock {
    animation: none;
  }

  .doc-file-card, .doc-folder-tile, .doc-upload-dock__bar-fill, .doc-drive__content {
    transition: none;
  }

  .doc-file-card:hover {
    transform: none;
  }
}


/* [project]/src/styles/features/document-viewer.css [app-client] (css, ) */
.doc-viewer {
  --doc-viewer-bg: #141312;
  --doc-viewer-backdrop: #141312db;
  --doc-viewer-bar: #1c1b1ab8;
  --doc-viewer-line: #ffffff1a;
  --doc-viewer-fg: #f5f4f2;
  --doc-viewer-fg-muted: #f5f4f29e;
  --doc-viewer-sheet-w: 1100px;
  --doc-viewer-sheet-shadow: 0 24px 64px #00000073;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--doc-viewer-backdrop);
  backdrop-filter: blur(10px) saturate(120%);
  color: var(--doc-viewer-fg);
  animation: doc-viewer-in var(--hymo-t, .22s) var(--hymo-ease, ease) both;
}

@keyframes doc-viewer-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-viewer {
    animation: none;
  }
}

.doc-viewer__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px;
  background: var(--doc-viewer-bar);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--doc-viewer-line);
  flex-wrap: wrap;
}

.doc-viewer__thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}

.doc-viewer__thumb img, .doc-viewer__thumb svg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.doc-viewer__identity {
  min-width: 0;
  flex: 160px;
}

.doc-viewer__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--doc-viewer-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-viewer__meta {
  margin: 0;
  font-size: 12px;
  color: var(--doc-viewer-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-viewer__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.doc-viewer__position {
  font-size: 12px;
  color: var(--doc-viewer-fg-muted);
  padding: 0 4px;
  white-space: nowrap;
}

.doc-viewer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  overflow-x: auto;
}

.doc-viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--doc-viewer-fg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hymo-t, .18s) var(--hymo-ease, ease);
}

.doc-viewer__btn:hover:not(:disabled) {
  background: var(--doc-viewer-line);
}

.doc-viewer__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.doc-viewer__btn--icon {
  padding: 0;
  justify-content: center;
}

.doc-viewer__btn--primary {
  background: var(--doc-viewer-fg);
  color: var(--doc-viewer-bg);
}

.doc-viewer__btn--primary:hover:not(.doc-viewer__btn--disabled) {
  background: #fff;
}

.doc-viewer__btn--disabled, a.doc-viewer__btn--disabled {
  opacity: .4;
  pointer-events: none;
}

.doc-viewer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--doc-viewer-line);
  color: var(--doc-viewer-fg-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.doc-viewer__chip--light {
  background: hsl(var(--border));
  color: hsl(var(--foreground));
}

.doc-viewer__body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.doc-viewer__stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px 20px 20px;
}

.doc-viewer__frame, .doc-viewer__stage > .image-preview {
  width: 100%;
  max-width: var(--doc-viewer-sheet-w);
  height: 100%;
  border-radius: 12px;
  box-shadow: var(--doc-viewer-sheet-shadow);
}

.doc-viewer__frame {
  border: none;
  background: #fff;
}

.doc-viewer__stage > .image-preview {
  background: #00000059;
}

@media (width <= 767px) {
  .doc-viewer__stage {
    padding: 0;
  }

  .doc-viewer__frame, .doc-viewer__stage > .image-preview {
    border-radius: 0;
    box-shadow: none;
  }
}

.doc-viewer__stage-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  color: var(--doc-viewer-fg-muted);
}

.doc-viewer__spinner {
  animation: 1s linear infinite doc-viewer-spin;
  color: var(--doc-viewer-fg);
}

@keyframes doc-viewer-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-viewer__spinner {
    animation-duration: 2.4s;
  }
}

.doc-viewer__unsupported-title {
  color: var(--doc-viewer-fg);
  font-weight: 600;
  margin: 0;
}

.doc-viewer__unsupported-hint {
  margin: 0;
  font-size: 13px;
  max-width: 360px;
}

.doc-viewer__details {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-left: 1px solid hsl(var(--border));
  box-shadow: var(--hymo-shadow-pop, none);
}

.doc-viewer__detail-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.doc-viewer__detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.doc-viewer__detail-row dt {
  color: hsl(var(--muted-foreground));
}

.doc-viewer__detail-row dd {
  margin: 0;
  color: hsl(var(--foreground));
  font-weight: 500;
  text-align: right;
}

.doc-viewer__version-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 16px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.doc-viewer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hymo-blue, hsl(var(--primary)));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.doc-viewer__link:hover {
  background: hsl(var(--secondary));
}

.doc-viewer__link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 1px;
}

.doc-viewer__versions-dialog {
  padding: 0;
  max-width: 520px;
}

.doc-viewer__versions-dialog > .version-history-panel {
  box-shadow: none;
  border: 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-viewer__versions-dialog .version-history-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 32px;
}

.doc-viewer__versions-dialog .version-history-panel__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-viewer__versions-dialog .version-history-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.doc-viewer__versions-dialog .version-history-panel__doc-name {
  margin: 0;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-viewer__versions-dialog .version-history-panel__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

.doc-viewer__versions-dialog .version-history-panel__empty {
  margin: 0;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.doc-viewer__versions-dialog .version-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}

.doc-viewer__versions-dialog .version-item.current {
  background: hsl(var(--secondary));
}

.doc-viewer__versions-dialog .version-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--border-hover));
  flex-shrink: 0;
}

.doc-viewer__versions-dialog .version-dot.current {
  background: var(--hymo-blue, hsl(var(--primary)));
}

.doc-viewer__versions-dialog .version-item__info {
  flex: 1;
  min-width: 0;
}

.doc-viewer__versions-dialog .version-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.doc-viewer__versions-dialog .version-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 999px;
  background: hsl(var(--info-light));
  color: hsl(var(--info));
}

.doc-viewer__versions-dialog .version-date {
  margin: 0;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.doc-viewer__versions-dialog .version-item__actions {
  display: flex;
  gap: 4px;
}

.doc-viewer__versions-dialog .version-item__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: hsl(var(--foreground-muted));
  cursor: pointer;
}

.doc-viewer__versions-dialog .version-item__action-btn:hover:not(:disabled) {
  background: hsl(var(--background-muted));
  color: hsl(var(--foreground));
}

.doc-viewer__versions-dialog .version-item__action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.doc-viewer__detail-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 16px;
}

@media (width <= 767px) {
  .doc-viewer__topbar {
    align-items: flex-start;
  }

  .doc-viewer__identity {
    order: 1;
    flex-basis: 100%;
  }

  .doc-viewer__actions {
    order: 2;
    margin-left: 0;
  }

  .doc-viewer__nav {
    order: 3;
  }

  .doc-viewer__btn, .doc-viewer__btn--icon {
    min-height: 40px;
  }

  .doc-viewer__body {
    flex-direction: column;
  }

  .doc-viewer__details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 70vh;
    border-left: none;
    border-top: 1px solid hsl(var(--border));
    border-radius: 16px 16px 0 0;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  .doc-viewer__details {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}


/* [project]/src/styles/features/identity-banner.css [app-client] (css, ) */
.identity-banner-slot {
  padding-bottom: 12px;
  background: var(--hymo-bg);
}

.identity-banner-slot:empty {
  display: none;
}

.identity-banner {
  --identity-accent: var(--hymo-fg);
  --identity-accent-soft: var(--hymo-surface-3);
  --identity-accent-line: var(--hymo-border);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--identity-accent-line);
  border-radius: 12px;
  background: var(--hymo-surface-2);
}

.identity-banner[data-module="biens"] {
  --identity-accent: var(--hymo-blue);
  --identity-accent-soft: var(--hymo-blue-soft);
  --identity-accent-line: var(--hymo-blue-line);
  background: var(--hymo-blue-faint);
}

.identity-banner[data-module="societes"] {
  --identity-accent: var(--hymo-violet);
  --identity-accent-soft: var(--hymo-violet-soft);
  --identity-accent-line: var(--hymo-violet-line);
  background: var(--hymo-violet-faint);
}

.identity-banner__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--identity-accent);
}

.identity-banner__text {
  flex: auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hymo-fg-3);
}

.identity-banner__text strong {
  font-weight: 600;
  color: var(--hymo-fg);
}

.identity-banner__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid #0000;
  background: var(--identity-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.006em;
  white-space: nowrap;
  text-decoration: none;
  transition: filter var(--hymo-t) var(--hymo-ease), transform var(--hymo-t) var(--hymo-ease);
}

.identity-banner__cta svg {
  width: 14px;
  height: 14px;
}

.identity-banner__cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.identity-banner__dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--hymo-fg-3);
  cursor: pointer;
  transition: background var(--hymo-t) var(--hymo-ease), color var(--hymo-t) var(--hymo-ease);
}

.identity-banner__dismiss svg {
  width: 15px;
  height: 15px;
}

.identity-banner__dismiss:hover {
  background: var(--identity-accent-soft);
  color: var(--hymo-fg);
}

.identity-banner[data-tone="warning"] {
  --identity-accent: hsl(var(--warning));
  --identity-accent-soft: hsl(var(--warning-light));
  --identity-accent-line: hsl(var(--warning) / 35%);
  background: hsl(var(--warning-light));
}

@media (width <= 767px) {
  .identity-banner {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px;
  }

  .identity-banner__text {
    flex: 100%;
    order: 2;
  }

  .identity-banner__icon {
    order: 1;
  }

  .identity-banner__dismiss {
    order: 1;
    margin-left: auto;
  }

  .identity-banner__cta {
    order: 3;
    flex: 100%;
    justify-content: center;
  }

  .identity-banner[data-dismissable="false"] .identity-banner__text {
    flex: 1 1 0;
    order: 1;
  }
}


/*# sourceMappingURL=src_styles_035232._.css.map*/