:root{
  --celeby-motion-fast:180ms;
  --celeby-motion:320ms;
  --celeby-motion-slow:420ms;
  --celeby-ease:cubic-bezier(.22,.8,.3,1);
  --celeby-ease-soft:cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth}
body{
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
body.celeby-flow-ready{animation:celeby-page-in var(--celeby-motion-slow) var(--celeby-ease) both}
body.celeby-page-leaving{animation:celeby-page-out var(--celeby-motion-fast) ease both;pointer-events:none}

@keyframes celeby-page-in{
  from{opacity:.01;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}
@keyframes celeby-page-out{
  to{opacity:.01;transform:translate3d(-12px,0,0)}
}
@keyframes celeby-room-forward{
  from{opacity:.01;transform:translate3d(44px,0,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes celeby-room-back{
  from{opacity:.01;transform:translate3d(-44px,0,0) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes celeby-sheet-in{
  from{opacity:.01;transform:translate3d(0,28px,0) scale(.985)}
  to{opacity:1;transform:none}
}

.celeby-reveal{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity var(--celeby-motion-slow) var(--celeby-ease),transform var(--celeby-motion-slow) var(--celeby-ease);
}
.celeby-reveal.is-visible{opacity:1;transform:none}

.tab.active,.os-view.active{
  transform-origin:50% 10%;
  backface-visibility:hidden;
}
.celeby-room-forward .os-view.active,
.tab.workspace-tab-enter{
  animation:celeby-room-forward var(--celeby-motion) var(--celeby-ease) both;
}
.celeby-room-back .os-view.active,
.tab.workspace-tab-enter.is-back{
  animation-name:celeby-room-back;
}
.celeby-room-forward .os-view.active,
.celeby-room-back .os-view.active,
.tab.workspace-tab-enter{
  will-change:transform,opacity;
}

:where(.panel,.metric-grid>article,.content-grid>article,.vendor-card,.budget-summary>article,.plan-stats>article,.item,.calendar-day-panel,.celeby-calendar,.vendor-service-card,.vendor-client-card){
  transition:transform var(--celeby-motion-fast) var(--celeby-ease),box-shadow var(--celeby-motion) ease,border-color var(--celeby-motion-fast) ease;
}
:where(button,a,[role="button"]){touch-action:manipulation}
:where(button,a,[role="button"]):active{transform:scale(.975)}
:where(input,select,textarea):focus{
  outline:none;
  transition:border-color var(--celeby-motion-fast) ease,box-shadow var(--celeby-motion-fast) ease,background var(--celeby-motion-fast) ease;
}

.workspace-top{
  transition:box-shadow var(--celeby-motion) ease,background var(--celeby-motion) ease;
  backdrop-filter:blur(20px) saturate(1.15);
}
.workspace-shell{view-transition-name:celeby-room}
.tabs{
  position:sticky;
  top:93px;
  z-index:8;
  padding:10px 4px 13px;
  margin:-10px -4px 8px;
  background:linear-gradient(180deg,rgba(239,242,252,.96) 72%,rgba(239,242,252,0));
  backdrop-filter:blur(14px);
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{scroll-snap-align:center;transition:background var(--celeby-motion-fast) ease,color var(--celeby-motion-fast) ease,transform var(--celeby-motion-fast) var(--celeby-ease),box-shadow var(--celeby-motion-fast) ease}
.tabs button.active{box-shadow:0 9px 24px rgba(54,22,46,.2)}

/* Desktop workspace navigation becomes a compact, user-opened slide after
   it has left its natural position. This keeps it from covering the page
   while the user is reading or completing a form. */
.workspace-tabs-toggle{display:none}
@media(min-width:851px){
  body.workspace-tabs-detached{
    animation:none!important;
    transform:none!important;
  }
  body.workspace-tabs-detached .workspace-shell>.tabs{
    position:fixed;
    top:94px;
    left:max(24px,calc((100vw - 1180px)/2));
    z-index:19;
    width:min(1180px,calc(100% - 48px));
    padding:14px;
    margin:0;
    border:1px solid rgba(80,53,77,.14);
    border-radius:22px;
    background:rgba(247,248,253,.98);
    box-shadow:0 22px 54px rgba(45,27,48,.18);
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,-24px,0);
    transition:transform 320ms var(--celeby-ease),opacity 220ms ease;
    will-change:transform,opacity;
  }
  body.workspace-tabs-detached.workspace-tabs-drawer-open .workspace-shell>.tabs{
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
  body.workspace-tabs-detached .workspace-tabs-toggle{
    display:inline-flex;
    position:fixed;
    top:102px;
    right:max(24px,calc((100vw - 1180px)/2));
    z-index:20;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:9px 15px;
    border:1px solid rgba(80,53,77,.16);
    border-radius:999px;
    color:#fff;
    background:#3b172f;
    box-shadow:0 12px 30px rgba(45,27,48,.22);
    font:700 14px/1 Inter,Avenir,system-ui,sans-serif;
    cursor:pointer;
    transition:transform 220ms var(--celeby-ease),opacity 180ms ease;
  }
  body.workspace-tabs-detached.workspace-tabs-drawer-open .workspace-tabs-toggle{
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
  }
  body.workspace-tabs-detached .workspace-tabs-placeholder{height:0}
}

@media(prefers-reduced-motion:reduce){
  body.workspace-tabs-detached .workspace-shell>.tabs,
  body.workspace-tabs-detached .workspace-tabs-toggle{transition:none}
}

@media(min-width:851px){
  html,
  body{
    max-width:100%;
    overflow-x:clip;
  }
  #invitation-share-drawer.invitation-share-drawer{
    display:none!important;
    visibility:hidden;
    pointer-events:none;
    contain:layout paint;
  }
  #invitation-share-drawer.invitation-share-drawer.open{
    display:block!important;
    visibility:visible;
    pointer-events:auto;
  }
  .workspace-shell>.tabs{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:clamp(12px,1.7vw,26px);
    width:100%;
    padding-inline:0;
    margin-inline:0;
  }
  .workspace-shell>.tabs button{
    display:flex;
    width:100%;
    min-width:0;
    align-items:center;
    justify-content:center;
    padding-inline:10px;
  }
}

dialog[open]{
  animation:celeby-sheet-in var(--celeby-motion) var(--celeby-ease) both;
}
dialog::backdrop{animation:celeby-backdrop-in var(--celeby-motion-fast) ease both}
@keyframes celeby-backdrop-in{from{opacity:0}to{opacity:1}}

.celeby-bottom-nav{
  display:none;
  position:fixed;
  z-index:70;
  left:12px;
  right:12px;
  bottom:max(10px,env(safe-area-inset-bottom));
  min-height:66px;
  padding:7px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:24px;
  background:rgba(247,248,253,.88);
  box-shadow:0 18px 50px rgba(39,20,42,.2);
  backdrop-filter:blur(24px) saturate(1.4);
}
.celeby-bottom-nav a,.celeby-bottom-nav button{
  min-width:0;
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 3px;
  border:0;
  border-radius:17px;
  background:transparent;
  color:#675d68;
  text-decoration:none;
  font:700 10px/1.1 Inter,Avenir,system-ui,sans-serif;
  cursor:pointer;
  transition:background var(--celeby-motion-fast) ease,color var(--celeby-motion-fast) ease,transform var(--celeby-motion-fast) var(--celeby-ease);
}
.celeby-bottom-nav a.is-active,.celeby-bottom-nav button.is-active{
  background:#e2e7f6;
  color:#3d142d;
}
.celeby-bottom-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.celeby-bottom-nav .celeby-nav-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

@media(hover:hover) and (pointer:fine){
  :where(.panel,.metric-grid>article,.content-grid>article,.vendor-card,.budget-summary>article,.plan-stats>article,.item,.vendor-service-card,.vendor-client-card):hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(45,27,51,.11);
  }
}

@media(max-width:850px){
  html,body{max-width:100%;overflow-x:hidden}
  html{scroll-behavior:auto}
  body{padding-bottom:94px}
  body.celeby-flow-ready{animation:none}
  .celeby-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .couple-dashboard-body main>section,
  .os-view.active>*{
    content-visibility:auto;
    contain-intrinsic-size:auto 320px;
  }
  .workspace-top,
  .tabs,
  .celeby-bottom-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .workspace-top{
    background:#f5f7fd!important;
    transform:translateZ(0);
  }
  .tabs{
    background:linear-gradient(180deg,#eff2fc 76%,rgba(239,242,252,0));
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:none;
  }
  .celeby-bottom-nav{
    display:flex;
    background:#f7f8fd;
    box-shadow:0 12px 30px rgba(39,20,42,.16);
    contain:layout paint;
    transform:translateZ(0);
    will-change:transform;
  }
  .workspace-shell{width:min(100% - 20px,1180px);margin-top:14px}
  .workspace-top{padding:10px 14px;min-height:76px}
  .workspace-top img{width:76px;height:48px;border-radius:14px}
  .workspace-top h1{font-size:clamp(24px,7vw,34px)}
  .tabs{top:76px;margin-inline:-2px}
  .tab{border-radius:28px;padding:20px 16px;box-shadow:0 15px 44px rgba(40,29,52,.08)}
  .section-head h2{font-size:clamp(27px,8vw,36px)}
  .form-grid,.form-grid.compact{gap:17px}
  input,select,textarea{min-height:50px;border-radius:14px}
  textarea{min-height:110px}
  .primary,.geo button{min-height:50px;border-radius:15px}
  .os-main{padding-bottom:104px!important}
  dialog:not(#invitation-share-drawer){
    width:100%!important;
    max-width:none!important;
    max-height:88dvh!important;
    margin:auto 0 0!important;
    border-radius:28px 28px 0 0!important;
    border-bottom:0!important;
  }
  #invitation-share-drawer.invitation-share-drawer{
    display:none!important;
    position:fixed!important;
    z-index:89!important;
    inset:50% auto auto 50%!important;
    box-sizing:border-box!important;
    width:calc(100% - 24px)!important;
    max-width:520px!important;
    height:auto!important;
    max-height:calc(100dvh - 24px)!important;
    margin:0!important;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-radius:28px!important;
    box-shadow:0 24px 80px rgba(48,23,40,.3)!important;
    transform:translate3d(-50%,-50%,0)!important;
    transition:none!important;
    overscroll-behavior:contain;
  }
  #invitation-share-drawer.invitation-share-drawer.open{
    display:block!important;
    transform:translate3d(-50%,-50%,0)!important;
  }
  #invitation-share-drawer .share-drawer-head{
    position:sticky;
    z-index:2;
    top:-18px;
    margin:-18px -18px 0;
    padding:18px;
    background:#f5f7fd;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  #invitation-share-drawer .share-invitation-preview{
    margin-block:12px 16px;
  }
  #invitation-share-drawer .share-invitation-preview img{
    height:150px;
  }
  #invitation-share-drawer .share-invitation-preview div{
    padding:14px 16px;
  }
  #invitation-share-drawer .share-channel-grid{
    padding-bottom:2px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .celeby-reveal{opacity:1;transform:none}
}